/*
======================================================
 RESPONSIVIDADE
 PORTFÓLIO PROFISSIONAL
======================================================
*/


/* =====================================================
                TABLETS
===================================================== */


@media(max-width:991px){



.container{


    padding-left:

    20px;


    padding-right:

    20px;


}





section{


    padding:

    70px 0;


}





.section-title h2{


    font-size:

    36px;


}






/* HEADER */


header .container{


    height:

    70px;


}



#navbar{


    position:

    fixed;


    top:

    70px;


    left:

    -100%;


    width:

    100%;


    height:

    calc(100vh - 70px);


    background:

    white;


    transition:

    .3s;


}





#navbar.active{


    left:

    0;


}





#navbar ul{


    flex-direction:

    column;


    padding:

    40px;


    gap:

    25px;


}







/* HERO */


.hero{


    padding-top:

    110px;


}





.hero-grid{


    grid-template-columns:

    1fr;


    text-align:

    center;


    gap:

    40px;


}





.photo-border{


    width:

    280px;


    height:

    280px;


}





.hero-content{


    display:

    flex;


    flex-direction:

    column;


    align-items:

    center;


}





.hero-content h1{


    font-size:

    48px;


}





.hero-content h2{


    font-size:

    24px;


}





.hero-description{


    max-width:

    600px;


}





.hero-highlights{


    grid-template-columns:

    repeat(2,1fr);


}







/* SERVIÇOS */


.services-grid{


    grid-template-columns:

    repeat(2,1fr);


}





/* TECNOLOGIAS */


.tech-grid{


    grid-template-columns:

    repeat(3,1fr);


}





/* PROJETOS */


.projects-grid{


    grid-template-columns:

    1fr;


}





.project-two-columns{


    grid-template-columns:

    1fr;


}





.results-grid{


    grid-template-columns:

    repeat(2,1fr);


}







/* TECNOLOGIAS PAGE */


.technology-grid{


    grid-template-columns:

    repeat(2,1fr);


}







/* ARTIGOS */


.articles-grid{


    grid-template-columns:

    1fr;


}







/* CURRICULO */


.resume-header{


    flex-direction:

    column;


    text-align:

    center;


}





.resume-item{


    grid-template-columns:

    1fr;


    gap:

    10px;


}





.competence-grid{


    grid-template-columns:

    repeat(2,1fr);


}







/* CONTATO */


.contact-grid{


    grid-template-columns:

    1fr;


}





.footer-content{


    flex-direction:

    column;


    gap:

    25px;


}



}

/* =====================================================
                SMARTPHONES
===================================================== */


@media(max-width:576px){



.section-title h2{


    font-size:

    30px;


}





.section-title p{


    font-size:

    16px;


}







/* HERO */


.hero-content h1{


    font-size:

    38px;


}





.hero-content h2{


    font-size:

    20px;


}





.photo-border{


    width:

    220px;


    height:

    220px;


}





.hero-highlights{


    grid-template-columns:

    1fr;


}





.hero-buttons{


    flex-direction:

    column;


    width:

    100%;


}





.hero-buttons .btn{


    width:

    100%;


}







/* SERVIÇOS */


.services-grid{


    grid-template-columns:

    1fr;


}





.service-card{


    padding:

    25px;


}







/* TECNOLOGIAS */


.tech-grid{


    grid-template-columns:

    repeat(2,1fr);


}



.tech-card{


    padding:

    15px;


}







/* TIMELINE */


.timeline::before{


    left:

    10px;


}





.timeline-item{


    padding-left:

    45px;


}





.timeline-dot{


    left:

    -3px;


    width:

    26px;


    height:

    26px;


}





.timeline-content{


    padding:

    25px;


}





.timeline-content h3{


    font-size:

    22px;


}







/* FILTRO PROJETOS */


.project-filter{


    flex-direction:

    column;


}





.filter-btn{


    width:

    100%;


}







/* PROJETOS */


.project-content{


    padding:

    22px;


}





.project-info{


    flex-direction:

    column;


    gap:

    10px;


}







/* TECNOLOGIAS */


.technology-grid{


    grid-template-columns:

    1fr;


}





.category-header{


    flex-direction:

    column;


    align-items:

    flex-start;


}







/* RESULTADOS */


.results-grid{


    grid-template-columns:

    1fr;


}







/* GALERIA */


.gallery-grid{


    grid-template-columns:

    1fr;


}







/* CURRICULO */


.resume-header{


    padding:

    25px;


}





.resume-title h1{


    font-size:

    28px;


}





.competence-grid{


    grid-template-columns:

    1fr;


}







/* CONTATO */


.contact-card{


    flex-direction:

    column;


    text-align:

    center;


}





.contact-form{


    padding:

    20px;


}







/* FOOTER */


.footer-content{


    text-align:

    center;


}





}