/* ======================================================
   SEAN B SHOP
   PREMIUM FOOTER STYLES
   assets/css/layout/footer.css
====================================================== */


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

.site-footer{

    background:#0b1f3a;

    color:#cbd5e1;

    margin-top:50px;

    font-size:14px;

}


.site-footer a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.3s ease;

}


.site-footer a:hover{

    color:#e60000;

}



/* ======================================================
   TRUST FEATURES
====================================================== */


.footer-features{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

}


.footer-features-grid{

    display:grid;

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

    gap:25px;

    padding:25px 0;

}



.footer-feature{

    display:flex;

    align-items:center;

    gap:15px;

}


.footer-feature i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0b1f3a;

    color:#fff;

    border-radius:50%;

    font-size:20px;

}


.footer-feature h4{

    margin:0 0 5px;

    color:#0b1f3a;

    font-size:15px;

}


.footer-feature p{

    margin:0;

    color:#64748b;

    font-size:13px;

}




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


.footer-main{

    padding:60px 0 40px;

}



.footer-grid{

    display:grid;

    grid-template-columns:

    1.5fr repeat(4,1fr);

    gap:35px;

}



/* ======================================================
   BRAND
====================================================== */


.footer-logo img{

    width:80px;

    margin-bottom:15px;

}


.footer-brand h3{

    color:#ffffff;

    font-size:22px;

    margin-bottom:12px;

}


.footer-brand p{

    max-width:300px;

    line-height:1.7;

    color:#94a3b8;

}




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


.footer-column h4{

    color:#ffffff;

    font-size:16px;

    margin-bottom:18px;

}



.footer-column h4::after{

    content:"";

    display:block;

    width:35px;

    height:3px;

    background:#e60000;

    margin-top:8px;

}



.footer-column a{

    display:block;

    margin-bottom:12px;

    font-size:14px;

}




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


.footer-contact p{

    display:flex;

    gap:12px;

    margin-bottom:15px;

    color:#cbd5e1;

}


.footer-contact i{

    color:#e60000;

}




/* ======================================================
   SOCIAL LINKS
   NO CIRCLES
====================================================== */


.footer-socials{

    display:flex;

    gap:18px;

    margin-top:25px;

}



.footer-socials a{

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    font-size:18px;

}



.footer-socials a:hover{

    color:#e60000;

}




/* ======================================================
   NEWSLETTER
====================================================== */


.newsletter-box{

    background:#102b50;

    padding:25px;

    border-radius:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

}



.newsletter-box h3{

    color:#fff;

    margin-bottom:8px;

}



.newsletter-box p{

    margin:0;

}



.newsletter-box form{

    display:flex;

    background:white;

    border-radius:30px;

    overflow:hidden;

}


.newsletter-box input{

    height:45px;

    border:none;

    outline:none;

    padding:0 18px;

}


.newsletter-box button{

    border:none;

    background:#e60000;

    color:#fff;

    padding:0 25px;

}




/* ======================================================
   PAYMENT
====================================================== */


.footer-payment{

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

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

}



.payment-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}



.payment-methods{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}



.payment-methods span{

    background:white;

    color:#0b1f3a;

    padding:8px 15px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}




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


.footer-bottom{

    padding:20px 0;

}


.footer-bottom .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.footer-bottom p{

    margin:0;

    color:#94a3b8;

}



/* ======================================================
   TABLETS
====================================================== */


@media(max-width:991px){


.footer-features-grid{

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

}



.footer-grid{

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

}



.footer-brand{

    grid-column:1/-1;

    text-align:center;

}



.footer-brand p{

    margin:auto;

}



.footer-socials{

    justify-content:center;

}



.newsletter-box{

    flex-direction:column;

    text-align:center;

}



.payment-container{

    flex-direction:column;

    gap:20px;

}


.footer-bottom .container{

    flex-direction:column;

    gap:15px;

}


}




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


@media(max-width:768px){


.footer-features{

    display:none;

}



.footer-main{

    padding:40px 0 30px;

}



.footer-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px 20px;

}



/* MOBILE ORDER */

.footer-brand{

    grid-column:1/-1;

}



.footer-company{

    grid-column:1;

}



.footer-support{

    grid-column:2;

}



.footer-categories{

    grid-column:1;

}



.footer-info{

    grid-column:2;

}



.footer-column{

    text-align:left;

}



.footer-column h4{

    font-size:15px;

}



.footer-column a{

    font-size:13px;

    margin-bottom:10px;

}




.footer-contact p{

    font-size:13px;

}



.footer-socials{

    justify-content:center;

    gap:20px;

}



.newsletter-box form{

    width:100%;

    flex-direction:column;

}



.newsletter-box input,

.newsletter-box button{

    width:100%;

    height:48px;

}



.payment-container{

    flex-direction:column;

}



.footer-bottom .container{

    flex-direction:column;

    text-align:center;

}



}



/* ======================================================
   SMALL PHONES
====================================================== */


@media(max-width:480px){


.footer-grid{

    gap:25px 15px;

}



.footer-brand h3{

    font-size:20px;

}



.footer-brand p{

    font-size:13px;

}



.footer-socials a{

    font-size:17px;

}



.payment-methods span{

    font-size:11px;

    padding:7px 12px;

}



}



/* ======================================================
   EXTRA SMALL
====================================================== */


@media(max-width:360px){


.footer-grid{

    grid-template-columns:1fr;

}



.footer-company,

.footer-support,

.footer-categories,

.footer-info{

    grid-column:1;

}



.footer-column{

    text-align:center;

}



.footer-column h4::after{

    margin-left:auto;

    margin-right:auto;

}



.footer-socials{

    justify-content:center;

}


}