@media only screen and (max-width: 768px) {
    .evdeveloper.mobile{display:block!important;}
    .evdeveloper.desktop{display:none;}
    .icon-container {
        display: none!important;
    }
    .hide-on--desktop{
        display:block!important;
    }
    .hide-on--mobile{
        display:none!important;
    }
    .contact-section{
        flex-direction: column;
        row-gap: 29px;
    }
    .contact-section p{
        text-align:center!important;
    }
    .full-screen-menu.active ul{margin-top: 130px;!important}
    form.contact-form {
        padding: 70px 35px!important;
    }
    .bg--white h2{
        padding:30px 11px!important;
    }
    .right-pane {
        width: 100%!important;
    }
    .left-pane {
        width: 100%!important;
    }  
    .project-container {
        height: 100%!important;
        flex-direction: column!important;
        margin-top:120px!important;
    }
    header#header h3 {
        text-align: left;
        font-size: 2.75rem!important;
    }
      h2.image-cover--mask {
          font-size: 18vw;
          text-align: left;
          line-height: 65px!important;
          font-weight: bold;
          word-wrap: break-word;
          white-space: normal;
          max-width: 388px;

      }
      h2.image-cover--mask.titles--cover {
        margin-top: 0;
        font-size: 29vw !important;
        line-height: 100px !important;
    }
      h2.image-cover--mask.main--cover {
        font-size: 24vw !important;
        line-height: 100px !important;
        letter-spacing: .0em;
    }
      .wp--button a{
        font-size: 12px;
      }
      .bg--black h2{
        font-size: 8vw!important;
      }
      .logo-center img{
        height: 95px!important;
      }
      .hide{
        display: block!important;
      }

      .title-mobile{
        text-decoration: underline solid #918671;
        padding: 30px;
      }
      .menu--nav {
          display: block!important;
      }
        h2.image-cover--mask.titles--cover.design-interior--home-tilte {
            font-size: 23vw ;
            line-height: 73px ;
            text-align: left !important;
        }
    }
    video {
      width: 100%;
      height: auto;
    }
    h2.design-interior--home-tilte{
        font-size: 15vw;
        text-align: left;
        line-height: 250px;
    }
    .alert-success {
        color: #918671!important;
        background-color: transparent!important;
        border-color: #918671!important;
    }
    button.send--btn.btn {
        border: 1px solid #918671;
        border-radius: 0;
        background: transparent;
        width: 100%;
        color: #a4b4ac;
    }
    button.send--btn.btn:hover {
        background: #a4b4ac;
        color: #fff;
    }
    form.contact-form input, textarea {
        margin-bottom: 14px;
        border-radius: 0;
    }
    form.contact-form {
        padding: 100px;
    }
    .col-md-12.col-sm-12.no-padding.bg--white.categorias-title--container {
        padding-top: 107px !important;
    }
    .row.new-height{overflow:hidden;}
    .container {
      width: 100%;
    }
    .no-padding{
      padding: 0!important;
    }
    .bg--black{
      background:black;
      display: grid;
      place-items: center;
    }
    .bg--black h2{
      color: #fff;
      text-align: center; 
      font-size: 1.3vw;
      padding: 30px 60px;
      font-family: Helvetica;
      letter-spacing: .075em;
    }

    .bg--black h2:hover{
      text-decoration: underline solid #918671;
    }

    .bg--white{
      background:#fff;
      display: grid;
      place-items: center;
    }
    .bg--white h2{
      text-align: center;
      padding: 30px;
      font-size: 1rem;
      font-family: Helvetica;
    }
    .img-responsive{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .col-md-3.col-sm-3.no-padding {
        aspect-ratio: 1 / 1;
    }
    nav.navbar.fixed-top.navbar-light.bg-light {
        background: transparent!important;
    }
    #menuToggle
    {
      display: block;
      position: fixed;
      top: 30px;
      left: 50px;
      z-index: 9!important;
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle a
    {
      text-decoration: none;
      color: #232323;
      
      transition: color 0.3s ease;
    }

    #menuToggle a:hover
    {
      text-decoration: underline solid #918671;
    }


    #menuToggle input
    {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      
      cursor: pointer;
      
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
      
      -webkit-touch-callout: none;
    }

    /*
     * Just a quick hamburger
     */
    #menuToggle span
    {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #000;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
      transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }

    /* 
     * Transform all the slices of hamburger
     * into a crossmark.
     */
    #menuToggle input:checked ~ span
    {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
    }

    /*
     * But let's hide the middle one.
     */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
     * Ohyeah and the last one should go the other direction
     */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
      transform: rotate(-45deg) translate(0, -1px);
    }

    /*
     * Make this absolute positioned
     * at the top left of the screen
     */
    #menu
    {
      position: fixed;
      width: 100%;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #fff;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      height: 104%;
      text-align: center;
      text-transform: uppercase;
      padding-bottom: 200%;
    }

    #menu li
    {
      padding: 10px 0;
      font-size: 22px;
      font-weight:bold;
    }

    /*
     * And let's slide it in from the left
     */
    #menuToggle input:checked ~ ul
    {
      transform: none;
    }
    .social{
      font-size: 8vw!important;
      text-decoration: none!important;
    }
    /* Gray Scale */
    .hover08 img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
    }
    .hover08:hover img {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }
    .hover09 img {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }
    .hover09:hover img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
    }
    .social a{
      text-decoration: none;
    }
    .social a:hover{
      color: #918671!important;
    }
    #menu img {
        height: 80px;
        margin-top: 280px;
        margin-left: 2px;
    }
    .logo-center img {
        max-height: 120px;
    }
    .logo-center {
        position: fixed;
        background: #fff;
        margin: 0 auto;
        margin-left: 44%;
        padding: 10px;
        margin-left: -83px;
        left: 50%;
        z-index: 9999;
    }
    .hide{
      display: none;
    }
    .social a {     
       display: inline-block;     
       position: relative;    
       z-index: 1;
    }
    .contact-section img {
        max-height: 150px !important;
    }
    .wp--button {
        position: fixed;
        z-index: 9;
        right: 10px;
        writing-mode: tb;
        -webkit-writing-mode: vertical-lr;
        top: 150px;
    }

    .wp--button a{
      color: #918671;
      border-left: 1px solid #fff;
      font-weight: bold;
      cursor: pointer;
    }
    .wp--button a:hover{
      color: #918671;
      text-decoration: underline solid #fff;
    }
    .menu--nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        column-gap: 36px;
        margin-top: 17%;
    }
    .image-cover--mask{
      margin-top:100px;
      color: transparent!important;
      background: url(imgs/image-1.jpg) no-repeat center center;
      background-size: cover;
      -webkit-background-clip: text;
      background-clip: text;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .parallax {
      /* The image used */
      background-image: url("imgs/image-12.png");

      /* Set a specific height */
      min-height: 500px; 

      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .parallax-interiores {
      /* The image used */
      background-image: url("imgs/image-11.png");

      /* Set a specific height */
      min-height: 500px; 

      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    
    /* Estilos gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Helvetica;
}
.project-container{
    display: flex;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;  
}
.left-pane h1{
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1.2;
    color: #ccc;
}
.left-pane {
    width: 50%;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.right-pane {
    width: 50%;
    overflow-y: scroll;
    background-color: #ffffff;
    padding: 0;
}
.right-pane img {
    width: 100%;
    margin-bottom: 0;
}
.footer--info {
    display: block;
}
.footer--info svg{
    height:22px;
}
.footer--info-item {
    display: flex;
    margin-bottom:10px!important;
    align-items: center;
}
.footer--info-item span {
    font-size: 2vh;
}
.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin: 0 auto;
    width: 50%;
    bottom: 20px;
}
.arrow {
  animation: blink 1.2s infinite alternate;
}

@keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0.2; }
}
/* Estilo do Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: background-color 0.3s, padding 0.3s;
}

header.transparent {
    background: transparent;
}

header.white {
    background: white;
    padding: 10px 15px; /* Reduzindo o padding ao rolar */
}

.logo img {
    transition: max-height 0.3s ease;
}
#logo-large img{
    max-height:110px;
    z-index:999999;
}
#logo-small img{
    max-height:55px;
}
#logo-large {
    max-height:100px;
    display: block; /* Exibido inicialmente */
}

#logo-small {
    display: none; /* Escondido inicialmente */
}

/* Menu Sandwich */
.menu-sandwich {
    position: absolute;
    left: 15px;
    top: 22px;
    cursor: pointer;
}

.menu-sandwich .bar {
    width: 35px;
    height: 3px;
    margin: 5px 0;
    background-color: #a3b4ac;
}
/* Banner */
.banner {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}


/* Camada branca */
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
/* Título como máscara */
.title-container h1 {
    font-size:140px; /* Ajuste conforme necessário */
    font-weight: bold;
    text-transform: uppercase;
    color: transparent; /* Torna o texto invisível */
    background: url('https://elsavasquesarq.pt/imgs/image-12.png') no-repeat center center;
    background-size: cover;
    -webkit-background-clip: text; /* Clipa a imagem no texto */
    background-clip: text;
    background-attachment: fixed;
}

/* Conteúdo adicional */
.content {
    height: 100vh; /* Garante que haja rolagem */
    padding: 20px;
    background:#918671;
    color:#fff;
}
/* Transições para o logo */
header.white #logo-large {
    display: none; /* Esconde o logo grande */
}

header.white #logo-small {
    display: block; /* Exibe o logo pequeno */
}

header.white .logo img {
    max-height: 40px; /* Logo reduzido */
}

/* Estilo do menu de tela cheia */
.full-screen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    color: black;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 20;
    transform: translateY(-100%); /* Esconde o menu fora da tela */
    transition: transform 0.3s ease-in-out; /* Animação de abertura */
}
/* Links do menu */
.full-screen-menu ul {
    list-style: none;
    padding: 0;
    text-align: center;
    visibility: hidden;
    overflow: scroll;
    margin-top:30px;
}
.full-screen-menu.active ul{
    visibility: visible;
}
.full-screen-menu ul a {
    text-decoration: none;
    color: black;
    margin: 15px 0;
    font-size: 2rem;
    font-weight: bold;
}
.full-screen-menu.active ul a li h3:hover {
    color:#918672!important;
}
/* Ativar o menu */
.full-screen-menu.active {
    transform: translateY(0); /* Mostra o menu */
}

/* Estilo do botão de fechar (X) */
.close-btn {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 2.5rem;
    color: #a3b4ac;
    cursor: pointer;
    z-index: 30;
    width: 35px;
    height: 3px;
}
header#header h3 {
    text-align: left;
    font-size: 4rem;
    color: #c8c8c8;
}

.left-pane p{
    color: #666;
    font-weight: 100;
}
.contact-section{
    display: flex; 
    align-items: center; 
    justify-content: center; 
    column-gap: 30px;
    padding: 0 50px !important;
}
.hide-on--desktop{
    display:none;
}
.hide-on--mobile{
    display: grid;
    place-items: center;
}
.img-responsive{display:block;max-width:100%;height:auto; aspect-ratio:4/4}
.evdeveloper.mobile{display:none;}