/* ===== CSS VARIABLES ===== */
:root{--background:#FFFFFF;--text-color:#1A1A1A;--accent-color:#0066CC;--accent-contrast:#003D7A;--light-gray:#F5F5F5;--dark-gray:#2D2D2D;--white:#FFFFFF;--font-serif:'Lora',serif;--font-sans:'Montserrat',sans-serif;--container-max-width:1200px;--section-padding:4rem 0;--nav-height:70px;--transition:all 0.3s ease;--transition-slow:all 0.6s ease;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;touch-action:manipulation;}
body{font-family:var(--font-serif);background-color:var(--background);color:var(--text-color);line-height:1.7;font-size:16px;overflow-x:hidden;font-display:swap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:700;line-height:1.3;margin-bottom:1rem;}h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;}h2{font-size:clamp(2rem,4vw,2.5rem);font-weight:600;}h3{font-size:clamp(1.5rem,3vw,1.8rem);font-weight:600;}h4{font-size:1.2rem;font-weight:600;}p{margin-bottom:1.5rem;font-size:1.1rem;}a{color:var(--accent-color);text-decoration:none;transition:var(--transition);}a:hover{color:var(--dark-gray);}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 2rem;}.main-nav{position:fixed!important;top:0!important;left:0!important;right:0!important;background:rgba(255,255,255,0.95)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(52,73,94,0.1);z-index:9999!important;height:var(--nav-height)!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:var(--transition);visibility:visible!important;opacity:1!important;padding-top:env(safe-area-inset-top);min-height:calc(var(--nav-height) + env(safe-area-inset-top));}.main-nav ul{display:flex;list-style:none;gap:2.5rem;align-items:center;}.main-nav a{font-family:var(--font-sans);font-weight:500;font-size:.95rem;color:var(--text-color);padding:.75rem 1.5rem;border-radius:25px;transition:var(--transition);position:relative;}.main-nav a:hover{background-color:var(--accent-contrast);color:var(--white);}.main-nav a.active{background-color:var(--accent-contrast);color:var(--white);font-weight:600;}.main-nav a:focus-visible{outline:3px solid #111;outline-offset:2px;}.fullscreen-intro{height:80vh;padding:calc(var(--nav-height) + 3rem) 0 2rem;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,var(--background) 0%,var(--light-gray) 100%);position:relative;}
.profile-img{width:159px;height:142px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,0.3);box-shadow:0 10px 30px rgba(0,0,0,0.3);transition:transform 0.3s ease,box-shadow 0.3s ease;}
.profile-img:hover{transform:scale(1.05);box-shadow:0 15px 40px rgba(0,0,0,0.4);}
.intro-content h1 {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.tagline {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    color: var(--dark-gray);
    font-weight: 400;
    margin-bottom: 3rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent-color);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    cursor: pointer;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ===== SECTIONS ===== */
section {
    padding: var(--section-padding);
}

.page-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-top: calc(var(--nav-height) + 2rem);
}

.page-subtitle {
    font-size: 1.2rem;
    color: var(--dark-gray);
    font-weight: 400;
    margin-top: 1rem;
}

/* ===== ABOUT SUMMARY ===== */
.about-summary {
    background-color: var(--white);
    text-align: center;
}

.about-summary h2 {
    margin-bottom: 2rem;
    color: var(--text-color);
}

.about-summary p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    color: var(--dark-gray);
}

/* ===== BUTTONS ===== */
.read-more-btn,.more-button,.contact-btn{background-color:#1565c0;color:#fff;padding:1rem 2rem;border-radius:30px;font-family:var(--font-sans);font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;transition:var(--transition);border:none;cursor:pointer;text-decoration:none;box-shadow:0 2px 8px rgba(21,101,192,0.08);} .read-more-btn:hover,.more-button:hover,.contact-btn:hover{background-color:#0B5394;color:#fff;}
.date{color:#0B5394;font-weight:700;}
.blog-card{background-color:#fff;color:#222;border:1px solid #e0e0e0;box-shadow:0 2px 8px rgba(44,62,80,0.08);}
.blog-card{background-color:var(--white);padding:2rem;border-radius:15px;box-shadow:0 5px 20px var(--shadow);transition:var(--transition);border:1px solid rgba(52,73,94,0.05);}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px var(--shadow-hover);}
.blog-card h3,.blog-card h2{color:var(--text-color);margin-bottom:1rem;font-size:1.4rem;}
.blog-card p,.blog-card .excerpt{color:var(--dark-gray);margin-bottom:1.5rem;line-height:1.6;}
.blog-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:0.9rem;color:var(--dark-gray);font-family:var(--font-sans);}
.date{color:var(--accent-color);font-weight:500;}
.read-time{background-color:var(--light-gray);padding:0.25rem 0.75rem;border-radius:15px;font-size:0.8rem;}
.read-more{color:var(--accent-color);font-family:var(--font-sans);font-weight:600;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px;display:inline-flex;align-items:center;gap:0.5rem;transition:var(--transition);}
.read-more:hover{color:var(--dark-gray);transform:translateX(5px);}
.more-button{display:block;margin:0 auto;text-align:center;}

/* ===== ABOUT PAGE ===== */
.about-page{padding-top:var(--nav-height);}
.about-content{max-width:800px;margin:0 auto;}
.about-text h2,.about-text h3{margin-top:2.5rem;margin-bottom:1rem;}
.about-text h2:first-child{margin-top:0;}
.skills-section{margin-top:4rem;}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-top:2rem;}
.skill-item{background-color:var(--white);padding:2rem;border-radius:15px;text-align:center;box-shadow:0 5px 20px var(--shadow);transition:var(--transition);}
.skill-item:hover{transform:translateY(-5px);box-shadow:0 15px 35px var(--shadow-hover);}
.skill-icon{width:60px;height:60px;background-color:var(--accent-color);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:var(--white);font-size:1.5rem;}
.skill-item h4{margin-bottom:1rem;color:var(--text-color);}
.skill-item p{color:var(--dark-gray);font-size:0.95rem;margin-bottom:0;}
.cta-section{text-align:center;margin-top:4rem;padding:3rem;background-color:var(--light-gray);border-radius:20px;}

/* ===== BLOG PAGE ===== */
.blog-page{padding-top:var(--nav-height);}
.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:3rem;}
.page-link{padding:0.75rem 1.25rem;background-color:var(--white);color:var(--text-color);border-radius:8px;font-family:var(--font-sans);font-weight:500;transition:var(--transition);border:1px solid var(--light-gray);}
.page-link:hover,.page-link.active{background-color:var(--accent-color);color:var(--white);border-color:var(--accent-color);}
.page-link.next{display:flex;align-items:center;gap:0.5rem;}

/* ===== BLOG POST STYLES ===== */
.blog-post{padding:6rem 0 4rem;min-height:100vh;}







.post-content{max-width:800px;margin:0 auto;background:var(--white);border-radius:15px;padding:3rem;box-shadow:0 5px 20px var(--shadow);border:1px solid rgba(52, 73, 94, 0.05);}

.post-header{margin-bottom:3rem;text-align:center;border-bottom:1px solid var(--light-gray);padding-bottom:2rem;position:relative;}

.post-meta{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;font-size:0.9rem;color:var(--dark-gray);flex-wrap:wrap;font-family:var(--font-sans);}

.post-meta .category{background:var(--accent-color);color:var(--white);padding:0.25rem 0.75rem;border-radius:20px;font-size:0.8rem;}

.post-content h1{color:var(--text-color);margin-bottom:1rem;font-size:clamp(2rem, 4vw, 2.5rem);line-height:1.2;}

.post-subtitle{color:var(--dark-gray);font-size:1.2rem;line-height:1.5;font-style:italic;font-family:var(--font-serif);}

.post-body{line-height:1.8;color:var(--dark-gray);}

.post-body h2{color:var(--text-color);margin:2.5rem 0 1rem;font-size:1.8rem;border-left:4px solid var(--accent-color);padding-left:1rem;}

.post-body h3{color:var(--text-color);margin:2rem 0 1rem;font-size:1.4rem;}

.post-body p{margin-bottom:1.5rem;}

.post-body ul,
.post-body ol{margin:1.5rem 0;padding-left:2rem;}

.post-body li{margin-bottom:0.5rem;}

.post-body strong{color:var(--text-color);font-weight:600;}

.post-footer{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--light-gray);}

.post-tags{display:flex;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}

.tag{background:var(--light-gray);color:var(--dark-gray);padding:0.5rem 1rem;border-radius:20px;font-size:0.9rem;border:1px solid rgba(52, 73, 94, 0.1);font-family:var(--font-sans);}

.post-navigation{text-align:center;}

.back-to-blog{display:inline-flex;align-items:center;gap:0.5rem;color:var(--accent-color);text-decoration:none;font-weight:600;padding:0.75rem 1.5rem;border:2px solid var(--accent-color);border-radius:8px;transition:var(--transition);font-family:var(--font-sans);}

.back-to-blog:hover{background:var(--accent-color);color:var(--white);transform:translateY(-2px);}

/* ===== CONTACT SECTION ===== */
.contact-section{background-color:var(--white);text-align:center;}

.contact-section h2{margin-bottom:2rem;}

.contact-email{font-size:1.3rem;color:var(--accent-color);font-weight:600;margin-bottom:2rem;}

.social-links{display:flex;justify-content:center;gap:1.5rem;}

.social-links a{width:50px;height:50px;background-color:var(--light-gray);color:var(--text-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:var(--transition);}

.read-more-btn{min-width:48px;min-height:48px;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;}
.social-links a:hover{background-color:var(--accent-color);color:var(--white);transform:translateY(-3px);}

/* ===== ANIMATIONS ===== */
.fade-in{opacity:0;transform:translateY(30px);animation:fadeInUp 0.8s ease forwards;}

.fade-in.delay-1{animation-delay:0.2s;}

.fade-in.delay-2{animation-delay:0.4s;}

.fade-in.delay-3{animation-delay:0.6s;}

@keyframes fadeInUp{to{opacity:1;transform:translateY(0);}}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    :root{--section-padding:3rem 0;--nav-height:60px;}
    .container{padding:0 1rem;}
    .profile-img{width:150px;height:150px;}
    .main-nav ul{gap:1rem;}
    .main-nav a{padding:0.5rem 1rem;font-size:0.9rem;}
    .blog-preview,
    .blog-grid{grid-template-columns:1fr;gap:1.5rem;}
    .skills-grid{grid-template-columns:1fr;gap:1.5rem;}
    .social-links{gap:1rem;}
    .social-links a{width:45px;height:45px;font-size:1.1rem;}
    .pagination{flex-wrap:wrap;gap:0.5rem;}
    .page-link{padding:0.5rem 1rem;font-size:0.9rem;}

    .post-content{padding:2rem 1.5rem;margin:0 1rem;}
    .footer{padding:2rem 0 1.5rem;margin-top:3rem;}
    .footer h3{font-size:1.3rem;margin-bottom:0.8rem;}
    .footer .contact-email{font-size:1.1rem;margin-bottom:1.5rem;}
    .footer .social-links{gap:1rem;}
    .footer .social-links a{width:45px;height:45px;font-size:1.1rem;}

    .post-content h1{font-size:2rem;}

    .post-meta{flex-direction:column;gap:0.5rem;text-align:center;}

    .post-body h2{font-size:1.5rem;margin:2rem 0 1rem;}

    .post-body h3{font-size:1.2rem;}
}

@media (max-width: 480px) {
    .main-nav ul{flex-direction:row;gap:0.8rem;padding:0.5rem 0;justify-content:center;flex-wrap:wrap;}
    .main-nav a{padding:0.4rem 0.8rem;font-size:0.85rem;}
    .main-nav{height:auto;min-height:calc(var(--nav-height) + env(safe-area-inset-top));}
    .fullscreen-intro{padding:calc(var(--nav-height) + 4rem) 0 2rem;}
    .page-header{padding-top:calc(var(--nav-height) + 4rem);}
    .blog-card,
    .skill-item{padding:1.5rem;}
    .cta-section{padding:2rem 1rem;}
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .scroll-indicator {
        animation: none;
    }
}

/* Focus styles for accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ===== FOOTER STYLES ===== */
.footer {
    background: linear-gradient(135deg, var(--dark-gray) 0%, #2C3E50 100%);
    color: var(--white);
    padding: 3rem 0 2rem;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

.footer .container {
    text-align: center;
    position: relative;
    z-index: 2;
}

.footer h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.footer .contact-email {
    font-size: 1.2rem;
    color: var(--accent-color);
    font-weight: 500;
    margin-bottom: 2rem;
    transition: var(--transition);
}

.footer .contact-email:hover {
    color: #5DADE2;
    transform: translateY(-1px);
}

.footer .social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.footer .social-links a {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .social-links a:hover {
    background: var(--accent-color);
    color: var(--white);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
    border-color: var(--accent-color);
}

.footer .social-links a:nth-child(1):hover {
    background: #333;
    box-shadow: 0 8px 25px rgba(51, 51, 51, 0.3);
}

.footer .social-links a:nth-child(2):hover {
    background: #0077B5;
    box-shadow: 0 8px 25px rgba(0, 119, 181, 0.3);
}

.footer .social-links a:nth-child(3):hover {
    background: #1DA1F2;
    box-shadow: 0 8px 25px rgba(29, 161, 242, 0.3);
}

.footer .social-links a:nth-child(4):hover {
    background: linear-gradient(45deg, #F56040, #E1306C, #C13584, #833AB4);
    box-shadow: 0 8px 25px rgba(225, 48, 108, 0.3);
}

/* Dark Mode Styles */
.dark-mode {
    --background: #1a1a1a;
    --text-color: #e0e0e0;
    --accent-color: #4da6ff;
    --accent-contrast: #0066cc;
    --light-gray: #2d2d2d;
    --dark-gray: #cccccc;
    --white: #1a1a1a;
}

.dark-mode .main-nav {
    background: rgba(26, 26, 26, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure nav link text is always white in dark mode */
.dark-mode .main-nav a,
.dark-mode .main-nav a:visited,
.dark-mode .main-nav a:active,
.dark-mode .main-nav a:focus,
.dark-mode .main-nav a.active {
  color: #ffffff !important;
}
.dark-mode .fullscreen-intro {
    background: linear-gradient(135deg, var(--background) 0%, var(--light-gray) 100%);
}

.dark-mode .footer {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .footer h3 {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dark-mode .footer .contact-email {
    color: #4da6ff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .footer .social-links a {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
}

.dark-mode .footer .social-links a:hover {
    background: var(--accent-color);
    box-shadow: 0 8px 25px rgba(77, 166, 255, 0.4);
    transform: translateY(-3px) scale(1.1);
}

.dark-mode .blog-card {
    background: var(--light-gray);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .blog-card:hover {
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.1);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: var(--accent-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dark-mode-toggle:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode-toggle:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --background: #FFFFFF;
        --text-color: #000000;
        --accent-color: #0066CC;
        --shadow: rgba(0, 0, 0, 0.3);
    }
}