/* ===========================================================
                    LARGE LAPTOP
=========================================================== */

@media (max-width:1200px){

.container{
    width:92%;
}

.hero-title{
    font-size:4.5rem;
}

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

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

}


/* ===========================================================
                    TABLET
=========================================================== */

@media (max-width:992px){

.nav-links{

    display:none;

}

.resume-btn{

    display:none;

}

.menu-btn,
.menu{

    display:block;

}

.hero{

    padding-top:140px;

}

.hero-container,
.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

    gap:60px;

}

.hero-description{

    max-width:100%;

}

.hero-buttons{

    justify-content:center;

}

.hero-social{

    justify-content:center;

}

.hero-image{

    order:-1;

}

.hero-image img{

    width:320px;

    height:320px;

}

.highlights-grid{

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

}

.project-grid{

    grid-template-columns:1fr;

}

.research-grid{

    grid-template-columns:1fr;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.timeline::before{

    left:25px;

}

.timeline-item{

    width:100%;

    left:0 !important;

    padding-left:70px;

    padding-right:20px;

    text-align:left !important;

}

.timeline-dot{

    left:16px !important;

    right:auto !important;

}

}


/* ===========================================================
                    MOBILE
=========================================================== */

@media (max-width:768px){

section{

    padding:80px 0;

}

.hero-title{

    font-size:3.2rem;

}

.hero-subtitle{

    font-size:1.4rem;

}

.hero-description{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn{

    width:260px;

    text-align:center;

}

.highlights-grid{

    grid-template-columns:1fr;

}

.highlight-card{

    padding:35px;

}

.footer-links{

    flex-direction:column;

    gap:20px;

}

.contact-form{

    padding:30px;

}

.section-title{

    font-size:2.3rem;

}

.hero-image img{

    width:280px;

    height:280px;

}

.logo-circle{

    width:46px;

    height:46px;

}

}


/* ===========================================================
                    SMALL MOBILE
=========================================================== */

@media (max-width:480px){

.container{

    width:94%;

}

.hero{

    padding-top:120px;

}

.hero-title{

    font-size:2.7rem;

}

.hero-subtitle{

    font-size:1.2rem;

}

.hero-tag{

    font-size:.8rem;

}

.hero-image img{

    width:240px;

    height:240px;

}

.section-title{

    font-size:2rem;

}

.contact-form{

    padding:22px;

}

.project-content{

    padding:25px;

}

.timeline-item{

    padding-left:55px;

}

}