/* About Page Styles */
.about-content-section { padding: 80px 20px; }
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; }
.profile-card-3d { position: relative; width: 300px; height: 300px; margin: 0 auto; }
.profile-image { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--primary-color); box-shadow: 0 20px 60px rgba(0, 212, 255, 0.4); transition: var(--transition); overflow: hidden; background: linear-gradient(135deg, var(--bg-card), rgba(0, 212, 255, 0.2)); }
.profile-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-image:hover { transform: scale(1.05) rotate(5deg); }
.profile-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 320px; background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent); border-radius: 50%; animation: pulse 3s ease-in-out infinite; z-index: -1; }
.floating-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.float-item { position: absolute; width: 60px; height: 60px; background: rgba(0, 212, 255, 0.1); border: 2px solid var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary-color); animation: float 4s ease-in-out infinite; }
.item-1 { top: 10%; left: -10%; animation-delay: 0s; }
.item-2 { top: 50%; right: -10%; animation-delay: 1.5s; }
.item-3 { bottom: 10%; left: 20%; animation-delay: 3s; }
.about-text h2 { font-size: 36px; margin-bottom: 20px; }
.highlight { color: var(--primary-color); }
.lead { font-size: 20px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.8; }
.about-text p { color: var(--text-secondary); margin-bottom: 20px; line-height: 1.8; }
.about-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 30px 0; }
.highlight-item { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.highlight-item i { color: var(--primary-color); font-size: 20px; }
.about-cta { display: flex; gap: 20px; margin-top: 30px; }
.education-section, .certifications-section, .interests-section { padding: 80px 20px; background: var(--bg-darker); }
.education-card { background: var(--bg-card); padding: 40px; border-radius: 20px; border: 1px solid rgba(0, 212, 255, 0.2); display: grid; grid-template-columns: auto 1fr; gap: 30px; transition: var(--transition); }
.education-card:hover { border-color: var(--primary-color); box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3); transform: translateY(-5px); }
.edu-icon { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 153, 255, 0.2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--primary-color); }
.edu-content h3 { font-size: 24px; margin-bottom: 10px; }
.edu-content h4 { color: var(--text-secondary); margin-bottom: 10px; }
.edu-year, .edu-gpa { color: var(--primary-color); font-weight: 600; margin-bottom: 10px; }
.edu-description { color: var(--text-secondary); line-height: 1.8; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.cert-card { background: var(--bg-card); padding: 40px; border-radius: 20px; border: 1px solid rgba(0, 212, 255, 0.2); text-align: center; transition: var(--transition); }
.cert-card:hover { border-color: var(--primary-color); transform: translateY(-10px); box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3); }
.cert-icon { font-size: 60px; color: var(--primary-color); margin-bottom: 20px; }
.cert-card h3 { font-size: 20px; margin-bottom: 10px; }
.cert-card p { color: var(--text-secondary); }
.interests-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.interest-card { background: var(--bg-card); padding: 30px; border-radius: 20px; border: 1px solid rgba(0, 212, 255, 0.2); text-align: center; transition: var(--transition); }
.interest-card:hover { border-color: var(--primary-color); transform: translateY(-10px); box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3); }
.interest-card i { font-size: 48px; color: var(--primary-color); margin-bottom: 20px; display: block; }
.interest-card h3 { font-size: 20px; margin-bottom: 10px; }
.interest-card p { color: var(--text-secondary); font-size: 14px; }
@media (max-width: 968px) { .about-grid { grid-template-columns: 1fr; text-align: center; } .about-highlights { grid-template-columns: 1fr; } .about-cta { flex-direction: column; } .education-card { grid-template-columns: 1fr; text-align: center; } }