* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    transition: all 0.3s ease;
}

.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* NAVIGATION */
.navbar {
    position: fixed;
    top: 0; width: 100%;
    background: rgba(204, 209, 45, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
}

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* HAMBURGER MENU STYLES - ADD THIS */
.hamburger {
    display: none; /* HIDDEN BY DEFAULT (DESKTOP) */
    flex-direction: column;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 3px;
    transform-origin: 1px;
}

.dark .hamburger .bar {
    background: #e0e0e0;
}

.hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.logo {
    color: #ec0a0a;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(195, 11, 11, 0.849);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-menu a:hover { color: #ff6b6b; }

.theme-btn {
    width: 45px; height: 45px;
    border: none; border-radius: 50%;
    background: linear-gradient(45deg, #ffffffe2, #000000);
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

.theme-btn:hover { transform: scale(1.1); }

/* HERO SECTION - VIDEO BACKGROUND */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

#hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

/* HERO PROFILE PICTURE */
.hero-profile {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.hero-profile-pic {
    width: 220px;
    height: 220px;
    border-radius: 70%;
    object-fit: cover;
    border: 5px solid rgba(221, 245, 3, 0.8);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.hero-profile-pic:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 45px rgba(246, 255, 0, 0.53);
    border-color: rgba(221, 245, 3, 0.8);
}

#contact {
    position: relative;
    background-image: url('images/contact-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1;
}

#contact > * {
    position: relative;
    z-index: 2;
}

/* HERO TEXT & BUTTONS */
.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; }
.hero p { font-size: 1.5rem; margin-bottom: 2rem; }

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* SOCIAL LINKS */
.social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.social-icon {
    width: 55px; height: 55px;  
    border-radius: 12px;        
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
}

.facebook { background: #1877F2; }
.instagram { background: linear-gradient(45deg, #E4405F, #F77737); }
.discord { background: #5865F2; }

.social-icon:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* BUTTONS */
.btn {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    background: linear-gradient(45deg, #f7ff0c, #0653f9);
    color: white;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(190,210,40,0.4); }

.secondary {
    background: transparent;
    border: 2px solid white;
}

.secondary:hover { background: white; color: #2e57ae; }

/* SECTIONS */
.section { padding: 80px 0; }

.section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #ff2626e5;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(251, 31, 31, 0.3);
}

/* ABOUT SECTION */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-text h3 { font-size: 1.8rem; margin-bottom: 1rem; color: #333; }
.about-text p { color: #666; margin-bottom: 1.5rem; }

.skills {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.skills span {
    background: linear-gradient(45deg, #e1f12d, #4e63cd);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.avatar {
    width: 250px; 
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid rgba(221, 245, 3, 0.8);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    margin: 0 auto;
}

.avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 45px rgba(246, 255, 0, 0.6);
    border-color: rgba(221, 245, 3, 1);
}

.dark .avatar {
    border-color: rgba(0, 255, 242, 0.8);
    box-shadow: 0 15px 35px rgba(0, 255, 242, 0.3);
}

.dark .avatar:hover {
    border-color: rgba(0, 255, 242, 1);
    box-shadow: 0 20px 45px rgba(0, 255, 242, 0.6);
}
/* GALLERY SECTION */
.gallery-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-image: url('images/backgal.png');
}

.gallery-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

.gallery-section h2, .gallery-grid {
    position: relative;
    z-index: 2;
}

.gallery-section h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.gallery-section h2 i { 
    font-size: 2rem; 
    color: #ec0808; 
}

.dark .gallery-section h2 i { 
    color: #00fff2;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.8rem;                          
    max-width: 1600px;                    
    margin: 3rem auto 0;
    padding: 0 10px;                       
    justify-items: stretch;                
}

.gallery-item {
    position: relative;
    cursor: pointer;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
    background: white;
    width: 100%;                          
    height: 240px;                      
}

.gallery-img {
    width: 100%;
    height: 100%;                          
    object-fit: cover;                    
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.gallery-item:hover .gallery-img { 
    transform: scale(1.1); 
}

/* PROJECTS LAYOUT */
.project-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.project-card.main {
    background: rgba(255, 255, 255, 0.136);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(103, 163, 226, 0.277);
    transition: all 0.3s ease; 
}

.project-card.main:hover {    
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 31, 232, 0.419);
}

.project-img img{
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
}

.achievements-fill { display: flex; flex-direction: column; gap: 1rem; }

.ach-title {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px #000;
}

.achievement-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white !important;
    font-size: 1rem;
    text-shadow: 1px 1px 2px #000;
}

.ach-icon {
    width: 90px;
    height: 90px;
    object-fit: cover;
    margin-right: 12px;
    border-radius: 4px;
}

.ach-icon:hover { transform: scale(1.2); }

.project-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.project-link {
    color: #4ecdc4;
    padding: 8px 16px;
    border: 2px solid #4ecdc4;
    border-radius: 25px;
    text-decoration: none;
}

.project-link:hover {
    background: #4ecdc4;
    color: white;
}

/* FORMS */
form { max-width: 500px; margin: 0 auto; }
input, textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 1rem;
    border: 2px solid #eee;
    border-radius: 10px;
    font-family: inherit;
}
input:focus, textarea:focus { outline: none; border-color: #4ecdc4; }

/* IMAGE MODAL */
.image-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.modal-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}

.modal-close:hover { color: #ff6b6b; }

/* DARK MODE */
.dark {
    background: #1a1a2e;
    color: #e0e0e0;
}

.dark .navbar { background: rgba(26,26,46,0.95); }
.dark .nav-menu a { color: #e0e0e0; }
.dark .about-text h3 { color: #e0e0e0; }
.dark .about-text p { color: #b0b0b0; }
.dark input, .dark textarea {
    background: #16213e;
    border-color: #333;
    color: #e0e0e0;
}

.dark #about { background: #16213e; }
.dark #projects { background: #0f3460; }
.dark #contact::before { background: rgba(0,0,0,0.75); }
.dark .hero-profile-pic {
    border-color: rgba(0, 255, 242, 0.8);
    box-shadow: 0 15px 35px rgba(0, 255, 242, 0.3);
}
.dark .hero-profile-pic:hover {
    border-color: rgba(0, 255, 242, 1);
    box-shadow: 0 20px 45px rgba(0, 255, 242, 0.5);
}

.dark .gallery-item {
    background: #2a2a3e;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
.dark .gallery-section h2 i { 
    color: #00fff2; 
}
.dark .gallery-item:hover {
    box-shadow: 0 20px 40px rgba(78,205,196,0.4);
}
.dark .ach-title { color: #00fff2; text-shadow: none; }
.dark .achievement-line { color: #e0e0e0 !important; text-shadow: none; }
.dark .achievements-fill { background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 10px; }
.dark .project-card.main { background: rgba(255, 255, 255, 0.05); box-shadow: 0 8px 25px rgba(0,0,0,0.5); }
.dark .section h2 { color: #00fff2; text-shadow: none; }

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .hamburger { 
        display: flex !important; /* SHOW HAMBURGER ON MOBILE */
    }
    
    .nav-menu {
        position: fixed;
        left: -100%; 
        top: 70px;
        flex-direction: column;
        background: rgba(204, 209, 45, 0.98);
        width: 100%;
        padding: 2rem 20px;
        transition: left 0.3s ease;
        gap: 1.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .nav-menu.active { 
        left: 0; 
    }
    
    /* Hide theme button on very small screens if needed */
    .theme-btn {
        order: 3;
    }
    
    /* Your existing mobile styles */
    .about-grid, .project-layout { grid-template-columns: 1fr; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .hero-profile-pic { width: 140px; height: 140px; border-width: 4px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .gallery-img { height: 180px; }
}

@media (max-width: 480px) {
    .hero-profile-pic { width: 120px; height: 120px; border-width: 3px; }
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 1.2rem; }
    
    /* Gallery responsive for 5 images */
    .gallery-grid { 
        grid-template-columns: 1fr; 
        gap: 1rem; 
    }
    .gallery-img { height: 200px; }
    .modal-close { font-size: 30px; right: 20px; }
}
/* LIVE VIDEO REPLACES my-back.png */
.hero {
    position: relative;
    overflow: hidden;
    background: #000; /* Black fallback if video fails */
}

#hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* Dark overlay */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}
/* 🔥 MOBILE PROFILE PIC - BULLETPROOF VERSION 🔥 */
.mobile-profile {
    display: none;
    text-align: center;
    margin-bottom: 2rem;
}

.mobile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(221, 245, 3, 0.9);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.mobile-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 18px 40px rgba(246, 255, 0, 0.6);
}

/* MOBILE: Show mobile pic ABOVE name */
@media (max-width: 768px) {
    .mobile-profile { display: block; }
    .about-image { display: none; } /* Hide desktop avatar */
    
    .about-text h3 {
        font-size: 2rem;
        color: #ec0a0a;
        text-shadow: 1px 1px 3px rgba(251, 31, 31, 0.4);
        margin-bottom: 1.5rem;
    }
}

/* DARK MODE MOBILE */
@media (max-width: 768px) {
    .dark .mobile-avatar {
        border-color: rgba(0, 255, 242, 0.9);
        box-shadow: 0 12px 30px rgba(0, 255, 242, 0.4);
    }
    .dark .mobile-avatar:hover {
        box-shadow: 0 18px 40px rgba(0, 255, 242, 0.7);
    }
    .dark .about-text h3 {
        color: #00fff2;
        text-shadow: 1px 1px 3px rgba(0, 255, 242, 0.4);
    }
}

@media (max-width: 480px) {
    .mobile-avatar { width: 120px; height: 120px; }
}