.site-footer{

    background:var(--footer-bg);

    color:var(--footer-text);

    padding:35px 0 20px;

}

/* TOP */

.footer-top{

    text-align:center;

    margin-bottom:25px;

}

.footer-logo img{

    max-height:70px;

    width:auto;

}

.footer-desc{

    margin-top:10px;

    font-size:14px;

    opacity:.9;

}

/* CONTENT */

.footer-content{

    align-items:flex-start;

}

.footer-title{

    font-size:16px;

    font-weight:600;

    margin-bottom:10px;

}

.footer-menu{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-menu li{

    margin-bottom:6px;

    font-size:14px;

}

.footer-menu a{

    color:inherit;

    text-decoration:none;

}

.footer-menu a:hover{

    opacity:.8;

}

.footer-menu i{

    margin-right:6px;

}

.footer-address{

    margin:0;

    font-size:14px;

    line-height:1.6;

}

/* BOTTOM */

.footer-bottom{

    margin-top:20px;

    padding-top:15px;

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

    text-align:center;

    font-size:14px;

}

/* MOBILE */

@media(max-width:768px){

    .site-footer{

        padding:25px 0 15px;

    }

    .footer-top{

        margin-bottom:20px;

    }

    .footer-logo img{

        max-height:60px;

    }

    .footer-desc{

        font-size:13px;

        margin-top:8px;

    }

    .footer-content{

        row-gap:15px;

    }

    .footer-title{

        font-size:15px;

        margin-bottom:8px;

    }

    .footer-menu li{

        font-size:13px;

        margin-bottom:4px;

    }

    .footer-address{

        font-size:13px;

        text-align:center;

    }

    .footer-bottom{

        margin-top:15px;

        padding-top:12px;

        font-size:13px;

    }

}
/* =============================================================
   MOBILE BOTTOM MENU
============================================================= */

/* Desktop: ซ่อน */
.mobile-bottom-menu {
    display: none;
}


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

/* =============================================================
   MOBILE BOTTOM MENU
============================================================= */

/* Desktop: ซ่อน */
.mobile-bottom-menu {
    display: none;
}


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

@media (max-width: 768px) {

    .mobile-bottom-menu {

        position: fixed;

        left: 15px;

        bottom: 15px;

        width: auto;

        display: flex;

        gap: 12px;

        align-items: center;

        z-index: 99990;

    }


    /* =========================================================
       BUTTON BASE
    ========================================================= */

    .mobile-bottom-item {

        width: 60px;

        height: 60px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        border-radius: 50%;

        text-decoration: none;

        overflow: hidden;

        box-shadow: 0 4px 15px rgba(0,0,0,.20);

        transition: .2s ease;

    }


    /* =============================================================
   TAXI
   เหลืองด้านบน / น้ำเงินด้านล่าง
============================================================= */

.mobile-bottom-item.taxi {

    position: relative;

    background: linear-gradient(
        to bottom,
        #f9e501 0%,
        #f9e501 50%,
        #0451e0 50%,
        #0451e0 100%
    ) !important;

    color: #ffffff !important;

}


/* TAXI ICON */

.mobile-bottom-item.taxi i {

    position: absolute;

    top: 9px;

    left: 0;

    right: 0;

    text-align: center;

    font-size: 21px;

    color: #124F70 !important;

}


/* TAXI TEXT */

.mobile-bottom-item.taxi span {

    position: absolute;

    bottom: 9px;

    left: 0;

    right: 0;

    text-align: center;

    margin: 0;

    font-size: 9px;

    font-weight: 700;

    color: #ffffff !important;

}


    /* =============================================================
   TOURS
============================================================= */

.mobile-bottom-item.tours {

    background: #D9A400 !important;

    color: #124F70 !important;

}


/* TOURS ICON */

.mobile-bottom-item.tours i {

    color: #124F70 !important;

}


/* TOURS TEXT */

.mobile-bottom-item.tours span {
            margin-top: 5px;

        font-size: 9px;

        font-weight: 600;

        line-height: 1;

    color: #710f02 !important;

}


  


    /* =========================================================
       HOVER
    ========================================================= */

    .mobile-bottom-item:hover {

        transform: translateY(-3px);

    }

}