/* Responsive Styles */

@media (max-width: 768px) {
    
    .main-nav .container{
        flex-direction:column;
        gap:20px;
    }
    
    .nav-links{
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }
    
    .hero{
        height:70vh;
    }
    
    .hero-text{
        left:30px;
        right:30px;
        bottom:-15%;
    }
    
    .hero-text h1{
        font-size:48px;
    }
    
    .hero-subtitle{
        font-size:18px;
    }
    
    .hero-nav{
        bottom:20px;
    }
    
    .hero img{
        object-position:center 20%;
    }
    
    h1{
        font-size:42px;
    }
    
    h2{
        font-size:28px;
    }
    
    blockquote{
        font-size:24px;
    }
    
    .grid-3{
        grid-template-columns:1fr;
    }
    
    .container{
        padding:20px;
    }
    
    .section{
        padding:60px 0;
    }
    
    .quote{
        padding:80px 20px;
    }
    
    .timeline-item{
        grid-template-columns:1fr;
        gap:10px;
        padding-left:0;
    }
    
    .timeline-item::before{
        display:none;
    }
    
    .timeline-year::after{
        display:none;
    }
    
    .timeline-year{
        font-size:24px;
    }
    
    .filmography-grid{
        grid-template-columns:1fr;
    }
    
    .gallery-grid{
        grid-template-columns:1fr;
    }
    
    .footer-grid{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }
    
    .bio-featured-image{
        max-width:100%;
    }
    
    .career-hero{
        min-height:300px;
    }
    
    .contact-intro{
        max-width:100%;
    }
    
}

@media (max-width: 480px) {
    
    h1{
        font-size:32px;
    }
    
    h2{
        font-size:24px;
    }
    
    p{
        font-size:16px;
    }
    
    .hero{
        height:60vh;
    }
    
    .hero-text{
        left:20px;
        right:20px;
        bottom:10%;
    }
    
    .hero-text h1{
        font-size:36px;
    }
    
    .hero-subtitle{
        font-size:16px;
    }
    
    .hero-text .btn-primary{
        padding:12px 24px;
        font-size:14px;
    }
    
    .btn-primary{
        padding:10px 20px;
        font-size:14px;
    }
    
    .page-hero{
        padding:60px 0 40px;
    }
    
}