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

footer{
    background:#111;
    color:#ffffff;
    padding:70px 0 20px;
}

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

.footer-container{

    width:90%;
    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:50px;

}

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

.footer-container h3{

    color:#ffffff;
    margin-bottom:20px;
    font-size:22px;

}

/* ===========================================
   PARAGRAPH
=========================================== */

.footer-container p{

    color:#cccccc;
    line-height:1.8;

}

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

.footer-links{

    display:flex;
    flex-direction:column;

}

.footer-links a{

    text-decoration:none;
    color:#cccccc;
    margin-bottom:12px;
    transition:.3s;

}

.footer-links a:hover{

    color:#ff9800;
    padding-left:8px;

}

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

.footer-social{

    display:flex;
    flex-direction:column;

}

.footer-social a{

    text-decoration:none;
    color:#cccccc;
    margin-bottom:12px;
    transition:.3s;

}

.footer-social a:hover{

    color:#ff9800;
    padding-left:8px;

}

/* ===========================================
   LINE
=========================================== */

footer hr{

    width:90%;
    max-width:1200px;

    margin:40px auto 20px;

    border:none;

    border-top:1px solid #333;

}

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

.footer-bottom{

    width:90%;
    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-bottom p{

    color:#999999;

}

/* ===========================================
   ADMIN BUTTON
=========================================== */

.admin-link{

    background:#ff9800;
    color:white;
    text-decoration:none;

    padding:10px 25px;

    border-radius:5px;

    font-weight:600;

    transition:.3s;

}

.admin-link:hover{

    background:#e68900;

    transform:translateY(-2px);

}

/* ===========================================
   OPTIONAL SOCIAL ICONS
=========================================== */

.social-icons{

    display:flex;
    gap:15px;
    margin-top:20px;

}

.social-icons a{

    width:45px;
    height:45px;

    border-radius:50%;

    background:#222;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    text-decoration:none;

    transition:.3s;

}

.social-icons a:hover{

    background:#ff9800;

}

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

.footer-logo{

    width:80px;
    margin-bottom:20px;

}