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

.footer-top {

    background: #212529;
    color: #ffffff;

}

.footer-title {

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

    margin-bottom: 25px;

    position: relative;

}

.footer-title::after {

    content: "";

    width: 45px;
    height: 3px;

    background: #dc3545;

    position: absolute;

    left: 0;
    bottom: -10px;

    border-radius: 10px;

}


/* =======================================================
   PÁRRAFOS
======================================================= */

.footer-top p {

    color: #dcdcdc;
    line-height: 1.8;
    margin-bottom: 12px;

}

.footer-top p i {

    width: 22px;
    color: #dc3545;

}


/* =======================================================
   ENLACES
======================================================= */

.footer-links {

    list-style: none;
    padding: 0;
    margin: 0;

}

.footer-links li {

    margin-bottom: 12px;

}

.footer-links a {

    color: #dcdcdc;

    text-decoration: none;

    transition: .3s;

}

.footer-links a:hover {

    color: #ffffff;

    padding-left: 8px;

}


/* =======================================================
   REDES SOCIALES
======================================================= */

.social-icon {

    width: 45px;
    height: 45px;

    display: inline-flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    margin-right: 8px;
    margin-bottom: 10px;

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

    color: white;

    font-size: 18px;

    transition: .35s;

    text-decoration: none;

}

.social-icon:hover {

    background: #dc3545;

    color: white;

    transform: translateY(-5px);

}


/* =======================================================
   MÉTODOS DE PAGO
======================================================= */

.footer-top h6 {

    font-weight: 700;

    margin-top: 20px;

}

.footer-top h6::after {

    content: "";

    display: block;

    width: 35px;
    height: 2px;

    background: #dc3545;

    margin-top: 8px;

}


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

.footer-bottom {

    background: #181b1e;

    color: #bdbdbd;

    font-size: 15px;

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

}

.footer-bottom p {

    margin: 0;

}


/* =======================================================
   ANIMACIONES
======================================================= */

.footer-links a,
.social-icon {

    transition: all .3s ease;

}


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

@media (max-width:991px){

    .footer-top{

        text-align:center;

    }

    .footer-title::after{

        left:50%;
        transform:translateX(-50%);

    }

    .footer-top h6::after{

        margin-left:auto;
        margin-right:auto;

    }

    .social-icon{

        margin-left:4px;
        margin-right:4px;

    }

}

@media (max-width:768px){

    .footer-title{

        margin-top:25px;

    }

    .footer-top{

        padding-top:50px;
        padding-bottom:50px;

    }

}

@media (max-width:576px){

    .footer-title{

        font-size:20px;

    }

    .footer-bottom{

        font-size:14px;

    }

}