@media (max-width: 78.125em){
    .z-pattern-grid,.section{
     width: 77rem;
    }
    .h1{
     font-size:2.8rem ;
    }
    .h2{
     font-size: 2.15rem;
    }
    .main-text,.white-text,.discord-text{
     font-size: 1.17rem;
    }
    .pattern-img{
     width: 28rem;
     height: 31rem;
    }
    .flex-revo{
     width: 70%;
 
    }
    .items-div-img-revo{
     width: 28rem;
     height: 31rem;
    }
    .brasao-revo {
     width: 5rem;
     height: 5rem; 
 }
    .habbo-revo-title {
     font-size: 2.8rem;
     font-weight: 700;
     line-height: 80%;
 }
   .header{
     width: 77.2rem;
 }
 
   .revotech {
     background-image: url(imagens/revo-branca-pequena.png);
     width: 18.75rem;
     height: 4.1875rem;
     margin-top: 50px;
     }
 }
 
 @media (max-width: 68.75em){
   .z-pattern-grid, .header, .section {
     width: 68rem;
   }
 
   .h1{
     font-size:2.7rem;
    }
 
    .h2{
     font-size: 2rem;
    }
 
    .main-text,.white-text,.discord-text{
     font-size: 1.12rem;
    }
 
    .span {
     font-size: 1.1rem;
    }
 }
 
 @media (max-width: 61.5625em){
   .z-pattern-grid, .header, .section {
     width: 58rem;
   }
   .links-flex{
     gap: 3rem;
   }
 
   .h1{
     font-size: 2.6rem ;
    }
 
    .h2{
     font-size: 1.9rem;
    }
 
    .main-text,.white-text,.discord-text{
     font-size: 1.12rem;
    }
 
    .span {
     font-size: 1.1rem;
    }
    
    .brasao {
     width: 20.98rem;
     height: 18rem;
    }
 
    .box-1 {
    width: 25rem;
    }
 
    .box-title, .box-svg {
     font-size: 0.9rem;
    }
 
    .pattern-img {
     width: 24rem;
     height: 27rem;
    }
 
    .flex-revo{
     width: 70%;
 
    }
    .items-div-img-revo{
     width: 24rem;
     height: 27rem;
    }
    .brasao-revo {
     width: 5rem;
     height: 5rem; 
 }
    .habbo-revo-title {
     font-size: 2.8rem;
     font-weight: 700;
     line-height: 80%;
 }
     .bold-revo{
       letter-spacing: 0.4rem;
     }
     .footer-div{
       gap: 4rem;
    }
 
 }
 
 @media (max-width:55.9375em){
   .z-pattern-grid{
     grid-template-columns: 1fr;
     grid-template-rows: repeat(3,1fr);
     gap: 5rem;
     margin: 0 auto;
     margin-bottom: 10rem;
     
   }
   .z-pattern-grid, .header, .section {
     width: 54rem;
   }
   .section{
     gap: 2rem ;
   }.siga{
     font-size: 1.05rem;
   }
   .z-pattern{
     height: 201rem;
   }
   .flex-z-pattern{
     grid-template-columns: 1fr;
     gap: 3rem;
     grid-template-rows: repeat(2,1fr);
   }
   .revo-anchor{
      grid-row: 2/3;
   }
 
   .brasao {
     width: 20rem;
     height: 17.16rem;
    }
 
    .icons-div-1 {
     align-self: start;
     height: 82%;
    }
 
    .h1{
     font-size: 2.45rem;
    }
 
    .h2{
     font-size: 1.75rem;
    }
 
    .span {
     font-size: 1.05rem;
    }
    
   .ver-mais-anchor{
     bottom: -30rem;
   }
 
   .flex-z-pattern{
     gap: 0;
   }
   
   .ref-div-ver-mais-1 {
     position: absolute;
     top: -29.8rem;
   }
 }
 
 @media (max-width:50em){
   .header,.section,.z-pattern-grid{
     width: 51rem;
   }
 
   .section{
     
     margin: 0 auto;
   }.logo-section{
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .brasao{
     width: 18rem;
     height: 15.44rem;
   }
   .section{
     grid-template-columns: 1fr 3fr;
   }
   .aside, .barra-aside, .spacing-container, .spacing {
     display: none;
   }
 
   .section {
     display: grid;
   }
   .links-flex{
     align-items: center;
   }
   .header {
     height: 3rem;
     width: 90%;
     align-items: center;
     
   }
 
   .links-flex {
     justify-content: center;
     width: 50%;
     gap: 3rem;
   }
 
   .main {
     width: 100%;
   }
 
   .logo-section {
     align-self: center;
     justify-self: flex-end;
   }
 
   .options {
 
     background-color: transparent;
     cursor: pointer;
     border: none;
     justify-content: center;
     align-items: center;
     transition: all 0.3s;
   }
   .options:hover{
     transform: scale(1.1);
   }
   .z-pattern-grid:last-child{
     gap: 1rem;
   }
   .a-svg{
     display: flex;
     width: 2rem;
     height: 2rem;
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
   }
   .a-svg:hover {
     transform: scale(1.2);
   }
 
   .option-icon {
     width: 2rem;
     height: 2rem;
     stroke: #fff;
     transition: all 0.3s;
   }
 
   .open{
     display: flex;
   }
   .close{
     position: absolute;
     right: 5.5%;
     top: 4.045rem;
   }
   .follow-div {
  
     display: grid;
     align-items: center;
     justify-content: center;
     right: -1000rem;
     grid-template-rows: 0.8fr 2fr 2fr 2fr;
     position: absolute;
     top: 0;
     width: 100%;
     height: 100vh;
     z-index: 2;
     background-color: rgb(30, 9, 56, 0.8);
     backdrop-filter: blur(5px);
     gap: 1rem;
     transition: all 0.3s;
   }
 
   ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2rem;
   }
 
   .links-title {
     color: #fff;
     font-size: 1.6rem;
     font-weight: 500;
   }
 
   .links-div {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 1.5rem;
   }
 
   .links-main-title {
     font-size: 2.2rem;
     color: #f2e8e8;
   }
   
   
   .right{
     right: 0;
     
   }
   .absolute{
     position: absolute;
     top: 0;
     left: 5rem;
   }
   .ocult{
     right: -1000rem;
     transition: all 3s;
   }
   
   .footer {
     width: 100%;
     padding-right: 0 ;
     justify-content:center ;
     gap: 2rem;
   }
   .footer-link{
     margin: 0;
   }
 
 
   .footer-menu {
     display: flex;
     align-items: center;
     justify-items: center;
     gap: 1.2rem;
   }
 }
 
 @media (max-width:43.75em) {
   .box-1{
     display: none;
   }
 
   .z-pattern-grid, .section {
     width: 45rem;
   }
 
   .section{
     grid-template-columns: 1fr;
     grid-template-rows: 4fr 1fr 0.5fr;
     height: 40rem;
     align-items: center;
     justify-items: center;
   }
   .ver-mais-absolute{
     top: 57rem;
     grid-column: 1/2;
     z-index: 4;
   }
   .logo-section{
     grid-row: 1/2;
     align-self: center;
     justify-self: center;
     margin-left: 1rem;
   }
   .text-mq{
     text-align: center;
   }
   .h1{
     text-align: center;
   }
   .main-btn{
     justify-content: center;
   }
   .section-text{
     margin: 0;
     display: grid;
     grid-template-rows: 1.8fr 1fr 1fr;
     justify-items: center;
     align-items: center;
   }
 
   .logo-section{
     margin-top: 2rem;
   }
 
   .z-pattern-grid{
     margin-top:10rem ;
   }
   .brasao{
     width: 17rem;
     height: 14.44rem;
   }
   .header{
     width: 90%;
     margin: 3.44rem auto;
   }
 
   .link {
     font-size: 1.04rem;
   }
 
   .footer-logo {
     width: 3.2rem;
     height: 3.2rem;
   }
   
   .footer-item{
     margin-left: 1.4rem;
     margin-right: 0;
   }
   .footer-div{
     width: 85%;
     display: flex;
     gap: 0;
   }
 
   .footer-title {
     font-size: 1.3rem;
   }
 }
 
 @media (max-width: 37.8125em){
   .main-text,.white-text,.discord-text{
     font-size: 1.05rem;
   }
 
   .ver-mais-absolute{
     margin-top: 0rem;
 
   }
   .header{
     width: 100%;
     gap: 10rem;
     justify-content: center;
     margin-bottom: 0;
   }
   .z-pattern-grid{
     width: 35rem;
   }
   .flex-z-pattern{
     gap: 3rem;
   }
   .options-icon{
     width: 1.8rem;
     height: 1.8rem;
   }
   .pm{
     font-size: 1.3rem;
   }
   .link{
     font-size: 1rem;
   }
   .section{
     grid-template-rows: 5fr 1fr;
     height: 46rem;
     width: 35rem;
   }
 
   .h1 {
     font-size: 2.2rem;
   }
 
   .text-mq, .main-white-text {
     font-size: 0.96rem;
     line-height: 1.6rem;
   }
 
   .btn {
     width: 12.3rem;
     height: 2.6rem;
     
     }
   .text-btn, .text-btn-white{
     font-size: 0.9rem;
   }
 
   .btn-black {
     width: 12.3rem;
     height: 2.6rem;
   }
 
   .btn-text {
     font-size: 0.83rem;
   }
   .ver-mais{
     font-size: 1.1rem;
  
   }
   .setinha{
     width: 0.85rem;
     height: 1.25rem;
   }
   .ver-mais-anchor{
     bottom: -33rem;
   }
 
   .footer-logo {
     width: 3rem;
     height: 3rem;
   }
 
   .footer-div{
     width: 90%;
   }
 
   .footer-title{
     font-size: 1.1rem;
   }
 
   .footer-date{ 
     font-size: 0.95rem;
   }
 
   .footer-text-one {
     font-size: 0.65rem;
   }
 
   .footer-menu {
     display: grid;
     grid-template-rows: repeat(3,1fr);
     align-items:center;
     justify-items: flex-start;
     font-size: 0.8rem;
   }
   .footer-link-nav{
     font-size: 0.9rem;
   }
 
 }
 @media (max-width: 32.8125em){
   .header{
     gap: 8rem;
   }
   .links-flex{
     width:44% ;
     gap: 1.5rem ;
   }
 
 }
 
 @media (max-width: 31.25em){
   .line{
     width: 3.1rem;
   }
   .discord-text,.main-text,.white-text{
     font-size: 0.95rem;
   }
   .discord-text,.main-text{
     line-height: 1.5rem;
   }
   .h2{
     font-size: 1.55rem
   }
   
   .header{
       gap: 2rem;
   }
   .links-flex{
     width: 75%;
     gap: 2rem;
     justify-content: flex-end;
   }
 
   .pm{
     font-size: 1.27rem;
   }
 
   .link{
     font-size: 0.9rem;
   }
 
   .options-icon {
     width: 1.8rem;
     height: 1.8rem;
   }
   .links-main-title{
     font-size: 1.9rem;
   }
   .links-title{
     font-size: 1.33rem;
   }
   .a-svg{
     width: 1.8rem;
     height: 1.8rem;
   }
   .section,.z-pattern-grid{
     width: 30rem;
   }.brasao{
     width: 15rem;
     height: 12.74rem;
   }
   .h1{
     font-size: 2rem;
   }
   .text-mq, .main-white-text{
     font-size:0.88rem ;
     line-height: 1.4rem;
   }
   .section{
     gap: 2rem;
     height: 38rem;
     grid-template-rows: 1fr 1fr;
 
   }
   .logo-section{
     margin-top: 4rem;
     align-self: flex-end;
   }
   .header{
     margin-top: 2.1rem;
   }
   .main{
     height: 90%;
   }
   .z-pattern{
     height: 201rem;
   }
   .section-text{
     gap: 1.25rem;
   }
   .z-pattern-grid{
     height: 100%;
     width: 100%;
     margin: 3rem 5.83333rem 0rem 5.83333rem;
   }
 
   .flex-z-pattern{
     width: 100%;
     align-items: center;
     justify-content: center;
     gap: 2rem;
   }
   
   .pattern-section{
     width: 100%;
   }
 
   .cassio{
     width: 100%;
   }
 }
 
 @media (max-width: 26.875em){
   .main-text{
     width: 100%;
   }
   .cassio{
     width: 100%;
   }
   .main{
     height: 100%;
   }
   
   .section{
     gap: 2rem;
     height: 39rem;
     gap: 0;
     grid-template-rows: 1fr 1fr;
 
   }
   .logo-section{
     margin-top: 8rem;
     align-self: flex-end;
   }
   .pm{
     font-size: 1.2rem;
   }
 
   .link{
     font-size: 0.85rem;
   }
 
   .option-icon {
     width: 1.8rem;
     height: 1.8rem;
   }
   .links-main-title{
     font-size: 1.7rem;
   }
   .links-title{
     font-size: 1.3rem;
   }
   .a-svg{
     width: 1.6rem;
     height: 1.6rem;
    }
    .section,.z-pattern-grid{
     width: 27rem;
    }
   
    .h1{
     font-size: 1.7rem;
   }
   .text-mq, .main-white-text{
     font-size:0.78rem ;
     line-height: 1.34rem;
   }
 
   .btn {
     width: 10.9rem;
     height: 2.4rem;
     
     }
   .text-btn, .text-btn-white{
     font-size: 0.77rem;
   }
 
   .logo-section {
     margin: 3rem 0 2rem 1rem;
   }
   .main{
     height: 100%;
   }
   .z-pattern{
     height: 165rem;
     align-items: start;
   }
 
   .pattern-img,.items-div-img-revo {
     width: 19rem;
     height: 21.38rem;
   }
 
   .ver-mais{
     font-size: 0.95rem ;
     
   }
   .flex-z-pattern{
     gap: 2.5rem;
     align-self: start;
   }
   .z-pattern-grid:last-child{
     gap: 0rem;
   }
 
   .z-pattern-grid{
     gap: 0rem;
     margin-top: 2rem;
     margin-bottom: 0;
     height: 100%;
   }
 
   .ver-mais-anchor{
      bottom: -26.5rem;
   }
 
   .ver-mais-2{
     bottom: -27rem;
   }
 
   .span {
     font-size: 0.9rem;
   }
 
   .h2 {
    font-size: 1.45rem;
   }
 
   .discord-text, .main-text, .white-text {
     font-size: 0.9rem;
     line-height: 1.25rem;
   }
 
   .revotech{
     width: 15.5rem;
     height: 3.46rem;
   }
 
   .brasao-revo{
     width: 4.5rem;
     height: 4.5rem;
   }
 
   .habbo-revo-title,.bold-revo{
     font-size: 2.3rem;
   }
 
   .bold-revo{
     letter-spacing: 0.3rem;
   }
 
   .revolucao{
     font-size: 0.65rem;
   }
 
   .main{
     height: 100%;
   }
 
   .main-btn {
     margin-top: 2rem;
   }
   
   .section{
     height: 100%;
     gap: 0;
     grid-template-rows: 0.5fr 0.8fr 0.3fr;
   }
   .section-text{
     row-gap: 0;
     align-self: flex-start;
   }
   .ver-mais-absolute{
     grid-row: 3/4;
     align-self: start;
     top: 0;
   }
 
   .footer {
     padding: 1rem 1rem 1rem 0;
   }
 
   .footer-menu {
     gap: 0.5rem;
   }
 
   .footer-date {
     font-size: 0.8rem;
   }
 
   .footer-link-nav {
     font-size: 0.8rem;
   }
 }