/* =========================================================
   LOVELY SHOP FOOTER
   Version: 2.0
   ASP Classic / SQL Server
   IcoMoon
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

.lux-footer,
.lux-footer *,
.lux-footer *::before,
.lux-footer *::after {
    box-sizing: border-box;
}


/* =========================================================
   VARIABLES
   ========================================================= */

.lux-footer {
    --footer-primary: #8F87C4;
    --footer-secondary: #5F56A8;
    --footer-text: #FFFFFF;
    --footer-accent: #FFFFFF;

    --footer-muted:
        rgba(255, 255, 255, 0.72);

    --footer-card:
        rgba(255, 255, 255, 0.085);

    --footer-card-hover:
        rgba(255, 255, 255, 0.14);

    --footer-border:
        rgba(255, 255, 255, 0.20);

    --footer-radius: 20px;

    width: 100%;
    position: relative;

    padding: 55px 20px 22px;

    direction: rtl;

    color: var(--footer-text);

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(255,255,255,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(255,255,255,.07),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--footer-primary),
            var(--footer-secondary)
        );

    overflow: hidden;
}


/* =========================================================
   DECORATION
   ========================================================= */

.lux-footer::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    top: -230px;
    right: -160px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.045);

    pointer-events: none;
}


.lux-footer::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    bottom: -230px;
    left: -150px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.035);

    pointer-events: none;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.lux-footer-top-bar {
    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--footer-primary, #8F87C4),
            var(--footer-accent, #FFFFFF),
            var(--footer-secondary, #5F56A8)
        );
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.lux-footer-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1300px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    align-items: stretch;
}


/* =========================================================
   BOX
   ========================================================= */

.lux-footer-box {
    min-width: 0;
    width: 100%;

    padding: 22px;

    display: flex;
    flex-direction: column;

    border:
        1px solid var(--footer-border);

    border-radius:
        var(--footer-radius);

    background:
        var(--footer-card);

    box-shadow:
        0 8px 30px rgba(0,0,0,.14);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.lux-footer-box:hover {
    transform:
        translateY(-4px);

    background:
        var(--footer-card-hover);

    box-shadow:
        0 13px 35px rgba(0,0,0,.18);
}


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

.lux-footer-heading {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
}


.lux-footer-heading-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 12px;

    background:
        rgba(255,255,255,.12);

    color:
        var(--footer-accent);

    font-size: 17px;
}


.lux-footer-heading h4 {
    margin: 0;

    color:
        var(--footer-text);

    font-size: 16px;

    line-height: 1.5;

    font-weight: 700;
}


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

.lux-footer-description {
    margin: 0 0 15px;

    color:
        var(--footer-muted);

    font-size: 13px;

    line-height: 2;

    text-align: right;
}


/* =========================================================
   DOMAIN
   ========================================================= */

.lux-footer-domain {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    padding-top: 10px;

    color:
        var(--footer-muted);

    font-size: 13px;

    direction: rtl;
}


.lux-footer-domain i {
    color:
        var(--footer-accent);

    font-size: 15px;
}


/* =========================================================
   ENAMAD
   ========================================================= */

.lux-footer-enamad {
    display: flex;

    justify-content: flex-start;

    margin-top: 18px;
}


.lux-footer-enamad a {
    display: inline-flex;

    padding: 8px;

    border-radius: 12px;

    background: #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.lux-footer-enamad a:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);
}


.lux-footer-enamad img {
    display: block;

    width: auto;

    max-width: 85px;

    max-height: 95px;

    height: auto;
}


/* =========================================================
   MENU
   ========================================================= */

.lux-footer-menu {
    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.lux-footer-menu li {
    width: 100%;

    margin: 0;
    padding: 0;
}


.lux-footer-menu a {
    width: 100%;
    min-height: 38px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 9px;

    border-radius: 10px;

    color:
        var(--footer-muted);

    text-decoration: none;

    font-size: 13px;

    transition:
        background .25s ease,
        color .25s ease,
        padding-right .25s ease;
}


.lux-footer-menu a i {
    color:
        var(--footer-accent);

    font-size: 11px;

    opacity: .85;
}


.lux-footer-menu a:hover {
    color:
        var(--footer-text);

    background:
        rgba(255,255,255,.10);

    padding-right: 14px;
}


.lux-footer-empty {
    color:
        var(--footer-muted);

    font-size: 13px;
}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.lux-footer-contact-row {
    width: 100%;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--footer-muted);

    font-size: 13px;

    line-height: 1.9;

    text-decoration: none;

    word-break: break-word;
}


.lux-footer-contact-row i {
    width: 20px;

    flex: 0 0 20px;

    padding-top: 3px;

    color:
        var(--footer-accent);

    text-align: center;
}


a.lux-footer-contact-row:hover {
    color:
        var(--footer-text);
}


/* =========================================================
   MAP
   ========================================================= */

.lux-footer-map-link {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    padding: 9px 13px;

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

    border-radius: 10px;

    color:
        var(--footer-text);

    background:
        rgba(255,255,255,.10);

    text-decoration: none;

    font-size: 12px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.lux-footer-map-link i {
    color:
        var(--footer-accent);
}


.lux-footer-map-link:hover {
    color:
        var(--footer-primary);

    background:
        #fff;

    transform:
        translateY(-2px);
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

.lux-footer-contact-form {
    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.lux-footer-input {
    position: relative;

    width: 100%;

    min-width: 0;
}


.lux-footer-input > i {
    position: absolute;

    top: 50%;
    right: 14px;

    width: 18px;

    transform:
        translateY(-50%);

    z-index: 2;

    color:
        rgba(255,255,255,.65);

    text-align: center;

    font-size: 15px;

    pointer-events: none;

    transition:
        color .25s ease;
}


.lux-footer-input input,
.lux-footer-input textarea {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding:
        11px 42px 11px 13px;

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

    border-radius: 12px;

    outline: none;

    background:
        rgba(255,255,255,.07);

    color:
        var(--footer-text);

    font-family: inherit;

    font-size: 13px;

    line-height: 1.6;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.lux-footer-input input {
    height: 43px;
}


.lux-footer-input textarea {
    height: 92px;
    min-height: 92px;

    resize: vertical;
}


.lux-footer-input input::placeholder,
.lux-footer-input textarea::placeholder {
    color:
        rgba(255,255,255,.58);

    opacity: 1;
}


.lux-footer-input input:focus,
.lux-footer-input textarea:focus {
    background:
        rgba(255,255,255,.12);

    border-color:
        rgba(255,255,255,.48);

    box-shadow:
        0 0 0 3px rgba(255,255,255,.05);
}


.lux-footer-input:focus-within > i {
    color:
        var(--footer-accent);
}


/* =========================================================
   SUBMIT
   ========================================================= */

.lux-footer-submit {
    width: 100%;
    height: 44px;

    margin: 2px 0 0;

    padding: 0 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 12px;

    outline: none;

    background:
        var(--footer-accent);

    color:
        var(--footer-primary);

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.lux-footer-submit i {
    font-size: 15px;
}


.lux-footer-submit:hover {
    background:
        #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);
}


.lux-footer-submit:active {
    transform:
        translateY(0);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.lux-footer-bottom {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1300px;

    margin: 35px auto 0;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,.16);

    text-align: center;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.lux-footer-socials {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 14px;
}


.lux-footer-social {
    width: 40px;
    height: 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.12);

    color:
        var(--footer-text);

    text-decoration: none;

    font-size: 17px;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}


.lux-footer-social:hover {
    transform:
        translateY(-3px);

    background:
        #fff;

    color:
        var(--footer-primary);
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.lux-footer-copyright {
    color:
        var(--footer-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   THEME: LUXURY GLASS
   ========================================================= */

.lux-footer.luxury-glass {
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(255,255,255,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(255,255,255,.07),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--footer-primary),
            var(--footer-secondary)
        );
}


/* =========================================================
   THEME: MINIMAL DARK
   ========================================================= */

.lux-footer.minimal-dark {
    background:
        linear-gradient(
            145deg,
            var(--footer-primary),
            var(--footer-secondary)
        );
}


.lux-footer.minimal-dark .lux-footer-box {
    background:
        rgba(255,255,255,.035);

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

    border-radius:
        14px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.22);

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;
}


.lux-footer.minimal-dark .lux-footer-box:hover {
    background:
        rgba(255,255,255,.06);

    transform:
        translateY(-2px);
}


.lux-footer.minimal-dark .lux-footer-heading-icon {
    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.10);
}


.lux-footer.minimal-dark .lux-footer-social {
    border-radius:
        10px;

    background:
        rgba(255,255,255,.06);
}


/* =========================================================
   THEME: PREMIUM GOLD
   ========================================================= */

.lux-footer.premium-gold {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(212,175,55,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(212,175,55,.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--footer-primary),
            var(--footer-secondary)
        );
}


.lux-footer.premium-gold .lux-footer-box {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        );

    border-color:
        rgba(212,175,55,.25);

    box-shadow:
        0 10px 35px rgba(0,0,0,.28);
}


.lux-footer.premium-gold .lux-footer-heading-icon {
    background:
        rgba(212,175,55,.10);

    border-color:
        rgba(212,175,55,.22);
}


.lux-footer.premium-gold .lux-footer-heading-icon,
.lux-footer.premium-gold .lux-footer-box i,
.lux-footer.premium-gold .lux-footer-menu a i {
    color:
        var(--footer-accent);
}


.lux-footer.premium-gold .lux-footer-submit {
    background:
        var(--footer-accent);

    color:
        #17120A;
}


.lux-footer.premium-gold .lux-footer-submit:hover {
    background:
        #F0D477;
}


.lux-footer.premium-gold .lux-footer-social {
    border-color:
        rgba(212,175,55,.20);
}


/* =========================================================
   THEME: MODERN GRADIENT
   ========================================================= */

.lux-footer.modern-gradient {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255,255,255,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            var(--footer-primary),
            var(--footer-secondary)
        );
}


.lux-footer.modern-gradient .lux-footer-box {
    background:
        rgba(255,255,255,.11);

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

    border-radius:
        24px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.12);
}


.lux-footer.modern-gradient .lux-footer-box:hover {
    background:
        rgba(255,255,255,.17);

    transform:
        translateY(-6px);
}


.lux-footer.modern-gradient .lux-footer-heading-icon {
    border-radius:
        50%;

    background:
        rgba(255,255,255,.14);
}


.lux-footer.modern-gradient .lux-footer-submit {
    border-radius:
        50px;
}


.lux-footer.modern-gradient .lux-footer-social {
    border-radius:
        14px;
}


/* =========================================================
   GOLD THEME DEFAULT VISUAL
   ========================================================= */

.lux-footer.premium-gold .lux-footer-heading-icon {
    color:
        var(--footer-accent);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .lux-footer-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}


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

@media (max-width: 600px) {

    .lux-footer {
        padding:
            40px 14px 18px;
    }


    .lux-footer-container {
        grid-template-columns:
            1fr;

        gap: 14px;
    }


    .lux-footer-box {
        padding:
            19px;
    }


    .lux-footer-heading h4 {
        font-size:
            15px;
    }


    .lux-footer-bottom {
        margin-top:
            25px;
    }

}


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

@media (max-width: 380px) {

    .lux-footer {
        padding-left:
            10px;

        padding-right:
            10px;
    }


    .lux-footer-box {
        padding:
            16px;
    }


    .lux-footer-social {
        width:
            37px;

        height:
            37px;
    }

}