@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* =========================================================
   GLOBAL RESET
   IMPORTANT: EVERYTHING OUTSIDE THE GLASS CARD IS TRANSPARENT
========================================================= */

html,
body{
    margin:0;
    padding:0;

    width:100%;
    min-width:0;
    max-width:100%;

    background:transparent !important;

    overflow-x:hidden;
}

html{
    box-sizing:border-box;
}

*,
*::before,
*::after{
    box-sizing:inherit;
}


/* =========================================================
   MAIN FOOTER WRAPPER
   THIS AREA IS TRANSPARENT
========================================================= */

#eiors-footer{

    --radius:38px;

    position:relative;

    width:100%;
    min-width:0;
    max-width:100%;

    margin:0 auto;

    /*
       DESKTOP SPACING

       TOP    = 70px
       RIGHT  = 60px
       BOTTOM = 100px
       LEFT   = 60px

       ALL OF THIS SPACE IS TRANSPARENT
    */

    padding:
        70px
        60px
        100px;

    background:transparent !important;

    color:#ffffff;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    overflow:hidden;
}


/* =========================================================
   FOOTER CHILD RESET
========================================================= */

#eiors-footer *,
#eiors-footer *::before,
#eiors-footer *::after{
    box-sizing:border-box;
}

#eiors-footer a{
    text-decoration:none;
}


/* =========================================================
   MAIN GLASS FOOTER CARD
========================================================= */

#eiors-footer .ef-shell{

    position:relative;

    isolation:isolate;

    width:100%;
    max-width:1650px;
    min-width:0;

    margin:
        0
        auto;

    overflow:hidden;

    border-radius:
        var(--radius);

    background:#07090e;

    box-shadow:

        0 30px 70px
        rgba(0,0,0,.22),

        0 0 0 1px
        rgba(255,255,255,.65);
}


/* =========================================================
   MOVING GRADIENT BACKGROUND
========================================================= */

#eiors-footer .ef-bg{

    position:absolute;

    inset:-60%;

    z-index:-3;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 75% 18%,
            #ff6828,
            transparent 30%
        ),

        radial-gradient(
            circle at 75% 60%,
            #ffd7a6,
            transparent 32%
        ),

        radial-gradient(
            circle at 70% 82%,
            #008dff,
            transparent 38%
        ),

        radial-gradient(
            circle at 15% 70%,
            #000000,
            transparent 55%
        ),

        linear-gradient(
            135deg,
            #000000,
            #14151b,
            #ff541a,
            #0075ff
        );

    filter:
        blur(40px)
        saturate(1.5);

    animation:
        efBackgroundRotate
        8s
        linear
        infinite;
}


@keyframes efBackgroundRotate{

    from{
        transform:
            rotate(0deg)
            scale(1.1);
    }

    to{
        transform:
            rotate(360deg)
            scale(1.1);
    }

}


/* =========================================================
   GLASS LAYER
========================================================= */

#eiors-footer .ef-glass{

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        linear-gradient(
            140deg,
            rgba(255,255,255,.23),
            rgba(255,255,255,.06) 50%,
            rgba(255,255,255,.16)
        );

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

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


/* =========================================================
   DARK GLASS OVERLAY
========================================================= */

#eiors-footer .ef-dark{

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:

        linear-gradient(
            120deg,
            rgba(0,0,0,.32),
            rgba(0,0,0,.15),
            rgba(0,0,0,.30)
        );
}


/* =========================================================
   OUTER GLASS BORDER
========================================================= */

#eiors-footer .ef-shell::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:8;

    pointer-events:none;

    border:
        2px solid
        rgba(255,255,255,.72);

    border-radius:inherit;

    box-shadow:

        inset 0 3px 4px
        rgba(255,255,255,.80),

        inset 0 -5px 8px
        rgba(255,255,255,.42),

        inset 4px 0 8px
        rgba(255,255,255,.24),

        inset -4px 0 8px
        rgba(255,255,255,.24),

        0 0 16px
        rgba(255,255,255,.20);
}


/* =========================================================
   INNER GLASS BORDER
========================================================= */

#eiors-footer .ef-shell::after{

    content:"";

    position:absolute;

    inset:9px;

    z-index:7;

    pointer-events:none;

    border-radius:
        calc(var(--radius) - 9px);

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


/* =========================================================
   TOP GLOSS
========================================================= */

#eiors-footer .ef-top-gloss{

    position:absolute;

    top:0;
    left:8%;

    width:75%;
    height:90px;

    z-index:2;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at top,
            rgba(255,255,255,.50),
            transparent 72%
        );

    filter:
        blur(12px);
}


/* =========================================================
   LEFT GLOSS
========================================================= */

#eiors-footer .ef-left-gloss{

    position:absolute;

    left:0;
    top:10%;

    width:35px;
    height:78%;

    z-index:2;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,.36),
            transparent
        );

    filter:
        blur(7px);
}


/* =========================================================
   INNER CONTENT
========================================================= */

#eiors-footer .ef-content{

    position:relative;

    z-index:5;

    width:100%;
    min-width:0;

    padding:

        55px
        45px
        28px;
}


/* =========================================================
   EMAIL AREA
========================================================= */

#eiors-footer .ef-email-area{

    width:100%;

    min-height:285px;

    display:flex;

    flex-direction:column;

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

    margin-bottom:55px;
}


/* =========================================================
   TEXT ABOVE EMAIL
========================================================= */

#eiors-footer .ef-small-title{

    margin-bottom:3px;

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

    font-size:11px;

    font-weight:500;

    letter-spacing:.22em;

    text-align:center;
}


/* =========================================================
   EMAIL LINK
========================================================= */

#eiors-footer .ef-email-link{

    display:block;

    width:min(
        100%,
        980px
    );

    max-width:100%;

    margin:
        0
        auto;

    cursor:pointer;
}


/* =========================================================
   EMAIL SVG
========================================================= */

#eiors-footer .ef-email-svg{

    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    overflow:visible;
}


/* =========================================================
   LOWERCASE HANDWRITTEN EMAIL
========================================================= */

#eiors-footer .ef-script-stroke{

    fill:none;

    stroke:#ffffff;

    stroke-width:5.8;

    stroke-linecap:round;

    stroke-linejoin:round;

    vector-effect:
        non-scaling-stroke;

    filter:
        url(#eiorsSoftInk);
}


#eiors-footer .ef-animated-stroke{

    will-change:
        stroke-dashoffset;
}


/* =========================================================
   VIEW BUTTON
========================================================= */

#eiors-footer .ef-email-view{

    margin-top:-6px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:
        8px
        5px;

    border:0;

    outline:none;

    background:transparent;

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

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:11px;

    font-weight:500;

    letter-spacing:.18em;

    cursor:pointer;

    transition:
        color .25s ease;
}


#eiors-footer .ef-email-view span{

    display:inline-block;

    font-size:15px;

    transition:
        transform .25s ease;
}


#eiors-footer .ef-email-view:hover{

    color:#ffffff;
}


#eiors-footer
.ef-email-view:hover
span{

    transform:
        translate(3px,-3px);
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

#eiors-footer .ef-columns{

    display:grid;

    grid-template-columns:

        repeat(
            6,
            minmax(0,1fr)
        );

    gap:28px;

    width:100%;
    min-width:0;

    min-height:335px;
}


/* =========================================================
   SINGLE COLUMN
========================================================= */

#eiors-footer .ef-column{

    min-width:0;
}


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

#eiors-footer .ef-heading{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    margin:
        0
        0
        27px;

    padding:0;

    border:0;

    background:none;

    color:#ffffff;

    font-family:inherit;

    font-size:

        clamp(
            17px,
            1.4vw,
            23px
        );

    font-weight:600;

    text-align:left;
}


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

#eiors-footer .ef-arrow{

    display:flex;

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

    width:29px;
    height:29px;

    min-width:29px;

    flex:
        0 0 29px;

    border-radius:50%;

    border:

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

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

    transition:
        .3s ease;
}


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

#eiors-footer .ef-links{

    display:flex;

    flex-direction:column;

    gap:12px;

    min-width:0;
}


#eiors-footer .ef-links a{

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

    font-size:

        clamp(
            13px,
            1vw,
            17px
        );

    line-height:1.4;

    transition:

        transform .2s ease,
        color .2s ease;
}


#eiors-footer .ef-links a:hover{

    color:#ffffff;

    transform:
        translateX(5px);
}


/* =========================================================
   DESKTOP COLUMN BEHAVIOR
========================================================= */

@media(min-width:651px){

    #eiors-footer .ef-panel,
    #eiors-footer .ef-panel-inner{

        display:contents;
    }


    #eiors-footer
    .ef-column:hover
    .ef-arrow{

        transform:
            translateX(5px);

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

}


/* =========================================================
   BOTTOM GLASS BAR
========================================================= */

#eiors-footer .ef-bottom{

    position:relative;

    display:grid;

    grid-template-columns:

        repeat(
            6,
            minmax(0,1fr)
        );

    gap:20px;

    width:100%;
    min-width:0;

    overflow:hidden;

    padding:

        28px
        29px;

    border-radius:25px;

    border:

        1px solid
        rgba(255,255,255,.65);

    background:

        linear-gradient(
            135deg,
            rgba(215,220,230,.35),
            rgba(110,120,140,.20) 35%,
            rgba(50,55,70,.30) 70%,
            rgba(200,210,225,.30)
        );

    -webkit-backdrop-filter:

        blur(22px)
        saturate(140%);

    backdrop-filter:

        blur(22px)
        saturate(140%);

    box-shadow:

        inset 0 3px 3px
        rgba(255,255,255,.52),

        inset 0 -3px 5px
        rgba(255,255,255,.28);
}


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

#eiors-footer .ef-bottom-item{

    display:flex;

    flex-direction:column;

    gap:7px;

    min-width:0;
}


#eiors-footer .ef-bottom strong{

    font-size:14px;
}


#eiors-footer .ef-bottom a,
#eiors-footer .ef-bottom span{

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

    font-size:13px;

    line-height:1.4;
}


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

@media(
    max-width:1100px
)
and
(
    min-width:651px
){

    #eiors-footer{

        /*
           TABLET

           TOP    = 55px
           RIGHT  = 32px
           BOTTOM = 100px
           LEFT   = 32px

           TRANSPARENT SPACE
        */

        padding:

            55px
            32px
            100px;
    }


    #eiors-footer .ef-content{

        padding:

            45px
            32px
            26px;
    }


    #eiors-footer .ef-email-link{

        width:min(
            100%,
            760px
        );
    }


    #eiors-footer .ef-columns{

        grid-template-columns:

            repeat(
                3,
                minmax(0,1fr)
            );

        min-height:0;

        gap:

            40px
            28px;

        margin-bottom:60px;
    }


    #eiors-footer .ef-bottom{

        grid-template-columns:

            repeat(
                3,
                minmax(0,1fr)
            );
    }

}


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

@media(max-width:650px){


    #eiors-footer{

        --radius:28px;

        /*
           MOBILE

           TOP    = 40px
           RIGHT  = 14px
           BOTTOM = 100px
           LEFT   = 14px

           TRANSPARENT SPACE
        */

        padding:

            40px
            14px
            100px;

        background:
            transparent !important;
    }


    /* =====================================================
       MOBILE GLASS CARD
    ===================================================== */

    #eiors-footer .ef-shell{

        width:100%;

        max-width:100%;

        margin:
            0
            auto;
    }


    /* =====================================================
       MOBILE INNER CONTENT
    ===================================================== */

    #eiors-footer .ef-content{

        width:100%;

        padding:

            30px
            18px
            18px;
    }


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

    #eiors-footer .ef-email-area{

        width:100%;

        min-height:160px;

        margin-bottom:35px;
    }


    #eiors-footer .ef-small-title{

        margin-bottom:-3px;

        font-size:9px;

        letter-spacing:.12em;
    }


    #eiors-footer .ef-email-link{

        width:100%;

        max-width:100%;
    }


    #eiors-footer .ef-email-svg{

        width:100%;

        max-width:100%;
    }


    /* THINNER EMAIL ON MOBILE */

    #eiors-footer .ef-script-stroke{

        stroke-width:3.6;
    }


    #eiors-footer .ef-email-view{

        margin-top:-10px;

        font-size:9px;
    }


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

    #eiors-footer .ef-columns{

        display:flex;

        flex-direction:column;

        width:100%;

        gap:0;

        min-height:0;

        margin-bottom:35px;
    }


    #eiors-footer .ef-column{

        width:100%;

        border-bottom:

            1px solid
            rgba(255,255,255,.28);
    }


    #eiors-footer
    .ef-column:first-child{

        border-top:

            1px solid
            rgba(255,255,255,.28);
    }


    #eiors-footer .ef-heading{

        justify-content:
            space-between;

        width:100%;

        min-height:65px;

        margin:0;

        padding:

            17px
            3px;

        font-size:19px;

        cursor:pointer;
    }


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

    #eiors-footer .ef-panel{

        display:grid;

        grid-template-rows:
            0fr;

        width:100%;

        opacity:0;

        transition:

            grid-template-rows
            .35s ease,

            opacity
            .25s ease;
    }


    #eiors-footer
    .ef-column.open
    .ef-panel{

        grid-template-rows:
            1fr;

        opacity:1;
    }


    #eiors-footer .ef-panel-inner{

        min-height:0;

        overflow:hidden;
    }


    #eiors-footer .ef-links{

        padding:

            4px
            5px
            24px;
    }


    #eiors-footer
    .ef-column.open
    .ef-arrow{

        transform:
            rotate(90deg);
    }


    /* =====================================================
       MOBILE BOTTOM BAR
    ===================================================== */

    #eiors-footer .ef-bottom{

        grid-template-columns:

            repeat(
                2,
                minmax(0,1fr)
            );

        width:100%;

        gap:

            25px
            14px;

        padding:

            23px
            17px;

        border-radius:18px;
    }


    #eiors-footer .ef-bottom strong{

        font-size:12px;
    }


    #eiors-footer .ef-bottom a,
    #eiors-footer .ef-bottom span{

        font-size:11px;
    }

}