<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Charles B. Keesee Educational Fund - Under Construction</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f8fffe, #e8f5e8);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header with curved design */
        header {
            background: linear-gradient(135deg, #2c5530, #4a7c59);
            color: white;
            padding: 40px 0 80px 0;
            position: relative;
            overflow: hidden;
        }

        header::after {
            content: '';
            position: absolute;
            bottom: -50px;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(135deg, #2c5530, #4a7c59);
            border-radius: 0 0 50% 50%;
            transform: scaleX(1.2);
        }

        .header-content {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
        }

        .logo-section {
            flex-shrink: 0;
        }

        .logo-img {
            height: 120px;
            width: auto;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
        }

        .header-text {
            text-align: left;
            flex-grow: 1;
        }

        .header-title {
            font-size: 2.8rem;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header-subtitle {
            font-size: 1.3rem;
            font-style: italic;
            opacity: 0.9;
        }

        /* Main Content */
        main {
            padding: 60px 0;
            position: relative;
            min-height: calc(100vh - 400px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Floating background elements */
        .bg-element {
            position: absolute;
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
            pointer-events: none;
        }

        .bg-element:nth-child(1) {
            top: 10%;
            left: 5%;
            font-size: 8rem;
            animation-delay: 0s;
        }

        .bg-element:nth-child(2) {
            top: 60%;
            right: 10%;
            font-size: 6rem;
            animation-delay: 2s;
        }

        .bg-element:nth-child(3) {
            bottom: 20%;
            left: 15%;
            font-size: 4rem;
            animation-delay: 4s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(10deg); }
        }

        /* Construction Section */
        .construction-section {
            background: white;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-left: 8px solid #f39c12;
            text-align: center;
            position: relative;
            z-index: 10;
            max-width: 900px;
            margin: 0 auto;
        }

        .construction-icon {
            font-size: 8rem;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }

        .construction-crane {
            animation: swing 3s ease-in-out infinite;
            transform-origin: top center;
        }

        @keyframes swing {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }

        .construction-title {
            font-size: 3rem;
            color: #2c5530;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .construction-subtitle {
            font-size: 1.4rem;
            color: #4a7c59;
            margin-bottom: 40px;
            font-style: italic;
        }

        .construction-message {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: #333;
        }

        .highlight-date {
            background: linear-gradient(135deg, #fff3cd, #fef9e7);
            border: 2px solid #f4d03f;
            padding: 20px;
            border-radius: 15px;
            margin: 30px 0;
            font-weight: bold;
            color: #856404;
        }

        .contact-info {
            background: linear-gradient(135deg, #e8f5e8, #d4f1d4);
            padding: 40px;
            border-radius: 15px;
            margin: 40px 0;
            text-align: left;
        }

        .contact-info h3 {
            color: #1a3d1f;
            margin-bottom: 20px;
            font-size: 1.6rem;
            text-align: center;
        }

        .contact-item {
            margin: 15px 0;
            font-size: 1.1rem;
        }

        .contact-label {
            font-weight: bold;
            color: #2c5530;
            display: inline-block;
            width: 180px;
        }

        .contact-value {
            color: #1a3d1f;
        }

        .important-notice {
            background: linear-gradient(135deg, #ffe6e6, #fff0f0);
            border: 2px solid #e74c3c;
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            position: relative;
        }

        .important-notice::before {
            content: '⚠️';
            position: absolute;
            top: -15px;
            left: 20px;
            background: #ffe6e6;
            padding: 0 10px;
            font-size: 1.5rem;
        }

        .important-notice h4 {
            color: #c0392b;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }

        .important-notice p {
            color: #333;
            margin-bottom: 15px;
        }

        /* Construction tools animation */
        .tools {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 30px 0;
            font-size: 3rem;
        }

        .tool {
            animation: bounce 2s ease-in-out infinite;
        }

        .tool:nth-child(1) { animation-delay: 0s; }
        .tool:nth-child(2) { animation-delay: 0.5s; }
        .tool:nth-child(3) { animation-delay: 1s; }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        /* Progress bar */
        .progress-container {
            margin: 40px 0;
            text-align: center;
        }

        .progress-label {
            font-size: 1.1rem;
            color: #2c5530;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #f39c12, #e67e22);
            width: 75%;
            border-radius: 10px;
            animation: progressAnimation 3s ease-out;
            position: relative;
        }

        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes progressAnimation {
            from { width: 0%; }
            to { width: 75%; }
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .progress-text {
            margin-top: 10px;
            font-size: 0.9rem;
            color: #666;
        }

        /* Footer */
        footer {
            background: linear-gradient(135deg, #1a3d1f, #2c5530);
            color: white;
            text-align: center;
            padding: 40px 0;
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: -50px;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(135deg, #1a3d1f, #2c5530);
            border-radius: 50% 50% 0 0;
            transform: scaleX(1.2);
        }

        .footer-content {
            position: relative;
            z-index: 2;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }

            .header-text {
                text-align: center;
            }

            .header-title {
                font-size: 2.2rem;
            }

            .construction-section {
                padding: 40px 30px;
                margin: 20px;
            }

            .construction-title {
                font-size: 2.2rem;
            }

            .construction-icon {
                font-size: 6rem;
            }

            .contact-item {
                text-align: center;
            }

            .contact-label {
                display: block;
                width: auto;
                margin-bottom: 5px;
            }

            .tools {
                font-size: 2rem;
                gap: 20px;
            }

            .logo-img {
                height: 80px;
            }

            .bg-element {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .logo-img {
                height: 60px;
            }

            .header-title {
                font-size: 1.8rem;
            }

            .header-subtitle {
                font-size: 1.1rem;
            }

            .construction-section {
                padding: 25px 20px;
            }

            .construction-title {
                font-size: 1.8rem;
            }

            .construction-icon {
                font-size: 4rem;
            }
        }
    </style>
</head>
<body>
    <!-- Floating background elements -->
    <div class="bg-element">🏗️</div>
    <div class="bg-element">🔧</div>
    <div class="bg-element">⚙️</div>

    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo-section">
                    <img src="https://cbkeesee.com/images/logo3.png" alt="Charles B. Keesee Educational Fund Logo" class="logo-img">
                </div>
                <div class="header-text">
                    <h1 class="header-title">Charles B. Keesee Educational Fund</h1>
                    <p class="header-subtitle">Educational Grants for Students Pursuing Theological Education</p>
                </div>
            </div>
        </div>
    </header>

    <main>
        <div class="container">
            <div class="construction-section">
                <div class="construction-icon construction-crane">🏗️</div>
                
                <h1 class="construction-title">Under Construction</h1>
                <p class="construction-subtitle">Our website is currently under construction.</p>
                
                <p class="construction-message">We're working hard to create a new website and are excited to share it with you.</p>
                
                <div class="highlight-date">
                    🚧 Please check back after January 1st! 🚧
                </div>

                <div class="tools">
                    <span class="tool">🔨</span>
                    <span class="tool">🔧</span>
                    <span class="tool">⚙️</span>
                </div>

                <div class="progress-container">
                    <div class="progress-label">Website Progress</div>
                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>
                    <div class="progress-text">75% Complete - Almost there!</div>
                </div>

                <div class="contact-info">
                    <h3>Contact Information</h3>
                    <div class="contact-item">
                        <span class="contact-label">For urgent inquiries:</span>
                        <span class="contact-value">(276) 632-2229</span>
                    </div>
                    <div class="contact-item">
                        <span class="contact-label">For general inquiries:</span>
                        <span class="contact-value">information@cbkeesee.com</span>
                    </div>
                </div>

                <div class="important-notice">
                    <h4>Important Application Information</h4>
                    <p>We are no longer accepting applications for the 2025/26 academic year. If you applied for a spring only grant award, you will be notified in late December when decisions are available on your applicant dashboard.</p>
                    <p>Applications for the 2026/27 academic year will be accepted after January 1st. Please review our website after January 1st for a list of eligible schools, eligible degrees, and applicant requirements.</p>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <div class="footer-content">
                <p>&copy; Copyright 2025 Charles B. Keesee Educational Fund, Inc. | All Rights Reserved</p>
                <p><small>Developed by Keystone System Technologies, Inc.</small></p>
            </div>
        </div>
    </footer>
</body>
</html>