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

.footer{
    position:relative;
    overflow:hidden;
    padding:120px 0 40px;
    background:#060606;
    border-top:1px solid rgba(255,255,255,.06);
    max-width:1450px;
    left:50%;
    transform:translateX(-50%);
}

.footer::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,rgba(37,211,102,.05),transparent 35%),
        radial-gradient(circle at bottom right,rgba(61,115,255,.05),transparent 40%);
    pointer-events:none;
}

.footer::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
    background-size:70px 70px;
    opacity:.15;
    mask-image:radial-gradient(circle at center,black 45%,transparent 100%);
    pointer-events:none;
}

/*==================================================
  GLOWS
==================================================*/

.footerGlow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    pointer-events:none;
    opacity:.2;
}

.footerGlowOne{
    width:420px;
    height:420px;
    background:#25d366;
    top:-180px;
    left:-180px;
}

.footerGlowTwo{
    width:450px;
    height:450px;
    background:#3d73ff;
    bottom:-200px;
    right:-180px;
}

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

.footerTop{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;
    padding-bottom:80px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

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

.footerBrand{
    display:flex;
    flex-direction:column;
}

.footerLogo{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    margin-bottom:28px;
}

.footerLogo img{
    height:48px;
    width:auto;
}

.footerBrand p{
    color:#bcbcbc;
    font-size:16px;
    line-height:1.9;
    max-width:360px;
}

/*==================================================
  SOCIALS
==================================================*/

.footerSocials{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}

.footerSocials a{
    display:flex;
    justify-content:center;
    align-items:center;
    height:44px;
    padding:0 18px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#d7d7d7;
    font-size:14px;
    font-weight:500;
    transition:.35s;
}

.footerSocials a:hover{
    background:rgba(37,211,102,.12);
    border-color:rgba(37,211,102,.25);
    color:#fff;
    transform:translateY(-3px);
}

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

.footerLinks{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.footerColumn h3{
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-bottom:26px;
}

.footerColumn a{
    display:block;
    color:#a8a8a8;
    font-size:15px;
    margin-bottom:16px;
    transition:.3s;
}

.footerColumn a:last-child{
    margin-bottom:0;
}

.footerColumn a:hover{
    color:#25d366;
    transform:translateX(5px);
}




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

.footerNewsletter{
    position:relative;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    margin:80px 0;
    padding:55px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    border-radius:32px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(24px);
    max-width:1300px;
}

.footerNewsletter::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(37,211,102,.12),
        transparent 65%);
    pointer-events:none;
}

.footerNewsletter>*{
    position:relative;
    z-index:2;
}

/*==================================================
  NEWSLETTER CONTENT
==================================================*/

.newsletterContent{
    max-width:520px;
}

.newsletterContent h2{
    color:#fff;
    font-size:42px;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:18px;
}

.newsletterContent p{
    color:#bdbdbd;
    font-size:17px;
    line-height:1.8;
}

/*==================================================
  NEWSLETTER FORM
==================================================*/

.newsletterForm{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    max-width:560px;
}

.newsletterForm input{
    flex:1;
    height:62px;
    padding:0 24px;
    border:none;
    outline:none;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:15px;
    transition:.35s ease;
}

.newsletterForm input::placeholder{
    color:#8c8c8c;
}

.newsletterForm input:focus{
    border-color:rgba(37,211,102,.28);
    box-shadow:
        0 0 0 4px rgba(37,211,102,.08);
}

.newsletterForm button{
    height:62px;
    padding:0 30px;
    border:none;
    cursor:pointer;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:15px;
    font-weight:700;
    transition:.35s ease;
    white-space:nowrap;
    box-shadow:
        0 18px 40px rgba(37,211,102,.28);
}

.newsletterForm button:hover{
    background:#1fb85a;
    transform:translateY(-3px);
    box-shadow:
        0 24px 50px rgba(37,211,102,.35);
}

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

.footerBottom{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding-top:10px;
}

.footerBottom p{
    color:#8d8d8d;
    font-size:14px;
}

.footerBottomLinks{
    display:flex;
    align-items:center;
    gap:26px;
}

.footerBottomLinks a{
    color:#9f9f9f;
    font-size:14px;
    transition:.3s ease;
}

.footerBottomLinks a:hover{
    color:#25d366;
}

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

@media(max-width:1100px){

    .footerTop{
        grid-template-columns:1fr;
        gap:60px;
    }

    .footerLinks{
        grid-template-columns:repeat(2,1fr);
    }

    .footerNewsletter{
        flex-direction:column;
        align-items:flex-start;
        padding:45px;
    }

    .newsletterForm{
        max-width:100%;
    }

}

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

@media(max-width:768px){

    .footer{
        padding:90px 0 30px;
        text-align: center;
    }

    .footerTop{
        gap:50px;
        padding-bottom:60px;
    }

    .footerLinks{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footerNewsletter{
        margin:60px 0;
        padding:35px 28px;
        border-radius:26px;
    }

    .newsletterContent h2{
        font-size:34px;
    }

    .newsletterContent p{
        font-size:15px;
    }

    .newsletterForm{
        flex-direction:column;
    }

    .newsletterForm input,
    .newsletterForm button{
        width:100%;
    }

    .footerBottom{
        flex-direction:column;
        text-align:center;
    }

    .footerBottomLinks{
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

}

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

@media(max-width:480px){

    .footerLogo img{
        height:40px;
    }

    .footerBrand p{
        font-size:15px;
    }

    .footerSocials{
        gap:10px;
    }

    .footerSocials a{
        height:40px;
        padding:0 14px;
        font-size:13px;
    }

    .newsletterContent h2{
        font-size:30px;
    }

    .newsletterContent p{
        font-size:14px;
    }

    .newsletterForm input,
    .newsletterForm button{
        height:56px;
        font-size:14px;
    }

    .footerColumn h3{
        font-size:17px;
    }

    .footerColumn a{
        font-size:14px;
    }

}

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

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

    .footerSocials a,
    .newsletterForm input,
    .newsletterForm button,
    .footerColumn a{
        transition:none!important;
    }

}