/* Global Styles */:root{--primary-color:#0b57cf;--secondary-color:#6c63ff;--background-light:#ffffff;--background-dark:#101010;--background-dark-alt:#1e1e1e;--text-light:#333;--text-dark:#f4f4f4;--transition-speed:0.3s}
/* Smooth scroll */ html{scroll-behavior:smooth}
/* Remove blue highlight */*{-webkit-tap-highlight-color:transparent}
/* Font */ @font-face {font-family: 'Poppins';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} body{font-family:'Poppins', sans-serif;margin:0;padding:0;background-color:var(--background-light);color:var(--text-light);transition:background-color var(--transition-speed),color var(--transition-speed)}body.dark-mode{background-color:var(--background-dark);color:var(--text-dark)}body.dark-mode header svg{stroke:#fff}
/* Header */ header{margin-bottom:30px;padding:1rem 0;border-bottom:1px solid #e5e5e5;position:sticky;top:0;background:var(--background-light);z-index:10}body.dark-mode header{border-color:rgba(255,255,255,0.2);background:var(--background-dark)}header nav{display:flex;justify-content:space-between;align-items:center;padding:0 2rem}
/* Header Menu */ header nav ul{list-style:none;padding:0;display:flex;gap:30px;margin:0;align-items:center}header nav ul li{display:inline}header nav ul li a{color:inherit;text-decoration:none;font-weight:400;transition:color var(--transition-speed)}body.dark-mode header nav ul li a{color:var(--text-dark)}header nav ul li a:hover{color:var(--secondary-color)}header svg:hover{stroke:var(--primary-color)}body.dark-mode header svg:hover{stroke:var(--secondary-color)}
/* Dark Mode Toggle for Desktop */ .desktop-toggle{display:none;
/* Hide by default */}@media (min-width:769px){.desktop-toggle{display:block;
/* Show on desktop */}.-toggle{display:none !important;
/* Hide mobile toggle on desktop */}}
/* Dark Mode Toggle Button */ #theme-toggle-desktop,#theme-toggle-mobile{background:none;border:none;cursor:pointer;padding:0.5rem;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease}#theme-toggle-desktop:hover,#theme-toggle-mobile:hover{transform:scale(1.1)}#theme-toggle-desktop svg,#theme-toggle-mobile svg{width:24px;height:24px;transition:opacity 0.3s ease}#moon-icon-desktop,#moon-icon-mobile{display:none;
/* Hide moon icon by default */}body.dark-mode #sun-icon-desktop,body.dark-mode #sun-icon-mobile{display:none;
/* Hide sun icon in dark mode */}body.dark-mode #moon-icon-desktop,body.dark-mode #moon-icon-mobile{display:block;
/* Show moon icon in dark mode */}.desktop-toggle{display:none;
/* Hide desktop toggle on mobile */}.mobile-toggle{display:block;
/* Show mobile toggle on mobile */}.nav-right{display:flex;align-items:center;gap:10px}@media (min-width:769px){.desktop-toggle{display:block;
/* Show on desktop */}.mobile-toggle{display:none !important;
/* Hide mobile toggle on desktop */}}
/* Dark Mode Toggle Button */ #theme-toggle-desktop,#theme-toggle-mobile{background:none;border:none;cursor:pointer;padding:0.5rem;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease}#theme-toggle-desktop:hover,#theme-toggle-mobile:hover{transform:scale(1.1)}#theme-toggle-desktop svg,#theme-toggle-mobile svg{width:24px;height:24px;transition:opacity 0.3s ease}#moon-icon-desktop,#moon-icon-mobile{display:none;
/* Hide moon icon by default */}body.dark-mode #sun-icon-desktop,body.dark-mode #sun-icon-mobile{display:none;
/* Hide sun icon in dark mode */}body.dark-mode #moon-icon-desktop,body.dark-mode #moon-icon-mobile{display:block;
/* Show moon icon in dark mode */}header svg{stroke:currentColor;stroke-width:1}.desktop-toggle{display:none;
/* Hide desktop toggle on mobile */}.mobile-toggle{display:block;
/* Show mobile toggle on mobile */}.nav-right{display:flex;align-items:center;gap:10px}}
/* Dark Mode Toggle for Desktop */ .desktop-toggle{display:none;
/* Hide by default */}@media (min-width:769px){.desktop-toggle{display:block;
/* Show on desktop */}.nav-right{display:none;
/* Hide hamburger menu on desktop */}}
/* Dark Mode Toggle Button */ #theme-toggle{background:none;border:none;cursor:pointer;padding:0.5rem;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease}#theme-toggle:hover{transform:scale(1.1)}#theme-toggle svg{width:24px;height:24px;transition:opacity 0.3s ease}#moon-icon{display:none;
/* Hide moon icon by default */}body.dark-mode #sun-icon{display:none;
/* Hide sun icon in dark mode */}a{text-decoration:none;color:var(--primary-color)}body.dark-mode a{color:var(--secondary-color)}body.dark-mode #moon-icon{display:block;
/* Show moon icon in dark mode */}.header-title svg{width:40px;height:40px;display:block;vertical-align:center;stroke:none}}.header-title svg:hover{stroke:none}body.dark-mode .header-title svg{stroke:none}.header-title{font-size:1.5rem;font-weight:600}.nav-right{display:flex;align-items:center;gap:10px}
/* Hamburger Menu */ .hamburger{display:none;cursor:pointer}.hamburger svg{width:24px;height:24px}
/* Dark Mode Toggle Button */ #theme-toggle{background:none;border:none;cursor:pointer;padding:0.5rem;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease}#theme-toggle:hover{transform:scale(1.1)}#theme-toggle svg{width:24px;height:24px;transition:opacity 0.3s ease}#moon-icon{display:none;
/* Hide moon icon by default */}body.dark-mode #sun-icon{display:none;
/* Hide sun icon in dark mode */}body.dark-mode #moon-icon{display:block;
/* Show moon icon in dark mode */}
/* Main Content */ main{padding:0.5rem}section{padding-right:2rem;padding-left:2rem;margin-bottom:50px;text-align:center}h1{font-size:1.8rem;margin-bottom:1.5rem}h2{font-size:1rem;color:var(--primary-color)}#about p{font-size:.9rem;max-width:800px;margin:0 auto;text-align:left;animation:none}p{font-size:1rem;max-width:800px;margin:0 auto;line-height:1.8}#projects h2{font-size:1.5rem}
/* Profile Image */ .profile-image{width:120px;height:120px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.1);animation:fadeIn 1.5s ease-in-out}.profile-image img{width:100%;height:100%;object-fit:cover;background:#f0f0f0}
/* Skills Section */ #skills ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:1000px;margin:0 auto}#skills ul li{color:var(--text-light);padding:1.5rem;border-radius:6px;border:1px solid #e5e5e5;transition:transform var(--transition-speed),box-shadow var(--transition-speed);text-align:center}body.dark-mode #skills ul li{border-color:rgba(255,255,255,0.2);color:var(--text-dark)}#skills ul li:hover{transform:translateY(-10px);box-shadow:0 8px 12px rgba(0,0,0,0.2)}
/* Projects Section */#currently ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:1000px;margin:0 auto}#currently ul li{border:1px solid #e5e5e5;color:var(--text-light);padding:12px;border-radius:6px;max-width:600px;transition:transform var(--transition-speed),box-shadow var(--transition-speed)}.project a{color:var(--text-light)}body.dark-mode .project a{color:var(--text-dark)}body.dark-mode #currently ul li{border-color:rgba(255,255,255,0.2);color:var(--text-dark)}.project p{font-size:.9rem;opacity:.9}#currently ul li:hover{transform:translateY(-10px);box-shadow:0 8px 12px rgba(0,0,0,0.2)}
/* Contact Form */ form{display:flex;flex-direction:column;max-width:650px;margin:0 auto;padding:10px;border:1px solid #e5e5e5;border-radius:6px}body.dark-mode form{border-color:rgba(255,255,255,0.2)}form label{margin:0.5rem 0 0.2rem;font-weight:400;text-align:left}form input,form textarea{padding:0.75rem;color:var(--text-light)!important;margin-bottom:1rem;border:1px solid #e5e5e5 !important;border-radius:6px;background:none;font-size:1rem;transition:border-color var(--transition-speed)}body.dark-mode form input,body.dark-mode form textarea{border-color:rgba(255,255,255,0.2)!important;color:#fafafa!important}form input:focus,form textarea:focus{border-color:var(--primary-color);outline:none}form #message{height:200px}form button{padding:0.75rem;background:var(--primary-color);color:white;border:none;border-radius:30px;cursor:pointer;font-size:1rem;font-weight:400;transition:background var(--transition-speed)}form button:hover{background:var(--secondary-color)}
/* Footer */ footer{text-align:center;padding:2rem 0;border-top:1px solid #e5e5e5;margin-top:2rem}footer p{font-size:14px}body.dark-mode footer{border-color:rgba(255,255,255,0.2)}
/* GitHub repo */.repo-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;list-style:none;padding:0;max-width:1000px;margin:0 auto}.repo-item{padding:15px;border-radius:5px;border:1px solid #e5e5e5;transition:transform .2s ease}.repo-item:hover{transform:translateY(-5px)}.repo-item a{color:var(--text-light);text-decoration:none;font-weight:bold}.repo-item a:hover{text-decoration:underline}.repo-description{margin-top:5px;font-size:14px}.repo-stats{margin-top:10px;font-size:14px!important}.repo-stats span{margin-right:10px}@media (max-width:600px){.repo-list{grid-template-columns:1fr}.repo-item{margin:10px 0}}body.dark-mode .repo-item{border-color:rgba(255,255,255,0.2)}body.dark-mode .repo-item a{color:var(--text-dark)}
/* Animations */ @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* Preloader Styles */ #preloader{position:fixed;width:100%;height:100%;background:#ffffff;
/* Light mode background */ display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.3s ease-in-out}
/* Spinner */ .spinner{width:50px;height:50px;border:5px solid rgba(0,0,255,0.2);border-top:5px solid blue;border-radius:50%;animation:spin 1s linear infinite}
/* Dark Mode Spinner */ body.dark-mode #preloader{background:#121212;
/* Dark mode background */}body.dark-mode .spinner{border:5px solid rgba(0,0,255,0.2);border-top:5px solid #4a90e2;}
/* Spinner Animation */ @keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
/* Responsive Design */ @media (max-width:768px){.hamburger{display:block}body.dark-mode header nav ul{background:var(--background-dark);border-color:rgba(255,255,255,0.2)}header nav ul{display:none;flex-direction:column;gap:10px;position:absolute;top:60px;left:0;width:100%;background:var(--background-light);padding:1rem 0;border-bottom:1px solid #e5e5e5}header nav ul.active{display:flex}}
/* Hidden */.hidden{opacity:0;visibility:hidden;transition:opacity .5s ease-out,visibility .5s ease-out}  
/* Target */:target::before{content:"";display:block;height:80px;margin-top:-80px} section{scroll-margin-top:80px;animation:fadeIn 2s ease-in-out}
/* Social icons */.social-icons{display:flex;justify-content:center;gap:20px;margin-bottom:40px;animation:fadeIn 2s ease-in-out}
.social-icons a{display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out;padding:8px;border-radius:30px;background:#f4f4f4}body.dark-mode .social-icons a{background:#1e1e1e}.social-icons a:hover{transform:scale(1.1)}
.social-icons svg{width:22px;height:22px;fill:var(--text-light);vertical-align:center;display:block}body.dark-mode .social-icons svg{fill:var(--text-dark)}.social-icons a:hover svg{fill:var(--primary-color)}body.dark-mode .social-icons a:hover svg{fill:var(--secondary-color)}