@font-face {
font-family: "Thephir";
src: url("../fonts/Thephir Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
}


* {box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #FAEBD8;
    text-align: center;
    margin: 0;
    padding-top: 90px;
}

h1 {
  font-family: 'Playfair Display', serif;
}

h2 {
    color: #A57421;
    margin-top: 20px;
    margin-bottom: 20px
}

ul {
    list-style: none;
    padding: 0;
}

li {
    background-color: white;
    width: 300px;
    margin: 10px auto;
    padding: 15px;
    border-radius: 10px;
}

.logo {
    letter-spacing: 1px;
}


button {
    background-color: #A57421;
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

button {
    transition: 0.3s;
}

button:focus {
    outline: none;
    box-shadow:none;
}

button a {
    color: white;
    text-decoration: none;
}

button a:visited {
    color: white;
}

button a:hover {
    text-decoration: none;
}

a {
    text-decoration: none;
}

.best-seller {
    background-color: white;
    width: 350px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 15px;
}


.logo {
    width: 150px;
    height: auto;
    margin: 0;
}


.hero{
display:flex;
justify-content:center;
align-items:center;
padding:70px 5%;
gap:10px;
background:#FDF7EF;
max-width:1400px;
margin:0 auto;
overflow:hidden;
}

.hero-text{
flex:.95;
display:flex;
flex-direction:column; 
gap:12px;
justify-content:flex-start;
align-items:center;
transform:translateY(-18px);
}

.hero-tag{
display:inline-block;
padding:6px 20px;
background:#FAEBD8;
color:#A57421;
border-radius:999px;
font-size:.8rem;
margin-bottom:10px;
font-weight:500;
width:fit-content;
align-self:flex-start;
}

.hero h1{
font-family:"Playfair Display",serif;
font-size:3.6rem;
color:#A57421;
line-height:1.05;
margin-bottom:18px;
margin-top:-8px;
}

.hero-description{
font-size:1.1rem;
line-height:1.8;
color:#494949;
max-width:520px;
margin-bottom:35px;
margin-top:-6px;
}

.hero-button{
display:inline-flex;
background:#A57421;
color:white;
text-decoration:none;
padding:18px 42px;
border-radius:50px;
font-weight:600;
transition:.3s;
align-items:center;
justify-content:center;
width:fit-content;
align-self:center;
}

.hero-button:hover{
background:#8c6318;
transform:translateY(-2px);
}

.hero-photo{
flex:.85;
display:flex;
justify-content:center;
align-items:center;
}

.hero-photo img{
width:100%;
height:auto;
max-width:420px;
border-radius:28px;
display:block;
object-fit:cover;
box-shadow:0 25px 60px rgba(0,0,0,.12);
}


.tagline {
    font-size: 42px;
    font-family: 'Playfair Display', serif;
    color: #A57421;
    margin-bottom: 15px;
}

.intro {
    font-size: 18px;
    line-height: 1.6;
}

.page-content {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
}

.page-content h2 {
    color: #A57421;
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.menu-card {
    background-color: white;
    width: 220px;
    margin: 20px auto;
    padding: 30px;
        padding: 40px; /* Removed !important */
        padding: 12px 10px;
        width: 92%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.menu-card h3 {
    color: #A57421;
    margin-bottom: 15px;
}

.menu-image {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 20px;
}

.menu-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}


input,
select,
textarea {
    width: 80%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
}

textarea {
    height: 120px;
}

form button {
    background-color: #A57421;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
}

.featured {
    padding-top: 10px;
}

.featured h2 {
    color: #A57421;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    margin-bottom: 40px;
}

.favorites {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.favorite-card {
    background: white;
    width: 300px;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    border-top: 4px solid #A57421;
}

.favorite-card:hover {
    transform: translateY(-5px);
}

.favorite-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    color: #A57421;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.favorite-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
}

.story-section {
    width: 95%;
    max-width: none;
    margin: 40px auto 20px auto;
    margin-top: 90px;
    text-align: center;
    padding: 40px;
    background: rgba(255,255,255,0.5);
    border-radius: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.story-section h2 {
    color: #A57421;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    margin-bottom: 20px;
}

.story-section p {
    font-size: 18px;
    line-height: 1.8;
    max-width:900px;
    margin: auto;
}



.cta-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient (
        to bottom,
        transparent,
        rgba (165,116,33,0.08));
        border-radius: 30px;
}

.cta-button {
    display: inline-block;
    background-color: #A57421;
    color: white;
    text-decoration: none;
    padding: 16px 36px;
    border-radius: 30px;
    margin-top: 25px;
    font-weight: bold;
    transition: 0.3s;
}

.cta-section p {
    max-width: 600px;
    margin: 15px auto;
    line-height: 1.7;
}

.cta-section h2 {
    font-size: 48px;
}

.cta-button:hover {
    transform: translateY(-2px);
}

.menu-subtitle {
    text-align: center;
    color: #666;
    font-size: 18px;
    margin-bottom: 40px;
}

.contact-card {
    background-color: white;
    width: 650px;
    max-width: 90%;
    margin: 20px auto;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.contact-card h3 {
    margin-top: 30px;
    color: #A57421;
}

.contact-card a {
    color: #A57421;
    text-decoration: underline;
   text-decoration-color: #edcca5;
    text-underline-offset: 4px;
}

.contact-card a:hover {
    text-decoration-color: #A57421;
}


.favorite-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
}



/* ===========================
FROM OUR KITCHEN
=========================== */

.home-gallery{
max-width:1200px;
margin:120px auto;
padding:0 40px;
}

.gallery-layout{
display:grid;
grid-template-columns:340px 1fr;
gap:45px;
align-items:start;
}

.gallery-text span{
display:block;
color:#B8860B;
letter-spacing:3px;
font-size:.8rem;
margin-bottom:15px;
}

.gallery-text h2{
font-family:"Cormorant Garamond", serif;
font-size:3rem;
line-height:1.1;
color:#4b3c36;
font-weight:500;
margin-bottom:20px;
}

.gallery-text p{
color:#666;
line-height:1.9;
margin-bottom:35px;
}

.gallery-button{
display:inline-block;
padding:15px 38px;
background:#B8860B;
color:white;
text-decoration:none;
border-radius:999px;
font-weight:600;
transition:.3s;
margin-top:24px;
}

.gallery-button:hover{
background:#9d7209;
}


/* Gallery */

.gallery-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}


/* Images */

.gallery-grid img{
width:100%;
display:block;
border-radius:18px;
object-fit:cover;
transition:.35s ease;
}

.gallery-grid img:hover{
transform:translateY(-6px);
}


/* Different Sizes */

.gallery-grid img:nth-child(1){
height:290px;
grid-row:span 2;
}

.gallery-grid img:nth-child(2){
height:140px;
}

.gallery-grid img:nth-child(3){
height:140px;
}

.gallery-grid img:nth-child(4){
grid-column:span 2;
height:180px;
}




.menu-toggle, 
#mobile-menu {
    display: none;
}


/* ===================================
SIGNATURE COLLECTION
=================================== */

.signature-section{

padding:120px 8%;

background:#fff;

}

.section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-tag{

display:inline-block;

padding:8px 22px;

background:#FAEBD8;

color:#A57421;

border-radius:999px;

font-size:.85rem;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:18px;

}

.section-heading h2{

font-family:"Cormorant Garamond",serif;

font-size:3.5rem;

line-height:1.15;

color:#494949;

margin-bottom:22px;

}

.section-description{

font-size:.95rem;

line-height:1.7;

color:#6f6f6f;

}

.signature-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:stretch;

}

.signature-large{

background:#FDF8F2;

border-radius:28px;

overflow:hidden;

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

}

.signature-large img{

width:100%;

height:450px;

object-fit:cover;

display:block;

}

.signature-content{

padding:45px;

}

.signature-content span{

color:#A57421;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

}

.signature-content h3{

font-family:"Cormorant Garamond",serif;

font-size:2.6rem;

margin:15px 0;

color:#494949;

}

.signature-content p{

line-height:1.9;

margin-bottom:35px;

color:#666;

}

.signature-small{

display:flex;

flex-direction:column;

gap:35px;

}

.mini-card{

background:#FDF8F2;

border-radius:24px;

overflow:hidden;

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

transition:.3s;

}

.mini-card:hover{

transform:translateY(-8px);

}

.mini-card img{

width:100%;

height:220px;

object-fit:cover;

}

.mini-card h4{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

margin:25px;

color:#494949;

}

.mini-card p{

margin:0 25px 30px;

line-height:1.8;

color:#666;

}





/* ===================================
HOME STORY
=================================== */

.home-story{

padding:120px 8%;

background:#FDF8F2;

}

.home-story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.home-story-image{

display:flex;

justify-content:center;

}

.home-story-image img{

width:100%;

max-width:430px;

border-radius:28px;

display:block;

box-shadow:0 20px 45px rgba(0,0,0,.10);

transition:.35s;

}

.home-story-image img:hover{

transform:translateY(-8px);

}

.home-story-content{

text-align:left;

}

.home-story-content h2{

font-family:"Cormorant Garamond",serif;

font-size:3.5rem;

line-height:1.15;

color:#494949;

margin:20px 0;

}

.home-story-content p{

font-size:1.05rem;

line-height:1.9;

color:#666;

margin-bottom:25px;

max-width:550px;

}






/* ===================================
ABOUT PAGE
=================================== */

.about-hero{
margin-top:0;
padding-top: 0;
height:65vh;
background:url("../images/popup-shop-cakes.jpg.jpeg") center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.about-overlay{
width:100%;
height:100%;
background:rgba(0,0,0,.50);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:white;
padding:20px;
}

.about-eyebrow{
letter-spacing:3px;
text-transform:uppercase;
font-size:.85rem;
margin-bottom:20px;
}

.about-overlay h1{
font-size:4rem;
font-family:"Cormorant Garamond",serif;
margin-bottom:20px;
}

.about-subtitle{
max-width:650px;
line-height:1.8;
font-size:1.2rem;
}

.about-intro{
padding:100px 8%;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.about-text span{
color:#A57421;
letter-spacing:2px;
text-transform:uppercase;
font-weight:600;
}

.about-text h2{
font-family:"Cormorant Garamond",serif;
color:#494949;
font-size:3rem;
margin:20px 0;
}

.about-text p{
line-height:1.8;
color:#666;
margin-bottom:24px;
}

.about-image {
    display: flex;
    justify-content: center;
    align-items: center;

}

.about-image img{
width:100%;
max-width: 380px;
height: auto;
border-radius:25px;
box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.popup-story{
background:#FDF8F2;
padding:100px 8%;
}

.story-container{
max-width:850px;
margin:auto;
text-align:center;
}

.story-container h2{
font-family:"Cormorant Garamond",serif;
font-size:3rem;
color:#494949;
margin-bottom:15px;
}

.story-date{
color:#A57421;
font-weight:600;
margin-bottom:35px;
}

.story-container p{
line-height:2;
color:#666;
margin-bottom:22px;
}

.values{
padding:100px 8%;
}

.values h2{
text-align:center;
font-size:3rem;
font-family:"Cormorant Garamond",serif;
margin-bottom:60px;
}

.values-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

.value-card{
background:white;
padding:40px;
border-radius:22px;
box-shadow:0 12px 35px rgba(0,0,0,.08);
text-align:center;
}

.value-card h3{
color:#A57421;
margin-bottom:20px;
}

.timeline{
background:#fff;
padding:80px 8% 100px;
}

.timeline h2{
text-align:center;
font-family:"Cormorant Garamond",serif;
font-size:3rem;
margin-bottom:60px;
}

.timeline-item{
max-width:750px;
margin:0 auto 35px;
padding-left:25px;
border-left:4px solid #A57421;
}

.timeline-item h3{
color:#A57421;
margin-bottom:10px;
}

.timeline-item p{
color:#666;
line-height:1.8;
}

.about-cta{
background:#A57421;
color:white;
text-align:center;
padding:100px 8%;
}

.about-cta h2{
font-family:"Cormorant Garamond",serif;
font-size:3rem;
margin-bottom:25px;
}

.about-cta p{
max-width:700px;
margin:0 auto 35px;
line-height:1.9;
}

.about-cta .hero-button{
background:white;
color:#A57421;
}





@media (max-width: 768px) {
    

.logo {
width: 70px;
}

    .hero {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-top: 20px;
        gap: 30px;
    }

    .hero-text {
        max-width: 600px;
        text-align: center;
    }

    .hero-photo img {
        width: 280px;
        max-width: 90%;
        height: auto;
    }

    .hero-photo {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }


    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .gallery-grid img {
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .favorites {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .tagline {
        font-size: 1.8rem;
    }

    .favorite-card {
        width: 90%;
        max-width: 350px;
    }



    /* ===== ABOUT PAGE ===== */

.about-hero{
height:320px;
}

.about-overlay h1{
font-size:2.8rem;
}

.about-subtitle{
font-size:1rem;
max-width:320px;
line-height:1.6;
}

.about-intro{
padding:70px 8%;
}

.about-grid{
grid-template-columns:1fr;
gap:40px;
}

.about-text{
order:2;
text-align:center;
}

.about-image{
order:1;
}

.about-image img{
max-width:300px;
width:90%;
}

.about-text h2{
font-size:2.5rem;
}

.about-text p{
line-height:1.9;
}

.popup-story,
.values,
.timeline,
.about-cta{
padding:70px 8%;
}

.story-container h2,
.values h2,
.timeline h2,
.about-cta h2{
font-size:2.3rem;
}

.values-grid{
grid-template-columns:1fr;
}

.value-card{
padding:30px;
}

.timeline-item{
margin-bottom:30px;
}

.about-cta p{
line-height:1.8;
}
    

}