* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f5f5f5; }

header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 60px 20px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

header h1 { font-size: 2.5em; margin-bottom: 10px; }

.subtitle { font-size: 1.2em; opacity: 0.95; }

.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }

section { background: white; margin-bottom: 30px; padding: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

section h2 { color: #667eea; margin-bottom: 20px; font-size: 1.8em; }

.skills { display: flex; flex-wrap: wrap; gap: 1rem; }

.skill-tag { padding: 0.5rem 1rem; cursor: pointer; border: 1px solid #667eea; border-radius: 5px; background: white; transition: all 0.3s; }

.skill-tag:hover { background: #667eea; color: white; }

#skill-popup { position: absolute; display: none; background: white; border: 2px solid #667eea; padding: 1rem; border-radius: 10px; text-align: center; width: 150px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 100; }

#skill-popup svg { width: 120px; height: 120px; transform: rotate(-90deg); }

#skill-popup circle { fill: none; stroke-width: 10; cx: 60; cy: 60; r: 50; }

#skill-popup .bg { stroke: #eee; }

#skill-popup .progress { stroke: #667eea; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1s ease; }

#skill-popup .circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 18px; color: #667eea; pointer-events: none; }

.projects { display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; margin-top: 20px; }

.project { position: relative; text-align: center; width: 220px; transform: scale(1); transition: transform 0.3s ease; }

.project:hover { transform: scale(1.05); }

.cert-img { width: 200px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; }

.tooltip { display: none; position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); background: #4a4aef; color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; width: 200px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 10; }

.project:hover .tooltip { display: block; }

.project-card { background: #f9f9f9; padding: 20px; border-radius: 8px; border-left: 4px solid #667eea; transition: transform 0.3s ease; width: 343px; }

.project-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); }

.project-card h3 { color: #667eea; margin-bottom: 10px; }

#resume { width: auto; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }

#resume-section { margin-bottom: 3rem; background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: box-shadow 0.3s ease; text-align: center; }

nav { background-color: whitesmoke; padding: 0.5rem 1rem; text-align: center; border-radius: 10px; width: fit-content; display: flex; margin: 0 auto; height: 50px; }

nav ul { display: flex; align-items: center; gap: 1rem; justify-content: center; }

nav li { list-style: none; }

nav a { color: #667eea; text-decoration: none; font-weight: 600; transition: all 0.3s ease; padding: 0.75rem 1.5rem; border-radius: 4px; white-space: nowrap; }

nav a:hover { color: #764ba2; background-color: rgba(231, 76, 60, 0.15); transform: translateY(-2px); }

.download-btn, .btn { padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; }

.download-btn:hover, .btn:hover { background: #764ba2; transform: translateY(-2px); }

.download-btn:active { transform: translateY(0); }

.btn { display: inline-block; text-decoration: none; font-weight: 500; }

.page-wrapper { position: relative; }

footer { background: #333; color: white; text-align: center; padding: 20px; margin-top: 40px; }

.floating-bg { position: absolute; bottom: 120px; right: 30px; width: 200px; height: 200px; pointer-events: none; }

.floating-bg .circle { position: absolute; border-radius: 50%; opacity: 0.6; animation: float 6s ease-in-out infinite alternate; }

.floating-bg .circle:nth-child(1) { width: 60px; height: 60px; background: #667eea; top: 0; left: 50%; }

.floating-bg .circle:nth-child(2) { width: 40px; height: 40px; background: #764ba2; bottom: 10px; left: 20%; }

.floating-bg .circle:nth-child(3) { width: 50px; height: 50px; background: #43cea2; bottom: 30px; right: 10%; }

@keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0.6; } 50% { transform: translateY(-20px) translateX(10px); opacity: 0.8; } 100% { transform: translateY(0) translateX(0); opacity: 0.6; } }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.3s ease; }

.lightbox-content { background: #fff; border-radius: 15px; width: calc(100vw - 100px); height: calc(100vh - 100px); box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; animation: fadeIn 0.3s ease; }

.lightbox .close { position: absolute; top: 15px; right: 20px; width: 35px; height: 35px; background: #667eea; color: white; font-size: 22px; font-weight: bold; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: background 0.3s, transform 0.2s; }

.lightbox .close:hover { background: #764ba2; transform: scale(1.1); }

.lightbox-frame { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

.lightbox-frame iframe { width: 100%; height: 100%; border: none; border-radius: 10px; }

@media (max-width: 768px) {
    header h1 { font-size: 2em; }
    header { padding: 40px 15px; height: fit-content; }
    section { padding: 20px; margin-bottom: 20px; }
    section h2 { font-size: 1.4em; }
    .container { margin: 20px auto; padding: 0 15px; }
    .skills { gap: 0.75rem; }
    .projects { flex-direction: column; align-items: center; gap: 20px; }
    .project-card { width: 100%; max-width: 300px; }
    nav { width: 100%; padding: 0.5rem; }
    nav ul { gap: 0.5rem; flex-wrap: wrap; }
    nav a { padding: 0.5rem 1rem; font-size: 0.9em; }
    .floating-bg { display: none; }
    footer { height: auto; line-height: normal; padding: 15px; }
    .lightbox-content { width: calc(100vw - 40px); height: calc(100vh - 40px); }
    #resume { width: 70%; height: auto; }
}

@media (max-width: 480px) {
    header h1 { font-size: 1.5em; }
    .subtitle { font-size: 1em; }
    section { padding: 15px; }
    .project-card { width: 100%; }
    .skill-tag { padding: 0.4rem 0.8rem; font-size: 0.9em; }
    nav a { padding: 0.5rem 0.75rem; font-size: 0.85em; }
}