/* =========================
   GOOGLE FONT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#050816;
    color:#ffffff;
    overflow-x:hidden;
    min-height:100vh;
}

/* =========================
   CYBERPUNK BACKGROUND
========================= */

body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:
    radial-gradient(
    circle at center,
    rgba(0,255,255,.08),
    transparent 60%
    );

    z-index:-2;
}

body::after{
    content:"";
    position:fixed;
    width:100%;
    height:100%;
    background:
    linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.02) 50%,
    transparent 100%
    );
    z-index:-1;
}

/* =========================
   LINKS
========================= */

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

/* =========================
   NAVBAR
========================= */

.navbar{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 8%;

    position:sticky;
    top:0;

    backdrop-filter:blur(20px);

    background:
    rgba(255,255,255,.05);

    z-index:1000;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

.logo a{
    font-size:1.5rem;
    font-weight:700;
    color:#00ffff;
}

.nav-links{
    display:flex;
    gap:25px;
}

.nav-links a{
    transition:.3s;
}

.nav-links a:hover{
    color:#00ffff;
}

#theme-toggle{
    border:none;
    cursor:pointer;
    background:none;
    color:white;
    font-size:1.2rem;
}

/* =========================
   HERO
========================= */

.hero{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:100px 20px;
}

.hero-content{
    max-width:900px;
}

.badge{
    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:
    rgba(0,255,255,.1);

    border:
    1px solid rgba(0,255,255,.3);

    margin-bottom:20px;
}

.hero h1{
    font-size:4rem;
    margin-bottom:20px;
}

.gradient-text{

    background:
    linear-gradient(
    90deg,
    #00ffff,
    #ff00ff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:
    transparent;
}

.hero h2{
    min-height:60px;

    color:#00ffff;

    margin-bottom:20px;
}

.hero p{
    max-width:700px;

    margin:auto;

    line-height:1.8;

    color:#bdbdbd;
}

/* =========================
   BUTTONS
========================= */

.hero-buttons{
    margin-top:40px;

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;
}

.btn{

    padding:15px 30px;

    border-radius:10px;

    background:
    linear-gradient(
    90deg,
    #00ffff,
    #0099ff
    );

    color:black;

    font-weight:600;

    transition:.4s;
}

.btn:hover{
    transform:translateY(-5px);
}

.btn-outline{

    padding:15px 30px;

    border:2px solid #00ffff;

    border-radius:10px;

    transition:.4s;
}

.btn-outline:hover{
    background:#00ffff;
    color:black;
}

/* =========================
   PAGE HEADER
========================= */

.page-header{
    text-align:center;

    padding:120px 20px 50px;
}

.page-header h1{
    font-size:3rem;
}

.page-header p{
    color:#aaaaaa;
}

/* =========================
   STATS
========================= */

.stats{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    padding:50px 8%;
}

.stat-card{

    padding:40px;

    text-align:center;

    border-radius:20px;

    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    transition:.4s;
}

.stat-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 0 30px
    rgba(0,255,255,.4);
}

/* =========================
   ABOUT
========================= */

.about{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap:40px;

    align-items:center;

    padding:50px 8%;
}

.about img{

    width:100%;

    border-radius:20px;
}

.about-right p{

    line-height:1.8;

    color:#cccccc;
}

.info-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

    margin-top:30px;
}

/* =========================
   SKILLS
========================= */

.skills-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    padding:50px 8%;
}

.skill-card{

    padding:25px;

    background:
    rgba(255,255,255,.05);

    border-radius:20px;

    transition:.4s;
}

.skill-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 0 25px
    rgba(255,0,255,.3);
}

.progress{

    width:100%;

    height:10px;

    background:#222;

    border-radius:10px;

    margin:15px 0;
}

.progress-bar{

    height:10px;

    border-radius:10px;

    background:
    linear-gradient(
    90deg,
    #00ffff,
    #ff00ff
    );
}

/* =========================
   PROJECTS
========================= */

.project-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    padding:50px 8%;
}

.project-card{

    overflow:hidden;

    border-radius:20px;

    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    transition:.4s;
}

.project-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 0 30px
    rgba(0,255,255,.3);
}

.project-card img{

    width:100%;

    height:220px;

    object-fit:cover;
}

.project-card h3{
    padding:20px;
}

.project-card p{
    padding:0 20px 20px;
}

.project-links{

    display:flex;

    justify-content:space-between;

    padding:20px;
}

.project-links a{
    color:#00ffff;
}

/* =========================
   CERTIFICATES
========================= */

.certificate-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    padding:50px 8%;
}

.certificate-card{

    overflow:hidden;

    border-radius:20px;

    background:
    rgba(255,255,255,.05);
}

.certificate-card img{

    width:100%;

    height:250px;

    object-fit:cover;
}

.certificate-content{
    padding:20px;
}

/* =========================
   BLOG
========================= */

.blog-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    padding:50px 8%;
}

.blog-card{

    padding:30px;

    border-radius:20px;

    background:
    rgba(255,255,255,.05);

    transition:.4s;
}

.blog-card:hover{
    transform:translateY(-10px);
}

/* =========================
   CONTACT
========================= */

.contact-section{

    max-width:800px;

    margin:auto;

    padding:100px 20px;
}

.contact-section h1{
    text-align:center;
    margin-bottom:30px;
}

.contact-section form{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.contact-section input,
.contact-section textarea{

    padding:15px;

    border:none;

    border-radius:10px;

    background:
    rgba(255,255,255,.08);

    color:white;
}

.contact-section button{
    cursor:pointer;
}

.success-message{

    background:#00aa66;

    padding:15px;

    border-radius:10px;

    margin-bottom:20px;
}

/* =========================
   RESUME
========================= */

.resume-section{

    text-align:center;

    padding:120px 20px;
}

/* =========================
   FOOTER
========================= */

footer{

    margin-top:100px;

    background:
    rgba(255,255,255,.03);

    padding:50px 20px;
}

.footer-container{
    text-align:center;
}

.footer-links{

    margin:20px 0;

    display:flex;

    justify-content:center;

    gap:20px;
}

.footer-links a{
    color:#00ffff;
}

/* =========================
   LIGHT MODE
========================= */

.light-mode{

    background:#f8fafc;
    color:#111827;
}

.light-mode .navbar{
    background:white;
}

.light-mode .project-card,
.light-mode .skill-card,
.light-mode .blog-card,
.light-mode .stat-card,
.light-mode .certificate-card{

    background:white;

    color:black;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

.hero h1{
    font-size:3rem;
}

.nav-links{
    gap:15px;
}

}

@media(max-width:768px){

.navbar{
    flex-direction:column;
    gap:20px;
}

.nav-links{
    flex-wrap:wrap;
    justify-content:center;
}

.hero h1{
    font-size:2.5rem;
}

.page-header h1{
    font-size:2.2rem;
}

.info-grid{
    grid-template-columns:1fr;
}

}

@media(max-width:480px){

.hero{
    padding:80px 15px;
}

.hero h1{
    font-size:2rem;
}

.hero-buttons{
    flex-direction:column;
}

.btn,
.btn-outline{
    width:100%;
}

}

.error-page{
    text-align:center;
    padding:150px 20px;
}

.error-page h1{
    font-size:6rem;
    color:#00ffff;
}

.page-header {
    text-align: center;
    padding: 80px 20px 40px;
}

.page-header h1 {
    font-size: 3rem;
    color: #6c63ff;
}

.education-container,
.experience-container {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
}

.education-card,
.experience-card {
    background: #161b22;
    color: white;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    border-left: 5px solid #6c63ff;
    transition: 0.3s;
}

.education-card:hover,
.experience-card:hover {
    transform: translateY(-5px);
}

.education-card h2,
.experience-card h2 {
    color: #6c63ff;
    margin-bottom: 10px;
}

.education-card h3,
.experience-card h3 {
    margin-bottom: 10px;
}

.year,
.date {
    color: #aaa;
    margin-bottom: 15px;
}