/* ==========================================================
   Footer Section
========================================================== */

.footer-section{

    background:#1D2433;

    position:relative;

    padding:0 24px 40px;

}

.footer-logo:hover{

    opacity:.95;
}


/* ==========================================================
   Divider
========================================================== */

.footer-divider{

    position:relative;

    width:100%;

    height:2px;

    margin-bottom:80px;

    background:linear-gradient(
        90deg,
        transparent,
        #2E9B57,
        transparent
    );
}

.footer-divider::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:320px;

    height:40px;

    transform:translate(-50%,-50%);

    background:rgba(46,155,87,.35);

    filter:blur(30px);

    z-index:-1;
}

/* ==========================================================
   Container
========================================================== */

.footer-container{

    max-width:1200px;

    margin:0 auto;

}


/* ==========================================================
   Top
========================================================== */

.footer-top{

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        .8fr;

    gap:70px;

    align-items:flex-start;

}

.footer-column a::after{

    content:"→";

    opacity:0;

    margin-left:6px;

    transition:.3s;
}

.footer-column a:hover::after{

    opacity:1;
}

/* ==========================================================
   Brand
========================================================== */

.footer-brand{

    display:flex;

    flex-direction:column;

}

.footer-logo{

    display:inline-flex;

    width:max-content;

    margin-bottom:28px;

}

.footer-logo img{

    width:120px;

    max-width:100%;

    height:auto;

    display:block;

}

.footer-description{

    margin:0;

    max-width:360px;

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

    font-size:1rem;

    line-height:1.9;

    color:#AAB4C5;

}


/* ==========================================================
   LinkedIn
========================================================== */

.footer-linkedin{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    margin-top:32px;

    padding:14px 22px;

    border-radius:999px;

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

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

    text-decoration:none;

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

    font-weight:600;

    color:#FFFFFF;

    box-sizing:border-box;

}


/* ==========================================================
   Columns
========================================================== */

.footer-column h3{

    margin:0 0 26px;

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

    font-size:1.1rem;

    font-weight:700;

    color:#FFFFFF;

}

.footer-column ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-column li{

    margin-bottom:18px;

}

.footer-column a{

    text-decoration:none;

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

    font-size:.98rem;

    color:#AAB4C5;

}


/* ==========================================================
   Bottom
========================================================== */

.footer-bottom{

    margin-top:80px;

    padding-top:28px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-bottom p{

    margin:0;

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

    color:#AAB4C5;

}

.footer-bottom-right{

    display:flex;

    align-items:center;

    gap:16px;

    color:#AAB4C5;

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

}

.footer-separator{

    color:#2E9B57;

}

/* ==========================================================
   Ambient Glow
========================================================== */

.footer-brand{

    position:relative;
}

.footer-brand::before{

    content:"";

    position:absolute;

    top:-60px;

    left:-40px;

    width:320px;

    height:320px;

    background:rgba(46,155,87,.10);

    border-radius:50%;

    filter:blur(90px);

    z-index:0;

    pointer-events:none;
}

.footer-brand>*{

    position:relative;

    z-index:1;
}


/* ==========================================================
   Hover Effects
========================================================== */

.footer-column a{

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

.footer-column a:hover{

    color:#2E9B57;

    transform:translateX(5px);
}


/* ==========================================================
   LinkedIn Button
========================================================== */

.footer-linkedin{

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

.footer-linkedin:hover{

    background:#2E9B57;

    border-color:#2E9B57;

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(46,155,87,.28);
}


/* ==========================================================
   Logo
========================================================== */

.footer-logo img{

    transition:
        transform .35s ease;
}

.footer-logo:hover img{

    transform:scale(1.03);
}


/* ==========================================================
   Bottom
========================================================== */

.footer-bottom{

    transition:border-color .35s ease;
}


/* ==========================================================
   Reveal Animation
========================================================== */

.footer-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s cubic-bezier(.22,.61,.36,1),
        transform .8s cubic-bezier(.22,.61,.36,1);
}

.footer-reveal.footer-visible{

    opacity:1;

    transform:translateY(0);
}


/* ==========================================================
   Tablet
========================================================== */

@media(max-width:1024px){

    .footer-top{

        grid-template-columns:1fr 1fr;

        gap:60px;
    }

}


/* ==========================================================
   Mobile
========================================================== */

@media(max-width:768px){

    .footer-section{

        padding:0 22px 40px;
    }

    .footer-divider{

        margin-bottom:60px;
    }

    .footer-top{

        grid-template-columns:1fr;

        gap:50px;
    }

    .footer-description{

        max-width:100%;
    }

    .footer-logo img{

        width:170px;
    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:16px;
    }

    .footer-bottom-right{

        flex-wrap:wrap;

        gap:10px;
    }

}


/* ==========================================================
   Small Mobile
========================================================== */

@media(max-width:480px){

    .footer-section{

        padding:0 18px 35px;
    }

    .footer-logo img{

        width:130px;
    }

    .footer-column li{

        margin-bottom:16px;
    }

    .footer-linkedin{

        width:100%;

        justify-content:center;
    }

}