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

.footer{

    background: #081f44;

    color: var(--white);

    padding: 35px 0 0;

    border-top: 3px solid var(--secondary-color);

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

.footer-container{

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 20px;

    align-items: start;

}

/* =========================================
   LOGO / SOBRE
========================================= */

.footer-about img{

    width: 180px;

    margin-bottom: 15px;

}

.footer-about p{

    line-height: 1.6;

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

    max-width: 380px;

}

/* =========================================
   TITLES
========================================= */

.footer-links h3,
.footer-contact h3{

    font-size: 20px;

    margin-bottom: 12px;

    color: var(--secondary-color);

    font-family: 'Playfair Display', serif;

}

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

.footer-links ul{

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.footer-links a{

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

    transition: 0.3s;

}

.footer-links a:hover{

    color: var(--secondary-color);

}

/* =========================================
   CONTACT
========================================= */

.footer-contact{

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.footer-contact p{

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

    line-height: 1.7;

}

/* =========================================
   COPYRIGHT
========================================= */

.footer-bottom{

    margin-top: 20px;

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

    padding: 10px 0;

    text-align: center;

}

.footer-bottom p{

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

    font-size: 14px;

}

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

@media(max-width: 992px){

    .footer-container{

        grid-template-columns: 1fr 1fr;

    }

}

@media(max-width: 768px){

    .footer{

        text-align: center;

    }

    .footer-container{

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .footer-about p{

        margin: auto;

    }

    .footer-about img{

        margin: 0 auto 25px;

    }

}