.elementor-201 .elementor-element.elementor-element-962bfd2{--display:flex;--min-height:60vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-12em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-201 .elementor-element.elementor-element-dcebb7e{margin:20em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;}.elementor-201 .elementor-element.elementor-element-dcebb7e.elementor-element{--align-self:center;}.elementor-201 .elementor-element.elementor-element-dcebb7e .elementor-heading-title{font-family:"Rosarivo", Sans-serif;font-weight:400;color:var( --e-global-color-text );}.elementor-201 .elementor-element.elementor-element-ab8d1c1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:3em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.elementor-201 .elementor-element.elementor-element-4ad452f{margin:1em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;text-align:center;}.elementor-201 .elementor-element.elementor-element-4ad452f.elementor-element{--align-self:center;}.elementor-201 .elementor-element.elementor-element-4ad452f .elementor-heading-title{font-family:"Rosario", Sans-serif;font-size:20px;font-weight:200;color:var( --e-global-color-text );}/* Start custom CSS for container, class: .elementor-element-ab8d1c1 */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Venue Page Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            color: #3A3A3A;
            background: #FAFAFA;
            line-height: 1.6;
        }
        
        /* Typography */
        h1, h2, h3 {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 300;
            letter-spacing: 1px;
        }
        
        h1 {
            font-size: 3.5rem;
            line-height: 1.2;
        }
        
        h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }
        
        h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        p {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.8;
            color: #5A5A5A;
        }
        
        /* Hero Section */
        .hero {
            height: 85vh;
            background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.3)), 
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%236B7059" width="1200" height="800"/><text x="50%" y="50%" fill="white" opacity="0.1" font-size="80" text-anchor="middle" font-family="serif">VINEYARD LAWN VENUE</text></svg>');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .hero-content {
            text-align: center;
            color: white;
            z-index: 2;
            animation: fadeInUp 1.2s ease;
        }
        
        .hero h1 {
            color: white;
            margin-bottom: 1rem;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            font-weight: 300;
            letter-spacing: 2px;
            opacity: 0.95;
        }
        
        /* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        /* Section Spacing */
        section {
            padding: 6rem 0;
        }
        
        .section-intro {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 4rem;
        }
        
        /* Two Column Layout */
        .two-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            margin: 4rem 0;
        }
        
        .image-placeholder {
            background: linear-gradient(135deg, #D4CFC4 0%, #E8E3D8 100%);
            height: 400px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6B7059;
            font-style: italic;
            font-size: 0.9rem;
        }
        
        /* Feature Boxes */
        .features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin: 3rem 0;
        }
        
        .feature-box {
            background: white;
            padding: 2.5rem 2rem;
            border-radius: 4px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }
        
        .feature-box:hover {
            transform: translateY(-5px);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background: #F9F7F4;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 1.5rem;
        }
        
        .feature-box h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .feature-box p {
            font-size: 0.95rem;
        }
        
        /* What's Included List */
        .included-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem 2rem;
            margin: 2rem 0;
        }
        
        .included-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }
        
        .check-icon {
            color: #6B7059;
            font-size: 1.2rem;
            margin-top: 0.2rem;
        }
        
        /* Suppliers Section */
        .suppliers {
            background: #F9F7F4;
        }
        
        .supplier-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            margin: 3rem 0;
        }
        
        .supplier-card {
            background: white;
            padding: 2rem 1.5rem;
            border-radius: 4px;
            text-align: center;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        }
        
        .supplier-card h4 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.3rem;
            color: #6B7059;
            margin-bottom: 0.5rem;
        }
        
        .supplier-card p {
            font-size: 0.85rem;
        }
        
        /* CTA Section */
        .cta-section {
            background: #6B7059;
            color: white;
            text-align: center;
            padding: 5rem 0;
        }
        
        .cta-section h2 {
            color: white;
            margin-bottom: 1rem;
        }
        
        .cta-section p {
            color: rgba(255,255,255,0.9);
            margin-bottom: 2rem;
        }
        
        .btn {
            display: inline-block;
            padding: 1rem 3rem;
            background: white;
            color: #6B7059;
            text-decoration: none;
            font-weight: 500;
            letter-spacing: 1px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background: #F9F7F4;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        /* Design Notes Panel */
        .design-notes {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            max-width: 300px;
            z-index: 1000;
            border-left: 4px solid #6B7059;
        }
        
        .design-notes h4 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: #6B7059;
        }
        
        .design-notes ul {
            list-style: none;
            padding: 0;
        }
        
        .design-notes li {
            font-size: 0.85rem;
            margin: 0.5rem 0;
            padding-left: 1rem;
            position: relative;
        }
        
        .design-notes li:before {
            content: "→";
            position: absolute;
            left: 0;
            color: #6B7059;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            
            .two-column,
            .features,
            .supplier-grid {
                grid-template-columns: 1fr;
            }
            
            .included-list {
                grid-template-columns: 1fr;
            }
            
            .design-notes {
                position: static;
                margin: 2rem;
                max-width: 100%;
            }
            
            section {
                padding: 3rem 0;
            }
        }
    </style>
</head>
<body>

    <!-- Design Notes Panel -->
    <div class="design-notes">
        <h4>🎨 Design Guide</h4>
        <ul>
            <li>Hero: 85vh tall, dark overlay</li>
            <li>Fonts: Cormorant + Montserrat</li>
            <li>Colors: Olive (#6B7059), Stone, Sand</li>
            <li>6rem section padding</li>
            <li>Soft animations on scroll</li>
            <li>White space is luxury</li>
        </ul>
    </div>

    <!-- SECTION 1: HERO -->
    <section class="hero">
        <div class="hero-content">
            <h1>The Venue</h1>
            <p class="hero-subtitle">An Elegant Outdoor Setting</p>
        </div>
    </section>

    <!-- SECTION 2: INTRODUCTION -->
    <section>
        <div class="container">
            <div class="section-intro">
                <h2>A Perfect Canvas for Your Celebration</h2>
                <p>Monkscowl Estate offers a beautiful outdoor venue set among the vineyards, with sweeping mountain views and mature gardens. Our lawn venue provides an elegant, natural backdrop for intimate weddings and milestone celebrations.</p>
            </div>
            
            <div class="two-column">
                <div>
                    <h3>The Setting</h3>
                    <p>Nestled on prestigious Annandale Road in Stellenbosch, our venue combines the charm of a working wine estate with refined elegance. The outdoor ceremony space is framed by vineyards and mountain views, creating an unforgettable atmosphere for your special day.</p>
                    <p style="margin-top: 1rem;">We offer venue hire only, giving you the freedom to work with your chosen suppliers while enjoying our stunning natural setting.</p>
                </div>
                <div class="image-placeholder">
                    Replace with: Lawn venue with mountain backdrop
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION 3: CAPACITY & KEY DETAILS -->
    <section style="background: #F9F7F4;">
        <div class="container">
            <div class="section-intro">
                <h2>Venue Details</h2>
            </div>
            
            <div class="features">
                <div class="feature-box">
                    <div class="feature-icon">👥</div>
                    <h3>Capacity</h3>
                    <p>Intimate gatherings up to 80 guests</p>
                </div>
                
                <div class="feature-box">
                    <div class="feature-icon">🌿</div>
                    <h3>Setting</h3>
                    <p>Outdoor lawn with vineyard & mountain views</p>
                </div>
                
                <div class="feature-box">
                    <div class="feature-icon">⏰</div>
                    <h3>Hire Period</h3>
                    <p>Full day venue hire available</p>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION 4: WHAT'S INCLUDED -->
    <section>
        <div class="container">
            <div class="two-column">
                <div class="image-placeholder">
                    Replace with: Garden/vineyard detail shot
                </div>
                
                <div>
                    <h2>What's Included</h2>
                    <div class="included-list">
                        <div class="included-item">
                            <span class="check-icon">✓</span>
                            <p>Exclusive venue access for your event</p>
                        </div>
                        <div class="included-item">
                            <span class="check-icon">✓</span>
                            <p>Outdoor ceremony lawn</p>
                        </div>
                        <div class="included-item">
                            <span class="check-icon">✓</span>
                            <p>Vineyard & garden backdrop</p>
                        </div>
                        <div class="included-item">
                            <span class="check-icon">✓</span>
                            <p>Mountain view setting</p>
                        </div>
                        <div class="included-item">
                            <span class="check-icon">✓</span>
                            <p>Parking for guests</p>
                        </div>
                        <div class="included-item">
                            <span class="check-icon">✓</span>
                            <p>Preparation areas</p>
                        </div>
                    </div>
                    
                    <p style="margin-top: 2rem; font-style: italic; color: #6B7059;">We provide the venue space only. You are welcome to bring in your own suppliers for catering, planning, décor, and all other services.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION 5: RECOMMENDED SUPPLIERS -->
    <section class="suppliers">
        <div class="container">
            <div class="section-intro">
                <h2>Recommended Suppliers</h2>
                <p>We've worked with these trusted professionals and would be happy to recommend them for your event.</p>
            </div>
            
            <div class="supplier-grid">
                <div class="supplier-card">
                    <h4>Event Planners</h4>
                    <p>Professional coordination & styling</p>
                </div>
                
                <div class="supplier-card">
                    <h4>Caterers</h4>
                    <p>Bespoke menus & service</p>
                </div>
                
                <div class="supplier-card">
                    <h4>Photographers</h4>
                    <p>Capturing your special moments</p>
                </div>
                
                <div class="supplier-card">
                    <h4>Florists</h4>
                    <p>Beautiful arrangements & décor</p>
                </div>
            </div>
            
            <p style="text-align: center; margin-top: 2rem;">We're happy to provide full contact details upon enquiry.</p>
        </div>
    </section>

    <!-- SECTION 6: CTA -->
    <section class="cta-section">
        <div class="container">
            <h2>Ready to Visit?</h2>
            <p>We'd love to show you the venue and discuss your special day.</p>
            <a href="#" class="btn">Enquire About The Venue</a>
        </div>
    </section>

</body>
</html>/* End custom CSS */