@media (min-width:769px) and (max-width:1024px){

    .container{

        width: 90%;

    }

    section{

        padding: 100px 0;

    }

    .navbar-container{

        height: 75px;

    }

    .nav-links{

        gap: 25px;

    }

    .hero{

        padding: 140px 0 80px;

    }

    .hero-container{

        grid-template-columns: 1fr;

        text-align: center;

        gap: 70px;

    }

    .hero-left{

        align-items: center;

    }

    .hero-description{

        max-width: 700px;

    }

    .hero-buttons{

        justify-content: center;

    }

    .hero-stats{

        justify-content: center;

    }

    .hero-image{

        width: 380px;

        height: 380px;

    }

    .hero-image img{

        width: 320px;

    }

    .about-container{

        grid-template-columns: 1fr;

        gap: 70px;

    }

    .about-content{

        text-align: center;

    }

    .about-highlights{

        justify-content: center;

    }

    .about-buttons{

        justify-content: center;

    }

    .about-details{

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

    }

    .timeline{

        max-width: 760px;

    }

    .timeline-item{

        padding-left: 35px;

        padding-right: 35px;

    }

    .skills-grid{

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

    }

    .projects-grid{

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

    }

    .project-card.featured{

        grid-column: span 2;

    }

    .certificates-grid{

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

    }

    .contact-grid{

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

    }

    .footer-content{

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .footer-brand{

        text-align: center;

    }

    .footer-brand p{

        margin-inline: auto;

    }

    .footer-social{

        justify-content: center;

    }

    .footer-links{

        justify-content: center;

    }

    .modal-content{

        max-width: 800px;

    }

    .modal-prev{

        left: -60px;

    }

    .modal-next{

        right: -60px;

    }

}