/* ==========================================
   RESPAWNERZ FOOTER V2
========================================== */

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

.site-footer {

    background:#000;

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

    position:relative;

    overflow:hidden;
}

.site-footer .container{

    max-width:1380px;
}

/* ==========================================
   MAIN LAYOUT
========================================== */

.footer-top{

    display:flex;

    flex-direction:column;

    gap:56px;

    padding:50px 0 70px;
}

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

.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:34px;

    list-style:none;

    margin:0;

    padding:0 0 22px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.footer-social li{

    margin:0;
}

.footer-social a{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    text-decoration:none;

    font-size:.92rem;

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

.footer-social a:hover{

    color:#fff;

    transform:translateY(-2px);
}

.footer-social i{

    font-size:1.3rem;

    opacity:.78;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.footer-social a:hover i{

    opacity:1;

    transform:translateY(-2px);
}

/* ==========================================
   NAVIGATION
========================================== */

.footer-nav{

    display:grid;

    grid-template-columns:

        minmax(150px,1fr)
        minmax(150px,1fr)
        minmax(170px,1fr)
        minmax(340px,380px);

    gap:36px;

    align-items:start;

    padding-bottom:70px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.footer-column{

    display:flex;

    flex-direction:column;
}

.footer-heading{

    margin:0 0 22px;

    font-family: "Space Grotesk", sans-serif;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:#fff;
}

.footer-heading::after{

    content:"";

    display:block;

    width:30px;

    height:1px;

    margin-top:12px;

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

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

    list-style:none;

    margin:0;

    padding:0;
}

.footer-links li{

    margin:0;
}

.footer-links a{

    display:inline-flex;

    align-items:center;

    width:fit-content;

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

    text-decoration:none;

    font-size:.94rem;

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

.footer-links a:hover{

    color:#fff;

    transform:translateX(5px);
}

/* ==========================================
   NEWSLETTER COLUMN
========================================== */

.footer-newsletter{

    width:100%;

    max-width:380px;

    justify-self:end;
}

.footer-newsletter .widget{

    margin:0;

    background:rgba(12,16,20,.75);

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

    overflow:hidden;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.footer-newsletter .widget:hover{

    transform:translateY(-3px);

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

.footer-newsletter .widget-body{

    padding:22px;
}
/* ==========================================
   FEATURE SECTION
========================================== */

.footer-feature{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding-top:60px;
    padding-bottom:45px;

}

/* ------------------------------------------
   Brand
------------------------------------------ */

.footer-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    width:100%;

    max-width:920px;

    margin:0 auto;
}

.footer-brand .site-logo{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:clamp(3.5rem,6.2vw,5.3rem);

    line-height:1;

    margin:0;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.footer-brand .site-logo:hover{

    transform:translateY(-2px);

    opacity:.96;
}

.footer-brand .logo-icon{

    margin-right:18px;
}

.footer-brand .logo-icon img{

    width:88px;

    height:auto;

    display:block;
}

.footer-brand .logo-accent{

    transition:color .25s ease;
}

.footer-brand .site-logo:hover .logo-accent{

    color:rgb(229,235,194);
}

.footer-brand p{

    max-width:460px;

    margin:22px auto 34px;

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

    font-size:1rem;

    line-height:1.9;
}

/* ------------------------------------------
   Support
------------------------------------------ */

.footer-support{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:24px;

    margin-top:44px;
}

.footer-support .google-source-badge{

    margin:0;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.footer-support .google-source-badge:hover{

    transform:translateY(-2px);
}

.footer-support .google-source-badge img{

    width:165px;
}

.footer-support .chai-support-badge{

    width:180px;

    margin:0;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.footer-support .chai-support-badge:hover{

    transform:translateY(-2px);
}

/* ==========================================
   SUBTLE POLISH
========================================== */

.footer-links a,
.footer-social a,
.footer-brand .site-logo{

    -webkit-tap-highlight-color:transparent;
}

.footer-links a:focus-visible,
.footer-social a:focus-visible{

    outline:1px solid rgba(229,235,194,.55);

    outline-offset:6px;

    border-radius:6px;
}

.footer-brand .site-logo{

    text-decoration:none;
}

.footer-brand .site-logo:hover{

    opacity:.96;
}

.footer-brand .logo-accent{

    transition:color .25s ease;
}

.footer-brand .site-logo:hover .logo-accent{

    color:rgb(229,235,194);
}

/* ==========================================
   LARGE DESKTOP
========================================== */

@media (min-width:1500px){

    .footer-top{

        padding:110px 0 90px;

        gap:60px;
    }

    .footer-nav{

        gap:72px;
    }

    .footer-brand .site-logo{

        font-size:6.2rem;
    }

    .footer-brand p{

        max-width:620px;
    }

}

/* ==========================================
   LAPTOP
========================================== */

@media (max-width:1200px){

    .footer-nav{

        grid-template-columns:

            minmax(150px,1fr)
            minmax(150px,1fr)
            minmax(170px,1fr)
            minmax(300px,340px);

        gap:28px;
    }

    .footer-feature{

        padding-top:70px;
    }

    .footer-brand .site-logo{

        font-size:clamp(3.8rem,7vw,5rem);
    }

}

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

@media (max-width:1024px){

    .footer-top{

        gap:48px;
    }

    .footer-social{

        justify-content:center;
    }

    .footer-nav{

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

    gap:42px;
   }

    .footer-column{

        align-items:center;
    }

    .footer-links{

        align-items:center;
    }

    .footer-links a{

        width:auto;
    }

    .footer-brand .site-logo{

        font-size:clamp(3.4rem,9vw,4.8rem);
    }

    .footer-brand p{

        max-width:500px;
    }

    .footer-support{

        justify-content:center;
    }

}

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

@media (max-width:768px){

    .footer-top{

        padding:70px 0 55px;

        gap:42px;
    }

    .footer-social{

        justify-content:center;

        gap:20px;

        padding-bottom:24px;
    }

    .footer-social span{

        display:none;
    }

    .footer-nav{

    grid-template-columns:1fr;

    gap:34px;

    padding-bottom:48px;
     }

   .footer-newsletter{

    max-width:none;

    width:100%;

    justify-self:stretch;
   }

    .footer-heading{

        margin-bottom:18px;
    }

    .footer-links{

        gap:12px;
    }

    .footer-links a:hover{

        transform:none;
    }

    .footer-feature{

        padding-top:56px;
    }

    .footer-brand .site-logo{

        font-size:2.8rem;
    }

    .footer-brand .logo-icon img{

        width:56px;
    }

    .footer-brand p{

        max-width:none;

        margin:18px auto 26px;

        font-size:.92rem;
    }

    .footer-support{

        flex-direction:column;

        gap:16px;
    }

    .footer-support .google-source-badge img{

        width:150px;
    }

    .footer-support .chai-support-badge{

        width:220px;
    }

    .footer-bottom{

        margin-top:65px;

        padding:24px 0;
    }

}

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

@media (max-width:480px){

    .footer-brand .site-logo{

        font-size:2.2rem;
    }

    .footer-brand .logo-icon img{

        width:48px;
    }

    .footer-copy{

        font-size:.76rem;
    }

}