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

:root {
    --footer-bg: #071426;
    --footer-bg-light: #0c2038;
    --footer-primary: #0d6efd;
    --footer-accent: #20c997;
    --footer-text: #cbd5e1;
    --footer-muted: #94a3b8;
    --footer-white: #ffffff;
    --footer-border: rgba(255,255,255,.12);
    --footer-radius: 14px;
    --footer-transition: .3s ease;
}


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

.newsletter-band {
    background:
        linear-gradient(
            135deg,
            var(--footer-primary),
            #084298
        );

    padding: 45px 0;
    color: white;
}


.newsletter-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
}


.newsletter-text h3 {

    font-size:28px;
    margin-bottom:10px;
    font-weight:700;
}


.newsletter-text h3 i {

    margin-right:10px;
}


.newsletter-text p {

    margin:0;
    opacity:.9;
}



/* Newsletter Form */

.newsletter-form {

    display:flex;
    background:white;
    border-radius:50px;
    overflow:hidden;
    padding:5px;
    min-width:420px;
}


.newsletter-form input {

    flex:1;
    border:none;
    outline:none;
    padding:14px 20px;
    font-size:15px;
}


.newsletter-form button {

    border:none;
    background:var(--footer-accent);
    color:white;
    padding:0 25px;
    border-radius:50px;
    cursor:pointer;
    font-weight:600;
    transition:var(--footer-transition);
}


.newsletter-form button:hover {

    transform:translateY(-2px);
    filter:brightness(.9);
}


.newsletter-msg {

    margin-top:10px;
    font-size:14px;
}



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


.site-footer {

    background:
    linear-gradient(
        180deg,
        var(--footer-bg),
        #030b15
    );

    color:var(--footer-text);
    padding:70px 0 25px;
}



.foot-grid {

    display:grid;
    grid-template-columns:
    1.6fr
    1fr
    1fr
    1fr;

    gap:45px;
}



/* Brand */


.foot-logo-row {

    display:flex;
    align-items:center;
    gap:15px;
}


.foot-logo-box {

    width:65px;
    height:65px;
    background:white;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}


.foot-logo-box img {

    width:100%;
    height:100%;
    object-fit:contain;
}


.foot-brand-name {

    color:white;
    font-weight:700;
    font-size:17px;
    line-height:1.4;
}



.foot-brand-p {

    margin-top:25px;
    line-height:1.8;
    color:var(--footer-muted);
}



/* Social Icons */


.social-links {

    display:flex;
    gap:12px;
    margin-top:25px;
}


.social-links a {

    width:40px;
    height:40px;

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

    border-radius:50%;

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

    transition:var(--footer-transition);
}


.social-links a:hover {

    background:var(--footer-primary);
    transform:translateY(-5px);
}



/* Footer Columns */


.foot-col h4 {

    color:white;
    font-size:18px;
    margin-bottom:22px;
    position:relative;
}


.foot-col h4:after {

    content:"";
    position:absolute;

    left:0;
    bottom:-8px;

    width:45px;
    height:3px;

    background:var(--footer-accent);
}



.foot-col ul {

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



.foot-col li {

    margin-bottom:13px;
}



.foot-col a {

    color:var(--footer-muted);
    text-decoration:none;

    display:flex;
    align-items:center;
    gap:10px;

    transition:var(--footer-transition);
}



.foot-col a:hover {

    color:white;
    padding-left:6px;
}



.foot-contact li {

    display:flex;
    gap:12px;
    align-items:center;
}



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


.foot-bottom {

    margin-top:55px;

    padding-top:25px;

    border-top:
    1px solid var(--footer-border);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    color:var(--footer-muted);

    font-size:14px;
}


.foot-bottom-links {

    display:flex;
    gap:20px;
}


.foot-bottom-links a {

    color:var(--footer-muted);
    text-decoration:none;
}


.foot-bottom-links a:hover {

    color:white;
}



/* ==================================================
   FLOATING BUTTONS
================================================== */


.float-btn {

    position:fixed;

    right:25px;

    width:50px;
    height:50px;

    border-radius:50%;

    display:flex;

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

    color:white;

    text-decoration:none;

    font-size:22px;

    z-index:999;

    box-shadow:
    0 8px 25px rgba(0,0,0,.3);

    transition:.3s ease;
}



.back-to-top {

    bottom:90px;

    background:
    var(--footer-primary);

    opacity:0;
    visibility:hidden;

}



.back-to-top.show {

    opacity:1;
    visibility:visible;
}



.back-to-top:hover {

    transform:translateY(-5px);
}



.whatsapp-float {

    bottom:25px;

    background:#25D366;

}



.whatsapp-float:hover {

    transform:scale(1.1);
}



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


@media(max-width:1100px){


.foot-grid {

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

}

}



@media(max-width:768px){


.newsletter-inner {

flex-direction:column;

text-align:center;

}



.newsletter-form {

min-width:100%;
width:100%;

}



.foot-grid {

grid-template-columns:1fr;

}



.foot-bottom {

flex-direction:column;

text-align:center;

}


.foot-bottom-links {

flex-wrap:wrap;
justify-content:center;

}

}



@media(max-width:480px){


.newsletter-form {

display:block;

background:none;

}



.newsletter-form input {

width:100%;
border-radius:50px;
margin-bottom:10px;

}



.newsletter-form button {

height:45px;
width:100%;

}


.float-btn {

right:15px;

}

}