:root {
    --primary-color: #8A3324; /* Deep Red */
    --secondary-color: #C5A065; /* Gold */
    --text-color: #333333;
    --light-text: #666666;
    --bg-color: #FDFBF7; /* Off-white */
    --white: #ffffff;
    --font-serif: 'Noto Serif TC', serif;
    --font-sans: 'Noto Sans TC', sans-serif;
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    padding-top: 80px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

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

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    background-color: #6d261a;
}

.btn-outline {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 5px;
    font-weight: bold;
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.section-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 15px auto 0;
}

/* Header */
header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0; /* Changed padding to 0 for better alignment */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px; /* Fixed height for header */
}

header nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo img {
    height: 60px;
}

.nav-links {
    display: flex;
    gap: 30px;
    height: 100%; /* Full height for hover effect */
    align-items: center;
}

.nav-links li {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative; /* For dropdown positioning */
}

.nav-links li a {
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    padding: 0 10px; /* Increase hit area */
}

.nav-links li a:hover {
    color: var(--primary-color);
}

/* Dropdown Menu */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Position below the parent li */
    left: 0;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1001;
    border-top: 3px solid var(--primary-color);
}

.dropdown-content li {
    width: 100%;
    height: auto; /* Reset height */
    display: block; /* Reset display */
}

.dropdown-content li a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.dropdown-content li a:hover {
    background-color: #f5f5f5;
    color: var(--primary-color);
    padding-left: 20px; /* Slide effect */
}

.dropdown:hover .dropdown-content {
    display: block;
}

.arrow-down {
    font-size: 0.7em;
    margin-left: 5px;
    vertical-align: middle;
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px;
    transition: all 0.3s ease;
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.12);
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.auth-modal.open {
    display: flex;
}

.auth-modal .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.auth-modal .dialog {
    position: relative;
    width: min(520px, calc(100vw - 40px));
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    padding: 22px;
    z-index: 1;
}

.auth-modal .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.auth-modal .dialog-title {
    font-family: var(--font-serif);
    color: var(--primary-color);
    font-size: 1.5rem;
}

.auth-modal .close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 6px 8px;
}

.auth-modal .tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.auth-modal .tab {
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-color);
}

.auth-modal .tab.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.auth-modal .form {
    display: grid;
    gap: 12px;
}

.auth-modal .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-modal .field label {
    font-weight: 700;
}

.auth-modal .field input,
.auth-modal .field textarea {
    padding: 12px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.15);
    outline: none;
    font-family: var(--font-sans);
}

.auth-modal .field textarea {
    min-height: 90px;
    resize: vertical;
}

.auth-modal .actions {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Hero Section */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-align: center;
    overflow: hidden;
}

/* Product Overview Page */
.products-overview {
    padding: 40px 0 80px;
}

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

.category-card {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay */
    transition: background 0.3s ease;
}

.category-card:hover::before {
    background: rgba(0, 0, 0, 0.5);
}

.category-overlay {
    position: relative;
    z-index: 1;
    padding: 20px;
}

.category-overlay h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
    display: inline-block;
    padding-bottom: 5px;
    color: var(--white);
}

.category-overlay p {
    font-size: 1.1rem;
    max-width: 80%;
    margin: 0 auto;
    color: var(--white);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Overlay for text readability */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: heroSlideFade 12s infinite;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }

@keyframes heroSlideFade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    40% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none; }
    .hero-slide:nth-child(1) { opacity: 1; }
}

.hero-content h1 {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* About Section */
.about {
    padding: 80px 0;
    background-color: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.about-grid .about-text {
    grid-column: 1;
}
.about-grid .about-img {
    grid-column: 2;
}
.about-story .about-grid:nth-of-type(even) .about-text {
    grid-column: 2;
}
.about-story .about-grid:nth-of-type(even) .about-img {
    grid-column: 1;
}

.about-text h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.about-text p {
    margin-bottom: 20px;
    color: var(--light-text);
}

.about-img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.page-dongchongxiacao .about-img img {
    width: 100%;
    max-width: 100%;
}
.about-grid-left,
.about-grid-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.about-grid-left .about-img {
    grid-column: 1;
}
.about-grid-left .about-text {
    grid-column: 2;
}
.about-grid-right .about-img {
    grid-column: 2;
}
.about-grid-right .about-text {
    grid-column: 1;
}

/* Products Section */
.products {
    padding: 80px 0;
    background-image: url('static/image/pattern1.png'); /* Subtle pattern */
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.product-card {
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

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

.product-img {
    height: 250px;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

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

.product-info {
    padding: 20px;
    text-align: center;
}

.product-info h3 {
    font-family: var(--font-serif);
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.product-info p {
    color: var(--light-text);
    font-size: 0.9rem;
}

.add-to-cart-btn {
    margin-top: 10px;
    padding: 8px 14px;
    background-color: var(--secondary-color);
    border: none;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
}
.add-to-cart-btn:hover {
    background-color: #a8843f;
}

#cart-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: var(--primary-color);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 1100;
    font-size: 20px;
}
#cart-fab .count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cart-fab:hover,
#whatsapp-fab:hover,
#email-fab:hover {
    animation: fabWiggle 0.45s ease-in-out infinite;
}

@keyframes fabWiggle {
    0% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    #cart-fab:hover,
    #whatsapp-fab:hover,
    #email-fab:hover {
        animation: none;
    }
}

#whatsapp-fab,
#email-fab {
    position: fixed;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 1100;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
}

#whatsapp-fab {
    bottom: 88px;
    background: #25D366;
}

#whatsapp-fab img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#email-fab {
    bottom: 156px;
    background: var(--secondary-color);
}

#cart-drawer {
    position: fixed;
    right: -400px;
    top: 0;
    width: 360px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 20px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 1200;
    display: flex;
    flex-direction: column;
}
#cart-drawer.open { right: 0; }
.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}
.cart-header .close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}
.cart-items {
    padding: 10px 20px;
    overflow-y: auto;
    flex: 1;
}
.cart-item {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}
.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}
.cart-item .meta .name { font-weight: 600; margin-bottom: 6px; }
.cart-item .meta .sub, .cart-item .meta .qty { font-size: 12px; color: #777; }
.cart-item .subtotal { font-weight: 600; margin-right: 8px; }
.cart-item .remove {
    background: none;
    border: none;
    color: #d00;
    cursor: pointer;
}
.cart-footer {
    border-top: 1px solid #eee;
    padding: 16px 20px;
}
.cart-footer .actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}
.cart-footer .actions button {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
}
.cart-footer .actions .clear { background: #777; }
.cart-footer .actions .checkout { background: var(--primary-color); }

.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.qty-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #333;
}
.qty-btn:hover {
    background: #ededed;
}
.qty-input {
    width: 64px;
    height: 34px;
    border: none;
    text-align: center;
    outline: none;
    font-size: 14px;
}
.qty-control.small .qty-btn {
    width: 26px;
    height: 26px;
    font-size: 16px;
}
.qty-control.small .qty-input {
    width: 44px;
    height: 26px;
    font-size: 12px;
}
.qty-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qty-label {
    font-size: 12px;
    color: #777;
 }

/* Services Section */
.services {
    padding: 60px 0;
    background-color: var(--primary-color);
    color: var(--white);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}

.service-item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 3px solid var(--secondary-color);
    object-fit: cover;
}

.service-item h3 {
    font-family: var(--font-serif);
    margin-bottom: 15px;
    color: var(--secondary-color);
}

/* Page Title Section */
.page-title-section {
    background-image: url('static/image/product.jpg'); /* Or any suitable banner image */
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    text-align: center;
    color: var(--white);
    position: relative;
    margin-bottom: 40px;
}

.page-title-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay */
}

.page-title-section .container {
    position: relative;
    z-index: 1;
    background-image: none; /* Override container pattern if needed, or keep it */
}

.page-title-section h1 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--white);
}

.breadcrumb {
    font-size: 1rem;
    color: #ddd;
}

.breadcrumb a {
    color: #ddd;
    text-decoration: underline;
}

.breadcrumb a:hover {
    color: var(--secondary-color);
}

/* Category Intro */
.category-intro {
    padding-bottom: 40px;
    text-align: center;
}

.category-intro p {
    margin-bottom: 10px;
    color: var(--light-text);
}

/* Products Page Grid */
.products-page {
    padding-bottom: 80px;
}

/* Product Page Layout with Sidebar */
.products-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.product-sidebar {
    width: 250px;
    flex-shrink: 0;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 100px; /* Adjust based on header height */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.product-sidebar h3 {
    font-family: var(--font-serif);
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
}

.product-sidebar ul li {
    margin-bottom: 10px;
}

.product-sidebar ul li a {
    display: block;
    padding: 10px 15px;
    color: var(--text-color);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.product-sidebar ul li a:hover,
.product-sidebar ul li a.active {
    background-color: var(--secondary-color);
    color: var(--white);
}

.product-content {
    flex-grow: 1;
}

/* Adjust Product Grid for Sidebar Layout */
.products-layout .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
}

@media screen and (max-width: 900px) {
    .products-layout {
        flex-direction: column;
    }
    
    .product-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 30px;
    }
    
    .product-sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .product-sidebar ul li {
        margin-bottom: 0;
        flex: 1 1 auto;
    }
    
    .product-sidebar ul li a {
        text-align: center;
        border: 1px solid #eee;
    }
}

.products-page .price,
.products .price {
    color: var(--primary-color);
    font-weight: bold;
    margin-top: 5px;
    font-size: 1.1rem;
}

.products-page .category,
.products .category {
    color: #999;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

/* About Page Styles */
.about-story {
    padding: 60px 0;
}

.about-story .lead {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 20px;
    font-family: var(--font-serif);
}

.about-values {
    background-color: #f9f9f9;
    padding: 80px 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}

.value-item {
    background: var(--white);
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateY(-10px);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
}

.value-item h3 {
    font-family: var(--font-serif);
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.value-item p {
    color: var(--light-text);
}

.about-services {
    padding: 80px 0;
}

/* Footer */
footer {
    background-color: #2c2c2c;
    color: #e0e0e0;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    color: var(--white);
    font-family: var(--font-serif);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--secondary-color);
    display: inline-block;
    padding-bottom: 5px;
}

.footer-section p {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 20px;
    font-size: 0.85rem;
    color: #888;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 80px; /* Match header height */
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        padding-top: 50px;
        height: calc(100vh - 80px); /* Adjust height */
    }

    .nav-links li {
        opacity: 0;
        height: auto; /* Reset height for mobile */
        width: 100%; /* Full width */
        flex-direction: column; /* Stack dropdown */
        display: block; /* Important for animation */
        text-align: center;
        margin-bottom: 20px;
    }

    .dropdown-content {
        position: relative; /* Static position in mobile */
        box-shadow: none;
        border-top: none;
        background-color: #f9f9f9;
        width: 100%;
        display: none; /* Keep hidden initially */
    }

    /* Show dropdown on hover/focus in mobile or use JS toggle. 
       For simplicity, we'll display it when parent is hovered or always if we want.
       Let's make it show on hover for now, but touch devices might need a tap. 
       Actually, :hover on mobile is tricky. 
       A common pattern is to just list them or have a click.
       Let's make it always visible or use a simple focus trick.
       Or better: make the dropdown visible when the menu is open? 
       No, that's too cluttered. 
       Let's use a class `.dropdown-active` that JS can toggle, or just CSS hover which works as "tap to open" on many iOS/Android devices.
    */
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown-content li a {
        padding-left: 0;
    }
    
    .dropdown-content li a:hover {
        padding-left: 0; /* Remove slide effect on mobile */
        background-color: transparent;
        color: var(--primary-color);
    }

    .burger {
        display: block;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
    }
    .about-img {
        grid-column: 1;
        grid-row: 1;
    }
    .about-text {
        grid-column: 1;
        grid-row: 2;
    }
    .about-grid-left,
    .about-grid-right {
        grid-template-columns: 1fr;
    }
    .about-grid-left .about-img,
    .about-grid-right .about-img {
        grid-column: 1;
        grid-row: 1;
    }
    .about-grid-left .about-text,
    .about-grid-right .about-text {
        grid-column: 1;
        grid-row: 2;
    }
}

.nav-active {
    transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}