/* Reset und Basis-Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-purple: #2d1b69;
    --primary-pink: #ff6b9d;
    --primary-yellow: #feca57;
    --primary-green: #11998e;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --dark-gray: #333333;
    --text-gray: #666666;
    
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.2);
    
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

body {font-family:var(--font-body); line-height:1.6; color:var(--dark-gray);
    /* overflow-x: hidden; */
}




/* html {box-sizing: border-box;}
*, :after, :before {box-sizing: inherit;}
html, body {margin:0; padding:0; height:100%;}


body input:focus:required:invalid,
body textarea:focus:required:invalid {

}
body input:required:valid,
body textarea:required:valid {

}

body {font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size:16px; font-weight:400; line-height:1.6; color:var(--text); background-color:#fff;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;} */

/*
ol,ul{list-style:none; margin:0; padding:0; } */
p{margin:0 0 1.5rem;}

img, object, embed, video, iframe {max-width:100%;}
img {height:auto;}

a {color:var(--primary-pink); outline:none; text-decoration:none; transition: all .3s ease-in-out;}
a:hover {color:#d10047; }

blockquote{quotes:none;}
blockquote:before,
blockquote:after {content:"";	content:none;}
blockquote {font-style:italic; margin:20px 0 30px; padding-left:20px; border-left:5px solid var(--primary-pink);}
 
	table {width:100%; border:none; max-width:100%; overflow:auto;}
        
form label {font-weight:600; margin-bottom:0.5rem; color:var(--primary);}
form input,
form textarea {padding:1rem; border:2px solid transparent; border-radius:var(--border-radius); font-family:var(--font-body); transition:var(--transition); background:var(--white); width: 100%;/* font-size:1rem; */}
form input:focus,
form textarea:focus {outline:none; border-color: var(--primary-pink);}

/* *::-webkit-input-placeholder {color:#000; opacity:0.3; font-weight:300;}
*:-moz-placeholder {color:#000; opacity:0.3; font-weight:300;}
*::-moz-placeholder {color:#000; opacity:0.3; font-weight:300;}
*:-ms-input-placeholder {color:#000; opacity:0.3; font-weight:300;} */


button{padding:0; border:none; cursor:pointer; background-color:transparent;}
input[type=submit],
.submit-button {background:linear-gradient(135deg, var(--primary-green), var(--primary-purple)); color:var(--white); padding:1rem 2rem; border:none; border-radius:var(--border-radius); font-weight:600; cursor:pointer; transition:var(--transition); box-shadow:var(--shadow-medium); width:auto;}
input[type=submit]:hover,
.submit-button:hover {transform:translateY(-2px); box-shadow:var(--shadow-heavy);}
 
h1,h2,h3,h4,h5,h6 {font-family:var(--font-heading);font-weight:700; margin:0 0 1rem; line-height:1.2; /* color: var(--primary-purple); */}
h1 {font-size:2.8rem;}
h2 {font-size:2rem;}
h3 {font-size:1.5rem;}
h4 {font-size:1.375rem;}
h5 {font-size:1.25rem;}
h6 {font-size:1rem;}

.container {max-width:1200px; margin:0 auto; padding:0 20px;}

.main_menu {display:flex; gap:2rem; list-style:none;}        
.main_menu a {text-decoration:none; color:var(--dark-gray); transition:var(--transition); position:relative;}
.main_menu a:hover {color:var(--primary-pink);}
.main_menu > li > a {font-weight:500;}
.main_menu > li > a::after {content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--primary-pink); transition:var(--transition);}
.main_menu > li > a:hover::after {width:100%;}
.menu-item-has-children {position:relative;}
.sub-menu {position:absolute; top:100%; left:0; background:var(--white); box-shadow:var(--shadow-medium); border-radius:var(--border-radius); padding:1rem 0; min-width:200px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:var(--transition); list-style:none;}
.main_menu li:hover > ul.sub-menu{opacity:1; visibility:visible; transform: translateY(0);}
.main_menu .sub-menu li {padding:0.5rem 1.5rem;}
	.main_menu .sub-menu .sub-menu {margin-left:100%; top:0; margin-top:-2px; padding-left:1px;}
	.main_menu .sub-menu .sub-menu::before{width:0;}

	.menu-toggle{display:none; position:relative; padding:11px 11px; cursor:pointer; z-index:999; margin-left:40px;}
	.menu-toggle-inner,
	.menu-toggle-inner:after,
	.menu-toggle-inner:before{
		width:22px;
		height:2px;
		background-color:var(--primary-purple);
		border-radius:0px;
		position:absolute; left:0;
		transition-property:-webkit-transform;
		transition-property:transform;
		transition-property:transform, -webkit-transform;
		transition-duration:0.15s;
		transition-timing-function:ease;
	}
	.menu-toggle-inner{top:50%; margin-top:-1px;}
	.menu-toggle-inner:after,
	.menu-toggle-inner:before{content:""; display:block;}
	.menu-toggle-inner:before{top:-7px;}
	.menu-toggle-inner:after{bottom:-7px;}

	.menu-toggle.toggled .menu-toggle-inner{
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		transform:rotate(45deg);
		transition-delay:0.14s;
		transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.menu-toggle.toggled .menu-toggle-inner:before{
		top:0;
		opacity:0;
		transition:top 0.1s ease, opacity 0.1s 0.14s ease;
	}
	.menu-toggle.toggled .menu-toggle-inner:after{
		bottom:0;
		-webkit-transform:rotate(-90deg);
		-ms-transform:rotate(-90deg);
		transform:rotate(-90deg);
		transition:bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition:bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition:bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
	}


/* Header und Navigation */
.header {background:var(--white); box-shadow:var(--shadow-light); position:fixed; top:0; left:0; right:0; z-index:1000; transition:var(--transition);}
body.logged-in.admin-bar .header {top:32px;}
.header_in {max-width:1200px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; height:80px;}

.logo h1 {font-size:2.5rem; color:var(--primary-purple); margin-bottom:-5px;}
.logo a {text-decoration:none; color:inherit;}
.logo a:hover h1 {color:var(--primary-pink);}
.tagline {font-size:0.9rem; color:var(--text-gray); font-style:italic;}

.main {margin-top:80px; padding:2rem 0 4rem; background:linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);}
.breadcrumbs {padding:0 0 20px; font-size:0.875rem; }
.breadcrumbs span {color:var(--text-gray);}
.breadcrumbs a,
.breadcrumbs a span{color:var(--primary-purple); text-decoration:none;}
.breadcrumbs a:hover span {color:var(--primary-pink);}
.breadcrumbs .sep {padding:0 5px;}


/* Hero Section with Slider */
.slider-section {position:relative; height:80vh; overflow:hidden; margin-top:80px; padding:0;}
.hero-slider {position:relative; width:100%; height:100%;}
.slide {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1s ease-in-out; display:flex; align-items:center; justify-content:center;}
.slide.active {opacity:1;}
.slide-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(45, 27, 105, 0.7), rgba(255, 107, 157, 0.5)); z-index:1;}
.slide-content {position:relative; z-index:2; text-align:center; color:var(--white); max-width:800px; padding:0 2rem; animation:slideInUp 1s ease-out;}

.slide-content h1 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.slide-content p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1.6;
}

.slide-content .cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.slide-content .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-pink));
}

/* Slider Navigation */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 3;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 3;
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.dot.active,
.dot:hover {
    background: var(--white);
    transform: scale(1.2);
}

/* Scroll Indicator */
.scroll-indicator {position:absolute; bottom:1rem; right:2rem; z-index:3;}
a.scroll-down {display:flex; flex-direction:column; align-items:center; color:var(--white); text-decoration:none; font-size:0.9rem; transition:var(--transition);}
.scroll-down:hover {transform:translateY(-5px);}
.scroll-arrow {font-size:1.5rem; margin-top:0.5rem; animation:bounce 2s infinite;}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Featured Recipes Section */
.featured-recipes {padding:6rem 0; background:var(--white);}
.section-title {font-family:var(--font-heading); font-size:2.5rem; text-align:center; color:var(--primary-purple); margin-bottom:3rem;}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.recipe-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-heavy);
}

.recipe-image {
    height: 250px;
    overflow: hidden;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.recipe-card:hover .recipe-image img {
    transform: scale(1.05);
}

.recipe-text {
    padding: 1.5rem;
}

.recipe-text h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
}

.recipe-text p {
    color: var(--text-gray);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.recipe-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.recipe-cat {
    background: var(--primary-green);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.time {
    background: var(--primary-yellow);
    color: var(--dark-gray);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.recipe-link {
    display: inline-block;
    color: var(--primary-pink);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.recipe-link:hover {
    color: var(--primary-purple);
}

/* About Section - Team */
.about {
    padding: 6rem 0;
    background: var(--light-gray);
}

.team-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

.team-member {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    transition: var(--transition);
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-heavy);
}

.team-member:nth-child(even) {
    grid-template-columns: auto 1fr auto;
}

.team-member:nth-child(even) .member-image {
    order: -1;
}

.member-icon {
    font-size: 3rem;
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
}

.member-info h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
}

.member-info h4 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-pink);
    margin-bottom: 1rem;
    font-weight: 600;
}
.member-info ul {list-style:none; padding:0;}
.member-info ul li {padding:0.5rem 0; color:var(--text-gray); position:relative; padding-left:1.5rem;}
.member-info ul li::before {content:'✨'; position:absolute; left:0; color:var(--primary-yellow);}
.member-image {width:150px; height:150px; border-radius:50%; overflow:hidden; box-shadow:var(--shadow-medium);}
.member-image img {width:100%; height:100%; object-fit:cover; transition:var(--transition);}
.team-member:hover .member-image img {transform:scale(1.1);}

/* Contact Section */
.contact {padding:6rem 0; background:var(--white);}
.contact-content {display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:3rem;}
.contact h3 {font-family:var(--font-heading); font-size:1.8rem; color:var(--primary-purple); margin-bottom:2rem;}
.contact-item {margin-bottom:1.5rem; color:var(--text-gray);}

.wpcf7 {background:var(--light-gray); padding:2rem; border-radius:var(--border-radius);}
.wpcf7 h3 {font-size:1.8rem; color:var(--primary-purple); margin-bottom:2rem;}

/* Footer */
.footer {background:var(--primary-purple); color:var(--white); padding:3rem 0 1rem;}
.footer-content {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; margin-bottom:2rem;}
.footer-section h4 {font-size:1.3rem;}
.footer-section ul {list-style:none;}
.footer-section ul li {margin-bottom:0.5rem;}
.footer-section a {color:var(--white); text-decoration:none; transition:var(--transition);}
.footer-section a:hover {color:var(--primary-pink);}

.social-links {display:flex; gap:1rem;}

.footer-bottom {text-align:center; padding-top:2rem; border-top:1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8);}
.f-menu {margin-bottom:1.5rem;}
.f-menu a {color:rgba(255, 255, 255, 0.8);}


/* Recipe Hero Section */
.recipe-hero {
    margin-top: 80px;
    padding: 2rem 0 4rem;
    background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
}


.recipe-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.recipe-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: var(--primary-purple);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.recipe-description {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.recipe-meta-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.meta-label {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.meta-value {
    font-weight: 600;
    color: var(--primary-purple);
    font-size: 1.1rem;
}

.recipe-image-main {
    text-align: center;
}

.recipe-image-main img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

/* Recipe Content Layout */
.recipe-content {
    padding: 4rem 0;
}

.recipe-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

/* Ingredients Section */
.ingredients-section h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--primary-purple);
    margin-bottom: 2rem;
}

.ingredient-group {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: var(--border-radius);
}

.ingredient-group h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.ingredient-group ul {list-style:none; padding:0;}
.ingredient-group ul li{padding:0.5rem 0; border-bottom:1px solid rgba(0, 0, 0, 0.1); display:flex; align-items:center;}
.ingredient-group ul li:last-child {border-bottom:none;}
.amount {
    font-weight: 600;
    color: var(--primary-pink);
    min-width: 60px;
    margin-right: 1rem;
}

/* Instructions Section */
.instructions-section h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--primary-purple);
    margin-bottom: 2rem;
}

.instruction-step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    transition: var(--transition);
}

.instruction-step:hover {
    box-shadow: var(--shadow-medium);
}

.step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.step-content h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
}

.step-content p {
    color: var(--text-gray);
    line-height: 1.7;
}

/* Tips Section */
.tips-section {
    margin: 4rem 0;
    padding: 3rem;
    background: var(--light-gray);
    border-radius: var(--border-radius);
}

.tips-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--primary-purple);
    text-align: center;
    margin-bottom: 2rem;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.tip-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border-left: 4px solid var(--primary-yellow);
    transition: var(--transition);
}

.tip-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.tip-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
}

.tip-card p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Nutrition Section */
.nutrition-section {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.nutrition-section h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-purple);
    margin-bottom: 1.5rem;
    text-align: center;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.nutrition-item {
    text-align: center;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: var(--border-radius);
}

.nutrition-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.nutrition-value {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-green);
}

/* Health Benefits Section */
.health-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-purple));
    border-radius: var(--border-radius);
    color: var(--white);
}

.health-section h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.health-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
}

.health-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.health-card p {
    line-height: 1.6;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Seasonal Section */
.seasonal-section {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.seasonal-section h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-purple);
    margin-bottom: 1.5rem;
    text-align: center;
}

.seasonal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.season-card {
    padding: 1.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.season-card:nth-child(1) {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.season-card:nth-child(2) {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.season-card:nth-child(3) {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

.season-card:nth-child(4) {
    background: linear-gradient(135deg, #e0c3fc, #9bb5ff);
}

.season-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.season-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
}

.season-card p {
    color: var(--dark-gray);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Storage Section */
.storage-section {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: var(--border-radius);
}

.storage-section h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-purple);
    margin-bottom: 1.5rem;
    text-align: center;
}

.storage-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.storage-item {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.storage-item h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
}

.storage-item p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Related Recipes */
.related-recipes {
    margin: 4rem 0;
}

.related-recipes h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--primary-purple);
    text-align: center;
    margin-bottom: 2rem;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.related-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-heavy);
}

.related-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.related-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--primary-purple);
    padding: 1rem;
    margin: 0;
}


.pagenavi {text-align:center; vertical-align:middle; display:inline-block; width:100%; margin:2rem 0; font-size:0.875rem;}
.pagenavi a, 
.pagenavi span {margin:0 5px 0 0; border:1px solid var(--primary-pink); border-radius:50%; width:40px; height:40px; line-height:38px; color:var(--primary-pink); text-decoration:none; background-color:#fff; display:inline-block; vertical-align:middle;}
.pagenavi a.prev,
.pagenavi a.next {width:50px;}
.pagenavi span.current,
.pagenavi a:hover {background:var(--primary-pink); color:#fff; border-color:var(--primary-pink);}
.pagenavi span.extend {border-color:transparent; background-color:transparent; width:12px;}

/* Responsive Design for Recipe Pages */
@media (max-width: 768px) {
}

@media (max-width: 480px) {
}



/* Responsive */
@media only screen and (max-width: 960px) {
	.slide-content p {padding:0 4rem;}
}

@media only screen and (max-width: 768px) {
    
	.menu-toggle{display:block;}
	.main_menu_wrap {display:none; height:auto; background-color:#fff; position:fixed; top:0; left:0; right:0; bottom:0; z-index:997; width:100%; padding:45px 20px 20px; overflow-x:hidden; overflow-y:auto;}
	.main_menu {width:90%; display:block; padding:0;}
	.main_menu li a{display:inline-block; padding:10px 0;}
	.main_menu li {width:100%; position:relative; margin:10px 0;}
		.main_menu > li:after {width:0;}
	.main_menu > li > a {padding:0; margin:0; }
	.main_menu > li > a:hover {background-color:#fff; color:var(--secondary);}
	.main_menu > li.current-menu-item > a {background-color:#fff; color:var(--secondary); }
	.main_menu .sub-menu {position:static; width:100%; margin:0; border:none; box-shadow:none; padding-top:6px; opacity:1; visibility:visible; display:none;}
	.main_menu .sub-menu li {padding:6px 0 6px 15px; border:none;}
	.main_menu .sub-menu li a {padding:0;}
	.main_menu .sub-menu .sub-menu {padding-left:0px; padding-top:10px; margin-left:0; margin-top:0;}
	.main_menu li:hover > ul.sub-menu {display:none;}
	.sub-menu::before {width:0; height:0;}
	.sub-menu-toggle{color:var(--secondary); position:absolute; top:12px; right:20px; padding:5px 10px; border:1px solid; border-radius:8px; line-height:12px; height:24px; cursor:pointer;
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		transform:translateY(-50%)
	}
	.main_menu > li > .sub-menu-toggle {top:12px;}
	.sub-menu-toggle:before{border-style:solid; border-width: 0.15em 0.15em 0 0; content:''; display:inline-block; width:0.45em; height:0.45em; position:relative; top:0; vertical-align:top; transform:rotate(135deg);}
	.sub-menu-toggle.active:before{transform: rotate(-45deg); top: 0.15em;}	
    
    .slide-content h1 {font-size:2.5rem;    }
    .slide-content p {font-size:1.1rem; padding:0 2.5rem;}
    
    .slide-content .cta-button {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    
    .nav-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .slider-nav {
        padding: 0 1rem;
    }
    
    .scroll-indicator {
        right: 1rem;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    /* .recipe-grid {
        grid-template-columns: 1fr;
    } */
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
	.team-member,
	.team-member:nth-child(even){grid-template-columns:1fr; text-align:center; gap:1.5rem; padding:2rem;}
    
    .team-member:nth-child(even) .member-image {
        order: 0;
    }
    
    .member-icon {
        justify-self: center;
    }
    
    .member-image {
        justify-self: center;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
	.social-links {justify-content:center;}
	
    .recipe-header {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .recipe-title {
        font-size: 2.2rem;
    }
    
    .recipe-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .recipe-meta-info {
        grid-template-columns: 1fr;
    }
    
    .instruction-step {
        flex-direction: column;
        gap: 1rem;
    }
    
    .step-number {
        align-self: flex-start;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    .nutrition-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .seasonal-grid,
    .health-grid,
    .storage-content {
        grid-template-columns: 1fr;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width : 600px) {
	.scroll-indicator span {display:none;}
}

@media only screen and (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .nav-container {
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .recipe-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .recipe-title {
        font-size: 1.8rem;
    }
    
    .tips-section {
        padding: 2rem 1rem;
    }
    
    .nutrition-grid {
        grid-template-columns: 1fr;
    }
    
    .instruction-step {
        padding: 1rem;
    }
    
    .ingredient-group {
        padding: 1rem;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recipe-card {
    animation: fadeInUp 0.6s ease forwards;
}

.recipe-card:nth-child(2) {
    animation-delay: 0.2s;
}

.recipe-card:nth-child(3) {
    animation-delay: 0.4s;
}