body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    background-color:  #121212;
}

header {
    background-color: #121212;
    padding: 0px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: top 0.3s;
    height: 80px;
}

 nav .box {
    list-style-type: none;
    margin: 25px 190px 0px 0px;
    padding: 0;
    display: flex;
    justify-content: right;
}

nav .boxMobile{
    display: none;
}

nav .boxSecondary{
    list-style-type: none;
    margin: -23px 30px 0px 0px;
    padding: 0;
    display: flex;
    justify-content: right;


}
.menuWeb {

    font-size: 20px;
    margin-left: 10px;
}

.jap{
    font-size: 18px;
    font-weight: 500;
}

nav ul li .menuWeb::after {

    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: var(--bar-color, #fff); 
    transition: width 0.3s ease;
}

nav ul li .menuWeb:hover::after {
    width: 100%;
    left: 0;
    background: var(--bar-color, #fff); /
}


nav .boxLogo{
    position: absolute;
    list-style-type: none;
    top: 5px;
    left: 65px;
    padding: 0;
    display: flex;
    justify-content: right;
}

nav .boxLogo #logoBranca{
    max-width: 10%;
    height: auto;
}

nav .boxLogo #logoPreta{
    max-width: 14%;
    height: auto;
}

nav ul li .menufixed{
    margin: 0 30px;
  
}

nav ul li a {
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    position: relative;
}




nav ul li .menufixed::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: var(--bar-color, #fff); 
    transition: width 0.3s ease;
}

nav ul li .menufixed:hover::after {
    width: 100%;
    left: 0;
    background: var(--bar-color, #fff); /
}


.boxText{
    margin-top: 80px;
    background-color: #121212;
    height: 50vh;
    color: #fff;
    display: flex;
    align-items: center; 
    padding: 0px 0px 0px 70px;

}

.boxText h3{
  
    font-size: 50px;
    width: 700px;
}

section {
    height: calc(100vh + 80px);
}



#section1 {
    position: relative;
    width: 100%;
    height: 100vh; 
    overflow: hidden; 
}

.videoPhone2 {
    width: 100%;
    height: 100%; 
    display: block;
    object-fit: cover; 
}



.mute-button, .fullscreen-button {
    position: absolute;
    bottom: 20px;
   
    background-color: #00000000;
    border: none;
    width: 40px; 
    height: 40px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.mute-button {
    right: 70px;
}

.fullscreen-button {
    right: 20px;
}



.about{
    
    width: 95%;
    margin-left: 60px;
}

.about button {
    position: absolute; 
    top: 20px; 
    right: 5%; 
    border: 2px solid white; 
    background-color: transparent; 
    color: white;
    padding: 10px 20px;
    cursor: pointer; 
    font-size: 16px;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

.about button:hover {
    background-color: #fff; 
    color: #121212; 
}

.DisplayNewMobile{
    display: none;
}

#section2 .about h3{
    color: #fff;
    font-size: 60px;
}

#section2 .about h3 span{
   
    font-size: 20px;
}

#section2 .about p span{
    font-size: 0.9rem;
}


#section2 .about p{
    color:  #818181;
    font-size: 18px;
    width: 500px;
    margin-top: -20px;
    font-weight: 600;
}

#section2 {
    background-color: #121212;
    height: 1050px;
    
}








.displayServices {
    margin-top: 50px;
    height: 600px;
    display: flex;
    justify-content: center; 
    align-items: flex-start; 
    gap: 40px; 
        padding: 20px; 
      
}

.serviceWeb {

    margin: 0;
    display: flex;
    flex-direction: column; 
}

.serviceWeb img {
    width: 299.04px;
    height: 299.04px; 
    object-fit: cover; 
}

.serviceWeb p {
    margin-top: 0px;
    font-size: 15px;
    width: 275px;
    color: #818181;
}

.serviceWeb h3 {
    font-size: 16px;
    color: #fff;
    margin-top: 40px;
    position: relative; 
    z-index: 1;
}

.serviceWeb h3::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    left: 0; 
    background: var(--bar-color, #fff); 
    transition: width 0.3s ease;
}

.serviceWeb:hover h3::after {
    width: 100%; 
}

.serviceWeb h3:hover::after {
    width: 100%;
    left: 0;
    background: var(--bar-color, #fff);
}

.carousel{
    display: none;
}

.buttonLeft{
    display: none;
    position: absolute;
    bottom: -40px;   
    left: 60px;
    background-color: blue;
}
.buttonRight{
    display: none;
    position: absolute;
    bottom: -40px; 
    left: 120px;
   
}

.portfolio-container {
    position: absolute;
    left: 1.3%;
    width: 97%;
    top: 10;
  
 
    overflow: hidden;
    padding-bottom:100px;
}





.project {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20px;



    
}

.project img {
    object-fit: cover; 
    width: 299.04px;
    height: 299.04px; 
    
}

.project h3 {
    margin-right: 0px;
    font-size: 16px;
    color: #fff;
    margin-top: 40px;
    position: relative; 
    z-index: 1;
    width: 299px;
}

.project h3::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    left: 0; 
    background: var(--bar-color, #fff); 
    transition: width 0.3s ease;
}

.project h3:hover h3::after {
    width: 100%; 
}

.project h3:hover::after {
    width: 100%;
    left: 0;
    background: var(--bar-color, #fff);
}


.project p {
    margin-right: 25px;
    margin-top: 0px;
    font-size: 15px;
    width: 275px;
    color: #818181;
    height: auto;
  
}

.displayImages, .displayImages2, .displayImages3, .displayImages4, .displayImages5,  .displayImages6  {
    background-color: #00000093;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .imagesContainer {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .boximage, .boximage2, .boximage3, .boximage4, .boximage5, .boximage6 {
    display: none;
    text-align: center;
    color: #fff;
    text-align: left;
    position: fixed;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
  }

  #displayClose {
    font-size: 3rem;
    position: absolute;
    color: #fff;
    top: 2%;
    right: 5%;
   z-index: 9999;
    border-radius: 50%; 
    width: 60px; 
    height: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: background-color 0.3s; 
}

#displayClose:hover {
    background-color: #ffffff; 
    color: #121212;
}

.boximage.active, .boximage2.active, .boximage3.active, .boximage4.active, .boximage5.active, 
.boximage6.active {
    display: block;
    
  }

  .boximage img , .boximage2 img,  .boximage3 img,  .boximage4 img, .boximage5 img, 
  .boximage6 img {
    width: 600px;
    height: 650px;
    object-fit: cover;
  }
  
  .buttons {
   
    margin-top: 20px;
    
  }
  .prev, .prev2, .prev3, .prev4, .prev5, .prev6 {
    position: absolute;
    top: 45%;
    left: 10%;
  }
  .next, .next2, .next3, .next4,  .next5, .next6{
    position: absolute;
    top: 45%;
    right: 10%;
  }
  
  .buttons button {
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 3rem;
  }
  .buttons button:hover {
    background-color: rgba(211, 211, 211, 0);
    color: #a3a3a3;
  }


#section3 {
    background-color: #121212;
    color: #fff;
    position: relative;
    height: 110vh; 
}

#section3 h3 {
    font-size: 60px;
    position: absolute;
    top: 25%;
 
  width: 100%;
  text-align: center;
}
#section3 p{
    font-size: 18px;
    position: absolute;
    top: 75%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 590px;
    font-weight: 550;
    
    height: 81px;
}


.displayClients {
    top: 46%;
    position: absolute;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.clients {
    display: inline-block;
    animation: scroll 40s linear infinite; 
}

.displayClients .client {
    display: inline-block;
}

.displayClients img {
    max-width: 200px; 
    height: 115;
    margin: 0 70px;
    vertical-align: middle;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}



#section4 {
    background-color: #fff;
    color: #121212;
    position: relative;
    height: 250vh;
  
}
#section4 .info h3{
    position: absolute;
    font-size: 34px;
    font-size: #121212;
    top: 8%;
    left: 60px;
 
}

#section4 .info p{
    color: #767676;
    font-size: 18px;
    font-weight: 600;
    width: 365px;
    height: 129px;
    position: absolute;
    top: 12%;
    left: 60px;
    
}

.displayPortfolio {
    top: 7.5%;
    width: 69%;
    position: absolute;
    right: 0%;
    overflow: hidden;
    padding-top: 60px;

}


.displayGlider-contain {
    position: relative;
}

.buttonLeft2{
    display: none;
    position: absolute;
    top: -60px;   
    right: 120px;
    background-color: blue;
}
.buttonRight2{
    position: absolute;
    top: -60px; 
    right: 60px;
    display: none;
}
.buttonRight2 button, .buttonLeft2 button{
    color: #121212;
    font-size: 2.5rem;
    background-color: #ffffff00; 
    border: none; 
    cursor: pointer;
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 2s ease, color 2s ease; 
}




.displayProject {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.displayProject img {
    object-fit: cover; 
    width: 451px;
    height: 541px;
}

.displayProject h3 {
    font-size: 34px;
    margin-top: 10px;

    width: 451px;
}

.displayProject p {
    margin-top: -20px;
    color: #666;
    font-weight: 600;
    width: 451px;
    font-size: 18px;
}




#section4 .info2 h3{
    position: absolute;
    font-size: 34px;
    font-size: #121212;
    top: 55%;
    left: 60px;
}

#section4 .info2 p{
    color: #767676;
    font-size: 18px;
    font-weight: 600;
    width: 365px;
    height: 129px;
    position: absolute;
    top: 59%;
    left: 60px;
}

.displayPortfolio2{
    top: 54%;
    width: 69%;
    position: absolute;
    right: 0%;
    overflow: hidden;
    padding-top: 60px;
}


#section1 iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#section5{
    background-color: #121212;
    color: #fff;
    position: relative;
    height: 115vh; 
}
#section5 h3 {
    font-size: 50px;
    position: absolute;
    top: 25%;
    left: 0%;
    width: 100%;
    
    text-align: center;
}

#section5 p{
    font-size: 18px;
    position: absolute;
    top: 75%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 500px;
    font-weight: 550;

    height: 81px;
}

.displayTechnologies {
    top: 50%;
    position: absolute;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.technologie {
    display: inline-block;
    animation: scroll 40s linear infinite; 
}

.technologie .technologies {
    display: inline-block;
}

.technologie img {
    max-width: 200px; 
    height: 115;
    margin: 0 70px;
    vertical-align: middle;
}

footer{
    background-color: #fff;
    height: 260px;
    color: #121212;
    position: relative;
}

footer .contact{
    position: absolute;
    width: 50%;
  
}

footer .contact p{
    margin-top: 50px;
    margin-left: 60px;
    font-size: 12px;
    font-weight: 600;
}

footer .contact h2{
    margin-top: 10px;
    margin-left: 60px;
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    transition: color 0.3s; 
}


.contact h2::after {
    content: ''; 
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0; 
    height: 3px; 
    background-color: #121212; 
    transition: width 0.4s ease-in-out; 
}

.contact h2:hover::after {
    width: 100%; 
}

footer .contact img{
    width: 250px;
    margin-left: 60px;
    margin-top: 20px;
}

footer .social{

 
    width: 50%;
    left: 50%;
    position: absolute;
    display: flex;
}

footer .social .display1 {
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-weight: 600;
    margin-left: 40px;
    color: #121212;
    position: relative;
}

footer .social .display1::after {
    content: '';
    position: absolute;
    left: 120px; 
    top: 18%;
    height: 60%; 
    width: 1px; 
    background-color: #121212; 
}

footer .social .display2 {
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-weight: 600;
    margin-left: 40px;
    color: #121212;
}



footer .social h4 {
    font-size: 20px;
    margin-bottom: 10px; 
}

footer .social a {
    margin-bottom: 5px;
    text-decoration: none; 
}

line{
    display: none;
}

.displayServicesMobile{
    display: none;
}

.displayPortfolioMobile{
    display: none;
}

.displayPortfolioMobile2{
    display: none;
}

#section6{
    background-color: #fff;
    position: relative;
    height: 110vh;
    display: flex;
    width: 100%;
}



#section6 .displayLeftCultura {
    width: 50%;
    
    display: flex;
    justify-content: center; 
    align-items: center; 
  
}

#section6 .displayLeftCultura img {
    width: 70%;
    object-fit: cover;
    max-width: 100%; 
    height: auto; 
}

#section6 .displayRightCultura {
    width: 50%;
    
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    height: 100%; 
    padding-left: 20px; 
}

#section6 .displayRightCultura h2 {

    font-size: 16px;
}

#section6 .displayRightCultura h3 {
    margin-top: -5px;
    font-size: 50px;
    width: 400px;
}

#section6 .displayRightCultura button {
    border: 2px solid #121212; 
    background-color: transparent; 
    color: #121212;
    padding: 10px 20px;
    cursor: pointer; 
    font-size: 16px;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

#section6 .displayRightCultura button:hover {
    background-color: #121212; 
    color: #fff; 
}

#section6 .displayRightCultura p {
    color: #121212;
    width: 450px;
    font-size: 18px;
    font-weight: 600;
    margin-top: -20px;
}





#section7{
    background-color: #121212;
    height: 50vh;
    position: relative;
}

#section7 h3{
    color: #fff;
    font-size: 48px;
    position: absolute;
    left: 60px;
    top: 25%;
}

#section7 p{
    font-size: 18px;
    color: #fff;
    font-weight: 600;
}

#section7 div{

    width: 40%;
    position: absolute;
    right: 10%;
    top: 25%;
}

#section7 button{
    margin-top: 20px;
    border: 2px solid #fff; 
    background-color: transparent; 
    color: #fff;
    padding: 10px 20px;
    cursor: pointer; 
    font-size: 16px;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

#section7 button:hover {
    background-color: #fff; 
    color: #121212; 
}

.displayWhatsapp {
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    width: 60px; 
    height: 60px; 
    background-color: #fff; 
    color: #121212;
    font-size: 44px; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}



.displayWhatsapp:hover  {
    color: #fff;
    background-color: #494949; 
    animation: shake 0.3s; 
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.menu{
    display: none;
}

.displayMenu {
    background-color: #fff;
    height: 200px;
    width: 100%;
    position: fixed;
    display: none; 
    justify-content: flex-end;
    z-index: 999;
}
.displayMenu .menuLeft{
    width: 550px;
    
}

.displayMenu .menuLeft ul {
    column-count: 3;
    column-gap: 40px; 
    
}

.displayMenu .menuLeft li {
    color: #121212;
    list-style-type: none;
    margin-bottom: 10px; 
    position: relative; 
    padding-bottom: 5px; 
    width: 120px;
    font-weight: 600;
}

.displayMenu .menuLeft li::after {
    content: ''; 
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; 
    height: 2px; 
    background-color: #121212; 
    transition: width 0.3s ease-in-out; 
}

.displayMenu .menuLeft li:hover::after {
    width: 100%;
}

.displayMenu .menuLeft h3{
    color: #121212;
    width: 150px;
    margin-left: 40px;
    font-size: 20px;
    padding-bottom: 5px; 
    border-bottom: 2px solid #121212; 
}

.displayMenu .menuRight{

    width: 300px;
}

.displayMenu .menuRight ul {
    column-count: 1;
    column-gap: 40px; 
    
}

.displayMenu .menuRight li {
    color: #121212;
    list-style-type: none;
    margin-bottom: 10px; 
    position: relative; 
    padding-bottom: 5px; 
    width: 140px;
    font-weight: 600;
}

.displayMenu .menuRight li::after {
    content: ''; 
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; 
    height: 2px; 
    background-color: #121212; 
    transition: width 0.3s ease-in-out; 
}

.displayMenu .menuRight li:hover::after {
    width: 100%;
}

.displayMenu .menuRight h3{
    color: #121212;
    width: 150px;
    margin-left: 40px;
    font-size: 20px;
    padding-bottom: 5px; 
    border-bottom: 2px solid #121212; 
}

.displayEmail{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.466);
    display: none;
    justify-content: center;
    align-items: center;
}

.boxDisplayEmail{
    width: 50%;
    height: 40%;
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    position: relative;
}

.boxDisplayEmail i{
    font-size: 1.4rem;
    position: absolute;
    top: 5%;
    right: 3%;
    cursor: pointer;
}

.boxDisplayEmail h1{
    font-size: 2rem;
    color: #121212; 
    margin-bottom: 20px; 
}

.boxDisplayEmail input{
    border-radius: 10px;
    width: 50%;
    height: 15px;
    margin-bottom: 15px; 
    padding: 5px;
}

.boxDisplayEmail button{
    cursor: pointer;
    border-radius: 10px;
    width: 150px;
    height: 25px;
    background-color: #fff;
    color: #121212;
}

.boxDisplayEmail button:hover{
    background-color: #121212;
    border: 2px solid white; 
    color: #fff
}




@media (min-width: 1800px) {

    header {
        height: 100px;
    }
 
    .displayMenu .menuLeft, .displayMenu .menuRight{
        padding-top: 20px;
        
    }
    nav .boxLogo #logoBranca{
        max-width: 18%;
        height: auto;
    }
    
    nav .boxLogo #logoPreta{
        max-width: 25%;
        height: auto;
    }
    
    nav .boxSecondary{
        list-style-type: none;
        margin: -23px 60px 0px 0px;
    }
    nav .box {
      
        list-style-type: none;
        margin: 35px 230px 0px 0px;
    }

    #section2 {
        
        height: 1300px;
        
    }

    .boxText h3{
  
        font-size: 60px;
        width: 900px;
    }

    #section2{
       
    }

    #section3{
      
        height: 1000px;
    }

    .project img{
        width: 500px;
        height: 550px;
    }
    .project h3 {

        width: 500px;
        font-size: 23px;
    }
    .project p {
        margin: 0;
        font-size: 20px;
        width: 500px;
    }
   
    .displayProject img {
        width: 650px;
        height: 650px;
    }

    .displayProject h3 {
        width: 650px;
    }
    .displayProject p {
        width: 650px;
    }
    #section4 {
      
        height: 1900px;
    }

    #section5{
        height: 1000px;
    }

    #section4 .info p{
        
        width: 400px;
        top: 12%;
    }
    #section4 .info2 p{
      
        width: 400px;
    }
    #section4 .info2 p{
        font-size: 20px;
    }
    #section6 .displayLeftCultura img {
        width: 650px;
        height: 650px;
    }

    .boximage img ,  .boximage16 img , .boximage15 img , .boximage14 img ,  .boximage13 img ,
    .boximage12 img ,  .boximage11 img , .boximage10 img , .boximage8 img , .boximage7 img ,
    .boximage6 img , .boximage5 img , .boximage4 img , .boximage3 img , .boximage2 img {
        width: 650px;
        height: 700px;
    }
   
    
    .boximage ,  .boximage16  , .boximage15  , .boximage14  ,  .boximage13  ,
    .boximage12  ,  .boximage11  , .boximage10  , .boximage8  , .boximage7  ,
    .boximage6  , .boximage5  , .boximage4  , .boximage3  , .boximage2  {
    position: fixed;

    top: 50%; /* Posiciona a parte superior da caixa no meio da tela */
    left: 50%; /* Posiciona a parte esquerda da caixa no meio da tela */
    transform: translate(-50%, -50%); /* Move a caixa para centralizar completamente */
    
}

   
  
}

@media (min-width: 1024px) and (max-width: 1439px) {
 /* Laptops e desktops menores (13" a 15") a altura 600px e 900px */
    /* Laptops e desktops maiores (15" a 17") a altura 768px e 1080px */

    .boxText h3{
  
        font-size: 40px;
        width: 700px;
    }
    
    #section2{
        
        height: 10px;
      
    }
   
    .portfolio-container{
        height: 600px;
        width: 96%;
        left: 1%;
    }
    .displayServices{
        
        width: 100%;
        height: 750px;
        padding: 0;
       
    }
    .project{  
        
        margin-left: 10px;
        margin-right: 20px;
    }
    .project h3{
        width: 100%;
        margin-top: 25px;
        height: 50px;
    }

    .project p{
        width: 100%;
        margin-left: 25px;
         height: 300px;
         margin-top: -10px;
    }    

    .buttonLeft{
        position: absolute;
        bottom: -10px;   
        left: 60px;
    }
    .buttonRight{
        position: absolute;
        bottom: -10px; 
        left: 120px;
    }
    #section3 p{
        left: 70%;
        width: 550px;
        text-align: center;
    }
    .displayPortfolio{
        
    }
    #section4{

        height: 2200px;
    }
    #section4 .info h3{
        position: absolute;
        font-size: 34px;
        font-size: #121212;
        top: 2%;
        left: 60px;
       
    }
    #section4 .info p{
  
        top: 5%;
    }

    #section4 .info2 h3{
 
        top: 50%;
    }
    #section4 .info2 p{

        top: 53%;
    }
 
    #section3 h3{
        top: 25%;
        font-size: 50px;
        right: 1%;
 
    }
    .displayPortfolio{
        
        top: 16%;
    }
    .displayProject{
        margin-left: 20px;
    }
    #section2{

        height: auto;
    }

    .boximage img ,  .boximage16 img , .boximage15 img , .boximage14 img ,  .boximage13 img ,
    .boximage12 img ,  .boximage11 img , .boximage10 img , .boximage8 img , .boximage7 img ,
    .boximage6 img , .boximage5 img , .boximage4 img , .boximage3 img , .boximage2 img {
        width: 500px;
        height: 550px;
    }

    #section3{
      
      height: 600px;
    }
    #section5{

        height: 600px;
    }
    #section6{
       
        height: 800px;
    }
 
    #section7{

        height: 600px;
    }
    .displayProject h3{
        width: 100%;
    }
    .displayProject p{ 
        width: 100%;
    }
    .displayPortfolio2{
        
        top: 65%;
    }
    .displayClients{
        
        top: 43%;
    }
  

}

@media (min-width: 768px) and (max-width: 1023px) {
/* Tablets em modo paisagem a altura 600px e 800px */
    /* Tablets em modo retrato a altura 1024px e 1366px. */
    
    .menu.visible {
        display: block;
    }
    .menu{
        display: none;
        position: fixed;
        background-color: #fff;
        height: 100%;
        z-index: 2;
        top: 0;
        width: 100%;
    }
    .menu i{
        
        width: 90%;
        text-align: right;
        font-size: 25px;
        color: #121212;
        margin-top: 20px;
    }

    .menu h3{

        font-size: 22px;
    }

    .menu .language{
        display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    list-style: none; 
    color: #121212;
    font-size: 18px;
    width: 90%;
    margin-left: 5%;
    font-weight: 600;

    }
    .menu .language li{
        margin-top: 15px;
        
    }

    .menu .language a{
        text-decoration: none;
    }

    .menu .pages{
        font-weight: 600;
        list-style: none; 
        color: #121212;
        font-size: 18px;
        width: 90%;
        margin-left: 5%;
        margin-top:40px;
  
    }

    .menu .pages li{
        margin-top: 15px;
        
    }

    .menu .pages a{
        text-decoration: none;
    }

    header {
        max-width:100%;
        z-index: 2;
    }
    
    nav .boxMobile{
        display: none;
        position: absolute;
        top: 0px;
        right:  5%;
    }
    nav .boxMobile li {
        list-style: none; 
    }
    nav .boxLogo{
        left: 5%;
    }
    nav .boxLogo #logoBranca{
        max-width: 10%;
        height: auto;
    }
    
    nav .boxLogo #logoPreta{
        max-width: 14%;
        height: auto;
    }
   
    nav .boxSecondary li a{
        font-size: 16px;
        display: block;
    
        margin: 55px 60px 0px 0px;
        z-index: 999;
    }
    nav .box {
        display: none;
    }

    .boxText{
        height: 26vh;
    }
    .boxText h3{
        font-size: 10px;
        position: absolute;
        left: 5%;
        font-size: 30px;
        width: 70%;
        height: 184px;
        margin-top: 150px;
    }
    #section2 .about {
        position: absolute;
        margin: 0;
        width: 100%;
        
    }
    #section2 .about h3{
    
        font-size: 36px;
        margin-left: 5%;
        margin-top: 25px;
    }   
    #section2 .about p{  
        
        margin-top: -10px; 
        font-size: 16px;
        width: 90%;
        height: 100vh;
        margin-left: 5%;
    }
    .about button {
        top: 180px;
        left: 5%;
        width: 200px;
        
    }

    #section1 {
        width: 100%;
        height: 40vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    #section1 #player {
        margin-top: -50px;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
    }

    #section2{
        height: 1150px;

    }

    .displayServices{
        display: none;
    }

    #section3 h3{

        top: 25%;
        font-size: 30px;
        width: 100%;
        
 
    }
    .displayServices{
        position: absolute;
        display: block;
        margin-top: 250px;
       
        width: 100%;
    
        padding: 0;
    }

    
  
    .project{
  
        margin-left: 20px;
    }
    .project img{
        width: 299px;
        height: 299px;
    }
    .project h3{

        width: 100%;
        margin-top: 20px;
        height: 50px;
    }

    .project p{
        margin-top: -10px;
        font-size: 15px;
        width: 100%;
        height: 390px;
        margin-left: 25px;
    }
    .buttonLeft{
        position: absolute;
        bottom: -10px;   
        left: 60px;
    }
    .buttonRight{
        position: absolute;
        bottom: -10px; 
        left: 120px;
    }

    #section3 h3{
        top: 25%;
        font-size: 36px;
        
 
    }

    .boximage img ,  .boximage16 img , .boximage15 img , .boximage14 img ,  .boximage13 img ,
    .boximage12 img ,  .boximage11 img , .boximage10 img , .boximage8 img , .boximage7 img ,
    .boximage6 img , .boximage5 img , .boximage4 img , .boximage3 img , .boximage2 img {
    width: 500px;
    height: 590px;
}


.boximage  ,  .boximage16  , .boximage15 , .boximage14  ,  .boximage13  ,
.boximage12  ,  .boximage11  , .boximage10  , .boximage8  , .boximage7  ,
.boximage6  , .boximage5  , .boximage4  , .boximage3  , .boximage2  {
position: fixed;

top: 50%; /* Posiciona a parte superior da caixa no meio da tela */
left: 50%; /* Posiciona a parte esquerda da caixa no meio da tela */
transform: translate(-50%, -50%); /* Move a caixa para centralizar completamente */

}


    #section3 p{
        
        left: 50%;
        width: 90%;
        text-align: center;
    }
    .clients {
        animation: scroll 40s linear infinite; 
        
    }
    .displayClients img {
        margin: 0 50px;
    }
    .displayClients {
        top: 38%;
    }
    .displayPortfolio{
        display: none;
    }
    .displayPortfolio2{
        display: none;
    }

    
    #section3{
        
       height: 600px;
    }
    #section4 {
        
        height: 2300px;
    }
    #section4 .info h3{
        left: 40px;
        top: 2%;
    
    } #section4 .info p{
        left: 40px;
        top: 6%;
    }
    #section4 .info2 h3{
      
        top: 50%;
    }
    #section4 .info2 p{
        
        top: 53%;
    }
    .displayPortfolioMobile{
        left: 5%;
        display: block;
        width: 90%;
        top: 19%;
        position: absolute;
       
    }
    .buttonLeft2{
        top: -55px;   
        right: 35%;
    }
    .buttonRight2{
        top: -55px; 
        right: 24%;
        
    }
    .info2 h3{
   
        margin-top: 7px;
    }
    .info2 p{
        margin-top: -5px;
    }

    .displayPortfolioMobile2{

        display: block;
        top: 66%;
        width: 90%;
        position: absolute;
        left: 5%;
        overflow: hidden;
        padding-top: 60px;
    }

    #section5{
    
        height: 600px;
    }
 

    #section5 h3 {

        top: 29%;
        font-size: 30px;
        left: 0px;
    }
    #section5 p{

        padding-left: 50px;
        width: 90%;
        left: 50%;
        text-align: center;
    }

    #section6 .displayLeftCultura img {
        width: 90%;
    }

    #section6 .displayRightCultura h3{

        font-size: 40px;
        width: 300px;
    
    }
    #section6 {
        height: 700px;
  
    }
    #section6 .displayRightCultura p{
       
        font-size: 16px;
        top: 38%;
        width: 350px;

    }
    #section7 {
  
        height: 500px;
    }

    #section7 h3{
        font-size: 30px;
        top: 30%;
    }
    #section7 div{
        top: 16%;
    }


}


@media (max-width: 767px) {
    /* Smartphones em modo retrato a altura 1280px e 1920px */
    /* Smartphones em modo paisagem a altura 360px e 768px */
    .menu.visible {
        display: block;
    }
    .menu{
        display: none;
        position: fixed;
        background-color: #fff;
        height: 100%;
        z-index: 2;
        top: 0;
        width: 100%;
    }
    .menu i{
        
        width: 90%;
        text-align: right;
        font-size: 25px;
        color: #121212;
        margin-top: 20px;
    }
    .menu h3{

        font-size: 22px;
    }

    .menu .language{
        display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    list-style: none; 
    color: #121212;
    font-size: 18px;
    width: 90%;
    margin-left: 5%;
    font-weight: 600;

    }

    .menu .language li{
        margin-top: 15px;
        
    }

    .menu .language a{
        text-decoration: none;
    }

    .menu .pages{
        font-weight: 600;
        list-style: none; 
        color: #121212;
        font-size: 18px;
        width: 90%;
        margin-left: 5%;
        margin-top:40px;
  
    }

    .menu .pages li{
        margin-top: 15px;
        
    }

    .menu .pages a{
        text-decoration: none;
    }

    header {
        max-width:100%;
     
        position: relative;
        height: 80px;
        margin-top: 30px;
        z-index: 1;
    }
    
    nav .boxMobile{
        height: 30px;
      
        display: block;
    
        text-align: right;
        margin-top: 10px;
        margin-right:    10px;
      
    }
    nav .boxMobile li {
        list-style: none; 
    }
    nav .boxLogo{
        left: 5%;
    }
    nav .boxLogo #logoBranca{
        margin-top: -3px;
        max-width: 90px;
        height: auto;
    }
    
    nav .boxLogo #logoPreta{
        margin-top: -3px;
        max-width: 90px;
        height: auto;
        
       
    }
  
    nav .boxSecondary li a{
        display: none;
        font-size: 16px;
        
   
        margin: 30px 20px 0px 0px;
        z-index: 999;
    }
    nav .box {
        display: none;
    }
    .boxText{
        height: 26vh;
        
    }
  

    .boxText h3{
        font-size: 25px;
        position: absolute;
        left: 5%;
      
        width: 90%;
       
        height: 184px;
        margin-top: 100px;
    }
    #section2{
      position: relative; 
        height: 1000px;
       
    }

    
 
    #section2 .about {
        position: relative;
        margin: 0;
        width: 100%;
        height: 360px;

    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #section2 .about h3 {
    
        font-size: 30px;
        margin: 0; 
        text-align: center;
    }
    
    #section2 .about p {  
        margin: 10px 0; 
        font-size: 16px;
        width: 90%;
        text-align: center;
       
    }

  
    
    #section2 .about button {
        margin-left: 10%;
        position: relative;
        width: 200px;
        margin-top: 0px; 
        align-self: center; 
    }
    
    
 

    #section1 {
        width: 100%;
        height: 40vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    #section1 video {
        position: absolute;
        width: 100%;
        height: auto; 
        max-width: 100%;
        max-height: 100vh;
    }

    .mute-button, .fullscreen-button {
        bottom: 20px;
    }

    .boximage img ,  .boximage16 img , .boximage15 img , .boximage14 img ,  .boximage13 img ,
    .boximage12 img ,  .boximage11 img , .boximage10 img , .boximage8 img , .boximage7 img ,
    .boximage6 img , .boximage5 img , .boximage4 img , .boximage3 img , .boximage2 img {
    width: 100%;
    height: 100%;
  
    
}

.boximage  ,  .boximage16  , .boximage15  , .boximage14  ,  .boximage13  ,
.boximage12 ,  .boximage11  , .boximage10  , .boximage8  , .boximage7  ,
.boximage6  , .boximage5  , .boximage4  , .boximage3  , .boximage2  {
position: fixed;

width: 90%;
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

}

.prev, .prev16, .prev15, .prev14, .prev13, .prev12, .prev11, .prev10,
.prev8, .prev7, .prev6, .prev5, .prev4, .prev3, .prev2 {
position: absolute;
top: 50%;
left: 1%;
}
.next,  .next16,  .next15,  .next14,  .next13,  .next12,  .next11,
.next10,  .next8,  .next7,  .next6,  .next5,  .next4,  .next3,  .next2 {
position: absolute;
top: 50%;
right: 1%;
}
   

    .displayServices{
        display: none;
    }
    .displayServicesMobile{
        display: block;
        
        position: relative;
        margin-top: -400px;
   
        height: auto;
        
    }


    .portfolio-container {
     
        
        padding-top: 60px;
        top: 370px;
        
        height: 550px;
    }
    .buttonLeft{
        position: absolute;
        top: -55px;   
        left: 10%;
    }
    .buttonRight{
        position: absolute;
        top: -55px; 
        right: 10%;
        
    }
    .buttonRight button, .buttonLeft button{
        color: #fff;
        font-size: 2.5rem;
        background-color: #ffffff00; 
        border: none; 
        cursor: pointer;
        width: 50px; 
        height: 50px; 
        border-radius: 50%; 
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 2s ease, color 2s ease; 
    }
    .project p {
      
        width: 90%;
        margin-left: 5%;
        height: auto;
        z-index: 999;
       
    }
    #section3 {
        height: 600px;

    }

    .project h3{
       
        width: 90%;
      
    }

    .project img {
        width: 90%;
    }   

    #section3 h3{
        text-align: center;
      
        top: 10%;
        font-size: 30px;
        left: 5%;
        width: 90%;
    }

    #section3 p{
        margin-top: -20px;
        left: 50%;
        width: 90%;
        text-align: center;
    }
    .clients {
        animation: scroll 40s linear infinite; 
    }
    .displayClients img {
        margin: 0 50px;
    }
    .displayClients {
        top: 25%;
    }
    .displayPortfolio{
        display: none;
    }
    .displayPortfolio2{
        display: none;
    }

    #section4 {
        height: 1660px;
        
    }

  


    #section4 .info h3{
        
        font-size: 20px;
        top: 30px;
        left: 20px;
    }

    #section4 .info p{
        font-size: 16px;
        left: 20px;
        width: 90%;
        top: 70px;
       
    }

    #section4  .info2 h3{
        font-size: 20px;
        top: 800px;
       
        left: 20px;
    
    }

    #section4 .info2 p{
        font-size: 16px;
        left: 20px;
        top: 850px;
        width: 90%;
        
    }
    .displayPortfolioMobile{
        margin-top: -30px;
       
        display: block;
        top: 320px;
        width: 90%;
        position: absolute;
        left: 5%;
        overflow: hidden;
        
    }

    .displayProject {
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }

    .displayProject img {
        width: 100%;
        height: 400px;
    }

    .buttonLeft2{
        top: -50px;   
        right: 60px;
    }
    .buttonRight2{
        top: -50px; 
        right: 1%;
        
    }

    .displayProject h3 {
        width: 100%;
       
        font-size: 20px;
    }
    .displayProject p {
        width: 100%;
        margin-top: -10px;

    }
    .displayPortfolioMobile2{

        display: block;
        top: 1110px;
        width: 90%;
        position: absolute;
        left: 5%;
        overflow: hidden;
  
    }



.gliderPortfolioMobile::-webkit-scrollbar-track {
    background: #7a7a7a; 
}


.gliderPortfolioMobile::-webkit-scrollbar-thumb {
    background-color: #00ff37; 
    border-radius: 10px; 
    border: 3px solid #1e851a; 
}


.gliderPortfolioMobile2::-webkit-scrollbar-track {
    background: #7a7a7a; 
}


.gliderPortfolioMobile2::-webkit-scrollbar-thumb {
    background-color: #00ff37; 
    border-radius: 10px; 
    border: 3px solid #1e851a; 
}



.gliderMobile::-webkit-scrollbar-track {
    background: #7a7a7a; 
}


.gliderMobile::-webkit-scrollbar-thumb {
    background-color: #00ff37; 
    border-radius: 10px; 
    border: 3px solid #1e851a;
}


  
    #section5{
        height: 500px;
    }

    #section5 h3{

      width: 90%;
        top: 25%;
        font-size: 30px;
        left: 5%;
 
    }
    #section5 p{
        left: 50%;
        width: 90%;
        text-align: center;
    }
    #section6 {
        height: auto;
        display: block;
        width: 100%;
    }
    #section6 .displayLeftCultura{
        width: 100%;
    }
    #section6 .displayLeftCultura img {
        margin-top: 50px;
        height: 300px;
    }

    #section6 .displayRightCultura {
        height: auto;
        width: auto;
    }
    #section6 .displayRightCultura h2 {
      
      margin-top: 30px;
    }
    #section6 .displayRightCultura h3 {

        width: 90%;
        font-size: 30px;
        margin-top: 10px;
    }
    #section6 .displayRightCultura p {
        margin-top: -15px;
        width: 90%;
    }
    #section6 .displayRightCultura button {
        margin-bottom: 40px;
    }

   
    
    #section7{
        height: 500px;
    }
    #section7 h3{
        font-size: 30px;
        width: 90%;
     
        left: 5%;
        text-align: center;
        top: 20%;
    }
    #section7 div{
     width: 80%;
        text-align: center;
     left: 10%;
     top: 35%;
    }
    footer{
        height: 800px;
    }
    footer .social{
        background-color: #fff;
        width: 100%;
        position: absolute;
        left: 0;
        top: 110px;
        display: block;
        height: 400px;
    }
    footer .social .display1, footer .social .display2{
        margin-left: 10px;
     
    }
    footer .social .display1::after {
       display: none;
    }
    
    footer .contact img{
        
        z-index: 999;
        position: absolute;
        margin-left: 20px;
    }
    footer .contact p{
        
        margin-left: 20px;
        font-size: 20px;
    }
    footer .contact h2{
        margin-left: 20px;
    }
    footer .contact{
        
       
        width: 100%;
        height: 300px;
    }
    .boxDisplayEmail{
        width: 90%;
    }

}