/* =========================================
   TABLET LAYOUT (Max 1024px)
   ========================================= */
@media screen and (max-width: 1024px) {
    #line, #line2 {
        flex-direction: column;
        padding: 40px 6vw;
        gap: 25px;
    }

    #line1-part1, #line1-part2, 
    #line2-part1, #line2-part2 {
        width: 100%;
    }

    /* Tablet Typography */
    #name h1 {
        font-size: 4rem; 
        line-height: 1;
    }

    .about-project {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .about-project .card:first-child {
        grid-column: span 2;
    }
    #pic-name {
        gap: 20px;
        padding: 10px;
    }
}

/* =========================================
   MOBILE LAYOUT (Max 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    /* Stop mouse follower on mobile */
    #mouse-follower {
        display: none !important;
    }

    #line, #line2 {
        padding: 20px 5vw;
        gap: 20px;
    }

    /* Nav - Compact & Modern */
    #nav { 
        padding: 5vw 6vw; 
        background: rgba(15, 15, 15, 0.8);
        backdrop-filter: blur(10px);
        position: sticky;
        top: 0;
        z-index: 99;
    }
    #nav h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px; }
    #nav-center { display: none; } 
    #nav h2 { 
        display: block; 
        font-size: 0.7rem; 
        padding: 8px 14px; 
        border: 1.5px solid #5a8dee; 
        border-radius: 50px;
        font-weight: 700;
        text-transform: uppercase;
    }
    #menu-icon { display: block; margin-left: 12px; font-size: 1.6rem; }

    /* Hero Section - Centered & Bold */
    #line1-part1 {
        padding: 40px 20px;
        background: linear-gradient(145deg, #1a1a1a, #111);
    }

    #pic-name {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    #image {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        box-shadow: 0 10px 30px rgba(90, 141, 238, 0.3);
    }

    #name h3 {
        font-size: 0.9rem;
        letter-spacing: 3px;
        margin-bottom: 10px;
    }

    #name h1 {
        font-size: 2.8rem;
        line-height: 1.1;
        font-weight: 900;
    }

    #name p {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 20px;
        color: #aaa;
        padding: 0 5vw;
    }

    /* Scrolling Marquee */
    .line-div {
        padding: 15px 0;
        background: #151515;
    }

    .line-div h1 {
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 1px;
    }

    /* Cards - Elegant Stack */
    .about-project {
        display: flex;
        flex-direction: column;
        gap: 15px;
        height: auto; /* Allow growth */
    }

    .about-project .no-underline {
        width: 100%;
        display: block;
    }

    .card {
        padding: 25px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        height: auto; /* Auto height for mobile cards */
        min-height: 180px; /* Consistent height */
    }

    .icon-header i {
        font-size: 2.5rem;
    }

    .card h4 {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .under-box h1 {
        font-size: 2rem;
        font-weight: 800;
    }

    #count-project h1, #count-project h2 {
        font-size: 4rem;
        font-weight: 900;
    }

    /* Service Section */
    #line2-part1 {
        width: 100%;
    }

    .card-box {
        flex-direction: column;
        gap: 15px;
    }

    .wide-card {
        width: 100% !important;
        padding: 35px !important;
        text-align: center;
        align-items: center;
    }

    .service-header {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
    }

    .service-header h3 {
        font-size: 1.6rem;
        font-weight: 800;
    }

    .service-header i {
        font-size: 3rem;
    }

    .wide-card p {
        font-size: 1rem;
        color: #888;
    }

    /* Social Section - Final Touch */
    #line2-part2 {
        padding: 40px 20px;
        background: linear-gradient(to bottom right, #1a1a1a, #0f0f0f);
    }

    #social-media-box {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .social-header h1 {
        font-size: 2.5rem;
        font-weight: 900;
    }

    .social-header i {
        display: none; /* Cleaner look */
    }

    .social-icons {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .social-icons a {
        width: 60px;
        height: 60px;
        background: #222;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .social-icons i {
        font-size: 1.8rem;
    }
}

/* =========================================
   SMALL MOBILE (Max 480px)
   ========================================= */
@media screen and (max-width: 480px) {
    #name h1 {
        font-size: 2.2rem; 
    }

    #name p {
        font-size: 0.9rem;
        padding: 0 2vw;
    }

    .under-box h1 {
        font-size: 1.6rem;
    }

    #count-project h1, #count-project h2 {
        font-size: 3rem;
    }

    .social-icons a {
        width: 50px;
        height: 50px;
    }

    #nav { padding: 6vw 5vw; }
    #nav h1 { font-size: 1.2rem; }
    #nav h2 { font-size: 0.6rem; padding: 6px 12px; }
}