/*
 * ALL MEDIA QUERIES EXTRACTED FROM styles.css
 * These rules govern the responsiveness of the portfolio layout.
 */

/* =======================================================
 * Breakpoint: 1100px (Used for adjusting Home Section layout on larger tablets/smaller laptops)
 * ======================================================= */


 /* Global Fixes: Prevent horizontal overflow on mobile */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

@media (max-width: 1100px) {
    .home {
        padding-top: 14rem; 
    }

    .home-img-Hover {
        width: 32%;
        right: 6%;
        top: 50%;
    }

    .circle-spin { width: 320px; height: 320px; } 
    .circle-spin-2 { width: 280px; height: 280px; }

    .home-content h1 {
        font-size: 4.2rem;
    }
}


/* =======================================================
 * Breakpoint: 991px (Used for Header/Navbar adjustments)
 * ======================================================= */
@media (max-width: 991px) {
    .header {
        padding: 1.8rem 5%;
    }

    #animated-logo {
        font-size: 3.2rem;
    }

    .navbar a {
        margin-left: 2rem;
        font-size: 1.6rem;
    }
}


/* =======================================================
 * Breakpoint: 850px (CRITICAL: Home Section switches from horizontal to vertical stack)
 * ======================================================= */
@media (max-width: 850px) {

    .home {
        flex-direction: column;
        text-align: center;
        padding-top: 16rem; 
        min-height: 100vh;
        justify-content: flex-start;
    }

    .home-content {
        width: 100%;
        padding: 0 5%; 
    }

    .home-img-Hover {
        position: relative; 
        margin: 4rem auto 0; 
        width: 60%; 
        top: auto;
        right: auto;
        transform: none; 
    }

    .circle-spin { width: 100%; height: 100%; max-width: 300px; max-height: 300px; }
    .circle-spin-2 { width: 90%; height: 90%; max-width: 270px; max-height: 270px; }

    .home-sci {
        position: relative;
        margin: 2rem auto 0;
        bottom: 0;
        justify-content: space-around;
        width: 180px;
    }

    .home-content h1 { font-size: 3.6rem; }
    .home-content .text-animate h3 { 
        font-size: 2.5rem; 
        width: auto; 
        margin: 0 auto;
    }
    .home-content p { font-size: 1.45rem; }

    .btn-box {
        justify-content: space-around;
        margin: 0 auto;
        width: 80%;
        max-width: 34.5rem;
    }
    .btn-box .btn {
        width: 45%; 
    }
}


/* =======================================================
 * Breakpoint: 768px (Used for Nav Menu toggle, Education, Contact, and Footer stacking)
 * ======================================================= */
@media (max-width: 768px) {

    #menu-icon{
        max-width: 100%;
        display: block;
    }

    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--second-bg-color);
        padding: 2rem 5%;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        opacity: 0.95;
    }

    .navbar.show {
        display: flex;
    }

    .navbar a{
        margin: 0;
        font-size: 2rem;
    
    }
    .home {
        padding-top: 10rem;
            height: auto; 
        min-height: 100vh;
        margin: 1.5rem 0;
    }
    
    .home-content h1 { font-size: 3.0rem; }
    .home-content .text-animate h3 { font-size: 2.1rem; }

    .home-content p {
        font-size: 1.35rem;
        padding: 0 1rem;
    }

    .home-img-Hover {
        width: 30%;
        
    }
    /* Make ONLY the image small & square on mobile */
.home-img-Hover img {
    width: 450px;
    height: 250px;
    object-fit: cover;
    border-radius: 1rem; /* remove if you want a perfect square */
    display: block;
    margin: 0 auto; /* centers image horizontally */
}
.letter-container {
  position: relative; /* relative to home-content */
  display: flex;
text-align: center;
justify-content: center;
align-items: center;
  cursor: pointer;
}
.sentence span{
    font-size: 26px;
}
/* Center entire image container */
.home-img-Hover {
    display: flex;
    justify-content: center;
    align-items: center;
   margin-bottom: 40px;
}




    
    .circle-spin { width: 300px; height: 300px; } 
    .circle-spin-2 { width: 250px; height: 250px; }

    .home-sci {
        margin: 2rem auto 2rem;
        width: 100%;
        justify-content: center;
        gap: 1.5rem;
    }
    .home-sci a {
        width: 33px;
        height: 33px;
        font-size: 17px;
    }

    .btn-box {
        width: 90%;
        max-width: 28rem;
    }
    .btn-box .btn {
        width: 48%;
    }
        /* about */
    .about {
        height: auto; 
        min-height: 100vh;
        padding-bottom: 6rem;
    }
    .about-content{
        flex-direction: row;
        gap: 2rem;
    }
.about-content .hidden-content.show {
    margin: 1.5rem 0;
}

    /* Education */
    .education {
        height: auto; 
        min-height: 100vh;
        padding-bottom: 6rem;
    }
    .education .education-row{
        gap: 3rem;
        flex-direction: column;
        padding: 0 5%;
    }
    .education-column .title{
        text-align: center;
    }
      .project {
        height: auto; 
        min-height: 100vh;
        padding-bottom: 6rem;
    }

    /* Contact */
    .contact form .input-box .input-field{
        width: 100%; /* Stack inputs vertically */
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-text p {
        font-size: 1.4rem;
    }

    .footer-social a.back-to-top {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
}


/* =======================================================
 * Breakpoint: 600px (Used for Projects Grid and Card scaling)
 * ======================================================= */
@media (max-width: 600px) {
    .projects-grid {
        gap: 3rem;
        /* Force single column layout */
        grid-template-columns: 1fr; 
    }
    .project-card {
        margin: 0 auto;
        max-width: 90%;
    }
}

/* =======================================================
 * Breakpoint: 550px (Used for Home Section refinement on smaller phones)
 * ======================================================= */
@media (max-width: 550px) {

    .home {
        padding-top: 10rem;
    }
    
    .home-content h1 { font-size: 3.0rem; }
    .home-content .text-animate h3 { font-size: 2.1rem; }

    .home-content p {
        font-size: 1.35rem;
        padding: 0 1rem;
    }

    .home-img-Hover {
        width: 70%;
        top: 20px;
    }
    
    .circle-spin { max-width: 450px; max-height: 450px; } 
    .circle-spin-2 { max-width: 420px; max-height: 420px; }

    .home-sci {
        margin: 2rem auto 2rem;
        width: 100%;
        justify-content: center;
        gap: 1.5rem;
    }
    .home-sci a {
        width: 33px;
        height: 33px;
        font-size: 17px;
    }

    .btn-box {
        width: 90%;
        max-width: 28rem;
    }
    .btn-box .btn {
        width: 48%;
    }
}


/* =======================================================
 * Breakpoint: 480px (Used for Header/Footer refinement on small phones)
 * ======================================================= */
@media (max-width: 480px) {
    #animated-logo {
        font-size: 2.5rem;
    }

    .header {
        padding: 1.5rem 5%;
    }

    .header.sticky {
        padding: 1rem 5%;
    }

    #menu-icon {
        font-size: 3.2rem;
    }

    .navbar a {
        font-size: 1.8rem;
    }
    
    /* Footer */
    .footer-text p {
        font-size: 1.2rem;
    }

    .footer-social a.back-to-top {
        width: 45px;
        height: 45px;
        font-size: 1.8rem;
    }
}