/* ==========================================
   SESAMO BAKERY PIZZA
   Premium Restaurant Style
========================================== */

:root{

    --primary:#c62828;
    --primary-dark:#9f1d1d;
    --cream:#faf7f2;
    --card:#ffffff;
    --text:#222;
    --muted:#666;
    --shadow:0 18px 40px rgba(0,0,0,.12);

}

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--cream);
    color:var(--text);

}


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

.hero{

    min-height:65vh;

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

    text-align:center;

    color:white;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("content/03/pizza_sesamo_gourmet.jpg");

    background-size:cover;
    background-position:center;

    position:relative;

}

.hero::after{

    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:120px;

    background:linear-gradient(transparent,var(--cream));

}

.hero-content{

    position:relative;
    z-index:2;

}

.hero h1{

    font-family:'Playfair Display',serif;

    font-size:4rem;

    letter-spacing:3px;

    margin-bottom:20px;

}

.subtitle{

    font-size:1.25rem;

    margin-bottom:30px;

    opacity:.95;

}

.order-button{

    border-radius:50px;

    padding:16px 36px;

    font-weight:600;

    font-size:1.15rem;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

}


/* ==========================================
SEARCH
========================================== */

.search-section{

    margin-top:-40px;

    position:relative;

    z-index:10;

}

#search{

    border:none;

    border-radius:50px;

    padding:18px 25px;

    font-size:18px;

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

}

#search:focus{

    box-shadow:0 0 0 4px rgba(198,40,40,.2);

}


/* ==========================================
MENU
========================================== */

.menu{

    padding:70px 0;

}

.pizza-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.pizza-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.image{

    position:relative;

    overflow:hidden;

}

.image img{

    width:100%;
    height:260px;

    object-fit:cover;

    transition:.45s;

}

.pizza-card:hover img{

    transform:scale(1.08);

}


/* ==========================================
PRICE BADGE
========================================== */

.price{

    position:absolute;

    right:15px;

    top:15px;

    background:var(--primary);

    color:white;

    padding:10px 16px;

    border-radius:40px;

    font-weight:700;

    font-size:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.25);

}


/* ==========================================
CONTENT
========================================== */

.content{

    padding:28px;

}

.content h3{

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:14px;

}

.content p{

    color:var(--muted);

    line-height:1.7;

    min-height:85px;

}


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

.content .btn{

    border-radius:50px;

    padding:12px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.3s;

}

.content .btn:hover{

    transform:translateY(-2px);

}


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

footer{

    background:#1f1f1f;

    color:white;

    text-align:center;

    padding:60px 20px;

}

footer h3{

    font-family:'Playfair Display',serif;

    margin-bottom:15px;

}

footer p{

    opacity:.8;

}

footer a{

    color:#fff;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

}


/* ==========================================
FLOATING BUTTON
========================================== */

.floating-order{

    position:fixed;

    right:25px;

    bottom:25px;

    width:72px;

    height:72px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    box-shadow:0 20px 40px rgba(0,0,0,.3);

    transition:.3s;

    z-index:1000;

}

.floating-order:hover{

    transform:scale(1.12);

    background:var(--primary-dark);

    color:white;

}


/* ==========================================
ANIMATIONS
========================================== */

.pizza-card{

    animation:fadeUp .6s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:992px){

.hero h1{

    font-size:3rem;

}

.image img{

    height:230px;

}

}

@media(max-width:768px){

.hero{

    min-height:55vh;

    padding:40px 20px;

}

.hero h1{

    font-size:2.3rem;

}

.subtitle{

    font-size:1rem;

}

.order-button{

    width:100%;

}

.content p{

    min-height:auto;

}

.floating-order{

    width:60px;
    height:60px;
    font-size:26px;

}

}

@media(max-width:576px){

.image img{

    height:210px;

}

.hero h1{

    letter-spacing:1px;

}

}