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

/* =========================================================
                MINIMAL PREMIUM FOOTER
========================================================= */

.mp-footer {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #06141d 0%,
            #081b26 100%
        );

    padding:
        90px 0 30px;

    font-family:
        'Outfit',
        sans-serif;

}

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

.mp-footer-line {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(5,143,72,0.35),
            transparent
        );

}

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

.mp-footer-container {

    width: 100%;

    max-width: 1380px;

    margin: auto;

    padding: 0 28px;

}

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

.mp-footer-top {

    display: flex;

    justify-content: space-between;

    gap: 80px;

    padding-bottom: 55px;

    border-bottom:
        1px solid rgba(255,255,255,0.06);

}

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

.mp-footer-brand {

    max-width: 620px;

}

/* LABEL */

.mp-footer-label {

    width: fit-content;

    display: flex;
    align-items: center;
    gap: 10px;

    padding:
        10px 16px;

    border-radius: 100px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);

    margin-bottom: 28px;

}

.mp-footer-label span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #27ff81;

    box-shadow:
        0 0 12px #27ff81;

}

.mp-footer-label p {

    color:
        rgba(255,255,255,0.72);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* HEADING */

.mp-footer-brand h2 {

    color: #ffffff;

    font-size:
        clamp(48px, 6vw, 84px);

    line-height: 0.92;

    letter-spacing: -4px;

    font-weight: 800;

    margin-bottom: 24px;

}

/* DESCRIPTION */

.mp-footer-description {

    color:
        rgba(255,255,255,0.52);

    font-size: 16px;

    line-height: 1.9;

    max-width: 560px;

}

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

.mp-footer-links-wrap {

    display: flex;

    gap: 80px;

    padding-top: 18px;

}

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

.mp-footer-column {

    min-width: 220px;

}

/* TITLE */

.mp-column-title {

    display: inline-block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 24px;

}

/* LIST */

.mp-footer-column ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/* LINK */

.mp-footer-column ul li a {

    position: relative;

    color:
        rgba(255,255,255,0.54);

    text-decoration: none;

    font-size: 15px;

    transition: 0.35s ease;

}

.mp-footer-column ul li a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0%;

    height: 1px;

    background:
        #27ff81;

    transition: 0.35s ease;

}

.mp-footer-column ul li a:hover {

    color: #ffffff;

}

.mp-footer-column ul li a:hover::after {

    width: 100%;

}

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

.mp-footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 28px;

}

/* COPYRIGHT */

.mp-footer-bottom p {

    color:
        rgba(255,255,255,0.42);

    font-size: 13px;

}

/* BOTTOM LINKS */

.mp-bottom-links {

    display: flex;

    align-items: center;

    gap: 26px;

}

.mp-bottom-links a {

    color:
        rgba(255,255,255,0.48);

    text-decoration: none;

    font-size: 13px;

    transition: 0.3s ease;

}

.mp-bottom-links a:hover {

    color: #ffffff;

}

/* =========================================================
                RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .mp-footer-top{

        flex-direction: column;

        gap: 50px;

    }

}

@media(max-width:768px){

    .mp-footer{

        padding:
            70px 0 24px;

    }

    .mp-footer-container{

        padding: 0 20px;

    }

    .mp-footer-links-wrap{

        flex-direction: column;
        text-align: center;
        gap: 40px;

    }

    .mp-footer-brand h2{

        font-size: 52px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .mp-footer-bottom{

        flex-direction: column;

        align-items: center;

        gap: 14px;

    }

}

@media(max-width:500px){

    .mp-footer-container{

        padding: 0 16px;

    }

    .mp-footer-brand h2{

        font-size: 40px;

    }

    .mp-bottom-links{

        flex-wrap: wrap;

        gap: 14px;

    }

}