/* Reset and Base Styles */
:root{
    --bg:#0f1724;
    --card:#0b1720;
    --muted:#9aa6b2;
    --accent:#5eead4;
    --primary:#7c3aed;
    --glass: rgba(255,255,255,0.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(180deg,#f7fbff 0%, #eef6ff 100%);
    color:#0f1724;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.container{width:min(1100px,92%);margin:0 auto;padding:3.2rem 0}

/* Header/Navigation */
header{position:sticky;top:0;background:transparent;padding:.8rem 0;backdrop-filter:blur(6px);z-index:50}
nav{display:flex;justify-content:center}
nav ul{display:flex;gap:1.4rem;list-style:none;padding:0;margin:0}
nav a{color:var(--bg);text-decoration:none;font-weight:600;padding:.4rem .6rem;border-radius:8px;transition:all .18s}
nav a:hover{background:var(--glass);color:var(--primary)}

/* Sections */
.section{padding:6.5rem 0 2rem;min-height:70vh;display:flex;flex-direction:column;justify-content:center}

/* Home Section */
#home{background:linear-gradient(180deg,rgba(124,58,237,0.06),transparent);text-align:center}
.profile img{width:140px;height:140px;border-radius:18px;object-fit:cover;border:0;box-shadow:0 8px 30px rgba(15,23,36,0.08);margin:0 auto 1rem;display:block}
h1{font-size:2.25rem;margin:.6rem 0}
.subtitle{font-size:1.05rem;color:var(--muted);margin-bottom:0.8rem}

.contact-info {
    margin: 1rem 0;
    font-size: 1.1rem;
}

.contact-info i {
    margin-right: 0.5rem;
    color: #3498db;
}

.contact-info img {
    margin-right: 0.5rem;
    width: 24px;
    height: 24px;
}

.bio {
    max-width: 800px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
}

.btn{display:inline-block;background:linear-gradient(90deg,var(--primary),#4f46e5);color:white;padding:.75rem 1.2rem;border-radius:12px;text-decoration:none;font-weight:600;box-shadow:0 8px 20px rgba(124,58,237,0.12);transition:transform .15s}
.btn:hover{transform:translateY(-3px)}

/* Certificates Section */
#certificates {
    background: white;
}

.certificate-slider{position:relative;max-width:900px;margin:2rem auto;padding:1.2rem;background:white;border-radius:16px;box-shadow:0 10px 40px rgba(2,6,23,0.06)}
.slide{display:none;width:100%;padding:1rem}
.slide.active{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.slide img{width:80%;height:auto;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.slide a{display:inline-block;padding:.5rem .9rem;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-weight:600}

.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(180deg,rgba(15,23,36,0.85),rgba(15,23,36,0.65));color:white;border:none;padding:.7rem;cursor:pointer;border-radius:10px;font-size:1.1rem;display:flex;align-items:center;justify-content:center;gap:.4rem}

.prev {
    left: 1rem;
}

.next {
    right: 1rem;
}

.prev:hover, .next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.dots-container{text-align:center;margin-top:1rem;display:flex;justify-content:center;gap:.6rem}
.dot{width:12px;height:12px;border-radius:50%;background:#e6eefb;cursor:pointer;transition:transform .15s,background .15s}
.dot.active{background:var(--primary);transform:scale(1.12)}

/* Contact Section */
#contact{background:transparent}

.contact .container{display:grid;grid-template-columns:1fr;gap:1.2rem}
form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
form input,form textarea{padding:.85rem;border:1px solid #e6eefb;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff)}
form textarea{min-height:140px}

.social-links{margin-top:1.4rem;display:flex;justify-content:center;gap:1rem}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid #eef6ff;color:var(--bg);box-shadow:0 6px 18px rgba(15,23,36,0.06)}
.social-links a:hover{transform:translateY(-3px)}

/* Footer */
footer{text-align:center;padding:1.5rem;color:var(--muted);font-size:.95rem}

/* Responsive Design */
@media (max-width:900px){.container{padding:2rem 0}.profile img{width:120px;height:120px}h1{font-size:1.75rem}.certificate-slider{padding:.8rem}}

/* Slideshow Container */
.slideshow-container {
    position: relative;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Slides */
.slide {
    display: none;
    width: 100%;
    animation: fade 1.5s ease-in-out;
}

.slide.active {
    display: block;
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Next and Previous Buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 1rem;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    transition: background 0.3s;
    z-index: 10;
}

.prev {
    left: 1rem;
}

.next {
    right: 1rem;
}

.prev:hover, .next:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Dots */
.dots-container {
    text-align: center;
    margin-top: 1rem;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #3498db;
}

/* Fade Animation */
@keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

.icons8-credly { 
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNmYjhjMDAiIGQ9Im00MiwzN2MwLDIuNzYtMi4yNCw1LTUsNUgxMWMtMi43NiwwLTUtMi4yNC01LTVWMTFjMC0yLjc2LDIuMjQtNSw1LTVoMjZjMi43NiwwLDUsMi4yNCw1LDV2MjZaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTMzLjc3LDI3LjA0Yy0uNzEtLjUtMS42OC0uMzItMi4xOC4zOS0yLjE0LDIuOTYtNS4yMiw1LjU3LTkuNTgsNS41N3MtNC42Mi03Ljg4LTItMTNjMS42MS0zLjE0LDMuODctNS43Myw1Ljg0LTUuNzIsMS4zOSwwLDIuMTgsMS4yNiwxLjgsMi42LS40NiwxLjYzLS41MSwyLjcyLS41MSwyLjgxLS4wNC45Ni43MSwxLjc3LDEuNjgsMS44LjAyLDAsLjA0LjAxLjA3LjAxLjkzLDAsMS43LS43NCwxLjc0LTEuNjgsMC0uMDMuMTgtMy4zMSwyLjc4LTYuNzcuNjMtLjg0LjM5LTIuMDctLjU3LTIuNTktLjc3LS40Mi0xLjc1LS4xNC0yLjI3LjU2LS4xNS4yLS4yOS4zOS0uNDIuNTktLjE0LjItLjQuMjctLjYyLjE3LTcuNy0zLjQ3LTEyLjA3LDMuODYtMTMuNTEsNy4yMy0zLDctMywxOCw1LjYyLDE4LDcuMjIsMCwxMC42My00Ljc1LDEyLjYtNy43OS40Ni0uNzEuMjctMS42Ni0uNDItMi4xNC0uMDEsMC0uMDItLjAyLS4wMy0uMDJaIi8+PC9zdmc+') 50% 50% no-repeat;
    background-size: 100%; }