/* ===== CSS RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette - Fall Theme */
    --primary-color: #d97706;
    --primary-dark: #b45309;
    --secondary-color: #dc2626;
    --text-dark: #1f2937;
    --text-light: #78716c;
    --bg-light: #fef3c7;
    --bg-white: #ffffff;
    --accent: #ea580c;
    
    /* Typography */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Arial', sans-serif;
    
    /* Spacing */
    --container-width: 1200px;
    --section-padding: 80px 20px;
}

body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
}

/* ===== HEADER & NAVIGATION ===== */
header {
    background: var(--bg-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.logo h1 {
    font-size: 1.8rem;
    color: var(--primary-color);
    font-weight: 700;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

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

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* ===== HERO SECTION ===== */
.hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 120px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url('data:image/svg+xml,<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"><path d="M60 15 L67 37 L75 22 L72 45 L82 37 L75 52 L90 48 L78 60 L93 63 L75 67 L87 78 L72 72 L75 87 L63 75 L60 90 L57 75 L45 87 L48 72 L33 78 L45 67 L27 63 L42 60 L30 48 L45 52 L38 37 L48 45 L45 22 L53 37 Z" fill="white" opacity="0.15"/></svg>'),
        url('data:image/svg+xml,<svg width="90" height="90" xmlns="http://www.w3.org/2000/svg"><path d="M45 12 L49 27 L57 18 L54 33 L63 27 L57 39 L69 36 L60 45 L72 48 L60 52 L69 60 L57 57 L60 69 L51 60 L48 72 L45 60 L36 69 L39 57 L27 60 L36 52 L24 48 L36 45 L27 36 L39 39 L33 27 L42 33 L39 18 L46 27 Z" fill="white" opacity="0.12"/></svg>');
    background-position: 0 0, 60px 60px;
    background-size: 120px 120px, 90px 90px;
    opacity: 0.4;
    animation: floatingLeaves 60s linear infinite;
}

@keyframes floatingLeaves {
    0% {
        background-position: 0 0, 60px 60px;
    }
    100% {
        background-position: 120px 800px, 180px 840px;
    }
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    animation: fadeInUp 0.8s ease;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    animation: fadeInUp 0.8s ease 0.2s backwards;
}

.cta-button {
    display: inline-block;
    padding: 15px 40px;
    background: var(--bg-white);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease 0.4s backwards;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* ===== MAIN SECTIONS ===== */
main {
    max-width: var(--container-width);
    margin: 0 auto;
}

section {
    padding: var(--section-padding);
}

section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--text-dark);
    position: relative;
}

section h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* ===== FEATURES/SERVICES GRID ===== */
.features {
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
}

.features::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background-image: url('data:image/svg+xml,<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"><path d="M150 50 L165 90 L180 70 L175 110 L200 95 L185 130 L220 120 L195 150 L230 155 L195 170 L225 195 L190 185 L200 220 L170 200 L165 235 L150 205 L135 235 L130 200 L100 220 L110 185 L75 195 L105 170 L70 155 L105 150 L80 120 L115 130 L100 95 L125 110 L120 70 L135 90 Z" fill="%23d97706" opacity="0.08"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

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

.feature-card {
    background: var(--bg-white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(217, 119, 6, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '🍂';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    opacity: 0.15;
    transform: rotate(-15deg);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(217, 119, 6, 0.2);
}

.feature-card h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.8;
}

/* ===== ABOUT PREVIEW ===== */
.about-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-wrapper {
    max-width: 700px;
    text-align: center;
}

.content-wrapper h2 {
    margin-bottom: 1.5rem;
}

.content-wrapper p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.content-wrapper a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.content-wrapper a:hover {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* ===== TESTIMONIALS ===== */
.testimonials {
    background: var(--bg-light);
    position: relative;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 200px;
    height: 200px;
    background-image: url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M100 30 L110 60 L120 45 L118 75 L135 65 L125 90 L150 85 L135 105 L160 110 L135 120 L155 140 L130 135 L138 160 L118 145 L115 170 L100 145 L85 170 L82 145 L62 160 L70 135 L45 140 L65 120 L40 110 L65 105 L50 85 L75 90 L65 65 L82 75 L80 45 L90 60 Z" fill="%23dc2626" opacity="0.1"/></svg>');
    opacity: 0.4;
    pointer-events: none;
    animation: gentleSway 20s ease-in-out infinite;
}

@keyframes gentleSway {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }
    50% {
        transform: rotate(5deg) translateY(-10px);
    }
}

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

blockquote {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

blockquote p {
    font-style: italic;
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

blockquote footer {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

/* ===== CALL TO ACTION ===== */
.cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    text-align: center;
    border-radius: 16px;
    margin: 60px 20px;
    padding: 60px 20px;
}

.cta h2 {
    color: white;
    margin-bottom: 1rem;
}

.cta h2::after {
    background: white;
}

.cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.cta .cta-button {
    background: white;
    color: var(--primary-color);
}

/* ===== FOOTER ===== */
footer {
    background: var(--text-dark);
    color: white;
    padding: 3rem 2rem 1rem;
}

.footer-content {
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #374151;
    color: #9ca3af;
}

/* ===== CONTACT PAGE ===== */
.contact-section {
    padding: var(--section-padding);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-form {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: 12px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.submit-button {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.submit-button:hover {
    background: var(--primary-dark);
}

.contact-info {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: 12px;
}

.contact-info h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.contact-info p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

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

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .nav-links {
        gap: 1rem;
        font-size: 0.9rem;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    section h2 {
        font-size: 2rem;
    }
    
    .contact-container {
        grid-template-columns: 1fr;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero {
        padding: 60px 20px;
    }
    
    .hero h2 {
        font-size: 1.8rem;
    }
}