:root{

--pistachio:#8fbf3f;
--dark-green:#1c2d12;
--gold:#d4af37;

}

body{

font-family:Arial, sans-serif;
margin:0;
background:white;
transition:0.3s;

}

/* loader */

#loader{

position:fixed;
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:white;
z-index:9999;

}

/* navbar */

.custom-nav{

background:var(--pistachio);
padding:12px 0;

}

.brand{

display:flex;
align-items:center;
gap:10px;

}

.logo{

height:45px;

}

.brand-title{

color:white;
margin:0;
font-weight:600;

}

.nav-right{

display:flex;
align-items:center;
gap:25px;

}

.nav-right a{

color:white;
text-decoration:none;
font-weight:500;

}

/* hero */

.hero{

padding:120px 0;
background:linear-gradient(#eef6e3,#ffffff);

}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.title-row{

display:flex;
align-items:center;
gap:20px;

}

.hero-logo{

height:60px;

}

.title-slide{

font-size:64px;
color:var(--pistachio);
animation:slideIn 1.5s;

}

@keyframes slideIn{

from{
transform:translateX(-200px);
opacity:0;
}

to{
transform:translateX(0);
opacity:1;
}

}

.dessert-text{

margin-top:20px;
font-size:17px;
line-height:1.7;

}

.location{

margin-top:15px;
font-weight:600;
color:#666;

}

/* dessert image */

.dessert-card{

position:relative;

}

.dessert-img{

width:100%;
border-radius:18px;
box-shadow:0 25px 60px rgba(0,0,0,0.15);

}

.logo-watermark{

position:absolute;
bottom:15px;
right:15px;
height:40px;
opacity:0.9;

}

/* sections */

.section{

padding:100px 0;

}

.section-title{

color:var(--pistachio);
margin-bottom:20px;

}

.contact{

background:#f7f7f7;

}

/* footer */

footer{

text-align:center;
padding:20px;
background:var(--dark-green);
color:white;

}

/* toggle switch */

.switch {

position: relative;
display: inline-block;
width: 40px;
height: 20px;

}

.switch input {

opacity: 0;

}

.slider {

position: absolute;
cursor: pointer;
background: #ccc;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;

}

.slider:before {

position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background: white;
border-radius: 50%;
transition: 0.3s;

}

input:checked + .slider {

background: var(--gold);

}

input:checked + .slider:before {

transform: translateX(20px);

}

/* dark mode */

.dark-mode{

background:#111;
color:white;

}

.dark-mode .hero{

background:#1a1a1a;

}

.dark-mode .contact{

background:#222;

}