/*==================================================
  RESPONSIVE
  PART 1
  LARGE DESKTOP + LAPTOP
==================================================*/


/*==================================================
  LARGE DESKTOP
==================================================*/

@media screen and (max-width:1400px){

    .container{

        width:min(92%,1280px);

    }

    section{

        padding:120px 0;

    }

    .hero-grid{

        gap:70px;

    }

    .story-grid{

        gap:70px;

    }

    .project-case{

        gap:60px;

    }

}


/*==================================================
  DESKTOP
==================================================*/

@media screen and (max-width:1200px){

    /*------------------------------------------
      GENERAL
    ------------------------------------------*/

    .container{

        width:92%;

    }

    section{

        padding:110px 0;

    }

    h1{

        font-size:4.6rem;

    }

    h2{

        font-size:3rem;

    }

    /*------------------------------------------
      HEADER
    ------------------------------------------*/

    .header .container{

        padding:18px 0;

    }

    /*------------------------------------------
      HERO
    ------------------------------------------*/

    .hero{

        padding-top:140px;

        padding-bottom:90px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:70px;

        text-align:center;

    }

    .hero-content{

        max-width:760px;

        margin:0 auto;

    }

    .hero-description{

        margin:0 auto 40px;

        max-width:680px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        max-width:700px;

        margin:0 auto;

    }

    .hero-dashboard{

        max-width:700px;

        margin:0 auto;

        width:100%;

    }

    /*------------------------------------------
      STORY
    ------------------------------------------*/

    .story-grid{

        grid-template-columns:360px 1fr;

        gap:60px;

    }

    .story-highlights{

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

    }

    /*------------------------------------------
      EXPERIENCE
    ------------------------------------------*/

    .timeline-card{

        gap:32px;

    }

    .timeline-header{

        gap:20px;

    }

    .achievement-list{

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

    }

    /*------------------------------------------
      PROJECTS
    ------------------------------------------*/

    .project-case{

        gap:60px;

    }

    .project-grid{

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

    }

    /*------------------------------------------
      CONTACT
    ------------------------------------------*/

    .contact-card{

        gap:60px;

    }

}
/*==================================================
  RESPONSIVE
  PART 2
  TABLET
==================================================*/

@media screen and (max-width:992px){

    /*------------------------------------------
      GENERAL
    ------------------------------------------*/

    section{

        padding:90px 0;

    }

    h1{

        font-size:3.8rem;

    }

    h2{

        font-size:2.8rem;

    }

    .section-heading{

        text-align:center;

        margin-bottom:70px;

    }

    /*------------------------------------------
      HEADER
    ------------------------------------------*/

    .navigation{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:var(--surface);

        display:flex;

        justify-content:center;

        align-items:center;

        transition:.35s ease;

        z-index:999;

        border-left:1px solid var(--border);

        box-shadow:-10px 0 30px rgba(0,0,0,.2);

    }

    .navigation.active{

        right:0;

    }

    .navigation ul{

        flex-direction:column;

        gap:32px;

    }

    .navigation a{

        font-size:1.15rem;

    }

    .header-actions{

        display:none;

    }

    .menu-toggle{

        display:flex;

        z-index:1001;

    }

    /*------------------------------------------
      HERO
    ------------------------------------------*/

    .hero{

        padding-top:130px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-description{

        margin:0 auto 40px;

        max-width:650px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-stats{

        grid-template-columns:1fr;

        gap:20px;

        max-width:420px;

        margin:0 auto;

    }

    .hero-dashboard{

        max-width:650px;

        margin:0 auto;

    }

    /*------------------------------------------
      STORY
    ------------------------------------------*/

    .story-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .story-image{

        max-width:360px;

        margin:0 auto;

    }

    .story-highlights{

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

    }

    .story-skills{

        justify-content:center;

    }

    /*------------------------------------------
      EXPERIENCE
    ------------------------------------------*/

    .timeline-card{

        grid-template-columns:1fr;

        text-align:center;

    }

    .company-column{

        justify-content:center;

    }

    .timeline-header{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .timeline-date{

        white-space:normal;

    }

    .achievement-list{

        grid-template-columns:1fr;

    }

    .tech-stack{

        justify-content:center;

    }

    /*------------------------------------------
      PROJECTS
    ------------------------------------------*/

    .project-case{

        grid-template-columns:1fr;

        gap:50px;

    }

    .project-case.reverse .project-image{

        order:1;

    }

    .project-case.reverse .project-info{

        order:2;

    }

    .project-grid{

        grid-template-columns:1fr;

    }

    .project-buttons{

        justify-content:center;

    }

    /*------------------------------------------
      CONTACT
    ------------------------------------------*/

    .contact-card{

        grid-template-columns:1fr;

        gap:50px;

    }

    .contact-content{

        text-align:center;

    }

    .contact-buttons{

        justify-content:center;

    }

    .contact-info{

        text-align:center;

    }

    .contact-info li{

        justify-content:center;

    }

    /*------------------------------------------
      FOOTER
    ------------------------------------------*/

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:45px;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-brand p{

        margin:0 auto;

    }

    .footer-links{

        align-items:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

        gap:12px;

    }

}
/*==================================================
  RESPONSIVE
  PART 3
  MOBILE
==================================================*/

@media screen and (max-width:768px){

    /*------------------------------------------
      GENERAL
    ------------------------------------------*/

    html{

        font-size:15px;

    }

    .container{

        width:92%;

    }

    section{

        padding:80px 0;

    }

    h1{

        font-size:3rem;

        line-height:1.1;

    }

    h2{

        font-size:2.3rem;

    }

    p{

        font-size:1rem;

    }

    /*------------------------------------------
      HEADER
    ------------------------------------------*/

    .header .container{

        padding:16px 0;

    }

    .logo{

        font-size:1.25rem;

    }

    .navigation{

        width:100%;

        border-left:none;

    }

    /*------------------------------------------
      HERO
    ------------------------------------------*/

    .hero{

        padding-top:115px;

        padding-bottom:70px;

    }

    .hero-tag{

        font-size:.75rem;

        letter-spacing:1px;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:16px;

    }

    .hero-buttons a{

        width:100%;

        max-width:340px;

    }

    .hero-stats{

        grid-template-columns:1fr;

    }

    .stat-card{

        padding:24px;

    }

    .dashboard-card,

    .architecture-card{

        padding:24px;

    }

    /*------------------------------------------
      STORY
    ------------------------------------------*/

    .story-image{

        max-width:300px;

    }

    .experience-badge{

        right:0;

        bottom:10px;

        transform:scale(.9);

    }

    .story-highlights{

        grid-template-columns:1fr;

    }

    /*------------------------------------------
      EXPERIENCE
    ------------------------------------------*/

    .timeline-card{

        padding:30px;

    }

    .timeline-header h3{

        font-size:1.3rem;

    }

    .company-column img{

        width:70px;

        height:70px;

    }

    .achievement-list{

        grid-template-columns:1fr;

    }

    .tech-stack{

        justify-content:center;

    }

    /*------------------------------------------
      PROJECTS
    ------------------------------------------*/

    .project-grid{

        grid-template-columns:1fr;

    }

    .project-buttons{

        flex-direction:column;

    }

    .project-buttons a{

        width:100%;

    }

    /*------------------------------------------
      CONTACT
    ------------------------------------------*/

    .contact-card{

        padding:30px;

    }

    .contact-buttons{

        flex-direction:column;

    }

    .contact-buttons a{

        width:100%;

    }

    .social-links{

        justify-content:center;

    }

}


/*==================================================
  SMALL PHONES
==================================================*/

@media screen and (max-width:576px){

    html{

        font-size:14px;

    }

    .container{

        width:94%;

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    .hero{

        padding-top:105px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-dashboard{

        gap:20px;

    }

    .dashboard-card,

    .architecture-card{

        padding:20px;

    }

    .timeline-card{

        padding:24px;

    }

    .contact-card{

        padding:24px;

    }

    .footer{

        margin-top:80px;

    }

}


/*==================================================
  EXTRA SMALL
==================================================*/

@media screen and (max-width:380px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        justify-content:center;

    }

}