:root{--bg-main:#f8f9fa;--bg-sidebar:#ffffff;--bg-panel:#ffffff;--text-main:#20343f;--accent:#0073aa}
*{box-sizing:border-box}
html, body { height: 100%; margin: 0; } /* Ensure full height for fixed positioning */
body{font-family:"Inter","Segoe UI",Arial,sans-serif;background:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; }
/* Centering the main container on the page for all screen sizes, while allowing sticky sidebar */
@media (min-width: 861px) {
    body {
        display: grid;
        place-items: center;
        min-height: 100vh;
    }
}

/* Page slide-in animation */
@keyframes page-slide-in {
    from { transform: translateX(-150px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.bg-deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-deco .blob{position:absolute;filter:blur(80px) saturate(120%);opacity:0.18;mix-blend-mode:screen;transition:opacity .25s, transform .35s}
.bg-deco .blob.a{width:560px;height:560px;right:-160px;top:-140px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent) 0%,rgba(255,255,255,0) 45%)}
.bg-deco .blob.b{width:420px;height:420px;left:-140px;bottom:-100px;border-radius:48%;background:radial-gradient(circle at 70% 70%,color-mix(in srgb,var(--accent) 30%,#ffffff 60%) 0%,rgba(255,255,255,0) 55%);opacity:0.12}
.bg-deco .blob.c{width:360px;height:360px;right:12%;bottom:18%;border-radius:50%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 18%,#ffffff 70%) 0%,rgba(255,255,255,0) 55%);opacity:0.10}

/* New Main Container to center the layout */
.main-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    gap: 40px; 
    align-items: flex-start; /* Use flex-start to allow sticky to work correctly */
}

/* Sidebar: show icon + label */
.sidebar{width:200px;background:var(--bg-sidebar);box-shadow:0 6px 30px rgba(16,36,52,0.06);height:fit-content;position:sticky;top:40px;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;padding:18px;gap:10px;z-index:220; flex-shrink: 0;}
.profile{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;text-align:center;margin-bottom:10px}
.profile img{width:80px;height:80px;border-radius:50%;border:4px solid var(--accent);object-fit:cover;box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent);transition:transform .3s ease, box-shadow .3s ease}.profile img:hover{transform:scale(1.05) rotate(3deg);box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 30%, transparent)}
.profile h2{font-size:0.88rem;margin:8px 0 0 0;color:var(--text-main);font-weight:700;letter-spacing:0.2px}
.profile p{font-size:0.78rem;color:rgba(32,52,63,0.6);margin:0}

nav{margin-top:8px;width:100%;display:flex;flex-direction:column;gap:6px}
.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text-main);text-decoration:none;transition:all 180ms ease;position:relative;background:transparent;border:1px solid transparent}
.nav-item i{font-size:18px;color:inherit;flex:0 0 auto}
.nav-item .label{font-size:0.95rem;font-weight:600;color:var(--text-main);white-space:nowrap}
.nav-item:hover{background: color-mix(in srgb,var(--accent) 10%, transparent);transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,36,52,0.04);color:var(--accent)}
.nav-item.active{background:var(--accent);color:#fff;box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 25%, black 2%)}
.nav-item.active .label{color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-12px;width:6px;height:60%;border-radius:4px;background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,0.06)}

/* Animation for content popping in from behind the sidebar */
@keyframes content-pop-in {
    from {
        transform: scale(0.95) translateX(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

.content{
    position:relative;z-index:10;
    animation: content-pop-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    flex-grow: 1; /* Make content area take up available space */
}
/* New class to make content area wider, similar to homepage */
.content-full-width {
    flex-grow: 1;
}
.card{width:100%;background:var(--bg-panel);border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(16,36,52,0.06);margin-bottom:24px}
/* New class to allow card to take full width of its container */
.card-full-width {
    max-width: none;
}
h1{margin:0 0 8px 0;font-size:2rem;color:var(--accent)}
h2{margin:0 0 12px 0;font-size:1.1rem;color:var(--text-main);font-weight:600}
p{color:rgba(32,52,63,0.84);line-height:1.6}

/* Theme Color Switcher */
.theme-color-box{position:fixed;top:28px;right:28px;z-index:9999;display:flex;align-items:center;gap:8px;background:transparent;padding:4px;border-radius:999px}
.theme-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-sidebar);color:var(--accent);border:2px solid rgba(0,0,0,0.06);border-radius:50%;box-shadow:0 6px 18px rgba(16,36,52,0.06);cursor:pointer;font-size:18px}
.theme-panel{position:relative;display:none;align-items:center;gap:8px;background:var(--bg-sidebar);padding:8px;border-radius:14px;box-shadow:0 10px 30px rgba(16,36,52,0.12);margin-left:8px;border:1px solid rgba(0,0,0,0.04)}
.theme-panel.open{display:flex}
.swatches{display:flex;gap:8px;align-items:center;padding:0 4px}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,0.6);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.theme-color-picker{width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);background:transparent;cursor:pointer;padding:0}

/* Mobile Navigation */
.mobile-nav-toggle{display:none}

@media (max-width:860px){
    .main-container { display: block; padding: 0; }
    .sidebar{position:fixed;top:0;left:0;width:100%;height:auto;border-radius:0;flex-direction:row;justify-content:space-between;padding:12px 20px;gap:12px;align-items:center;background:var(--bg-sidebar);box-shadow:0 4px 12px rgba(16,36,52,0.08);z-index:1000;transition:transform .3s ease}
    .sidebar .profile{display:none}
    nav{position:fixed;top:0;right:0;width:min(300px, 80vw);height:100%;background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;transform:translateX(100%);transition:transform .35s cubic-bezier(0.4, 0, 0.2, 1);z-index:1001;padding:20px;border-left:1px solid rgba(0,0,0,0.04)}
    body.mobile-nav-open nav{transform:translateX(0)}
    .nav-item{width:100%;padding:12px 18px;justify-content:flex-start;border-radius:12px;opacity:0;transform:translateX(20px);transition:opacity .3s ease, transform .3s ease}
    body.mobile-nav-open .nav-item{opacity:1;transform:translateX(0)}
    body.mobile-nav-open .nav-item:nth-child(1){transition-delay:.1s}
    body.mobile-nav-open .nav-item:nth-child(2){transition-delay:.15s}
    body.mobile-nav-open .nav-item:nth-child(3){transition-delay:.2s}
    body.mobile-nav-open .nav-item:nth-child(4){transition-delay:.25s}
    body.mobile-nav-open .nav-item:nth-child(5){transition-delay:.3s}
    body.mobile-nav-open .nav-item:nth-child(6){transition-delay:.35s}
    .nav-item .label{display:block;font-size:1.2rem}
    .content{margin-left:0;padding: 0 20px 20px 20px; margin-top: 70px;}
    .mobile-nav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:none;color:var(--text-main);font-size:24px;cursor:pointer;z-index:1002}
    body.mobile-nav-open .mobile-nav-toggle{position:fixed;top:18px;right:20px}
    .theme-color-box{display:none; z-index: 1002; align-items: center;}
    body.mobile-nav-open .theme-color-box{display:none}
    .theme-panel{position:fixed;top:80px;right:20px;box-shadow:0 10px 30px rgba(16,36,52,0.12);border:1px solid rgba(0,0,0,0.06)}
    .sidebar > .profile{order:2}
    .sidebar > nav{order:1}
    .sidebar > .mobile-nav-toggle{order:-1}
}
@media (max-width:480px){h1{font-size:1.5rem}.content{padding:16px}.bg-deco .blob.a{display:none}}

/* Page-specific styles from HTML files */

/* Home Page */
.card.hero .hero-inner{display:flex;flex-direction:column;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;width:100%}
.card.hero .hero-inner .hero-img{width:160px;height:160px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto}
.card.hero .hero-inner .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;border:6px solid var(--accent);box-shadow:0 4px 16px rgba(44,83,100,0.12);background:#fff;transition:opacity .45s ease;opacity:0;will-change:opacity}
.card.hero .hero-inner .hero-img img.show{opacity:1;pointer-events:auto}
.card.hero .hero-inner .hero-img img.hide{opacity:0;pointer-events:none}
.card.hero .hero-inner .hero-text{flex:1 1 380px;min-width:220px;text-align:center;padding-top:0}
.card.hero .hero-inner .actions{margin-top:14px;display:flex;gap:12px;justify-content:center}

/* Specific styles for the services grid on the home page */
.home-services .services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 20px; }
.home-services .service-card { padding: 24px; text-align: left; background: var(--bg-panel); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }
.home-services .service-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(16,36,52,0.08); }
.home-services .service-card h3 { font-size: 1.2rem; margin: 0 0 8px 0; color: var(--accent); padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.home-services .service-card p { font-size: 0.95rem; margin: 0; flex-grow: 1; }


/* About Page Specifics */
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start;width:100%;margin-top:16px}
.bio{padding:18px;border-radius:12px;background:var(--bg-panel);box-shadow:0 6px 18px rgba(16,36,52,0.04)}.bio img{width:120px;height:120px;border-radius:12px;display:block;margin:0 auto 12px;object-fit:cover;border:4px solid var(--accent)}.bio h3{text-align:center;margin:0 0 6px 0;color:var(--accent)}.bio p{text-align:center;margin:0;color:rgba(32,52,63,0.7)}.bio h2{margin-top:14px;font-size:1rem}.bio .contact-p{margin:6px 0;color:rgba(32,52,63,0.8)}
.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.skill{background:transparent;padding:6px 12px;border-radius:999px;font-weight:600;color:var(--accent);font-size:0.9rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);}
.timeline{display:grid;gap:16px;margin-top:12px;border-left:3px solid var(--accent);padding-left:16px}
.timeline-item{padding:12px;border-radius:10px;background:var(--bg-panel);box-shadow:0 6px 18px rgba(16,36,52,0.04)}.timeline-item strong{color:var(--accent)}
.timeline-item div{font-size:0.9rem;color:rgba(32,52,63,0.7)}.timeline-item p{margin-top:8px}
.bio a{color:var(--accent);font-weight:600;text-decoration:none;word-break:break-all}.bio a:hover{text-decoration:underline}
.about-page .card h2 {margin-top:12px;}
.about-page .card h2 { color: var(--text-main); }
/* .about-content-card { margin-top: -24px; } */ /* Overlap with header - REMOVED */

/* Generic Page Header style */
.page-header {
    position: relative;
    padding: 0;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
}
/* .page-header-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(0.6); } */
.page-header-text { position: relative; z-index: 2; padding: 28px; color: #fff; }
.page-header-text h1 { color: #fff; }
.page-header-text p { color: rgba(255,255,255,0.85); }
 
/* Services Page */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:24px}
.service-card{background:var(--bg-panel);border:1px solid rgba(0,0,0,0.05);border-radius:12px;padding:24px;position:relative;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease}
.service-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px rgba(16,36,52,0.08)}
.service-card .service-icon{font-size:2rem;color:var(--accent);margin-bottom:12px}
.service-card h3{margin:0 0 8px 0;color:var(--accent);font-size:1.2rem}
.service-card p{margin:0;font-size:0.95rem; flex-grow: 1;}
.service-card:hover .service-icon { transform: scale(1.1) rotate(-5deg); }

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .service-card {
        display: flex;
        flex-direction: column;
    }
}

/* Portfolio Page */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,4fr);gap:20px;margin-top:24px}
.project-card{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(16,36,52,0.07);transition:transform .3s ease}
.project-card:hover{transform:translateY(-5px)}
.project-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.project-card:hover img{transform:scale(1.05)}
.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 80%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;opacity:0;transition:opacity .3s ease}
.project-card:hover .project-overlay{opacity:1}
.project-overlay h3{margin:0 0 4px 0;color:#fff;font-size:1.3rem}
.project-overlay p{margin:0;color:rgba(255,255,255,0.8);font-size:0.9rem}
.project-links{position:absolute;top:16px;right:16px;display:flex;gap:10px}
.project-links a{color:#fff;background:rgba(0,0,0,0.5);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px;transition:background .2s ease, transform .2s ease}
.project-links a:hover{background:var(--accent);transform:scale(1.1)}

/* Blog Page */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:24px}
.post-card{background:var(--bg-panel);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(16,36,52,0.07);transition:transform .3s ease, box-shadow .3s ease}
.post-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(16,36,52,0.1)}
.post-card img{display:block;width:100%;height:180px;object-fit:cover}
.post-content{padding:20px}
.post-category{font-size:0.85rem;font-weight:600;color:var(--accent);margin-bottom:8px}
.post-content h3{margin:0 0 10px 0;font-size:1.25rem;color:var(--text-main)}
.post-meta{font-size:0.9rem;color:rgba(32,52,63,0.7);margin-bottom:12px}
.post-excerpt{font-size:0.95rem;margin-bottom:16px}
.read-more-btn{color:var(--accent);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px}.read-more-btn i{transition:transform .2s ease}.read-more-btn:hover i{transform:translateX(4px)}

/* Contact Page */
.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 24px;
}
.field label::after {
    content: ' *';
    color: red;
}
.field {
    margin-bottom: 16px;
}
.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.field input, .field textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--bg-main);
    color: var(--text-main);
    transition: border-color .2s;
}
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.btn {
    background: var(--accent);
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.contact-info h3 {
    margin-top: 0;
    color: var(--accent);
    font-size: 1.2rem;
}
.contact-info .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.contact-info .info-item i {
    font-size: 1.1rem;
    color: var(--accent);
    width: 20px;
    text-align: center;
}
.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.social-links a {
    color: var(--text-main);
    font-size: 1.5rem;
    transition: color .2s, transform .2s;
}
.social-links a:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

/* Mobile view adjustments */
@media (max-width:860px){
    .card.hero { margin-top: 0; }
    .card{max-width:100%;}.about-grid{grid-template-columns:1fr;gap:12px}
    .portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
    .contact-grid{grid-template-columns:1fr}
    /* .page-header { min-height: 150px; } */
}

/* Fix for contact form overflow on mobile */
@media (max-width: 480px) {
    .contact-page .card {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Login Page */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.login-form {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 32px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16,36,52,0.08);
    width: 100%;
    max-width: 400px;
    animation: content-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid var(--accent);
    object-fit: cover;
    margin-bottom: 12px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}

.login-form h2 {
    text-align: center;
    margin: 0 0 4px 0;
    color: var(--accent);
    font-size: 1.8rem;
}

.login-header p {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 14px 14px 14px 45px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--bg-main);
    color: var(--text-main);
    transition: border-color .2s;
    font-size: 1rem;
}

.input-group .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    transition: color 0.2s;
}

.input-group label {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: -10px;
    left: 10px;
    font-size: 0.8rem;
    background: var(--bg-main);
    padding: 0 5px;
    color: var(--accent);
}

.input-group input:focus ~ .input-icon {
    color: var(--accent);
}

.btn.btn-full-width {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
}
.login-footer {
    text-align: center;
    margin-top: 16px;
}
.login-footer a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Single Post Page Enhancements */
.post-full-content .back-to-blog-btn {
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--accent);
    padding: 8px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.post-full-content .back-to-blog-btn:hover {
    background: var(--accent);
    color: white;
}
.post-hero-image {
    max-height: 450px;
    overflow: hidden;
    border-radius: 12px;
    margin: 20px 0;
}
.post-hero-image img { width: 100%; height: 100%; object-fit: cover; }