:root { --primary-color: #0d6efd; --secondary-color: #1a1e21; --accent-color: #0dcaf0; --github-color: #333; --bg-body: #f4f7f9; --bg-card: #ffffff; --text-main: #2d3436; --transition: all 0.4s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', 'Tajawal', sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* === Header === */ header { background: linear-gradient(135deg, var(--secondary-color) 0%, #343a40 100%); color: white; padding: 60px 0; text-align: center; border-bottom: 5px solid var(--accent-color); } .header-content { display: flex; flex-direction: column; align-items: center; gap: 15px; } .profile-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent-color); } .glow { box-shadow: 0 0 25px rgba(13, 202, 240, 0.3); } .floating { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* === GitHub Top Icon === */ .social-links-top { margin-top: 10px; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: rgba(255, 255, 255, 0.1); color: white; border-radius: 50%; text-decoration: none; font-size: 1.4rem; border: 1px solid rgba(255,255,255,0.2); transition: var(--transition); } .social-icon:hover { background: var(--accent-color); color: var(--secondary-color); transform: scale(1.1); } /* === Main Grid === */ main { padding: 40px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } section { background: var(--bg-card); padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-top: 5px solid var(--primary-color); } h2 { font-size: 1.3rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--secondary-color); } h2 i { color: var(--primary-color); } /* Skills & Bars */ .skills-grid { display: flex; flex-wrap: wrap; gap: 8px; } .skills-grid span { background: #f1f3f5; padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 0.8rem; } .progress-bar { background: #eee; height: 8px; border-radius: 10px; margin-top: 8px; } .progress { background: var(--primary-color); height: 100%; border-radius: 10px; } /* === Contact Section === */ .contact-section { grid-column: 1 / -1; border-top-color: var(--accent-color); } .contact-container { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 30px; align-items: center; } .links-glow-box { background: linear-gradient(145deg, #ffffff, #e6f7ff); padding: 30px 20px; border-radius: 20px; text-align: center; border: 1px solid rgba(13, 202, 240, 0.2); box-shadow: 0 10px 30px rgba(13, 202, 240, 0.1); } .link-icon { font-size: 2.5rem; color: var(--secondary-color); margin-bottom: 15px; } .glass-link-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; background: var(--secondary-color); color: #fff; text-decoration: none; border-radius: 12px; font-weight: 700; transition: var(--transition); } .glass-link-btn:hover { background: var(--github-color); transform: translateY(-5px); } .email-form { display: flex; flex-direction: column; gap: 12px; } input, textarea { width: 100%; padding: 14px; border: 1.5px solid #e1e8ed; border-radius: 10px; font-family: inherit; } .submit-btn { padding: 16px; background: var(--primary-color); color: white; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; transition: var(--transition); } .submit-btn:hover { background: #0056b3; } /* Responsive */ @media (max-width: 768px) { main { grid-template-columns: 1fr; } .contact-container { grid-template-columns: 1fr; } } footer { text-align: center; padding: 40px 0; color: #95a5a6; font-size: 0.85rem; }