/* =====================================================
BTF AGENCY
GLOBAL STYLE CSS
CLEAN CORPORATE VERSION
===================================================== */


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:#f7fbff;

    color:#1e293b;

}



a{

    text-decoration:none;

}



img{

    max-width:100%;

    display:block;

}



.container{

    width:92%;

    max-width:1200px;

    margin:auto;

}



/* =====================================================
HEADER
===================================================== */


.main-header{

    background:#ffffff;

    position:sticky;

    top:0;

    z-index:999;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



.header-container{

    min-height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* BRAND */


.brand{

    display:flex;

    align-items:center;

    gap:12px;

    color:#063b70;

}



.brand img{

    width:62px;

    height:62px;

    object-fit:contain;

}



.brand-text h1{

    font-size:24px;

    line-height:1.2;

    color:#063b70;

}



.brand-text p{

    margin-top:3px;

    font-size:10px;

    font-weight:700;

    color:#64748b;

}






/* NAV */


.main-nav{

    display:flex;

    align-items:center;

    gap:18px;

}



.main-nav>a{

    color:#334155;

    font-size:14px;

    font-weight:600;

    padding:8px 5px;

    transition:.3s;

}



.main-nav>a:hover{

    color:#00875f;

}





/* LOGIN BUTTON */


.nav-buttons{

    display:flex;

    gap:8px;

    margin-left:10px;

}



.nav-buttons a{

    background:#063b70;

    color:white!important;

    padding:9px 16px;

    border-radius:22px;

    font-size:13px;

    font-weight:700;

    transition:.3s;

}



.nav-buttons a:hover{

    background:#00875f;

}






/* MOBILE BUTTON */


.menu-toggle{

    display:none;

    width:42px;

    height:42px;

    border:0;

    border-radius:10px;

    background:#063b70;

    color:white;

    font-size:22px;

    cursor:pointer;

}






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


.main-footer{

    background:#063b70;

    color:white;

    padding:60px 0 20px;

}



.footer-grid{

    display:grid;

    grid-template-columns:
    1.4fr 1fr 1fr 1.2fr;

    gap:35px;

}



.footer-brand{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}



.footer-brand img{

    width:55px;

    height:55px;

}



.footer-brand h3{

    font-size:22px;

    margin:0;

}



.footer-brand span{

    font-size:10px;

    color:#bfdbfe;

}



.footer-box p{

    color:#dbeafe;

    line-height:1.7;

    font-size:14px;

}



.footer-box h4{

    font-size:20px;

    margin-bottom:20px;

}



.footer-links a{

    display:block;

    color:#dbeafe;

    margin-bottom:10px;

    font-size:14px;

}



.footer-links a:hover{

    color:white;

}
/* =====================================================
BTF AGENCY
STYLE CSS PART 2
FOOTER + MOBILE FINAL FIX
===================================================== */


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


.main-footer{

    background:
    linear-gradient(
        135deg,
        #063b70,
        #075985,
        #00875f
    );

    color:white;

    padding:55px 0 20px;

    margin-top:60px;

}



.footer-grid{

    display:grid;

    grid-template-columns:
    1.4fr 1fr 1fr 1.2fr;

    gap:35px;

    align-items:start;

}




.footer-box{

    min-width:0;

}




.footer-brand{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}



.footer-brand img{

    width:55px;

    height:55px;

    object-fit:contain;

}




.footer-brand h3{

    margin:0;

    font-size:22px;

    color:#ffffff;

}



.footer-brand span{

    display:block;

    margin-top:4px;

    font-size:10px;

    color:#cbd5e1;

}





.footer-box h4{

    margin:0 0 18px;

    font-size:19px;

    color:white;

}



.footer-box p{

    margin:0 0 12px;

    color:#dbeafe;

    font-size:14px;

    line-height:1.7;

}





.footer-links a{

    display:block;

    color:#dbeafe;

    font-size:14px;

    margin-bottom:11px;

    transition:.3s;

}



.footer-links a:hover{

    color:white;

    transform:translateX(4px);

}





/* EXPERIENCE BOX */


.footer-experience{

    margin-top:20px;

    padding:15px;

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

    border-radius:12px;

}



.footer-experience strong{

    display:block;

    font-size:22px;

    color:white;

}



.footer-experience span{

    color:#bfdbfe;

    font-size:13px;

}





/* CONTACT */


.contact-item{

    display:flex;

    gap:10px;

    align-items:flex-start;

    margin-bottom:14px;

}



.contact-item span{

    font-size:18px;

}



.contact-item a{

    color:#dbeafe;

    display:block;

    margin-bottom:5px;

}





/* WHATSAPP */


.footer-whatsapp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:12px;

    padding:12px 22px;

    background:#25D366;

    color:white!important;

    border-radius:30px;

    font-weight:700;

    transition:.3s;

}



.footer-whatsapp:hover{

    transform:translateY(-3px);

}




/* BOTTOM */


.footer-bottom{

    margin-top:45px;

    padding-top:20px;

    border-top:

    1px solid rgba(255,255,255,.25);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}



.footer-bottom p{

    margin:0;

    color:#dbeafe;

    font-size:13px;

}



.footer-bottom a{

    color:#ffffff;

    font-size:13px;

}



.footer-bottom span{

    color:#bfdbfe;

    margin:0 8px;

}





/* WHATSAPP FLOAT */


.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    z-index:9999;

    box-shadow:

    0 10px 30px rgba(0,0,0,.25);

}





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


@media(max-width:900px){


    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:30px;

    }


}



@media(max-width:600px){


    .footer-grid{

        grid-template-columns:1fr;

    }


    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }


    .main-footer{

        padding:45px 0 20px;

    }


}