/* ==========================================================
   FEATURE FRAMES
   PREMIUM CREATIVE FOOTER
   BLACK + ORANGE + WHITE
========================================================== */

.footer{

    position:relative;

    overflow:hidden;

    padding:75px 0 0;

    background:#080808;

    color:#FFFFFF;

    border-top:4px solid #F99B1D;

}


/* ==========================================================
   SUBTLE BACKGROUND DESIGN
========================================================== */

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-350px;

    right:-180px;

    border-radius:50%;

    background:#F99B1D;

    opacity:.055;

    filter:blur(100px);

    pointer-events:none;

}

.footer::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    bottom:-280px;

    left:-180px;

    border-radius:50%;

    background:#F99B1D;

    opacity:.035;

    filter:blur(90px);

    pointer-events:none;

}


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

.footer-grid{

    display:grid;

    grid-template-columns:
        1.7fr
        1fr
        1.2fr;

    gap:80px;

    position:relative;

    z-index:2;

    padding-bottom:65px;

}


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

.footer-grid > div:first-child{

    padding-right:30px;

}


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

.footer h3{

    display:inline-block;

    position:relative;

    font-size:2.7rem;

    line-height:1.1;

    color:#FFFFFF;

    margin:0 0 24px;

    font-weight:800;

    letter-spacing:-1.2px;

}


/*
   IMPORTANT:
   Use this HTML:

   <h3>Feature <span>Frames</span></h3>
*/

.footer h3 span{

    color:#F99B1D;

}


/* Orange brand line */

.footer h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-11px;

    width:65px;

    height:4px;

    border-radius:50px;

    background:#F99B1D;

}


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

.footer p{

    max-width:390px;

    color:#C8C8C8;

    line-height:1.85;

    font-size:.98rem;

}


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

.footer h4{

    display:inline-block;

    position:relative;

    color:#FFFFFF;

    margin:0 0 30px;

    font-size:1.15rem;

    font-weight:700;

    letter-spacing:.3px;

}


/* Orange heading line */

.footer h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:38px;

    height:3px;

    border-radius:50px;

    background:#F99B1D;

}


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

.footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer li{

    margin-bottom:13px;

}

.footer a{

    display:inline-flex;

    align-items:center;

    position:relative;

    color:#C8C8C8;

    text-decoration:none;

    transition:.3s ease;

}


/* Orange dot */

.footer li a::before{

    content:"";

    width:5px;

    height:5px;

    border-radius:50%;

    background:#F99B1D;

    margin-right:10px;

    opacity:0;

    transform:scale(0);

    transition:.3s ease;

}


/* Link underline */

.footer li a::after{

    content:"";

    position:absolute;

    left:15px;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:50px;

    background:#F99B1D;

    transition:.3s ease;

}

.footer li a:hover{

    color:#F99B1D;

    transform:translateX(5px);

}

.footer li a:hover::before{

    opacity:1;

    transform:scale(1);

}

.footer li a:hover::after{

    width:calc(100% - 15px);

}


/* ==========================================================
   SOCIAL SECTION
========================================================== */

.social-icons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:5px;

}

.social-icons a{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:15px;

    background:#FFFFFF;

    border:1px solid #FFFFFF;

    color:#000000;

    font-size:18px;

    transition:.4s ease;

    position:relative;

}


/* Remove link effects from social icons */

.social-icons a::before{

    display:none;

}

.social-icons a::after{

    display:none;

}


/* Social hover */

.social-icons a:hover{

    transform:

        translateY(-7px)

        rotate(-4deg);

    background:#F99B1D;

    border-color:#F99B1D;

    color:#FFFFFF;

    box-shadow:

        0 15px 30px

        rgba(249,155,29,.28);

}


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

.footer-bottom{

    position:relative;

    z-index:2;

    margin:0;

    padding:25px 0 28px;

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

    text-align:center;

}


/* Orange center accent */

.footer-bottom::before{

    content:"";

    position:absolute;

    top:-2px;

    left:50%;

    width:75px;

    height:3px;

    transform:translateX(-50%);

    border-radius:50px;

    background:#F99B1D;

}

.footer-bottom p{

    max-width:none;

    margin:0;

    color:#999999;

    font-size:.88rem;

    line-height:1.6;

}


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

@media(max-width:992px){

    .footer{

        padding:70px 0 0;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:55px;

        padding-bottom:55px;

    }

    .footer-grid > div:first-child{

        grid-column:1 / -1;

        padding-right:0;

        text-align:center;

    }

    .footer-grid > div:first-child p{

        margin-left:auto;

        margin-right:auto;

    }

    .footer h3::after{

        left:50%;

        transform:translateX(-50%);

    }

    .social-icons{

        justify-content:flex-start;

    }

}


@media(max-width:576px){

    .footer{

        padding:60px 0 0;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

        padding-bottom:45px;

        text-align:center;

    }

    .footer-grid > div:first-child{

        grid-column:auto;

    }

    .footer h3{

        font-size:2.15rem;

    }

    .footer h4::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer ul{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .social-icons{

        justify-content:center;

    }

    .social-icons a{

        width:48px;

        height:48px;

        border-radius:13px;

    }

    .footer-bottom{

        padding:22px 15px 25px;

    }

}