/*====================================================
KHAO KHAO
Premium Food Website
Author : MNAT
=====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --primary:#ff7a00;
    --secondary:#157347;
    --dark:#121212;
    --light:#ffffff;
    --gray:#6c757d;
    --bg:#f8f9fa;
    --shadow:0 15px 40px rgba(0,0,0,.08);
    --radius:20px;
    --transition:.35s ease;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#fff;
    color:#222;
    overflow-x:hidden;

}

a{

    text-decoration:none;
    transition:.3s;

}

img{

    max-width:100%;
    display:block;

}

/*==============================
TOP BAR
===============================*/

.top-bar{

    background:var(--secondary);
    color:#fff;
    padding:10px 0;
    font-size:14px;

}

.top-bar i{

    color:#FFD54F;
    margin-right:8px;

}

/*==============================
NAVBAR
===============================*/

.navbar{

    padding:16px 0;
    background:#fff !important;

}

.logo{

    height:65px;

}

.navbar-nav .nav-link{

    font-weight:600;
    color:#333;
    margin:0 12px;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.navbar-nav .active{

    color:var(--primary)!important;

}

.btn-warning{

    background:var(--primary);
    border:none;
    color:#fff;
    padding:12px 28px;
    border-radius:40px;
    font-weight:600;

}

.btn-warning:hover{

    background:#e46f00;
    color:#fff;

}

.btn-success{

    background:var(--secondary);
    border:none;
    border-radius:40px;
    font-weight:600;

}

.btn-success:hover{

    background:#0f5d2c;

}

.btn-outline-success{

    border:2px solid var(--secondary);
    color:var(--secondary);
    border-radius:40px;
    font-weight:600;

}

.btn-outline-success:hover{

    background:var(--secondary);
    color:#fff;

}

/*==============================
HERO
===============================*/

.hero{

    padding:100px 0;
    background:
    linear-gradient(135deg,#fff6ee,#fff);

}

.hero h1{

    font-size:70px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:25px;

}

.hero p{

    color:#666;
    font-size:18px;
    line-height:32px;

}

.hero-image{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

.hero-stats{

display:flex;
gap:50px;

}

.hero-stats h3{

font-size:36px;
font-weight:700;
color:var(--primary);

}

.hero-stats p{

margin:0;
font-size:15px;

}

/*==============================
SECTION TITLE
===============================*/

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title h2{

font-size:46px;
font-weight:700;

}

.section-title p{

color:#777;
font-size:18px;

}

/*==============================
CATEGORY CARD
===============================*/

.category-card{

background:#fff;
padding:35px;
text-align:center;
border-radius:20px;
box-shadow:var(--shadow);
transition:var(--transition);
cursor:pointer;

}

.category-card:hover{

transform:translateY(-10px);

}

.category-card .emoji{

font-size:60px;
margin-bottom:20px;

}

.category-card h5{

font-weight:600;

}

/*==============================
FEATURED FOOD
===============================*/

.featured-food{

padding:90px 0;
background:#fafafa;

}

.food-card{

background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.35s;

}

.food-card:hover{

transform:translateY(-12px);

}

.food-card img{

height:250px;
width:100%;
object-fit:cover;

}

.food-body{

padding:25px;

}

.food-body h4{

font-weight:700;
margin-bottom:12px;

}

.rating{

margin-bottom:15px;

}

.rating span{

font-size:14px;
color:#777;

}

.food-body h3{

color:var(--primary);
font-weight:700;
margin-bottom:20px;

}

/*==============================
CTA
===============================*/

.cta{

padding:80px 0;
background:
linear-gradient(135deg,
var(--primary),
#ff9500);

color:#fff;

}

.cta h2{

font-size:48px;
font-weight:700;

}

.cta p{

font-size:18px;

}

/*==============================
UTILITY
===============================*/

.badge{

padding:10px 20px;
font-size:14px;
border-radius:40px;

}

.shadow-sm{

box-shadow:0 10px 30px rgba(0,0,0,.08)!important;

}

.mt-5{

margin-top:3rem!important;

}

.py-5{

padding-top:90px!important;
padding-bottom:90px!important;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#eee;

}

/*==============================
SELECTION
===============================*/

::selection{

background:var(--primary);
color:#fff;

}

/*==============================
FOCUS
===============================*/

button:focus,
input:focus{

outline:none;
box-shadow:none;

}