├── new.txt ├── login.html ├── README.md ├── workout.html ├── index.html ├── script.js └── style.css /new.txt: -------------------------------------------------------------------------------- 1 | doing a random commit but 2 | "hello world" is everyone first code 3 | today also I couldn't commit anything useful, so just a random txt commit -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | FitHub - Login 9 | 10 | 11 |
12 |

FitHub

13 | 19 |
20 | 21 |
22 |

Login to FitHub

23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fithub 2 | 3 | Welcome to **Fithub**, your ultimate destination for fitness and wellness! 4 | 5 | ## Overview 6 | 7 | Fithub is a fitness-focused website designed to help users achieve their health goals. The website is developed using HTML and CSS and features various pages to enhance user experience. 8 | 9 | ## Website Pages 10 | 11 | - **Home Page**: The main landing page of Fithub, providing an overview of the website's features and services. 12 | - **Workouts Page**: A page dedicated to workout routines and exercises. 13 | - **Articles Page**: A collection of articles related to fitness and health. 14 | - **Blog Page**: A blog section where users can find fitness tips and updates. 15 | - **Contact Page**: A page for users to get in touch with us for inquiries and support. 16 | - **Login Page**: A secure page for users to log in and access personalized content. 17 | 18 | ## Preview 19 | 20 | You can preview the website at [Fithub Preview](https://anubhob435.github.io/Aix/workout.html). 21 | 22 | ## Development 23 | 24 | The website is built using: 25 | - HTML 26 | - CSS 27 | 28 | ## Copyright 29 | 30 | © 2024 Fithub. All rights reserved. 31 | 32 | ## Contact 33 | 34 | For any inquiries or support, please contact me at: [email@example.com](mailto:email@example.com) 35 | -------------------------------------------------------------------------------- /workout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FitHub - Workouts 7 | 64 | 65 | 66 |
67 |

FitHub

68 | 78 |
79 | 80 |
81 |

Workout Plans

82 |
83 |
84 |

Cardio Workout

85 |

Get your heart pumping with this high-intensity cardio workout.

86 |
87 |
88 |

Strength Training

89 |

Build muscle and improve your strength with this effective training routine.

90 |
91 | 92 |
93 |
94 | 95 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | FitHub - Your Fitness Journey Starts Here 11 | 12 | 13 |
14 |
15 | 16 |

Loading FitHub...

17 |
18 |
19 | 20 |
21 | 27 | 44 |
45 | 48 | 52 |
53 | 56 |
57 | 58 |
59 |
60 |
61 |

Transform Your Life Through Fitness

62 |

Join our community of fitness enthusiasts and achieve your health goals with personalized workouts and expert guidance.

63 |
64 | 65 | Get Started 66 | 67 | 68 | 69 | 70 | Learn More 71 | 72 |
73 |
74 |
75 | 10K+ 76 | Happy Members 77 |
78 |
79 | 500+ 80 | Workout Plans 81 |
82 |
83 | 97% 84 | Success Rate 85 |
86 |
87 |
88 |

Welcome to FitHub

89 |

Your ultimate fitness destination for a healthier, stronger you.

90 |
91 |
92 |

Personal Training

93 |

Get customized workout plans tailored to your specific goals and fitness level.

94 | Learn more 95 |
96 |
97 |

Nutrition Guidance

98 |

Expert advice on maintaining a balanced diet to fuel your fitness journey.

99 | Learn more 100 |
101 |
102 |

Community Support

103 |

Join our fitness community for motivation, accountability and support.

104 | Learn more 105 |
106 |
107 |
108 |
109 |
110 | 111 |
112 |

FitHub Blog

113 |
114 |
115 |

10 Tips for a Healthy Lifestyle

116 |

Discover proven strategies to maintain a healthy work-life balance while achieving your fitness goals.

117 | Read More 118 |
119 |
120 |

The Science of Rest Days

121 |

Understanding why rest is crucial for muscle recovery and overall fitness progress.

122 | Read More 123 |
124 |
125 |

Mindful Exercise Practices

126 |

Combining mental wellness with physical fitness for optimal results.

127 | Read More 128 |
129 |
130 |
131 | 132 |
133 |

Fitness Articles

134 |
135 |
136 |

The Complete Guide to HIIT

137 |

High-Intensity Interval Training: benefits, workouts, and implementation strategies.

138 | Read Full Article 139 |
140 |
141 |

Nutrition for Athletes

142 |

Essential nutrients, meal timing, and dietary strategies for peak performance.

143 | Read Full Article 144 |
145 |
146 |

Strength Training 101

147 |

A comprehensive guide to building strength and muscle effectively.

148 | Read Full Article 149 |
150 |
151 |
152 | 153 |
154 |

Contact Us

155 |
156 |

Get in touch with our fitness experts for personalized advice and support.

157 |
158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 171 | 172 | 173 | 174 | 175 | 176 |
177 |
178 |
179 |
180 | 181 |
182 | 183 | 184 | 185 | 186 |
187 | 188 |
189 | 192 |
193 | 194 | 195 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Loading animation 2 | window.addEventListener('load', () => { 3 | setTimeout(() => { 4 | document.getElementById('loader').style.display = 'none'; 5 | animateHeroElements(); 6 | }, 1500); 7 | }); 8 | 9 | // Animate hero elements with staggered timing 10 | function animateHeroElements() { 11 | const heroElements = [ 12 | document.querySelector('.hero-title'), 13 | document.querySelector('.hero-subtitle'), 14 | document.querySelector('.hero-actions'), 15 | document.querySelector('.stats-container') 16 | ]; 17 | 18 | heroElements.forEach((element, index) => { 19 | if (element) { 20 | setTimeout(() => { 21 | element.classList.add('fade-in'); 22 | }, 300 * index); 23 | } 24 | }); 25 | } 26 | 27 | // Smooth scroll for navigation links 28 | document.querySelectorAll('a[href^="#"]').forEach(anchor => { 29 | anchor.addEventListener('click', function (e) { 30 | e.preventDefault(); 31 | document.querySelector(this.getAttribute('href')).scrollIntoView({ 32 | behavior: 'smooth' 33 | }); 34 | }); 35 | }); 36 | 37 | // Dark mode toggle 38 | const darkModeToggle = document.getElementById('darkModeToggle'); 39 | const html = document.documentElement; 40 | 41 | darkModeToggle.addEventListener('click', () => { 42 | html.dataset.theme = html.dataset.theme === 'light' ? 'dark' : 'light'; 43 | updateDarkModeIcon(); 44 | updateDarkModeIconMobile(); 45 | localStorage.setItem('theme', html.dataset.theme); 46 | }); 47 | 48 | function updateDarkModeIcon() { 49 | const icon = darkModeToggle.querySelector('i'); 50 | if (html.dataset.theme === 'dark') { 51 | icon.classList.remove('fa-moon'); 52 | icon.classList.add('fa-sun'); 53 | } else { 54 | icon.classList.remove('fa-sun'); 55 | icon.classList.add('fa-moon'); 56 | } 57 | } 58 | 59 | // Update both dark mode toggles 60 | const darkModeToggleMobile = document.getElementById('darkModeToggleMobile'); 61 | 62 | darkModeToggleMobile.addEventListener('click', () => { 63 | html.dataset.theme = html.dataset.theme === 'light' ? 'dark' : 'light'; 64 | updateDarkModeIcon(); 65 | updateDarkModeIconMobile(); 66 | localStorage.setItem('theme', html.dataset.theme); 67 | }); 68 | 69 | function updateDarkModeIconMobile() { 70 | const icon = darkModeToggleMobile.querySelector('i'); 71 | if (html.dataset.theme === 'dark') { 72 | icon.classList.remove('fa-moon'); 73 | icon.classList.add('fa-sun'); 74 | } else { 75 | icon.classList.remove('fa-sun'); 76 | icon.classList.add('fa-moon'); 77 | } 78 | } 79 | 80 | // Update initial state for mobile toggle 81 | updateDarkModeIconMobile(); 82 | 83 | // Check for saved theme preference 84 | const savedTheme = localStorage.getItem('theme') || 'light'; 85 | html.dataset.theme = savedTheme; 86 | updateDarkModeIcon(); 87 | updateDarkModeIconMobile(); 88 | 89 | // Intersection Observer for fade-in animations 90 | const observerOptions = { 91 | root: null, 92 | threshold: 0.15, 93 | rootMargin: '0px' 94 | }; 95 | 96 | const observer = new IntersectionObserver((entries) => { 97 | entries.forEach(entry => { 98 | if (entry.isIntersecting) { 99 | entry.target.classList.add('show'); 100 | observer.unobserve(entry.target); 101 | } 102 | }); 103 | }, observerOptions); 104 | 105 | // Apply to various elements that should animate on scroll 106 | document.querySelectorAll('.feature-card, .blog-card, .article, .section-header, .contact-info, #contactForm').forEach((el) => { 107 | observer.observe(el); 108 | }); 109 | 110 | // Enhanced form submission with validation and feedback 111 | function submitForm() { 112 | const name = document.getElementById('name').value.trim(); 113 | const email = document.getElementById('email').value.trim(); 114 | const subject = document.getElementById('subject').value; 115 | const message = document.getElementById('message').value.trim(); 116 | const submitBtn = document.getElementById('contactForm').querySelector('button'); 117 | 118 | // Reset previous error states 119 | document.querySelectorAll('.error').forEach(el => el.remove()); 120 | document.querySelectorAll('.input-error').forEach(el => el.classList.remove('input-error')); 121 | 122 | // Validate 123 | let isValid = true; 124 | 125 | if (!name) { 126 | addError('name', 'Please enter your name'); 127 | isValid = false; 128 | } 129 | 130 | if (!email) { 131 | addError('email', 'Please enter your email'); 132 | isValid = false; 133 | } else if (!isValidEmail(email)) { 134 | addError('email', 'Please enter a valid email address'); 135 | isValid = false; 136 | } 137 | 138 | if (!subject) { 139 | addError('subject', 'Please select a topic'); 140 | isValid = false; 141 | } 142 | 143 | if (!message) { 144 | addError('message', 'Please enter your message'); 145 | isValid = false; 146 | } 147 | 148 | if (isValid) { 149 | // Show loading state 150 | const originalText = submitBtn.innerHTML; 151 | submitBtn.innerHTML = ' Sending...'; 152 | submitBtn.disabled = true; 153 | 154 | // Simulate API call (replace with actual API call) 155 | setTimeout(() => { 156 | document.getElementById('contactForm').reset(); 157 | submitBtn.innerHTML = ' Message Sent!'; 158 | 159 | setTimeout(() => { 160 | submitBtn.innerHTML = originalText; 161 | submitBtn.disabled = false; 162 | }, 3000); 163 | 164 | // Show success message 165 | const formContainer = document.getElementById('contactForm'); 166 | const successMsg = document.createElement('div'); 167 | successMsg.className = 'success-message'; 168 | successMsg.innerHTML = ` Thank you, ${name}! We'll get back to you soon.`; 169 | formContainer.parentNode.insertBefore(successMsg, formContainer.nextSibling); 170 | 171 | setTimeout(() => { 172 | successMsg.classList.add('show'); 173 | setTimeout(() => { 174 | successMsg.classList.remove('show'); 175 | setTimeout(() => { 176 | successMsg.remove(); 177 | }, 300); 178 | }, 5000); 179 | }, 100); 180 | }, 1500); 181 | } 182 | } 183 | 184 | function addError(fieldId, message) { 185 | const field = document.getElementById(fieldId); 186 | field.classList.add('input-error'); 187 | 188 | const errorDiv = document.createElement('div'); 189 | errorDiv.className = 'error'; 190 | errorDiv.innerHTML = message; 191 | 192 | field.parentNode.insertBefore(errorDiv, field.nextSibling); 193 | } 194 | 195 | function isValidEmail(email) { 196 | const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 197 | return regex.test(email); 198 | } 199 | 200 | // Add active class to current section in navigation 201 | document.addEventListener('scroll', function() { 202 | const sections = document.querySelectorAll('section'); 203 | const navLinks = document.querySelectorAll('nav a'); 204 | 205 | let currentSection = ''; 206 | 207 | sections.forEach(section => { 208 | const sectionTop = section.offsetTop; 209 | const sectionHeight = section.clientHeight; 210 | if (window.scrollY >= sectionTop - 200 && window.scrollY < sectionTop + sectionHeight - 200) { 211 | currentSection = section.getAttribute('id'); 212 | } 213 | }); 214 | 215 | navLinks.forEach(link => { 216 | link.classList.remove('active'); 217 | if (link.getAttribute('href') === '#' + currentSection) { 218 | link.classList.add('active'); 219 | } 220 | }); 221 | }); 222 | 223 | // Mobile menu functionality 224 | const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); 225 | const nav = document.querySelector('nav'); 226 | 227 | mobileMenuToggle.addEventListener('click', () => { 228 | nav.classList.toggle('active'); 229 | document.body.classList.toggle('menu-open'); 230 | const icon = mobileMenuToggle.querySelector('i'); 231 | icon.classList.toggle('fa-bars'); 232 | icon.classList.toggle('fa-times'); 233 | }); 234 | 235 | // Close mobile menu when clicking a link 236 | document.querySelectorAll('nav a').forEach(link => { 237 | link.addEventListener('click', () => { 238 | nav.classList.remove('active'); 239 | document.body.classList.remove('menu-open'); 240 | const icon = mobileMenuToggle.querySelector('i'); 241 | icon.classList.add('fa-bars'); 242 | icon.classList.remove('fa-times'); 243 | }); 244 | }); 245 | 246 | // Close mobile menu when clicking outside 247 | document.addEventListener('click', (e) => { 248 | if (!nav.contains(e.target) && !mobileMenuToggle.contains(e.target) && nav.classList.contains('active')) { 249 | nav.classList.remove('active'); 250 | document.body.classList.remove('menu-open'); 251 | const icon = mobileMenuToggle.querySelector('i'); 252 | icon.classList.add('fa-bars'); 253 | icon.classList.remove('fa-times'); 254 | } 255 | }); 256 | 257 | // Scroll to top button 258 | const scrollToTopBtn = document.getElementById('scrollTop'); 259 | 260 | if (scrollToTopBtn) { 261 | window.addEventListener('scroll', () => { 262 | if (window.scrollY > 300) { 263 | document.querySelector('.scroll-to-top').classList.add('visible'); 264 | } else { 265 | document.querySelector('.scroll-to-top').classList.remove('visible'); 266 | } 267 | }); 268 | 269 | scrollToTopBtn.addEventListener('click', () => { 270 | window.scrollTo({ 271 | top: 0, 272 | behavior: 'smooth' 273 | }); 274 | }); 275 | } 276 | 277 | // Animate counting for stat numbers 278 | function animateCounters() { 279 | const stats = document.querySelectorAll('.stat-number'); 280 | 281 | stats.forEach(stat => { 282 | // Get the target number 283 | const target = parseInt(stat.innerText); 284 | // Set start at 0 285 | let count = 0; 286 | // Set duration for counting animation (in ms) 287 | const duration = 2000; 288 | // Calculate increment step based on target and duration 289 | const increment = target / (duration / 30); 290 | 291 | // Start counting 292 | const counter = setInterval(() => { 293 | count += increment; 294 | // Update the content 295 | if (count < target) { 296 | if (target > 1000) { 297 | stat.innerText = Math.floor(count / 1000) + 'K+'; 298 | } else { 299 | stat.innerText = Math.floor(count) + '%'; 300 | } 301 | } else { 302 | // Ensure we end with the exact target 303 | if (target > 1000) { 304 | stat.innerText = Math.floor(target / 1000) + 'K+'; 305 | } else { 306 | stat.innerText = target + '%'; 307 | } 308 | clearInterval(counter); 309 | } 310 | }, 30); 311 | }); 312 | } 313 | 314 | // Run counter animation when stats are visible 315 | const statsObserver = new IntersectionObserver((entries) => { 316 | entries.forEach(entry => { 317 | if (entry.isIntersecting) { 318 | animateCounters(); 319 | statsObserver.unobserve(entry.target); 320 | } 321 | }); 322 | }, { threshold: 0.5 }); 323 | 324 | const statsContainer = document.querySelector('.stats-container'); 325 | if (statsContainer) { 326 | statsObserver.observe(statsContainer); 327 | } 328 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #e11d48; /* vibrant rose-red */ 3 | --primary-light: #fecdd3; /* light pink for subtle highlights */ 4 | --primary-dark: #9f1239; /* darker red for hover states */ 5 | --background-light: #ffffff; 6 | --background-dark: #0f172a; 7 | --text-light: #1e293b; 8 | --text-dark: #f8fafc; 9 | --card-light: #ffffff; 10 | --card-dark: #1e293b; 11 | --accent-color: #f43f5e; /* rose-500 */ 12 | --accent-secondary: #fb7185; /* rose-400 */ 13 | --gray-100: #f1f5f9; 14 | --gray-200: #e2e8f0; 15 | --gray-300: #cbd5e1; 16 | --gray-800: #1e293b; 17 | --success: #10b981; /* emerald-500 */ 18 | --warning: #f59e0b; /* amber-500 */ 19 | --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 20 | --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); 21 | --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); 22 | --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 23 | --font-sans: 'Inter', system-ui, -apple-system, sans-serif; 24 | --radius-sm: 0.375rem; 25 | --radius-md: 0.75rem; 26 | --radius-lg: 1rem; 27 | --radius-full: 9999px; 28 | } 29 | 30 | [data-theme="dark"] { 31 | --primary-color: #fb7185; /* rose-400 for better visibility in dark mode */ 32 | --primary-light: #7f1d1d; /* dark red with low opacity */ 33 | --primary-dark: #fda4af; /* lighter version for hover in dark mode */ 34 | --background: var(--background-dark); 35 | --text-color: var(--text-dark); 36 | --card-bg: var(--card-dark); 37 | } 38 | 39 | /* Loader styles */ 40 | #loader { 41 | position: fixed; 42 | top: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 100%; 46 | background: var(--background); 47 | display: flex; 48 | justify-content: center; 49 | align-items: center; 50 | z-index: 1000; 51 | } 52 | 53 | .loader-content { 54 | text-align: center; 55 | color: var(--primary-color); 56 | } 57 | 58 | .loader-content i { 59 | font-size: 3rem; 60 | margin-bottom: 1rem; 61 | } 62 | 63 | html { 64 | scroll-behavior: smooth; 65 | } 66 | 67 | body { 68 | font-family: var(--font-sans); 69 | background: var(--background-light); 70 | color: var(--text-light); 71 | line-height: 1.6; 72 | margin: 0; 73 | padding: 0; 74 | box-sizing: border-box; 75 | background: url('C:\Users\anubh\Desktop\HTML\AngshuX\assets\abc.jpg') center center fixed; 76 | background-size: cover; 77 | } 78 | 79 | /* Header styling improvements */ 80 | header { 81 | background: rgba(225, 29, 72, 0.95); 82 | backdrop-filter: blur(8px); 83 | border-bottom: 1px solid rgba(159, 18, 57, 0.15); 84 | padding: 0.5rem 2rem; 85 | position: fixed; 86 | width: 100%; 87 | top: 0; 88 | z-index: 100; 89 | display: flex; 90 | justify-content: space-between; 91 | align-items: center; 92 | height: 3.5rem; 93 | box-sizing: border-box; 94 | box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); 95 | } 96 | 97 | /* Update header text colors for better contrast */ 98 | header .logo span, 99 | nav a, 100 | .theme-toggle { 101 | color: white; 102 | } 103 | 104 | .logo { 105 | display: flex; 106 | align-items: center; 107 | gap: 0.75rem; 108 | } 109 | 110 | .logo svg { 111 | width: 1.75rem; 112 | height: 1.75rem; 113 | transition: transform 0.3s ease; 114 | } 115 | 116 | .logo span { 117 | font-weight: 700; 118 | letter-spacing: -0.01em; 119 | font-size: 1.25rem; 120 | } 121 | 122 | .logo:hover svg { 123 | transform: rotate(-10deg); 124 | } 125 | 126 | .header-right { 127 | display: flex; 128 | align-items: center; 129 | gap: 1rem; 130 | margin-left: 0; /* Remove auto margin */ 131 | position: static; /* Remove positioning */ 132 | } 133 | 134 | .theme-toggle { 135 | background: none; 136 | border: none; 137 | color: var(--text-dark); 138 | cursor: pointer; 139 | font-size: 1rem; /* smaller icon size */ 140 | padding: 0.3rem; /* reduced padding */ 141 | } 142 | 143 | .login-btn { 144 | background: var(--primary-color); 145 | color: white; 146 | padding: 0.4rem 1rem; /* reduced padding */ 147 | border-radius: 9999px; 148 | font-weight: 500; 149 | letter-spacing: 0.025em; 150 | box-shadow: var(--shadow-sm); 151 | text-decoration: none; 152 | transition: var(--transition); 153 | font-size: 0.9rem; /* smaller font size */ 154 | } 155 | 156 | .login-btn:hover { 157 | transform: translateY(-2px); 158 | box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3); 159 | } 160 | 161 | /* Navigation styling */ 162 | nav { 163 | margin: 0 auto; /* Center the navigation */ 164 | flex: 1; /* Allow nav to take available space */ 165 | } 166 | 167 | nav ul { 168 | list-style: none; 169 | padding: 0; 170 | display: flex; 171 | justify-content: center; 172 | align-items: center; 173 | gap: 2.5rem; 174 | } 175 | 176 | nav li { 177 | display: inline; 178 | margin-right: 20px; 179 | font-size: 0.9rem; /* smaller font size */ 180 | } 181 | 182 | nav a { 183 | text-decoration: none; 184 | color: var(--gray-100); 185 | font-weight: 500; 186 | position: relative; 187 | padding-bottom: 0.25rem; 188 | } 189 | 190 | nav a::after { 191 | content: ''; 192 | position: absolute; 193 | width: 0; 194 | height: 2px; 195 | bottom: -2px; 196 | left: 0; 197 | background-color: var(--gray-100); 198 | transition: width 0.3s ease; 199 | } 200 | 201 | nav a:hover::after, 202 | nav a.active::after { 203 | width: 100%; 204 | } 205 | 206 | section { 207 | padding: 40px; 208 | } 209 | 210 | footer { 211 | display: block; 212 | background: var(--background-dark); 213 | color: var(--text-dark); 214 | padding: 3rem 1.5rem 1.5rem; 215 | position: relative; 216 | } 217 | 218 | footer { 219 | display: none; /* Hide the footer since socials are moved */ 220 | } 221 | 222 | .social-links { 223 | position: fixed; 224 | left: 20px; 225 | top: 50%; 226 | transform: translateY(-50%); 227 | display: flex; 228 | flex-direction: column; 229 | gap: 2rem; 230 | z-index: 99; 231 | } 232 | 233 | .social-links a { 234 | background: var(--primary-color); 235 | color: white; 236 | width: 3rem; 237 | height: 3rem; 238 | border-radius: 0.75rem; 239 | font-size: 1.25rem; 240 | transition: var(--transition); 241 | display: flex; 242 | align-items: center; 243 | justify-content: center; 244 | } 245 | 246 | social-links a:hover { 247 | color: var(--primary-color); 248 | transform: translateX(5px); 249 | background: rgba(51, 51, 51, 0.95); 250 | } 251 | 252 | form { 253 | display: flex; 254 | flex-direction: column; 255 | max-width: 300px; 256 | margin: auto; 257 | } 258 | 259 | label { 260 | margin-bottom: 8px; 261 | } 262 | 263 | input { 264 | padding: 8px; 265 | margin-bottom: 16px; 266 | } 267 | 268 | button { 269 | background: var(--primary-color); 270 | color: white; 271 | border: none; 272 | border-radius: 25px; 273 | padding: 0.8rem 1.5rem; 274 | cursor: pointer; 275 | transition: var(--transition); 276 | } 277 | 278 | button:hover { 279 | background: #ff6b6b; 280 | transform: translateY(-2px); 281 | } 282 | 283 | .blog-container { 284 | display: grid; 285 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 286 | gap: 2rem; 287 | width: 100%; 288 | max-width: 1200px; 289 | margin: 2rem auto; 290 | } 291 | 292 | .blog-card { 293 | display: flex; 294 | flex-direction: column; 295 | background: rgba(255, 255, 255, 0.9); 296 | border-radius: var(--radius-lg); 297 | padding: 2rem; 298 | box-shadow: var(--shadow-md); 299 | border: 1px solid var(--primary-light); 300 | transition: var(--transition); 301 | position: relative; 302 | overflow: hidden; 303 | height: 100%; 304 | } 305 | 306 | .blog-card::before { 307 | content: ''; 308 | position: absolute; 309 | top: 0; 310 | right: 0; 311 | width: 0.25rem; 312 | height: 100%; 313 | background: linear-gradient(to bottom, var(--primary-color), var(--accent-secondary)); 314 | } 315 | 316 | .blog-card h3 { 317 | margin-top: 0; 318 | font-size: 1.5rem; 319 | font-weight: 700; 320 | margin-bottom: 1rem; 321 | color: var(--primary-color); 322 | } 323 | 324 | .blog-card p { 325 | margin: 0 0 1.5rem; 326 | color: var(--gray-800); 327 | line-height: 1.6; 328 | } 329 | 330 | .blog-card .read-more { 331 | margin-top: auto; 332 | display: inline-flex; 333 | align-items: center; 334 | color: var(--primary-color); 335 | font-weight: 600; 336 | text-decoration: none; 337 | padding-bottom: 0.25rem; 338 | border-bottom: 2px solid transparent; 339 | transition: var(--transition); 340 | } 341 | 342 | .blog-card .read-more:hover { 343 | border-bottom-color: var(--primary-color); 344 | } 345 | 346 | .blog-card:hover { 347 | transform: translateY(-5px); 348 | box-shadow: var(--shadow-lg); 349 | } 350 | 351 | /* Article styles */ 352 | .article-container { 353 | max-width: 800px; 354 | margin: 2rem auto; 355 | width: 100%; 356 | } 357 | 358 | .article { 359 | background: rgba(255, 255, 255, 0.9); 360 | border-radius: var(--radius-lg); 361 | padding: 2.5rem; 362 | box-shadow: var(--shadow-md); 363 | border: 1px solid var(--primary-light); 364 | margin-bottom: 2rem; 365 | transition: var(--transition); 366 | text-align: left; 367 | position: relative; 368 | } 369 | 370 | .article::after { 371 | content: ''; 372 | position: absolute; 373 | bottom: 0; 374 | left: 0; 375 | width: 100%; 376 | height: 0.25rem; 377 | background: linear-gradient(90deg, var(--primary-color), var(--accent-secondary)); 378 | opacity: 0; 379 | transition: var(--transition); 380 | } 381 | 382 | .article:hover::after { 383 | opacity: 1; 384 | } 385 | 386 | .article h3 { 387 | margin-top: 0; 388 | font-size: 1.75rem; 389 | font-weight: 700; 390 | color: var(--primary-color); 391 | margin-bottom: 1rem; 392 | } 393 | 394 | .article p { 395 | color: var(--gray-800); 396 | line-height: 1.7; 397 | margin-bottom: 1.5rem; 398 | } 399 | 400 | .article .read-more { 401 | display: inline-flex; 402 | align-items: center; 403 | gap: 0.5rem; 404 | color: var(--primary-color); 405 | font-weight: 600; 406 | text-decoration: none; 407 | padding: 0.5rem 1rem; 408 | border-radius: var(--radius-full); 409 | border: 1px solid var(--primary-color); 410 | transition: var(--transition); 411 | } 412 | 413 | .article .read-more:hover { 414 | background-color: var(--primary-color); 415 | color: white; 416 | } 417 | 418 | /* Dark mode adjustments */ 419 | [data-theme="dark"] .blog-card, 420 | [data-theme="dark"] .article { 421 | background: rgba(30, 41, 59, 0.9); 422 | border-color: var(--primary-light); 423 | } 424 | 425 | [data-theme="dark"] .blog-card h3, 426 | [data-theme="dark"] .article h3 { 427 | color: var(--primary-light); 428 | } 429 | 430 | [data-theme="dark"] .blog-card p, 431 | [data-theme="dark"] .article p { 432 | color: var(--gray-300); 433 | } 434 | 435 | [data-theme="dark"] .blog-card .read-more, 436 | [data-theme="dark"] .article .read-more { 437 | color: var(--primary-light); 438 | } 439 | 440 | /* Contact form additional styling from contact.html */ 441 | #contactForm { 442 | max-width: 500px; 443 | width: 90%; 444 | margin: 2rem auto; 445 | background: rgba(220, 38, 38, 0.1); /* Light red background */ 446 | border-radius: 1.5rem; 447 | padding: 2.5rem; 448 | box-shadow: var(--shadow-md); 449 | transition: var(--transition); 450 | border: 1px solid rgba(220, 38, 38, 0.2); 451 | } 452 | 453 | .contact-content { 454 | width: 100%; 455 | max-width: 1200px; 456 | margin: 0 auto; 457 | padding: 0 1rem; 458 | } 459 | 460 | #contactForm label { 461 | display: block; 462 | margin-bottom: 0.5rem; 463 | font-weight: 600; 464 | color: var(--text-light); 465 | } 466 | 467 | #contactForm input, 468 | #contactForm textarea, 469 | #contactForm select { 470 | width: 100%; 471 | padding: 0.75rem 1rem; 472 | background: white; 473 | border: 1px solid rgba(220, 38, 38, 0.2); 474 | border-radius: 0.75rem; 475 | color: var(--text-light); 476 | margin-bottom: 1.5rem; 477 | transition: var(--transition); 478 | } 479 | 480 | #contactForm button { 481 | width: 100%; 482 | padding: 1rem; 483 | background: #000000; /* Black background */ 484 | color: white; 485 | border: none; 486 | border-radius: 0.75rem; 487 | font-weight: 600; 488 | font-size: 1rem; 489 | cursor: pointer; 490 | transition: var(--transition); 491 | } 492 | 493 | #contactForm button:hover { 494 | background: #333333; /* Darker black on hover */ 495 | transform: translateY(-2px); 496 | } 497 | 498 | /* Dark theme specific styles */ 499 | [data-theme="dark"] #contactForm { 500 | background: rgba(220, 38, 38, 0.05); 501 | border-color: rgba(220, 38, 38, 0.3); 502 | } 503 | 504 | [data-theme="dark"] #contactForm label { 505 | color: var(--text-dark); 506 | } 507 | 508 | [data-theme="dark"] #contactForm input, 509 | [data-theme="dark"] #contactForm textarea, 510 | [data-theme="dark"] #contactForm select { 511 | background: rgba(255, 255, 255, 0.05); 512 | border-color: rgba(220, 38, 38, 0.2); 513 | color: var(--text-dark); 514 | } 515 | 516 | [data-theme="dark"] #contactForm input::placeholder, 517 | [data-theme="dark"] #contactForm textarea::placeholder { 518 | color: rgba(255, 255, 255, 0.5); 519 | } 520 | 521 | [data-theme="dark"] #contactForm input:focus, 522 | [data-theme="dark"] #contactForm textarea:focus, 523 | [data-theme="dark"] #contactForm select:focus { 524 | border-color: var(--primary-color); 525 | box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); 526 | } 527 | 528 | /* Section divider improvements */ 529 | .section-divider { 530 | min-height: 100vh; 531 | background: var(--background); 532 | color: var(--text-color); 533 | padding-top: 6rem; /* increased padding-top to accommodate header */ 534 | display: flex; 535 | flex-direction: column; 536 | justify-content: flex-start; /* changed from center to flex-start */ 537 | align-items: center; 538 | text-align: center; 539 | padding: 7rem 2rem 4rem; 540 | background-color: rgba(255, 255, 255, 0.95); 541 | margin: 0; /* Remove margin */ 542 | animation: fadeIn 1s ease-out; 543 | padding-left: 80px; 544 | position: relative; /* Add position relative */ 545 | } 546 | 547 | /* Remove margin from last section */ 548 | .section-divider:last-child { 549 | margin-bottom: 0; 550 | } 551 | 552 | /* Hero section improvements */ 553 | .hero-container { 554 | position: relative; 555 | margin-top: 0; 556 | padding: 8rem 2rem 4rem; 557 | display: flex; 558 | flex-direction: column; 559 | align-items: center; 560 | text-align: center; 561 | gap: 1.5rem; 562 | max-width: 1200px; 563 | margin: 0 auto; 564 | } 565 | 566 | .hero-title { 567 | margin-top: 3rem; 568 | font-size: 3.5rem; 569 | font-weight: 800; 570 | line-height: 1.1; 571 | background: linear-gradient(90deg, var(--primary-color), var(--accent-secondary)); 572 | -webkit-background-clip: text; 573 | -webkit-text-fill-color: transparent; 574 | text-shadow: none; 575 | letter-spacing: -0.02em; 576 | margin-bottom: 1rem; 577 | } 578 | 579 | .hero-subtitle { 580 | font-size: 1.25rem; 581 | color: var(--gray-800); 582 | max-width: 600px; 583 | margin: 0 auto 2rem; 584 | line-height: 1.6; 585 | } 586 | 587 | .cta-button { 588 | display: inline-flex; 589 | align-items: center; 590 | gap: 0.5rem; 591 | background: var(--primary-color); 592 | color: white; 593 | padding: 0.75rem 1.5rem; 594 | border-radius: var(--radius-full); 595 | font-weight: 600; 596 | letter-spacing: 0.01em; 597 | text-decoration: none; 598 | transition: var(--transition); 599 | box-shadow: 0 4px 15px rgba(225, 29, 72, 0.3); 600 | } 601 | 602 | .cta-button:hover { 603 | background: var(--primary-dark); 604 | transform: translateY(-2px); 605 | box-shadow: 0 6px 20px rgba(225, 29, 72, 0.4); 606 | } 607 | 608 | .cta-button i { 609 | font-size: 0.9em; 610 | } 611 | 612 | [data-theme="dark"] .hero-subtitle { 613 | color: var(--gray-300); 614 | } 615 | 616 | input, textarea, select { 617 | width: 100%; 618 | padding: 0.75rem 1rem; 619 | border: 1px solid rgba(229, 231, 235, 0.5); 620 | border-radius: 0.5rem; 621 | transition: var(--transition); 622 | outline: none; 623 | } 624 | 625 | input:focus, textarea:focus, select:focus { 626 | border-color: var(--primary-color); 627 | box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); /* changed from rgba(99, 102, 241, 0.1) */ 628 | } 629 | 630 | /* Modern animations */ 631 | @keyframes slideUp { 632 | from { transform: translateY(20px); opacity: 0; } 633 | to { transform: translateY(0); opacity: 1; } 634 | } 635 | 636 | .feature-card, .blog-card, .article { 637 | animation: slideUp 0.5s ease-out forwards; 638 | } 639 | 640 | [data-theme="dark"] .section-divider { 641 | background-color: rgba(15, 23, 42, 0.95); 642 | } 643 | 644 | [data-theme="dark"] .feature-card, 645 | [data-theme="dark"] .blog-card, 646 | [data-theme="dark"] .article { 647 | background: rgba(220, 38, 38, 0.15); 648 | border-color: rgba(220, 38, 38, 0.3); 649 | box-shadow: 0 5px 15px rgba(220, 38, 38, 0.1); 650 | } 651 | 652 | [data-theme="dark"] .feature-card:hover, 653 | [data-theme="dark"] .blog-card:hover, 654 | [data-theme="dark"] .article:hover { 655 | background: rgba(220, 38, 38, 0.2); 656 | box-shadow: 0 8px 25px rgba(220, 38, 38, 0.15); 657 | } 658 | 659 | /* Mobile Menu Styles */ 660 | .mobile-menu-toggle { 661 | display: none; 662 | font-size: 1.5rem; 663 | background: none; 664 | border: none; 665 | color: white; 666 | cursor: pointer; 667 | } 668 | 669 | /* Modern Scrollbar Styles */ 670 | ::-webkit-scrollbar { 671 | width: 6px; 672 | } 673 | 674 | ::-webkit-scrollbar-track { 675 | background: transparent; 676 | } 677 | 678 | ::-webkit-scrollbar-thumb { 679 | background: var(--primary-color); 680 | border-radius: 3px; 681 | } 682 | 683 | ::-webkit-scrollbar-thumb:hover { 684 | background: var(--primary-dark); 685 | } 686 | 687 | /* For Firefox */ 688 | * { 689 | scrollbar-width: thin; 690 | scrollbar-color: var(--primary-color) transparent; 691 | } 692 | 693 | /* Responsive Design */ 694 | @media screen and (max-width: 768px) { 695 | header { 696 | padding: 0.5rem 1rem; 697 | gap: 1rem; 698 | } 699 | 700 | .mobile-menu-toggle { 701 | display: block; 702 | margin-left: auto; /* Push toggle to right */ 703 | } 704 | 705 | .header-right { 706 | display: none; /* Hide buttons from header in mobile view */ 707 | } 708 | 709 | nav { 710 | position: fixed; 711 | top: 3rem; 712 | left: -100%; /* Ensure it's completely off screen */ 713 | width: 100%; 714 | height: calc(100vh - 3rem); 715 | background: rgba(220, 38, 38, 0.95); 716 | backdrop-filter: blur(12px); 717 | transition: all 0.3s ease; 718 | padding: 2rem; 719 | margin: 0; 720 | box-sizing: border-box; /* Add box-sizing */ 721 | overflow-y: auto; /* Handle overflow content */ 722 | z-index: 9999; /* ensure panel appears on top */ 723 | display: flex; 724 | flex-direction: column; 725 | } 726 | 727 | nav.active { 728 | left: 0; 729 | } 730 | 731 | /* Fix any potential overflow issues */ 732 | body.menu-open { 733 | overflow: hidden; 734 | } 735 | 736 | nav ul { 737 | flex-direction: column; 738 | gap: 2rem; 739 | } 740 | 741 | nav li { 742 | display: block; 743 | margin: 1rem 0; 744 | font-size: 1.2rem; 745 | } 746 | 747 | .mobile-buttons { 748 | display: flex; 749 | flex-direction: column; 750 | gap: 1rem; 751 | margin-top: 2rem; 752 | width: 100%; 753 | } 754 | 755 | .mobile-buttons .theme-toggle, 756 | .mobile-buttons .login-btn { 757 | width: 100%; 758 | padding: 1rem; 759 | text-align: center; 760 | border-radius: 0.75rem; 761 | margin: 0; 762 | } 763 | 764 | .mobile-buttons .theme-toggle { 765 | background: rgba(255, 255, 255, 0.1); 766 | } 767 | 768 | .header-right { 769 | margin-right: 0; 770 | left: 0; 771 | } 772 | 773 | .section-divider { 774 | padding: 4rem 1rem 2rem; 775 | margin: 0; 776 | } 777 | 778 | .hero-title { 779 | font-size: 2rem; 780 | } 781 | 782 | .features-grid { 783 | grid-template-columns: 1fr; 784 | } 785 | 786 | .blog-container { 787 | grid-template-columns: 1fr; 788 | } 789 | 790 | .social-links { 791 | bottom: 1rem; 792 | top: auto; 793 | left: 50%; 794 | transform: translateX(-50%); 795 | flex-direction: row; 796 | gap: 1rem; 797 | } 798 | 799 | #contactForm { 800 | padding: 1rem; 801 | margin: 0; /* Remove margin */ 802 | } 803 | 804 | /* Add header buttons to mobile menu */ 805 | nav .header-right { 806 | display: flex; 807 | flex-direction: column; 808 | gap: 1rem; 809 | margin-top: 2rem; 810 | width: 100%; 811 | } 812 | 813 | nav .header-right .theme-toggle, 814 | nav .header-right .login-btn { 815 | width: 100%; 816 | padding: 1rem; 817 | text-align: center; 818 | border-radius: 0.75rem; 819 | } 820 | 821 | nav .header-right .theme-toggle { 822 | background: rgba(255, 255, 255, 0.1); 823 | } 824 | 825 | /* Hide desktop header buttons on mobile */ 826 | header > .header-right { 827 | display: none; 828 | } 829 | } 830 | 831 | /* Small screens */ 832 | @media screen and (max-width: 480px) { 833 | .hero-title { 834 | font-size: 1.75rem; 835 | } 836 | 837 | .feature-card, .blog-card, .article { 838 | padding: 1.5rem; 839 | } 840 | 841 | .login-btn { 842 | padding: 0.3rem 0.8rem; 843 | font-size: 0.8rem; 844 | } 845 | } 846 | 847 | .features-grid { 848 | display: grid; 849 | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 850 | gap: 2rem; 851 | margin-top: 3rem; 852 | width: 100%; 853 | max-width: 1200px; 854 | } 855 | 856 | .feature-card { 857 | display: flex; 858 | flex-direction: column; 859 | background: rgba(255, 255, 255, 0.9); 860 | border-radius: var(--radius-lg); 861 | padding: 2rem; 862 | box-shadow: var(--shadow-md); 863 | border: 1px solid var(--primary-light); 864 | transition: var(--transition); 865 | text-align: left; 866 | position: relative; 867 | overflow: hidden; 868 | z-index: 1; 869 | } 870 | 871 | .feature-card::before { 872 | content: ''; 873 | position: absolute; 874 | top: 0; 875 | left: 0; 876 | width: 100%; 877 | height: 0.25rem; 878 | background: linear-gradient(90deg, var(--primary-color), var(--accent-secondary)); 879 | z-index: -1; 880 | } 881 | 882 | .feature-card h3 { 883 | margin-top: 0; 884 | font-size: 1.5rem; 885 | font-weight: 700; 886 | margin-bottom: 1rem; 887 | color: var(--primary-color); 888 | display: flex; 889 | align-items: center; 890 | gap: 0.75rem; 891 | } 892 | 893 | .feature-card h3 i { 894 | background: var(--primary-light); 895 | color: var(--primary-color); 896 | width: 2.5rem; 897 | height: 2.5rem; 898 | border-radius: var(--radius-md); 899 | display: flex; 900 | align-items: center; 901 | justify-content: center; 902 | font-size: 1.2rem; 903 | } 904 | 905 | .feature-card p { 906 | margin-top: 0; 907 | margin-bottom: 1.5rem; 908 | color: var (--gray-800); 909 | line-height: 1.6; 910 | } 911 | 912 | .feature-card a { 913 | margin-top: auto; 914 | color: var(--primary-color); 915 | text-decoration: none; 916 | font-weight: 600; 917 | display: inline-flex; 918 | align-items: center; 919 | gap: 0.5rem; 920 | } 921 | 922 | .feature-card a i { 923 | transition: transform 0.2s ease; 924 | } 925 | 926 | .feature-card a:hover i { 927 | transform: translateX(3px); 928 | } 929 | 930 | .feature-card:hover { 931 | transform: translateY(-5px); 932 | box-shadow: var(--shadow-lg); 933 | border-color: var(--primary-color); 934 | } 935 | 936 | /* Dark mode adjustments */ 937 | [data-theme="dark"] .feature-card { 938 | background: rgba(30, 41, 59, 0.9); 939 | border-color: var(--primary-light); 940 | } 941 | 942 | [data-theme="dark"] .feature-card h3 { 943 | color: var(--primary-light); 944 | } 945 | 946 | [data-theme="dark"] .feature-card p { 947 | color: var(--gray-300); 948 | } 949 | 950 | [data-theme="dark"] .feature-card h3 i { 951 | background: rgba(225, 29, 72, 0.2); 952 | color: var(--primary-light); 953 | } 954 | 955 | /* Contact Section Improvements */ 956 | .contact-content { 957 | display: grid; 958 | grid-template-columns: 1fr 1fr; 959 | gap: 2rem; 960 | max-width: 1000px; 961 | margin: 2rem auto; 962 | width: 100%; 963 | } 964 | 965 | .contact-info { 966 | display: flex; 967 | flex-direction: column; 968 | gap: 2rem; 969 | } 970 | 971 | .contact-method { 972 | display: flex; 973 | align-items: flex-start; 974 | gap: 1rem; 975 | } 976 | 977 | .contact-method i { 978 | font-size: 1.5rem; 979 | color: var(--primary-color); 980 | background: var(--primary-light); 981 | width: 3rem; 982 | height: 3rem; 983 | border-radius: 50%; 984 | display: flex; 985 | align-items: center; 986 | justify-content: center; 987 | } 988 | 989 | .contact-method h4 { 990 | margin: 0 0 0.5rem 0; 991 | font-size: 1.25rem; 992 | font-weight: 600; 993 | } 994 | 995 | .contact-method p { 996 | margin: 0; 997 | color: var(--gray-800); 998 | } 999 | 1000 | /* Section Containers and Headers */ 1001 | .section-container { 1002 | max-width: 1200px; 1003 | width: 100%; 1004 | margin: 0 auto; 1005 | padding: 0 1rem; 1006 | } 1007 | 1008 | .section-header { 1009 | text-align: center; 1010 | margin-bottom: 3rem; 1011 | } 1012 | 1013 | .section-header h2 { 1014 | font-size: 2.5rem; 1015 | font-weight: 800; 1016 | margin-bottom: 1rem; 1017 | } 1018 | 1019 | .section-header p { 1020 | font-size: 1.1rem; 1021 | color: var(--gray-800); 1022 | max-width: 600px; 1023 | margin: 0 auto; 1024 | } 1025 | 1026 | .section-footer { 1027 | text-align: center; 1028 | margin-top: 2rem; 1029 | } 1030 | 1031 | /* Text gradient for highlights */ 1032 | .text-gradient { 1033 | background: linear-gradient(90deg, var(--primary-color), var(--accent-secondary)); 1034 | -webkit-background-clip: text; 1035 | -webkit-text-fill-color: transparent; 1036 | } 1037 | 1038 | /* Hero section actions and stats */ 1039 | .hero-actions { 1040 | display: flex; 1041 | gap: 1rem; 1042 | margin: 1rem 0 2rem; 1043 | flex-wrap: wrap; 1044 | justify-content: center; 1045 | } 1046 | 1047 | .secondary-cta { 1048 | display: inline-flex; 1049 | align-items: center; 1050 | gap: 0.5rem; 1051 | color: var(--primary-color); 1052 | font-weight: 600; 1053 | padding: 0.75rem 1.5rem; 1054 | border: 2px solid var(--primary-color); 1055 | border-radius: var(--radius-full); 1056 | text-decoration: none; 1057 | transition: var(--transition); 1058 | } 1059 | 1060 | .secondary-cta:hover { 1061 | background: rgba(225, 29, 72, 0.1); 1062 | transform: translateY(-2px); 1063 | } 1064 | 1065 | .stats-container { 1066 | display: flex; 1067 | justify-content: center; 1068 | gap: 3rem; 1069 | margin: 3rem 0; 1070 | flex-wrap: wrap; 1071 | } 1072 | 1073 | .stat { 1074 | display: flex; 1075 | flex-direction: column; 1076 | align-items: center; 1077 | } 1078 | 1079 | .stat-number { 1080 | font-size: 2.5rem; 1081 | font-weight: 800; 1082 | color: var(--primary-color); 1083 | } 1084 | 1085 | .stat-label { 1086 | color: var(--gray-800); 1087 | font-size: 1rem; 1088 | } 1089 | 1090 | /* Card badge for featured content */ 1091 | .card-badge { 1092 | position: absolute; 1093 | top: -0.75rem; 1094 | left: 1.5rem; 1095 | background: var(--primary-color); 1096 | color: white; 1097 | padding: 0.25rem 0.75rem; 1098 | border-radius: var(--radius-full); 1099 | font-size: 0.8rem; 1100 | font-weight: 600; 1101 | } 1102 | 1103 | /* Card meta information */ 1104 | .card-meta { 1105 | display: flex; 1106 | gap: 1rem; 1107 | margin-bottom: 1rem; 1108 | color: var(--gray-800); 1109 | font-size: 0.9rem; 1110 | } 1111 | 1112 | .card-meta i { 1113 | margin-right: 0.25rem; 1114 | } 1115 | 1116 | /* Tag styling */ 1117 | .tag-list { 1118 | display: flex; 1119 | gap: 0.5rem; 1120 | flex-wrap: wrap; 1121 | margin: 1rem 0; 1122 | } 1123 | 1124 | .tag { 1125 | background: var(--primary-light); 1126 | color: var(--primary-color); 1127 | padding: 0.25rem 0.75rem; 1128 | border-radius: var(--radius-full); 1129 | font-size: 0.8rem; 1130 | font-weight: 500; 1131 | } 1132 | 1133 | /* Outline button */ 1134 | .outline-button { 1135 | display: inline-flex; 1136 | align-items: center; 1137 | gap: 0.5rem; 1138 | color: var(--primary-color); 1139 | font-weight: 600; 1140 | padding: 0.75rem 1.5rem; 1141 | border: 2px solid var(--primary-color); 1142 | border-radius: var(--radius-full); 1143 | text-decoration: none; 1144 | transition: var(--transition); 1145 | } 1146 | 1147 | .outline-button:hover { 1148 | background: rgba(225, 29, 72, 0.1); 1149 | } 1150 | 1151 | .outline-button i { 1152 | transition: transform 0.2s ease; 1153 | } 1154 | 1155 | .outline-button:hover i { 1156 | transform: translateX(3px); 1157 | } 1158 | 1159 | /* Footer styling */ 1160 | .footer-container { 1161 | display: grid; 1162 | grid-template-columns: 1.5fr repeat(2, 1fr); 1163 | gap: 2rem; 1164 | max-width: 1200px; 1165 | margin: 0 auto; 1166 | } 1167 | 1168 | .footer-logo { 1169 | display: flex; 1170 | flex-direction: column; 1171 | gap: 1rem; 1172 | } 1173 | 1174 | .footer-logo p { 1175 | color: var(--gray-300); 1176 | line-height: 1.6; 1177 | } 1178 | 1179 | .footer-column h4 { 1180 | font-size: 1.1rem; 1181 | font-weight: 600; 1182 | margin-bottom: 1rem; 1183 | color: white; 1184 | } 1185 | 1186 | .footer-column ul { 1187 | list-style: none; 1188 | padding: 0; 1189 | margin: 0; 1190 | } 1191 | 1192 | .footer-column ul li { 1193 | margin-bottom: 0.75rem; 1194 | } 1195 | 1196 | .footer-column a { 1197 | color: var(--gray-300); 1198 | text-decoration: none; 1199 | transition: color 0.2s ease; 1200 | } 1201 | 1202 | .footer-column a:hover { 1203 | color: white; 1204 | text-decoration: underline; 1205 | } 1206 | 1207 | .footer-bottom { 1208 | margin-top: 3rem; 1209 | padding-top: 1.5rem; 1210 | border-top: 1px solid rgba(255, 255, 255, 0.1); 1211 | display: flex; 1212 | justify-content: space-between; 1213 | align-items: center; 1214 | max-width: 1200px; 1215 | margin-left: auto; 1216 | margin-right: auto; 1217 | } 1218 | 1219 | .footer-bottom p { 1220 | margin: 0; 1221 | color: var(--gray-300); 1222 | font-size: 0.9rem; 1223 | } 1224 | 1225 | .social-icons { 1226 | display: flex; 1227 | gap: 1rem; 1228 | } 1229 | 1230 | .social-icons a { 1231 | color: var(--gray-300); 1232 | font-size: 1.2rem; 1233 | transition: color 0.2s ease; 1234 | } 1235 | 1236 | .social-icons a:hover { 1237 | color: white; 1238 | } 1239 | 1240 | /* Scroll to top button */ 1241 | .scroll-to-top { 1242 | position: fixed; 1243 | bottom: 2rem; 1244 | right: 2rem; 1245 | z-index: 99; 1246 | opacity: 0; 1247 | visibility: hidden; 1248 | transition: all 0.3s ease; 1249 | } 1250 | 1251 | .scroll-to-top.visible { 1252 | opacity: 1; 1253 | visibility: visible; 1254 | } 1255 | 1256 | .scroll-to-top button { 1257 | width: 3rem; 1258 | height: 3rem; 1259 | border-radius: 50%; 1260 | background: var(--primary-color); 1261 | color: white; 1262 | display: flex; 1263 | align-items: center; 1264 | justify-content: center; 1265 | border: none; 1266 | cursor: pointer; 1267 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 1268 | } 1269 | 1270 | /* Dark mode adjustments */ 1271 | [data-theme="dark"] .contact-method p, 1272 | [data-theme="dark"] .section-header p, 1273 | [data-theme="dark"] .stat-label { 1274 | color: var(--gray-300); 1275 | } 1276 | 1277 | [data-theme="dark"] .stat-number { 1278 | color: var(--primary-light); 1279 | } 1280 | 1281 | /* Responsive adjustments */ 1282 | @media screen and (max-width: 768px) { 1283 | .contact-content { 1284 | grid-template-columns: 1fr; 1285 | } 1286 | 1287 | .stats-container { 1288 | gap: 2rem; 1289 | } 1290 | 1291 | .footer-container { 1292 | grid-template-columns: 1fr; 1293 | gap: 2rem; 1294 | } 1295 | 1296 | .footer-bottom { 1297 | flex-direction: column; 1298 | gap: 1rem; 1299 | text-align: center; 1300 | } 1301 | 1302 | .section-header h2 { 1303 | font-size: 2rem; 1304 | } 1305 | } 1306 | 1307 | @media screen and (max-width: 480px) { 1308 | .hero-actions { 1309 | flex-direction: column; 1310 | width: 100%; 1311 | } 1312 | 1313 | .cta-button, .secondary-cta { 1314 | width: 100%; 1315 | text-align: center; 1316 | justify-content: center; 1317 | } 1318 | } 1319 | 1320 | /* Animation styles */ 1321 | @keyframes fadeIn { 1322 | from { opacity: 0; } 1323 | to { opacity: 1; } 1324 | } 1325 | 1326 | .fade-in { 1327 | opacity: 0; 1328 | animation: fadeIn 0.8s forwards ease-out; 1329 | } 1330 | 1331 | @keyframes slideUp { 1332 | from { transform: translateY(30px); opacity: 0; } 1333 | to { transform: translateY(0); opacity: 1; } 1334 | } 1335 | 1336 | .show { 1337 | animation: slideUp 0.6s forwards ease-out; 1338 | } 1339 | 1340 | /* Form validation styling */ 1341 | .input-error { 1342 | border-color: #ef4444 !important; 1343 | background-color: rgba(239, 68, 68, 0.05) !important; 1344 | } 1345 | 1346 | .error { 1347 | color: #ef4444; 1348 | font-size: 0.875rem; 1349 | margin-top: -1rem; 1350 | margin-bottom: 1rem; 1351 | display: block; 1352 | } 1353 | 1354 | .success-message { 1355 | background-color: #10b981; 1356 | color: white; 1357 | padding: 1rem; 1358 | border-radius: var(--radius-md); 1359 | margin-top: 1rem; 1360 | display: flex; 1361 | align-items: center; 1362 | gap: 0.5rem; 1363 | opacity: 0; 1364 | transform: translateY(-10px); 1365 | transition: all 0.3s ease; 1366 | } 1367 | 1368 | .success-message.show { 1369 | opacity: 1; 1370 | transform: translateY(0); 1371 | } 1372 | 1373 | .success-message i { 1374 | font-size: 1.2rem; 1375 | } 1376 | 1377 | --------------------------------------------------------------------------------