/* ==========================================
   Responsive
   ========================================== */

/* ==============================
   Large laptops
============================== */

@media (max-width: 1400px) {

    .container {
        width: min(92%, 1200px);
    }

    .hero-wrapper {
        gap: 60px;
    }

}

/* ==============================
   Tablets
============================== */

@media (max-width: 1024px) {

    .container {
        width: min(92%, 960px);
    }

    section {
        padding: 90px 0;
    }

    .hero-wrapper {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .hero-left,
    .hero-right {
        width: 100%;
    }

    .hero-right {
        display: flex;
        justify-content: center;
    }

    .hero-card {
        width: 100%;
        max-width: 700px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ==============================
   Mobile
============================== */

@media (max-width: 768px) {

    html {

        font-size: 15px;

    }

    section {

        padding: 70px 0;

    }

    .container {

        width: 92%;

    }

    /* Header */

    nav {

        justify-content: center;

    }

    nav ul {

        display: none;

    }

    .logo {

        font-size: 26px;

    }

    /* Hero */

    .hero-wrapper {

        display: flex;

        flex-direction: column;

        gap: 36px;

        text-align: center;

    }

    .hero-left,
    .hero-right {

        width: 100%;

    }

    .hero-left h1 {

        font-size: 48px;

        line-height: 1.1;

    }

    .hero-left h2 {

        font-size: 24px;

    }

    .hero-left p {

        font-size: 18px;

    }

    .hero-buttons {

        flex-direction: column;

        gap: 16px;

    }

    .btn {

        width: 100%;

        justify-content: center;

    }

    /* Terminal */

    .terminal {

        width: 100%;

    }

    .terminal-header {

        height: 46px;

    }

    .terminal-title {

        font-size: 12px;

    }

    .terminal-body {

        min-height: auto;

        padding: 18px;

        font-size: 13px;

        overflow-x: auto;

    }

    #terminalOutput {

        font-size: 13px;

    }

    /* About */

    .about-grid {

        grid-template-columns: 1fr;

    }

    .stats {

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

        gap: 16px;

    }

    /* Skills */

    .skills-grid {

        grid-template-columns: 1fr;

    }

    /* Experience */

    .timeline::before {

        display: none;

    }

    .timeline-dot {

        display: none;

    }

    .timeline-item {

        padding-left: 0;

    }

    .experience-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }

    .chips {

        gap: 8px;

    }

    .chips span {

        font-size: 12px;

    }

    /* Projects */

    .projects-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }

    .project-footer {

        flex-direction: column;

        gap: 16px;

    }

    .project-stack {

        gap: 14px;

    }

    .project-stack i {

        font-size: 30px;

    }

    /* Contacts */

    .contact-buttons {

        flex-direction: column;

    }

    .contact-btn {

        width: 100%;

        justify-content: center;

    }

    /* Footer cards */

    .glass {

        border-radius: 20px;

    }

}

/* ==============================
   Small phones
============================== */

@media (max-width: 480px) {

    html {

        font-size: 14px;

    }

    section {

        padding: 60px 0;

    }

    .hero-left h1 {

        font-size: 38px;

    }

    .hero-left h2 {

        font-size: 20px;

    }

    .hero-left p {

        font-size: 16px;

    }

    .section-heading,
    .section-title h2 {

        font-size: 30px;

    }

    .hero-badge {

        font-size: 13px;

    }

    .terminal-header {

        padding: 0 14px;

    }

    .terminal-body {

        padding: 14px;

        font-size: 12px;

    }

    #terminalOutput {

        font-size: 12px;

        line-height: 1.6;

    }

    .stats {

        grid-template-columns: 1fr;

    }

    .project {

        padding: 22px;

    }

    .experience-card {

        padding: 22px;

    }

    .contact-card {

        padding: 28px 20px;

    }

    .contact-card h2 {

        font-size: 28px;

    }

}

/* ==============================
   Disable hover on touch devices
============================== */

@media (hover: none) {

    .glass:hover,
    .project:hover,
    .btn:hover,
    .contact-btn:hover {

        transform: none !important;

    }

    .project-stack i:hover {

        transform: none;

    }

}

@media (max-width: 768px) {

    #hero {
        padding-top: 140px;
    }

}

.terminal-body{

    height: 320px;
    overflow-y: auto;
    overflow-x: hidden;

}

@media (max-width:768px){

    .terminal-body{

        height: 240px;

    }

}

@media (max-width:768px){

    p,
    li,
    small{

        color:rgba(255,255,255,.9);

    }

    .metric small{

        color:rgba(255,255,255,.75);

    }

    .project p,
    .about-text p,
    .contact-card p{

        color:rgba(255,255,255,.9);

    }

}