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

.site-footer{
    background:#000;
    color:#fff;
    width:100%;
    margin-top:80px;
    padding-top: 40px;
    overflow:hidden;
}

/* ==========================================
   TOP SECTION
========================================== */

.footer-container{
    max-width:1400px;
    margin:auto;
    margin-top: 6em;
    display:flex;
    justify-content: space-between;
}

/* ==========================================
   COMMON COLUMN
========================================== */

.footer-column{
    display:flex;
    flex-direction:column;
}

.footer-column h3{
    color:#fff;
    font-size:1rem;
    font-weight:700;
    margin-bottom:16px;
}

.footer-column a{
    color:#9ca3af;
    text-decoration:none;

    width:fit-content;

    margin-bottom:8px;

    position:relative;

    font-size:.95rem;

    transition:.3s ease;
}

/* Underline Animation */

.footer-column a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-3px;

    width:0;
    height:1px;

    background:var(--primary,#ff2a34);

    transition:.3s ease;
}

.footer-column a:hover{
    color:#fff;
}

.footer-column a:hover::after{
    width:100%;
}

/* ==========================================
   BRANDING
========================================== */

.footer-brand{
    align-items:center;
    text-align:center;

    img{
        height: 100px;
         margin-bottom: 10px
    }
}

.footer-brand h2{
    font-size:2.3rem;
    font-weight:900;
    letter-spacing:-1px;
    line-height: .5;

    margin-bottom:14px;
}
.footer-brand h3{
    line-height: 1;
    font-size: 25px;
}

.footer-brand p{
    color:#8b8b8b;

    line-height:1.3;

    max-width:340px;

    font-size:.95rem;
}

/* ==========================================
   DOWNLOAD APP
========================================== */

.footer-app{
    align-items:center;
    text-align:center;
}

.footer-qr{
    width:130px;
    height:130px;

    object-fit:cover;

    background:#fff;

    padding:8px;

    border-radius:16px;

    margin-bottom:18px;
}

.download-btn{
    background:var(--primary,#ff2a34);
    color:#fff !important;

    padding:12px 24px;

    border-radius:12px;

    font-weight:600;

    transition:.3s ease;
}

.download-btn:hover{
    transform:translateY(-3px);
}

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

.footer-contact{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    flex-wrap:wrap;

    gap:2px;

    padding:32px 24px;

    color:#9ca3af;

    font-size:.92rem;
}

/* Decorative Divider */




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

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.06);

    padding:18px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction: column;

    flex-wrap:wrap;

    gap:10px;

    color:#6b7280;

    font-size:.85rem;
}

.footer-bottom span:last-child{
    color:#d1d5db;
}

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

@media(max-width:1024px){

    .footer-container{
       flex-direction: column;
    }

    .footer-brand{
        align-items:flex-start;
        text-align:left;

        p{
            width: 70%;
        }

        
    }
.footer-brand img{
    height: 100px;
    margin-bottom: 20px;
}
    .footer-app{
        align-items:flex-start;
        text-align:left;
    }

    .footer-contact{
        gap:3px !important;
    }
}

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

@media(max-width:768px){

    .footer-container{
        grid-template-columns:1fr;

        gap:40px;

        padding:50px 24px;
    }

    .footer-column{
        align-items:center;
        text-align:center;
    }

    .footer-brand{
        align-items:center;
        text-align:center;
    }

    .footer-brand p{
        max-width:100%;
    }

    .footer-app{
        align-items:center;
        text-align:center;
    }

    .footer-contact{
        flex-direction:column;
        text-align:center;

        gap:14px;

        padding:28px 20px;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;

        gap:8px;

        padding:18px 20px;
    }

    .footer-qr{
        width:110px;
        height:110px;
    }

    .footer-brand h2{
        font-size:2rem;
    }
}

/* ==========================================
   EXTRA LARGE SCREENS
========================================== */

@media(min-width:1600px){

    .footer-container{
        max-width:1600px;
    }
}