/* ===================================================
   RAYCKINGTON FC
   FOOTER CSS
=================================================== */


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


footer{

    background:

    linear-gradient(
        180deg,
        #111,
        #050505
    );


    padding:90px 0 35px;


    position:relative;


    overflow:hidden;


    border-top:

    1px solid rgba(255,255,255,.08);

}



/* Línea superior de colores */

footer::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:5px;


    background:

    linear-gradient(
        90deg,
        var(--red),
        var(--yellow),
        var(--blue)
    );


}



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


footer img{


    width:130px;


    height:130px;


    object-fit:contain;


}



footer h3{


    color:white;


    font-size:1.8rem;


    margin-bottom:15px;


}



footer p{


    color:#aaa;


    font-size:.95rem;


}



/* ===================================================
   TÍTULOS
=================================================== */


footer h5{


    color:white;


    font-size:1.1rem;


    text-transform:uppercase;


    letter-spacing:1px;


    position:relative;


    padding-bottom:12px;


}



footer h5::after{


    content:"";


    position:absolute;


    left:0;


    bottom:0;


    width:40px;


    height:3px;


    background:var(--yellow);


    border-radius:10px;


}



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


footer ul li a{


    color:#aaa;


    transition:.3s;


    font-size:.95rem;


}



footer ul li a:hover{


    color:var(--yellow);


    padding-left:8px;


}



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


.social a{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#1b1b1b;


    color:white;


    font-size:1.2rem;


    transition:.35s;


}



.social a:hover{


    background:var(--red);


    transform:

    translateY(-5px);


}



/* ===================================================
   CONTACTO ICONOS
=================================================== */


footer i{


    font-size:1rem;


}



/* ===================================================
   SEPARADOR
=================================================== */


footer hr{


    border-color:

    rgba(255,255,255,.15);


}



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


footer small{


    color:#777;


}



/* ===================================================
   EFECTO FONDO
=================================================== */


footer::after{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    right:-200px;


    bottom:-200px;


    background:

    radial-gradient(
        circle,
        rgba(0,61,165,.3),
        transparent 70%
    );


}



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


@media(max-width:991px){


    footer{


        text-align:center;


    }



    footer h5::after{


        left:50%;


        transform:translateX(-50%);


    }



    .social{


        justify-content:center;


    }


}



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


@media(max-width:576px){


    footer{


        padding-top:70px;


    }



    footer img{


        width:100px;


        height:100px;


        margin:auto;


    }


}