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

:root{

    --footer-bg:#0F172A;
    --footer-light:#1E293B;
    --footer-border:rgba(255,255,255,.08);

    --primary:#2563EB;
    --primary-dark:#1D4ED8;

    --text:#E2E8F0;
    --muted:#94A3B8;

    --white:#ffffff;

    --radius:18px;

    --transition:.35s ease;

}


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

.footer{

    background:var(--footer-bg);

    color:var(--text);

    position:relative;

    margin-top:120px;

    overflow:hidden;

}


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

.footer-newsletter{

    transform:translateY(-70px);

    margin-bottom:-30px;

}

.newsletter-box{

    background:linear-gradient(135deg,#2563EB,#1D4ED8);

    border-radius:22px;

    padding:45px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    color:#fff;

    box-shadow:
    0 30px 70px rgba(37,99,235,.35);

}

.newsletter-content{

    flex:1;

}

.newsletter-content h2{

    font-size:2rem;

    margin-bottom:15px;

    font-weight:700;

}

.newsletter-content p{

    opacity:.9;

    line-height:1.8;

}

.newsletter-form{

    width:470px;

    display:flex;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

}

.newsletter-form input{

    flex:1;

    border:none;

    outline:none;

    padding:18px 25px;

    font-size:15px;

}

.newsletter-form button{

    border:none;

    padding:0 35px;

    background:#0F172A;

    color:#fff;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.newsletter-form button:hover{

    background:#111827;

}


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

.footer-main{

    padding:70px 0;

}

.footer-grid{

    display:grid;

    grid-template-columns:

    1.4fr
    1fr
    1fr
    1.2fr;

    gap:55px;

}


/* ==========================================================
   COMPANY
========================================================== */

.footer-logo{

    width:190px;

    margin-bottom:25px;

}

.footer-company p{

    color:var(--muted);

    line-height:1.9;

    margin-bottom:30px;

}


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

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:#fff;

    background:rgba(255,255,255,.06);

    transition:var(--transition);

    font-size:17px;

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-6px);

}


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

.footer-column h4{

    margin-bottom:28px;

    color:#fff;

    font-size:20px;

    position:relative;

}

.footer-column h4::after{

    content:"";

    width:45px;

    height:3px;

    background:var(--primary);

    display:block;

    margin-top:10px;

    border-radius:20px;

}


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

.footer-column ul{

    list-style:none;

    padding:0;

}

.footer-column ul li{

    margin-bottom:16px;

}

.footer-column ul li a{

    color:var(--muted);

    text-decoration:none;

    transition:.3s;

    position:relative;

}

.footer-column ul li a:hover{

    color:#fff;

    padding-left:10px;

}


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

.footer-contact li{

    display:flex;

    gap:15px;

    align-items:flex-start;

    color:var(--muted);

    line-height:1.8;

}

.footer-contact i{

    color:var(--primary);

    margin-top:5px;

}
/* ==========================================================
   TRUST SECTION
========================================================== */

.footer-trust{

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

    padding:35px 0;

}

.trust-grid{

    display:grid;

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

    gap:25px;

}

.trust-grid div{

    background:rgba(255,255,255,.04);

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

    border-radius:15px;

    padding:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    color:var(--text);

    font-weight:600;

    transition:.35s;

}

.trust-grid div:hover{

    background:var(--primary);

    transform:translateY(-6px);

}

.trust-grid i{

    font-size:22px;

}



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

.footer-bottom{

    padding:28px 0;

}

.footer-bottom-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:var(--muted);

    margin:0;

}

.footer-links{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.footer-links a{

    color:var(--muted);

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#fff;

}



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

.floating-buttons{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:999;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.float-btn{

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    text-decoration:none;

    color:#fff;

    font-size:20px;

    transition:.35s;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.float-btn:hover{

    transform:translateY(-8px) scale(1.08);

}

.whatsapp{

    background:#25D366;

}

.phone{

    background:#2563EB;

}

.top{

    background:#0F172A;

}



/* ==========================================================
   SCROLLBAR
========================================================== */

.footer ::-webkit-scrollbar{

    width:6px;

}

.footer ::-webkit-scrollbar-thumb{

    background:var(--primary);

}



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

@media(max-width:992px){

.footer-grid{

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

}

.newsletter-box{

flex-direction:column;

text-align:center;

}

.newsletter-form{

width:100%;

max-width:600px;

}

.trust-grid{

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

}

}



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

@media(max-width:768px){

.footer{

margin-top:90px;

}

.footer-newsletter{

transform:none;

margin-bottom:0;

padding-top:60px;

}

.newsletter-box{

padding:30px;

border-radius:18px;

}

.newsletter-content h2{

font-size:28px;

}

.newsletter-form{

flex-direction:column;

border-radius:18px;

background:none;

gap:15px;

}

.newsletter-form input{

border-radius:14px;

padding:16px;

}

.newsletter-form button{

padding:16px;

border-radius:14px;

}

.footer-main{

padding:60px 0;

}

.footer-grid{

grid-template-columns:1fr;

gap:45px;

}

.trust-grid{

grid-template-columns:1fr;

}

.footer-bottom-wrapper{

flex-direction:column;

text-align:center;

}

.footer-links{

justify-content:center;

}

.floating-buttons{

right:18px;

bottom:18px;

}

.float-btn{

width:50px;

height:50px;

font-size:18px;

}

}



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

@media(max-width:480px){

.newsletter-content h2{

font-size:24px;

}

.newsletter-box{

padding:25px;

}

.footer-column h4{

font-size:18px;

}

.footer-social{

justify-content:center;

flex-wrap:wrap;

}

.footer-company{

text-align:center;

}

.footer-contact li{

font-size:14px;

}

.footer-links{

gap:14px;

}

}