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

.footer{

    position:relative;
    background:#0F172A;
    color:#CBD5E1;
    overflow:hidden;
    padding:0 0 15px;

}

/*=====================================
        TOP GRADIENT LINE
=====================================*/

.footer-top-line{

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #ff7a00,
        #ffb347,
        #00b8b8,
        #009688
    );

}

/*=====================================
        WATERMARK
=====================================*/

.footer::before{

    content:"Foodeato";

    position:absolute;

    right:5%;
    bottom:50px;

    font-size:220px;
    font-weight:900;

    color:#ffffff;

    opacity:.03;

    line-height:1;

    pointer-events:none;

}

/*=====================================
        GRID
=====================================*/

.footer .container{

    padding-top:50px;

}

/* ==========================================================
   BALANCED FOOTER — 3 COLUMNS
========================================================== */

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.15fr;
    gap: 70px;
    align-items: start;
}

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

.footer-logo{

    width:280px;

    margin-bottom:5px;


}

.footer-tagline{

    display:inline-block;

    margin-bottom:10px;

    color:#ff7a00;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.footer-brand p{

    color:#94A3B8;

    line-height:2;

    margin-bottom:15px;

}

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

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:48px;
    height:48px;

    border-radius:50%;

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

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

    color:#fff;

    font-size:18px;

    transition:.35s;

}

.footer-social a:nth-child(1):hover{

    background:#1877F2;

}

.footer-social a:nth-child(2):hover{

    background:#E1306C;

}

.footer-social a:nth-child(3):hover{

    background:#FF0000;

}

.footer-social a:nth-child(4):hover{

    background:#25D366;

}

.footer-social a:hover{

    transform:translateY(-6px);

}

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

.footer h4{

    color:#fff;

    font-size:22px;

    margin-bottom:28px;

    position:relative;

}

.footer h4::after{

    content:"";

    width:45px;

    height:3px;

    background:#ff7a00;

    position:absolute;

    left:0;

    bottom:-10px;

    border-radius:20px;

}

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

.footer-links ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-links li{

    margin-bottom:18px;

}

.footer-links a{

    color:#CBD5E1;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.footer-links a i{

    color:#ff7a00;

    font-size:12px;

}

.footer-links a:hover{

    color:#fff;

    padding-left:8px;

}

/*=====================================
        HOURS
=====================================*/

.hour-card{

    display:flex;

    gap:15px;

    margin-bottom:20px;

    padding:16px;

    border-radius:18px;

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

    transition:.35s;

}

.hour-card:hover{

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

    transform:translateY(-5px);

}

.hour-icon{

    width:46px;
    height:46px;

    border-radius:50%;

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

    background:#ff7a00;

    font-size:20px;

    flex-shrink:0;

}

.hour-card strong{

    display:block;

    color:#fff;

    margin-bottom:6px;

}

.hour-card span{

    color:#94A3B8;

    font-size:15px;

}

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

.contact-item{

    display:flex;

    gap:15px;

    margin-bottom:22px;

}

.contact-item i{

    color:#ff7a00;

    font-size:20px;

    margin-top:3px;

}

.contact-item strong{

    display:block;

    color:#fff;

    margin-bottom:4px;

}

.contact-item span{

    color:#94A3B8;

}

.footer-map-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:10px;

    padding:15px 26px;

    border-radius:50px;

    background:#009688;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.footer-map-btn:hover{

    background:#00b8b8;

    transform:translateY(-4px);

}

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

.footer-bottom{

    margin-top:15px;

    padding-top:18px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#94A3B8;

    font-size:15px;

}

.footer-bottom strong{

    color:#fff;

}

.footer-bottom-right{

    color:#ff7a00;

    font-weight:700;

    letter-spacing:1px;

}

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

@media(max-width:992px){

.footer-grid{

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

}

.footer-logo{

width:180px;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

gap:45px;

}

.footer-bottom{

flex-direction:column;

gap:15px;

text-align:center;

}

.footer::before{

display:none;

}

.footer-logo{

width:170px;

}

}

/*==================================================
            FLOATING CHEF
==================================================*/

.floating-chef{

    position:fixed;

    right:35px;

    top:15px;

    display:flex;

    align-items:flex-end;

    z-index:9998;

    transition:.45s ease;

}

/* Hidden */

.floating-chef.hide{

    transform:translateX(220px);

    opacity:0;

}

/* Chef */

.floating-chef img{

    width:150px;

    animation:chefFloat 4s ease-in-out infinite;

    user-select:none;

    pointer-events:none;

}

@keyframes chefFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/* Popup */

.chef-popup{

    background:#fff;

    padding:14px 18px;

    border-radius:18px;

    margin-right:15px;

    margin-top:0px;

    border:2px solid #FF7A00;

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

}

.chef-popup h5{

    color:#FF7A00;

    margin-bottom:6px;

    font-size:17px;

}

.chef-popup p{

    margin:0;

    font-size:14px;

    color:#555;

}

@media(max-width:768px){

.floating-chef{

display:none;

}

}

/* ==========================================================
   FOOTER — 60% HEIGHT
========================================================== */

.footer {
    transform: scaleY(0.8);
    transform-origin: bottom center;
    margin-top: -40%;
    margin-bottom: -40%;
}

/* ==========================================================
   FOOTER — NORMAL PAGE FLOW
========================================================== */

.footer {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
}