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

.footer{

    margin-top:50px;

    padding:32px 25px 15px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    color:white;

}


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

.footer-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}


/* =========================
   BOX
========================= */

.footer-box h3{

    font-size:21px;

    margin:0 0 10px;

}


.footer-box h4{

    font-size:16px;

    margin:0 0 12px;

}


.footer-box p{

    color:#ddd;

    line-height:1.8;

    font-size:13px;

    margin:0;

}


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

.footer-box a{

    display:block;

    color:#ddd;

    text-decoration:none;

    margin-bottom:8px;

    font-size:13px;

    transition:.3s;

}


.footer-box a:hover{

    color:#D99B7F;

    transform:translateX(-3px);

}


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

.social{

    display:flex;

    gap:10px;

}


.social a{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0F3040;

    border-radius:50%;

    margin:0;

    transition:.3s;

}


.social a:hover{

    background:#A56F63;

    transform:translateY(-3px);

}


/* SVG */

.social a svg{

    width:19px;

    height:19px;

    fill:white;

}


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

.footer-bottom{

    margin-top:25px;

    padding-top:12px;

    text-align:center;

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

    color:#bbb;

    font-size:12px;

}


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

@media(max-width:768px){

    .footer{

        margin-top:40px;

        padding:28px 20px 14px;

    }


    .footer-container{

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

        gap:22px;

    }


    .footer-box h3{

        font-size:19px;

    }


    .footer-box h4{

        font-size:15px;

    }

}


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

@media(max-width:450px){

    .footer{

        padding:25px 18px 12px;

    }


    .footer-container{

        grid-template-columns:1fr;

        gap:20px;

        text-align:center;

    }


    .footer-box h3{

        font-size:19px;

    }


    .footer-box p{

        font-size:12px;

    }


    .social{

        justify-content:center;

    }


    .footer-bottom{

        margin-top:20px;

        padding-top:10px;

        font-size:11px;

    }

}