Contact us

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Raleway', sans-serif; background: #f5f5f5; min-height: 100vh; padding: 60px 20px; } .container { max-width: 1200px; margin: 0 auto; } /* Header Section */ .page-header { text-align: center; margin-bottom: 60px; animation: fadeInDown 0.8s ease; } .page-header h1 { font-size: 48px; font-weight: 700; color: #1a1a2e; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .page-header p { font-size: 18px; color: #555; font-weight: 300; } /* Contact Grid */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 60px; } .contact-card { background: #ffffff; padding: 35px 30px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; animation: fadeInUp 0.8s ease; } .contact-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #667eea, #764ba2); transform: scaleX(0); transition: transform 0.4s ease; } .contact-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(102, 126, 234, 0.3); } .contact-card:hover::before { transform: scaleX(1); } .card-icon { font-size: 42px; margin-bottom: 20px; display: block; } .contact-card h3 { font-size: 22px; font-weight: 600; color: #1a1a2e; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .contact-card p { font-size: 16px; color: #555; line-height: 1.8; font-weight: 400; } .contact-card a { color: #667eea; text-decoration: none; transition: color 0.3s ease; } .contact-card a:hover { color: #764ba2; } /* Message Section */ .message-section { background: #ffffff; padding: 50px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin-bottom: 60px; animation: fadeInUp 1s ease; } .message-section h2 { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 30px; text-align: center; } .form-placeholder { text-align: center; padding: 40px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; border: 2px dashed #667eea; } .form-placeholder p { font-size: 16px; color: #555; margin-bottom: 10px; } .form-placeholder code { background: rgba(102, 126, 234, 0.1); padding: 5px 10px; border-radius: 5px; color: #667eea; font-family: monospace; } /* Trending Section */ .trending-section { animation: fadeInUp 1.2s ease; } .trending-header { text-align: center; margin-bottom: 40px; } .trending-header h2 { font-size: 36px; font-weight: 700; color: #1a1a2e; margin-bottom: 15px; display: inline-flex; align-items: center; gap: 15px; } .trending-header p { font-size: 16px; color: #555; } .products-placeholder { background: #ffffff; padding: 60px 40px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); text-align: center; } .products-placeholder p { font-size: 16px; color: #555; margin-bottom: 25px; } .browse-btn { display: inline-block; padding: 15px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; border-radius: 30px; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); } .browse-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6); } /* Animations */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 768px) { .page-header h1 { font-size: 36px; } .contact-grid { grid-template-columns: 1fr; } .message-section { padding: 30px 20px; } .products-placeholder { padding: 40px 20px; } }