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

.ss-footer{

    position:relative;

    margin-top:60px;

    padding:42px 0 20px;

}


/*=========================================================
    FOOTER CONTAINER
=========================================================*/

.ss-footer .ss-container{

    position:relative;

}


/*=========================================================
    FOOTER TOP
=========================================================*/

.ss-footer-top{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:48px;

    padding:28px;

    border:1px solid rgba(112,168,255,.08);

    border-radius:22px;

    background:

        linear-gradient(

            180deg,

            rgba(31,42,67,.90),

            rgba(18,25,40,.96)

        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.04),

        0 18px 36px rgba(0,0,0,.18);

}


/*=========================================================
    BRAND
=========================================================*/

.ss-footer-brand{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/*=========================================================
    BRAND LINK
=========================================================*/

.ss-footer-brand-link{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

}


/*=========================================================
    LOGO
=========================================================*/

.ss-footer-logo{

    flex:0 0 auto;

}

.ss-footer-logo img{

    display:block;

    width:auto;

    height:52px;

}


/*=========================================================
    BRAND CONTENT
=========================================================*/

.ss-footer-brand-content{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.ss-footer-brand-content h3{

    margin:0;

    font-size:14px;

    font-weight:500;

    color:#FFFFFF;

}

.ss-footer-brand-content p{

    margin:0;

    font-size:9px;

    font-weight:400;

    letter-spacing:.6px;

    text-transform:uppercase;

    color:#8EA3BD;

}


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

.ss-footer-description{

    max-width:320px;

    font-size:10px;

    line-height:1.8;

    color:#94A8C2;

}
/*=========================================================
    FOOTER LINKS
=========================================================*/

.ss-footer-links{

    display:grid;

    grid-template-columns:repeat(3,minmax(160px,1fr));

    gap:32px;

    align-content:start;

}


/*=========================================================
    FOOTER COLUMN
=========================================================*/

.ss-footer-column{

    display:flex;

    flex-direction:column;

    gap:14px;

    min-width:0;

}


/*=========================================================
    COLUMN TITLE
=========================================================*/

.ss-footer-column h4{

    position:relative;

    margin:0;

    padding-bottom:10px;

    font-size:11px;

    font-weight:500;

    letter-spacing:.3px;

    color:#FFFFFF;

}

.ss-footer-column h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:36px;

    height:2px;

    border-radius:10px;

    background:

        linear-gradient(

            90deg,

            #67B3FF,

            transparent

        );

}


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

.ss-footer-menu{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin:0;

    padding:0;

    list-style:none;

}


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

.ss-footer-menu li{

    margin:0;

    padding:0;

}


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

.ss-footer-menu a{

    display:flex;

    align-items:center;

    gap:8px;

    min-height:34px;

    padding:0 10px;

    border-radius:10px;

    text-decoration:none;

    font-size:10px;

    font-weight:400;

    line-height:1.4;

    color:#9CB1CB;

    transition:.22s;

}


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

.ss-footer-menu a::before{

    content:"";

    width:5px;

    height:5px;

    border-radius:50%;

    background:#5FAEFF;

    opacity:.45;

    transition:.22s;

}


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

.ss-footer-menu a:hover{

    color:#FFFFFF;

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

    transform:translateX(4px);

}

.ss-footer-menu a:hover::before{

    opacity:1;

    transform:scale(1.25);

}


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

.ss-footer-menu .current-menu-item>a{

    color:#FFFFFF;

    background:rgba(96,168,255,.08);

}

.ss-footer-menu .current-menu-item>a::before{

    opacity:1;

}
/*=========================================================
    FOOTER BOTTOM
=========================================================*/

.ss-footer-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    margin-top:18px;

    padding:18px 8px 0;

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

}


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

.ss-footer-copyright{

    font-size:10px;

    font-weight:400;

    line-height:1.6;

    color:#7F93AD;

}


/*=========================================================
    META
=========================================================*/

.ss-footer-meta{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:10px;

    font-size:10px;

    font-weight:400;

    line-height:1.6;

    color:#8EA3BD;

}


/*=========================================================
    META LINK
=========================================================*/

.ss-footer-meta a{

    color:#9EB8D8;

    text-decoration:none;

    transition:.2s;

}

.ss-footer-meta a:hover{

    color:#FFFFFF;

}


/*=========================================================
    DOT
=========================================================*/

.ss-footer-dot{

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

    user-select:none;

}


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

.ss-footer-copyright strong,

.ss-footer-meta strong{

    font-weight:500;

    color:#FFFFFF;

}
/*=========================================================
    LARGE TABLET
=========================================================*/

@media (max-width:1100px){

.ss-footer-top{

    grid-template-columns:280px 1fr;

    gap:36px;

    padding:24px;

}

.ss-footer-links{

    grid-template-columns:repeat(3,minmax(140px,1fr));

    gap:24px;

}

}


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

@media (max-width:991px){

.ss-footer{

    margin-top:50px;

}

.ss-footer-top{

    grid-template-columns:1fr;

    gap:30px;

}

.ss-footer-description{

    max-width:100%;

}

.ss-footer-links{

    grid-template-columns:repeat(2,minmax(180px,1fr));

}

.ss-footer-bottom{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}

.ss-footer-meta{

    justify-content:flex-start;

}

}


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

@media (max-width:767px){

.ss-footer{

    margin-top:40px;

    padding:32px 0 18px;

}

.ss-footer-top{

    padding:20px;

    border-radius:18px;

    gap:24px;

}

.ss-footer-links{

    grid-template-columns:1fr;

    gap:18px;

}

.ss-footer-column{

    gap:10px;

}

.ss-footer-bottom{

    margin-top:16px;

    padding-top:16px;

}

}


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

@media (max-width:480px){

.ss-footer-top{

    padding:18px;

}

.ss-footer-brand-link{

    gap:10px;

}

.ss-footer-logo img{

    height:42px;

}

.ss-footer-brand-content h3{

    font-size:12px;

}

.ss-footer-brand-content p{

    font-size:8px;

}

.ss-footer-description{

    font-size:9px;

}

.ss-footer-copyright{

    font-size:9px;

}

.ss-footer-meta{

    gap:8px;

    font-size:9px;

}

}
/*=========================================================
    KEYBOARD ACCESSIBILITY
=========================================================*/

.ss-footer-menu a:focus-visible,

.ss-footer-brand-link:focus-visible,

.ss-footer-meta a:focus-visible{

    outline:2px solid rgba(103,179,255,.55);

    outline-offset:3px;

    border-radius:10px;

}


/*=========================================================
    TEXT SELECTION
=========================================================*/

.ss-footer::selection,

.ss-footer *::selection{

    background:rgba(103,179,255,.28);

    color:#FFFFFF;

}


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

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

.ss-footer-menu a,

.ss-footer-brand-link,

.ss-footer-meta a{

    transition:none;

}

}


/*=========================================================
    PRINT
=========================================================*/

@media print{

.ss-footer{

    margin:0;

    padding:0;

    background:none;

    box-shadow:none;

}

}


/*=========================================================
    UTILITIES
=========================================================*/

.ss-footer a{

    -webkit-tap-highlight-color:transparent;

}

.ss-footer img{

   max-width: 200px;
    height: auto;
    width: 100%;

}

.ss-footer svg{

    flex-shrink:0;

}

.ss-footer strong{

    font-weight:500;

}

.ss-footer p:last-child,

.ss-footer ul:last-child,

.ss-footer li:last-child{

    margin-bottom:0;

}


/*=========================================================
    END
=========================================================*/