Update README.md

README.md

@@ -12,20 +12,17 @@
             padding: 0;
             box-sizing: border-box;
         }
-
         :root {
             /* Steel's Colors */
             --steel-primary: #D4A574;
             --steel-secondary: #B8860B;
             --steel-accent: #FFD700;
             --steel-dark: #8B6914;
-            
             /* Tarek's Colors */
             --tarek-primary: #00CED1;
             --tarek-secondary: #4682B4;
             --tarek-accent: #00FFFF;
             --tarek-dark: #191970;
-            
             /* Shared Colors */
             --bg-primary: #0A0A0F;
             --bg-secondary: #141420;
@@ -33,7 +30,6 @@
             --text-secondary: #B0B0B0;
             --border-glow: rgba(255, 255, 255, 0.1);
         }
-
         body {
             font-family: 'Space Grotesk', sans-serif;
             background: var(--bg-primary);
@@ -42,7 +38,6 @@
             overflow-x: hidden;
             position: relative;
         }
-
         /* Main Container */
         .main-container {
             min-height: 100vh;
@@ -50,7 +45,6 @@
             flex-direction: column;
             position: relative;
         }
-
         /* Animated Background */
         body::before {
             content: '';
@@ -65,7 +59,6 @@
             pointer-events: none;
             z-index: -2;
         }
-
         /* Particle Animation Background */
         .particles {
             position: fixed;
@@ -76,7 +69,6 @@
             pointer-events: none;
             z-index: -1;
         }
-
         .particle {
             position: absolute;
             width: 2px;
@@ -85,17 +77,14 @@
             opacity: 0;
             animation: float 15s infinite;
         }
-
         .particle.steel {
             background: var(--steel-accent);
             box-shadow: 0 0 6px var(--steel-accent);
         }
-
         .particle.tarek {
             background: var(--tarek-accent);
             box-shadow: 0 0 6px var(--tarek-accent);
         }
-
         @keyframes float {
             0%, 100% { 
                 opacity: 0; 
@@ -110,7 +99,6 @@
                 transform: translateY(10vh) scale(1);
             }
         }
-
         /* Header Styles */
         .header {
             position: relative;
@@ -121,7 +109,6 @@
             background-clip: padding-box;
             overflow: hidden;
         }
-
         .header::before {
             content: '';
             position: absolute;
@@ -132,18 +119,15 @@
             background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%);
             animation: borderFlow 3s ease-in-out infinite;
         }
-
         @keyframes borderFlow {
             0%, 100% { transform: translateX(-100%); }
             50% { transform: translateX(100%); }
         }
-
         .logo-container {
             display: inline-block;
             position: relative;
             margin-bottom: 30px;
         }
-
         .logo {
             font-family: 'Bebas Neue', cursive;
             font-size: 5rem;
@@ -152,7 +136,6 @@
             position: relative;
             display: inline-block;
         }
-
         .logo-steel {
             background: linear-gradient(135deg, var(--steel-primary) 0%, var(--steel-accent) 100%);
             -webkit-background-clip: text;
@@ -160,7 +143,6 @@
             background-clip: text;
             text-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
         }
-
         .logo-tarek {
             background: linear-gradient(135deg, var(--tarek-primary) 0%, var(--tarek-accent) 100%);
             -webkit-background-clip: text;
@@ -168,7 +150,6 @@
             background-clip: text;
             text-shadow: 0 0 30px rgba(0, 206, 209, 0.5);
         }
-
         .tagline {
             font-size: 1.2rem;
             color: var(--text-secondary);
@@ -176,7 +157,6 @@
             letter-spacing: 0.2em;
             text-transform: uppercase;
         }
-
         /* Navigation */
         .nav {
             position: sticky;
@@ -187,7 +167,6 @@
             z-index: 1000;
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
-
         .nav-container {
             max-width: 1200px;
             margin: 0 auto;
@@ -197,7 +176,6 @@
             gap: 40px;
             flex-wrap: wrap;
         }
-
         .nav-link {
             color: var(--text-secondary);
             text-decoration: none;
@@ -208,7 +186,6 @@
             transition: all 0.3s ease;
             padding: 5px 10px;
         }
-
         .nav-link::before {
             content: '';
             position: absolute;
@@ -219,22 +196,18 @@
             background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%);
             transition: width 0.3s ease;
         }
-
         .nav-link:hover {
             color: var(--text-primary);
         }
-
         .nav-link:hover::before {
             width: 100%;
         }
-
         /* Container */
         .container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 60px 20px;
         }
-
         /* Section Styles */
         .section {
             margin-bottom: 100px;
@@ -242,14 +215,12 @@
             transform: translateY(30px);
             animation: fadeInUp 0.8s ease forwards;
         }
-
         @keyframes fadeInUp {
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
-
         .section-title {
             font-family: 'Orbitron', sans-serif;
             font-size: 3rem;
@@ -259,12 +230,10 @@
             display: inline-block;
             width: 100%;
         }
-
         .section-title span {
             position: relative;
             z-index: 1;
         }
-
         .section-title::before,
         .section-title::after {
             content: '';
@@ -274,16 +243,13 @@
             height: 1px;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
         }
-
         .section-title::before {
             left: 20%;
         }
-
         .section-title::after {
             right: 20%;
             background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
         }
-
         /* About Section */
         .about-content {
             display: grid;
@@ -291,13 +257,11 @@
             gap: 60px;
             align-items: center;
         }
-
         .about-text {
             font-size: 1.1rem;
             line-height: 1.8;
             color: var(--text-secondary);
         }
-
         .about-visual {
             position: relative;
             height: 400px;
@@ -306,14 +270,12 @@
             align-items: center;
             justify-content: center;
         }
-
         .fusion-orb {
             width: 200px;
             height: 200px;
             position: relative;
             animation: pulse 4s ease-in-out infinite;
         }
-
         .fusion-orb::before {
             content: '';
             position: absolute;
@@ -324,7 +286,6 @@
             background: radial-gradient(circle at left center, var(--steel-primary) 0%, transparent 70%);
             filter: blur(20px);
         }
-
         .fusion-orb::after {
             content: '';
             position: absolute;
@@ -335,12 +296,10 @@
             background: radial-gradient(circle at right center, var(--tarek-primary) 0%, transparent 70%);
             filter: blur(20px);
         }
-
         @keyframes pulse {
             0%, 100% { transform: scale(1); }
             50% { transform: scale(1.1); }
         }
-
         /* Models Section */
         .models-grid {
             display: grid;
@@ -348,7 +307,6 @@
             gap: 30px;
             margin-top: 40px;
         }
-
         .model-card {
             background: rgba(20, 20, 32, 0.6);
             border: 1px solid rgba(255, 255, 255, 0.1);
@@ -359,7 +317,6 @@
             transition: all 0.3s ease;
             cursor: pointer;
         }
-
         .model-card::before {
             content: '';
             position: absolute;
@@ -373,15 +330,12 @@
             transition: opacity 0.3s ease;
             z-index: -1;
         }
-
         .model-card:hover {
             transform: translateY(-5px);
         }
-
         .model-card:hover::before {
             opacity: 1;
         }
-
         .model-card-inner {
             position: relative;
             background: var(--bg-secondary);
@@ -389,7 +343,6 @@
             padding: 25px;
             height: 100%;
         }
-
         .model-name {
             font-family: 'Orbitron', sans-serif;
             font-size: 1.5rem;
@@ -399,37 +352,31 @@
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
-
         .model-description {
             color: var(--text-secondary);
             margin-bottom: 20px;
             line-height: 1.6;
         }
-
         .model-stats {
             display: flex;
             gap: 20px;
             margin-top: auto;
         }
-
         .stat {
             display: flex;
             flex-direction: column;
             align-items: center;
         }
-
         .stat-value {
             font-family: 'Orbitron', sans-serif;
             font-size: 1.2rem;
             color: var(--text-primary);
         }
-
         .stat-label {
             font-size: 0.8rem;
             color: var(--text-secondary);
             text-transform: uppercase;
         }
-
         /* Team Section */
         .team-grid {
             display: grid;
@@ -437,7 +384,6 @@
             gap: 60px;
             margin-top: 60px;
         }
-
         .team-member {
             position: relative;
             padding: 40px;
@@ -445,14 +391,12 @@
             overflow: hidden;
             transition: all 0.3s ease;
         }
-
         /* Steel's Card Style */
         .team-member.steel {
             background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(139, 105, 20, 0.05) 100%);
             border: 2px solid var(--steel-dark);
             box-shadow: 0 0 30px rgba(212, 165, 116, 0.2);
         }
-
         .team-member.steel::before {
             content: '';
             position: absolute;
@@ -463,14 +407,12 @@
             background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
             animation: rotate 20s linear infinite;
         }
-
         /* Tarek's Card Style */
         .team-member.tarek {
             background: linear-gradient(135deg, rgba(0, 206, 209, 0.1) 0%, rgba(25, 25, 112, 0.05) 100%);
             border: 2px solid var(--tarek-dark);
             box-shadow: 0 0 30px rgba(0, 206, 209, 0.2);
         }
-
         .team-member.tarek::before {
             content: '';
             position: absolute;
@@ -481,22 +423,18 @@
             background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="50" cy="50" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="150" cy="150" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="100" cy="100" r="3" fill="rgba(0,206,209,0.7)"/></svg>') repeat;
             animation: twinkle 3s ease-in-out infinite;
         }
-
         @keyframes rotate {
             from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
         }
-
         @keyframes twinkle {
             0%, 100% { opacity: 0.3; }
             50% { opacity: 1; }
         }
-
         .member-content {
             position: relative;
             z-index: 1;
         }
-
         .member-avatar {
             width: 120px;
             height: 120px;
@@ -510,59 +448,49 @@
             font-family: 'Bebas Neue', cursive;
             font-size: 3rem;
         }
-
         .member-avatar img {
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
-
         .steel .member-avatar {
             background: linear-gradient(135deg, var(--steel-primary), var(--steel-dark));
             box-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
             color: var(--bg-primary);
         }
-
         .tarek .member-avatar {
             background: linear-gradient(135deg, var(--tarek-primary), var(--tarek-dark));
             box-shadow: 0 0 30px rgba(0, 206, 209, 0.5);
             color: var(--bg-primary);
         }
-
         .member-name {
             font-family: 'Orbitron', sans-serif;
             font-size: 2rem;
             margin-bottom: 10px;
         }
-
         .steel .member-name {
             color: var(--steel-accent);
             text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
         }
-
         .tarek .member-name {
             color: var(--tarek-accent);
             text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
         }
-
         .member-role {
             color: var(--text-secondary);
             margin-bottom: 20px;
             text-transform: uppercase;
             letter-spacing: 0.1em;
         }
-
         .member-bio {
             line-height: 1.8;
             color: var(--text-secondary);
             margin-bottom: 20px;
         }
-
         .member-links {
             display: flex;
             gap: 15px;
         }
-
         .member-link {
             padding: 8px 20px;
             border-radius: 25px;
@@ -570,43 +498,36 @@
             font-weight: 500;
             transition: all 0.3s ease;
         }
-
         .steel .member-link {
             background: rgba(212, 165, 116, 0.2);
             color: var(--steel-accent);
             border: 1px solid var(--steel-primary);
         }
-
         .steel .member-link:hover {
             background: rgba(212, 165, 116, 0.3);
             box-shadow: 0 0 15px rgba(212, 165, 116, 0.5);
         }
-
         .tarek .member-link {
             background: rgba(0, 206, 209, 0.2);
             color: var(--tarek-accent);
             border: 1px solid var(--tarek-primary);
         }
-
         .tarek .member-link:hover {
             background: rgba(0, 206, 209, 0.3);
             box-shadow: 0 0 15px rgba(0, 206, 209, 0.5);
         }
-
         /* Community Section */
         .community-content {
             text-align: center;
             max-width: 800px;
             margin: 0 auto;
         }
-
         .community-stats {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 40px;
             margin: 60px 0;
         }
-
         .community-stat {
             padding: 30px;
             background: rgba(20, 20, 32, 0.6);
@@ -614,12 +535,10 @@
             border: 1px solid rgba(255, 255, 255, 0.1);
             transition: all 0.3s ease;
         }
-
         .community-stat:hover {
             transform: translateY(-5px);
             border-color: rgba(255, 255, 255, 0.2);
         }
-
         .stat-number {
             font-family: 'Orbitron', sans-serif;
             font-size: 3rem;
@@ -629,7 +548,6 @@
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
-
         .join-button {
             display: inline-block;
             padding: 15px 40px;
@@ -645,12 +563,10 @@
             transition: all 0.3s ease;
             margin-top: 40px;
         }
-
         .join-button:hover {
             transform: scale(1.05);
             box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
         }
-
         .join-button::before {
             content: '';
             position: absolute;
@@ -661,11 +577,9 @@
             background: rgba(255, 255, 255, 0.3);
             transition: left 0.5s ease;
         }
-
         .join-button:hover::before {
             left: 100%;
         }
-
         /* Footer */
         .footer {
             background: rgba(10, 10, 15, 0.9);
@@ -674,59 +588,48 @@
             border-top: 1px solid rgba(255, 255, 255, 0.1);
             margin-top: 100px;
         }
-
         .footer-text {
             color: var(--text-secondary);
             margin-bottom: 20px;
         }
-
         .footer-links {
             display: flex;
             justify-content: center;
             gap: 30px;
             flex-wrap: wrap;
         }
-
         .footer-link {
             color: var(--text-secondary);
             text-decoration: none;
             transition: color 0.3s ease;
         }
-
         .footer-link:hover {
             color: var(--text-primary);
         }
-
         /* Responsive Design */
         @media (max-width: 768px) {
             .logo {
                 font-size: 3rem;
             }
-
             .section-title {
                 font-size: 2rem;
             }
-
             .about-content {
                 grid-template-columns: 1fr;
                 gap: 40px;
             }
-
             .models-grid,
             .team-grid {
                 grid-template-columns: 1fr;
             }
-
             .community-stats {
                 grid-template-columns: 1fr;
                 gap: 20px;
             }
-
             .nav-container {
                 gap: 20px;
             }
         }
-
         /* Featured Models Banner */
         .featured-banner {
             background: linear-gradient(135deg, rgba(212, 165, 116, 0.1), rgba(0, 206, 209, 0.1));
@@ -738,7 +641,6 @@
             position: relative;
             overflow: hidden;
         }
-
         .featured-banner::before {
             content: '';
             position: absolute;
@@ -750,7 +652,6 @@
             -webkit-mask-composite: xor;
             mask-composite: exclude;
         }
-
         .featured-title {
             font-family: 'Orbitron', sans-serif;
             font-size: 2rem;
@@ -767,7 +668,6 @@
     <div class="main-container">
         <!-- Particle Background -->
         <div class="particles" id="particles"></div>
-
         <!-- Header -->
         <header class="header">
             <div class="logo-container">
@@ -777,7 +677,6 @@
                 </h1>
             </div>
         </header>
-
         <!-- Main Content -->
         <main class="container">
         <!-- About Section -->
@@ -792,7 +691,6 @@
                 </div>
             </div>
         </section>
-
         <!-- Featured Models -->
         <section id="featured" class="section">
             <div class="featured-banner">
@@ -841,7 +739,6 @@
                 </div>
             </div>
         </section>
-
         <!-- Models Section -->
         <section id="models" class="section">
             <h2 class="section-title"><span>Our Models</span></h2>
@@ -908,7 +805,6 @@
                 </div>-->
             </div>
         </section>
-
         <!-- Team Section -->
         <section id="team" class="section">
             <h2 class="section-title"><span>Team</span></h2>
@@ -944,19 +840,16 @@
             </div>
         </section>
         </main>
-
         <!-- Footer -->
         <footer class="footer">
             <p class="footer-text">© 2025 Crucible Labs. Forged with passion, powered by innovation.</p>
         </footer>
     </div>
-
     <script>
         // Create particle effect
         function createParticles() {
             const particlesContainer = document.getElementById('particles');
             const particleCount = 50;
-
             for (let i = 0; i < particleCount; i++) {
                 const particle = document.createElement('div');
                 particle.className = `particle ${Math.random() > 0.5 ? 'steel' : 'tarek'}`;
@@ -966,7 +859,6 @@
                 particlesContainer.appendChild(particle);
             }
         }
-
         // Smooth scrolling for navigation links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {
@@ -980,13 +872,11 @@
                 }
             });
         });
-
         // Intersection Observer for fade-in animations
         const observerOptions = {
             threshold: 0.1,
             rootMargin: '0px 0px -100px 0px'
         };
-
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -995,16 +885,13 @@
                 }
             });
         }, observerOptions);
-
         // Observe all sections
         document.querySelectorAll('.section').forEach(section => {
             section.style.animationPlayState = 'paused';
             observer.observe(section);
         });
-
         // Initialize particles
         createParticles();
-
         // Add hover effect to model cards
         document.querySelectorAll('.model-card').forEach(card => {
             card.addEventListener('mouseenter', function() {