@media (max-width: 768px){

    .hero h1{

        font-size:42px;

    }

    .footer .container{

        flex-direction:column;

        gap:48px;

    }

    .footer-right{

        text-align:left;

    }

}

/* ========================================
   RESPONSIVE ON PHONE
======================================== */

@media (max-width:768px){

   nav{

         padding:20px;

    }

    .hero h1{

            font-size:48px;
            letter-spacing:4px;
       
    }
    
    .hero-text p{
       
            font-size:12px;
            letter-spacing:2px;

    }   


    .contact-grid{

         grid-template-columns:1fr;

         gap:45px;

    }


    .creative-grid{

         grid-template-columns:1fr;

    }

    .environment-item{

        flex-direction:column;

        gap:18px;

    }

    .environment-item p{

        text-align:left;

    }

 

}



@media (max-width:768px){

    .about-wrapper{

        flex-direction:column;

        align-items:flex-start;

        gap:48px;

    }

    .about-text{

        width:100%;

    }

    .about-image{

        width:100%;

        justify-content:flex-start;

    }

}

/* ==========================
   PROJECT RESPONSIVE
========================== */

@media (max-width:768px){

.project-hero-content{

    left:32px;

    right:32px;

    bottom:48px;

}

.project-hero-content h1{

    font-size:48px;

}

.project-info .container{

    grid-template-columns:1fr;

}

.synopsis{

    padding:80px 0;

}

.synopsis p{

    font-size:18px;

}

.gallery{

    padding:80px 0;

}


.project-logo{

    width:100%;

    max-width:420px;

}
    .experience-hero-content{

        left:32px;
        right:32px;
        bottom:56px;

    }

    .experience-hero h1{

        font-size:52px;

    }

    .experience-intro{

        font-size:18px;

    }

    .experience-opening{

        padding:100px 0;

    }

    .experience-opening h2{

        font-size:38px;

    }

    .experience-opening p{

        font-size:18px;

    }

    .experience-section{

    padding:100px 0;

    }  

    .experience-label{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        margin-bottom:70px;

    }

    .experience-label span{

        font-size:64px;

    }

    .experience-item{

        grid-template-columns:1fr;

        gap:24px;

        padding:48px 0;

    }

    .experience-content h3{

        font-size:30px;

    }

    .experience-content p{

        font-size:18px;

    }
    
    .internship-grid{

        grid-template-columns:1fr;

        gap:56px;

    }

    .internship-left h3{

        font-size:40px;

    }

    .netflix-header h2{

        font-size:42px;

    }

    .production-item{

        grid-template-columns:56px 1fr;

    }

    .production-item h3{

        font-size:28px;

    }
    .workshop-section{

        padding:100px 0;

    }

    .workshop-intro h3{

        font-size:42px;

    }

    .workshop-description{

        font-size:18px;

    }

    .highlight-grid{

        grid-template-columns:1fr;

        gap:48px;

    }

    .highlight-grid span{

        font-size:52px;

    }

    .certificate-item{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .certificate-item h3{

        font-size:28px;

    }

    .reflection-section{

        padding:120px 0 160px;

    }

    .reflection-section blockquote{

        font-size:30px;

    }

    .reflection-end{

        margin-top:90px;

        letter-spacing:6px;

    }

}

@media (max-width:900px){

    .journal-row{

        grid-template-columns:1fr;

        gap:80px;

    }

    .journal-number{

        font-size:72px;

        top:-25px;

        left:0;

    }

}