@media screen and (max-width:1290px) {
    .menus header,
    section.header .hero-section,
    section.about,
    section.index-indicators,
    section.feedback,
    section.portfolio,
    section.contact .item:nth-child(1),
    section.contact .item:nth-child(2),
    section.blog,
    section.footer,
    div.footer-dev,
    section.news,
    section.projects,
    section.jobs,
    section.history,
    section.indicators,
    section.map,
    section.details-project{
        padding-left:3.5rem;
        padding-right: 3.5rem;
    }

    section.page-about .hero-section .hero-img,
    section.page-portfolio .hero-section .hero-img,
    section.page-blog .hero-section .hero-img{
        width: 45%;
    }

    section.page-work-us .hero-section .hero-img{
        width: 50%;
        height: 400px;
    }

    section.header .hero-section{
        height: 100%;
    }

    
    section.page-index  .hero-section .hero-img{
        height: 400px;
    }

    
    /* section contact */
    section.contact .item .desc .budget{
        width: 95%;
    }

    section.contact .item .desc .budget form{
        width: 100%;
    }

    section.contact .item .desc .budget form .input-field{
        width: 200px;
    }

    section.contact .item .desc .budget form .input-field select{
        width: 100%;
    }

    section.history,section.indicators{
        height: 700px;
    }

    section.indicators .indicators-item .card-testimony .card-testimony-item {
        width: 100%;
    }
}

@media screen and (max-width:1025px) {
    section.page-index  .hero-section .hero-img{
        width: 50%;
        height: 300px;
    }

    section.about .desc .first .image {
        width: 100%;
    }

    section.about .desc .first .details {
        width: 100%;
    }

    /* section portfolio */
    section.portfolio{
        height: 100%;
        flex-direction: column;
    }

    section.portfolio .desc{
        width: 100%;
    }

    
    section.portfolio .desc .gallery{
        justify-content: space-between;
    }

    section.portfolio .desc .gallery img {
        width: 300px;
        height: 150px;

    }

    section.portfolio .card-portfolio{
        transform: translate(0, 0) !important;
    }

    section.portfolio .card-portfolio .card-group
    {
        width: 100%;
    }

     /* estilização do section blog */
    section.blog{
        height: 100%;
    }

    /* estilização do footer */
    section.footer{
        flex-direction: column;
        gap: 10px;
    }
    section.footer .footer-logo{
        text-align: center;
        width: 100% !important;
    }

    section.indicators{
        height: 780px;
    }
}


@media screen and (max-width:900px) {
    .menus header,
    section.header .hero-section,
    section.about,
    section.index-indicators,
    section.services,
    section.feedback,
    section.portfolio,
    section.contact .item:nth-child(1),
    section.contact .item:nth-child(2),
    section.blog,
    section.footer,
    div.footer-dev,
    section.news,
    section.projects,
    section.jobs,
    section.history,
    section.indicators,
    section.map,
    section.details-project{
        padding-left:2.5rem;
        padding-right: 2.5rem;
    }

    /* estilizacao do menu */

    .menus header{
        flex-direction: column;
        gap: 20px;
    }

    .menus header nav{
        width: 100%;
    }

    .menus header nav ul{
        justify-content: space-between;
    }

    /* hero section */
    section.header .hero-section{
        height: 100%;
        align-items: start;
        padding-top: 10rem;
        flex-direction: column;
        justify-content: unset;
    }

    section.page-index .hero-section .text-desc{
        width: 100%;
    }

    section.header .hero-section .text-desc .buttons{
        margin-bottom: 3.5rem;
    }

    section.header .hero-section .text-desc .buttons a{
        width:100%;
    }

    section.page-index .hero-section .hero-img{
         height: 400px;
    } 

    section.header .hero-section .hero-img{
        width: 100%;
       
        transform: translate(0, 0) !important;
    }

    

    /* estilização do section about */
    section.about .desc .first{
        flex-direction: column-reverse;
        gap: 20px;
    }
    section.about .desc .first .image{
        width: 100%;
        height: 400px;
    }

    section.about .desc .first .details{
        width: 100%;
    }

    /* estilização do section feedback */
    section.feedback .card-feedback .card-feeddback-item{
        height: 350px;
    }

    section.feedback .card-feedback .card-feeddback-item.active{
        height: 400px;
    }

    
    /* section portfolio */

    section.portfolio .desc .gallery img {
        width: 200px;
 
    }

    

    

    /* section contact */
    section.contact .item:nth-child(1){
        gap: 20px;
    }

    section.contact .item .desc,
    section.contact .item .desc .text{
        width: 100%;
    }

    section.contact .item .desc .budget form{
        flex-direction: column;
    }


    section.contact .item .desc .budget form .input-field,
    section.contact .item .desc .budget form .input-field select{
        width: 100%;
    }

    section.contact .item .desc .budget form .btn-budget,
    section.contact .item .desc .budget form .btn-budget button{
        width: 100%;
    }

    section.contact .item form.form-contact{
        transform: translate(0, 100px) !important;
        width: 100%;
        padding: 20px;
    }



    /* estilização do section blog */

    section.blog .desc{
        width: 60%;
    }

    section.blog .card-blog .card-blog-group .card-blog-item{
        width: 250px;
    }

    section.blog .card-blog .card-blog-item .details{
        padding: 10px 7px;
    }

    /* page blog */
    section.page-blog .hero-section .text-desc,
    section.page-work-us .hero-section .text-desc,
    section.page-portfolio .hero-section .text-desc,
    section.page-about .hero-section .text-desc{
        width: 100%;
    }

    section.news{
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    /* page portfolio */
    section.projects .filters-menu{
        display: none;
    }

    section.projects .projects-content {
        width: 100%;
    }
}

@media screen and (max-width:780px) {
     /* estilizacao do menu */
    .menus header{
        flex-direction: unset;

    }

     .menus header nav{
        display: none;
    }

    .menus header .btn-toggle{
        display: block;

    }

    section.header .hero-section{
        padding-top: 7rem;
    }

    section.header .hero-section .text-desc .buttons{
        margin-bottom: 2.5rem;
    }
}

@media screen and (max-width: 760px) {
    .menus header,
    section.header .hero-section,
    section.about,
    section.index-indicators,
    section.feedback,
    section.portfolio,
    section.contact .item:nth-child(1),
    section.contact .item:nth-child(2),
    section.blog,
    section.footer,
    div.footer-dev{
        padding-left:1.5rem;
        padding-right: 1.5rem;
    }

    h1{
        font-size: 2rem !important;
    }

   
    /* hero section */
    section.header .hero-section{
        padding-top: 7rem;
        padding-bottom: 1rem;
        flex-direction: column;
        justify-content: unset;
    }


    section.page-index .hero-section .text-desc > p{
        margin: 1rem 0 !important;
    }

    section.header .hero-section .text-desc .buttons{
        flex-direction: column;
    }

    section.header .hero-section .hero-img{
        height: 300px;
    }

    section.page-index .hero-section .hero-img{
        height: 200px;
        padding: 0 ;
    }

    /* estilização do section about */

    section.about .desc .first .image{
        height: 200px;
    }


    /* section index indicators */
    section.index-indicators
    .index-indicators-itens{
        flex-wrap: wrap;
    }

    section.index-indicators
    .index-indicators-itens .item{
        width: 50%;
        padding: 1.5rem 10px;
    }

    section.index-indicators
    .index-indicators-itens .item i{
        font-size: 2.5rem;
    }

    /* section services */
    section.services{
        padding: 3rem 0;
    }
    section.services .card-services .card-services-item{
        box-shadow:none !important;
    }

    section.services .card-services .card-services-item .image{
        position: relative;
        height: 100%;
    }

    section.services .card-services .card-services-item .image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.397);
    }

    section.services .card-services .card-services-item .details{
        position: absolute;
        bottom:0;
        left: 0;
        color:white;
        letter-spacing: 1px;
    }

    section.services .card-services .card-services-item .details a{
        width: 100%;
    }

    section.services .card-services .card-services-item .details .text-muted{
        color:rgb(228, 228, 228) !important;
    }


    /* estilização do section feedback */
    section.feedback .card-feedback{flex-wrap: wrap;}

    /* section portfolio */

    section.portfolio .desc{
        margin: 0 !important;
    }

    section.portfolio .desc .gallery img {
        width: 100px;
         height: 100px;
    }



    /* section contact */
    section.contact .item:nth-child(1){
        flex-direction: column;
    }

    section.contact .item form.form-contact{
        transform: translate(0, 0) !important;
        padding: 10px;
    }

    section.contact .item:nth-child(2){
        padding-top: 1rem !important;
    }

    /* estilização do section blog */


    section.blog .desc{
        width: 100%;
    }
    section.blog .card-blog{
        flex-direction: column;
    }

    section.blog .card-blog .card-blog-item,
    section.blog .card-blog .card-blog-group .card-blog-item{
        width: 100%;
        height: 250px;
    }

     section.blog .card-blog .card-blog-item .details{
        padding: 10px;
    }

    /* estilização do footer */




    section.footer .footer-body{
        flex-direction: column;
    }
    section.footer .footer-logo,
    section.footer .footer-body .footer-link,
    section.footer .footer-body .footer-service,
    section.footer .footer-body .footer-newsletter
    {
        width: 100% !important;
    }

    div.footer-dev {
        flex-direction: column;
        font-size: 12px;
        text-align: center;
    }

    /* estilização da pagina about */
    section.history,
     section.indicators,
      section.map{
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
    section.page-about{
        height: 100%;
    }

    section.page-about .hero-section .text-desc{
        width: 100%;
    }

    section.history{
        flex-direction: column;
        height: 100%;
    }

    section.history .guide,
    section.indicators .guide,
    section.map .guide{
        display: none;
    }

    section.history .history-item:nth-child(1){
        display: none;
    }

    section.history .history-item:nth-child(3)
    .card-history-item .card-item{
        height: 180px;
    }


    /* estilização do section indicators */
    section.indicators{
        flex-direction: column;
        height: 100%;
        gap: 40px;
        margin-bottom: 3rem;
    }

    section.indicators .indicators-item{
        padding: 0 !important;
    }
    section.indicators .indicators-item
    .card-testimony .card-testimony-item {
        width: 100%;
    }

    /* estilizacao do section map */
    section.map{
        gap: 40px;
        flex-direction: column;
        height: 100%;
        margin-bottom: 3rem;
    }

    section.map  .locate{
        padding: 0 !important;
    }

    section.map .map-container{
        margin: 0 !important;
        height: 300px;
    }



    /* estilização  da page blog */

    section.news{
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
    section.page-blog{
        height: 100%;
    }

    section.page-blog .hero-section .text-desc{
        width: 100%;
    }


    section.news .filters-menu ul{
        display: none !important;
    }

    section.news .filters-menu .btn-filter-toggle{
        gap: 10px;
        display: flex !important;
        align-items:center;

    }

    section.news .filters-menu .btn-filter-toggle select,
    section.news .filters-menu .btn-filter-toggle button{
        font-size: 14px;
        padding: 8px 16px;
    }

    section.news .news-content .news-content-item{
        flex-direction: column;
    }

    section.news .news-content .stories
    .stories-card .stories-card-item .desc p:nth-last-of-type{
        flex-direction: column;
        background:red;
    }
    section.news .news-content p.title,
    section.news .news-content .stories > p{
        width: 100%;
    }

    /* estilização da page work-us */
    section.jobs{
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
    section.page-work-us{
        height: 100%;
    }

    section.page-work-us .hero-section .text-desc{
        width: 100%;
    }

    section.jobs .card-jobs{
        justify-content: unset;
        gap: 10px;
    }

    section.jobs .card-jobs .card-jobs-item{
        width: 100%;
    }

    section.jobs .form .desc,
    section.jobs .form form  button{
        width: 100%;
    }

    /* estilização da page portfolio */
    section.page-portfolio{
        height: 100%;
    }

    section.page-portfolio .hero-section .text-desc{
        width: 100%;
    }

    section.projects{
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
    section.projects .filters-menu{
        display: none;
    }

    section.projects  .projects-content{
        width: 100%;
    }

    section.projects  .projects-content
    .card-projects{

        grid-template-columns: 1fr;
    }

    section.details-project{
        padding: 1rem 1.5rem;
        flex-direction: column;
    }

    section.details-project .desc{
        width: 100%;
    }

    section.details-project .desc .property .itens{
        height: 280px;
        font-size: 12px;
    }

    section.details-project .latest-projects{
        width: 100%;

    }

    section.details-project .plan img{
        width: 100%;
    }


}

@media (max-height: 650px) {
    section.page-index .hero-section {
        height: 100%;
        padding-top: 6rem;
    }
}

@media screen and (max-width:380px){

    section.header .hero-section{
        padding-top: 6rem;
    }

    section.header .hero-section .text-desc .buttons{
        flex-direction: row;
        margin-bottom: 0;
    }

    section.header .hero-section .text-desc .buttons a{
        width:100%;
    }


}