/* ===== CONTACT PAGE STYLES ===== */
                .contact-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 20px;
                    font-family: 'Arial', sans-serif;
                }

                /* Hero Section */
                .contact-hero {
                    text-align: center;
                    padding: 40px 20px;
                    margin-bottom: 30px;
                    position: relative;
                    overflow: hidden;
                }

                .contact-hero h1 {
                    font-size: 2.5rem;
                    color: #2c3e50;
                    margin-bottom: 15px;
                }

                .contact-hero p {
                    font-size: 1.1rem;
                    color: #7f8c8d;
                    max-width: 600px;
                    margin: 0 auto 30px;
                }

                .hero-illustration {
                    position: relative;
                    height: 150px;
                    margin-top: 30px;
                }

                .circle {
                    width: 100px;
                    height: 100px;
                    background-color: #ff6b6b;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    animation: float 3s ease-in-out infinite;
                }

                .wave {
                    width: 200px;
                    height: 50px;
                    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg"><path d="M0,15 C30,30 70,0 120,15 L120,30 L0,30 Z" fill="%23ff6b6b"/></svg>') repeat-x;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    animation: wave 8s linear infinite;
                }

                /* Contact Options */
                .contact-options {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 20px;
                    margin-bottom: 40px;
                }

                .option-card {
                    background: white;
                    border-radius: 10px;
                    padding: 30px;
                    text-align: center;
                    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
                    transition: transform 0.3s, box-shadow 0.3s;
                }

                .option-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                }

                .option-card i {
                    font-size: 2.5rem;
                    margin-bottom: 20px;
                    display: block;
                }

                .option-card.chat i { color: #3498db; }
                .option-card.call i { color: #2ecc71; }
                .option-card.email i { color: #e74c3c; }

                .option-card h3 {
                    font-size: 1.3rem;
                    margin-bottom: 10px;
                    color: #2c3e50;
                }

                .option-card p {
                    color: #7f8c8d;
                    margin-bottom: 20px;
                    font-size: 0.95rem;
                }

                .option-btn {
                    background: #2c3e50;
                    color: white;
                    border: none;
                    padding: 10px 20px;
                    border-radius: 5px;
                    cursor: pointer;
                    transition: background 0.3s;
                }

                .option-btn:hover {
                    background: #1a252f;
                }

                /* Contact Form */
                .contact-form-section {
                    background: white;
                    border-radius: 10px;
                    padding: 30px;
                    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
                    margin-bottom: 40px;
                }

                .contact-form-section h2 {
                    text-align: center;
                    margin-bottom: 30px;
                    color: #2c3e50;
                }

                .contact-form {
                    max-width: 800px;
                    margin: 0 auto;
                }

                .form-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 20px;
                    margin-bottom: 20px;
                }

                .form-group {
                    margin-bottom: 20px;
                }

                .form-group label {
                    display: block;
                    margin-bottom: 8px;
                    font-weight: 600;
                    color: #2c3e50;
                }

                .form-group input,
                .form-group select,
                .form-group textarea {
                    width: 100%;
                    padding: 12px 15px;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                    font-size: 1rem;
                }

                .form-group textarea {
                    min-height: 150px;
                    resize: vertical;
                }

                /* File Upload */
                .upload-container {
                    border: 2px dashed #ddd;
                    border-radius: 5px;
                    padding: 20px;
                    text-align: center;
                    cursor: pointer;
                    transition: border-color 0.3s;
                    position: relative;
                }

                .upload-container:hover {
                    border-color: #3498db;
                }

                .upload-container i {
                    font-size: 1.5rem;
                    color: #3498db;
                    margin-bottom: 10px;
                    display: block;
                }

                .upload-container p {
                    color: #7f8c8d;
                    margin: 0;
                }

                #file-upload {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    cursor: pointer;
                }

                .file-preview {
                    margin-top: 15px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                }

                .file-preview-item {
                    background: #f5f5f5;
                    padding: 8px 12px;
                    border-radius: 5px;
                    font-size: 0.9rem;
                    display: flex;
                    align-items: center;
                }

                .file-preview-item i {
                    margin-right: 8px;
                    color: #3498db;
                }

                /* Submit Button */
                .submit-btn {
                    background: #ff6b6b;
                    color: white;
                    border: none;
                    padding: 15px 30px;
                    border-radius: 5px;
                    font-size: 1rem;
                    font-weight: 600;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    margin-top: 20px;
                    width: 100%;
                    transition: background 0.3s;
                }

                .submit-btn:hover {
                    background: #ff5252;
                }

                /* FAQ Section */
                .faq-section {
                    margin-bottom: 50px;
                }

                .faq-section h2 {
                    text-align: center;
                    margin-bottom: 30px;
                    color: #2c3e50;
                }

                .accordion {
                    max-width: 800px;
                    margin: 0 auto;
                }

                .accordion-item {
                    border-bottom: 1px solid #ddd;
                    margin-bottom: 10px;
                }

                .accordion-header {
                    width: 100%;
                    padding: 15px 0;
                    text-align: left;
                    background: none;
                    border: none;
                    font-size: 1.1rem;
                    font-weight: 600;
                    color: #2c3e50;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    cursor: pointer;
                }

                .accordion-header i {
                    transition: transform 0.3s;
                }

                .accordion-item.active .accordion-header i {
                    transform: rotate(180deg);
                }

                .accordion-content {
                    padding: 0 0 15px;
                    color: #7f8c8d;
                    line-height: 1.6;
                    display: none;
                }

                .accordion-item.active .accordion-content {
                    display: block;
                }

                /* Animations */
                @keyframes float {
                    0%, 100% { transform: translateX(-50%) translateY(0); }
                    50% { transform: translateX(-50%) translateY(-10px); }
                }

                @keyframes wave {
                    0% { transform: translateX(-50%) translateX(0); }
                    100% { transform: translateX(-50%) translateX(-100px); }
                }

                /* Responsive Design */
                @media (max-width: 768px) {
                    .form-row {
                        grid-template-columns: 1fr;
                    }
                    
                    .contact-hero h1 {
                        font-size: 2rem;
                    }
                    
                    .contact-options {
                        grid-template-columns: 1fr;
                    }
                    
                    .hero-illustration {
                        height: 120px;
                    }
                    
                    .circle {
                        width: 80px;
                        height: 80px;
                    }
                }

                @media (max-width: 480px) {
                    .contact-container {
                        padding: 15px;
                    }
                    
                    .contact-hero h1 {
                        font-size: 1.8rem;
                    }
                    
                    .contact-hero p {
                        font-size: 1rem;
                    }
                    
                    .option-card {
                        padding: 20px;
                    }
                    
                    .contact-form-section {
                        padding: 20px;
                    }
                }