/* =========== Menu Mobile 768px =========== */

@media (min-width: 769px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
  
  .wp-block-navigation__responsive-container:not(.has-modal-open):not(.is-menu-open) {
    display: block;
  }
}

@media (max-width: 769px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  
  .wp-block-navigation__responsive-container:not(.has-modal-open):not(.is-menu-open):not(.hidden-by-default) {
    display: none;
  }

}

/* =========== Heading Mobile =========== */
@media only screen and (max-width: 769px){
    h1{
        font-size: 32px!important;
    }
    h2{
      font-size: 28px!important;
    }
}

  /* =========== Scroll Effect =========== */

::-webkit-scrollbar {
  width: 10px; 
}

::-webkit-scrollbar-track {
  background: var(--wp--preset--color--background-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--transparent-primary);
  border-radius: 5px;
  border: 2px solid var(--wp--preset--color--background-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wp--preset--color--transparent-primary);
  opacity: 0.8;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--transparent-primary) var(--wp--preset--color--background-primary);
  scroll-behavior: smooth;
}


:root{
      /*Marquee */
      --gap: 1rem;
      --size: clamp(10rem, 1rem + 40vmin, 30rem);
      --gap: 50px;
      --duration: 60s;
      --scroll-start: 0;
      --scroll-end: calc(-100% - var(--gap));

}
#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--wp--preset--color--background-primary);
  color: var(--wp--preset--color--text-secondary);
  border: 1px solid var(--wp--preset--color--text-primary);;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 769px){
  #scrollTopBtn{
    display: none;
  }
}
.marquee, .marquee--reverse{
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    mask-image: linear-gradient(
      var(--mask-direction, to right),
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
  }

  .marquee-text{
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    
  }
  
  .marquee__group{
    /* flex-shrink: 0; */
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x var(--duration) linear infinite;
  }
 

  @media (prefers-reduced-motion: reduce) {
    .marquee__group{
      animation-play-state: paused;
    }
  }
  
  .marquee--vertical {
    --mask-direction: to bottom;
  }
  
  .marquee--vertical,
  .marquee--vertical .marquee__group {
    flex-direction: column;
  }
  
  .marquee--vertical .marquee__group {
    animation-name: scroll-y;
  }
  
  .marquee--reverse .marquee__group {
    animation-direction: reverse;
    /* animation-delay: -3s; */
  }
  
  @keyframes scroll-x {
    from {
      transform: translateX(var(--scroll-start));
    }
    to {
      transform: translateX(var(--scroll-end));
    }
  }
  
  @keyframes scroll-y {
    from {
      transform: translateY(var(--scroll-start));
    }
    to {
      transform: translateY(var(--scroll-end));
    }
  }
  
  .marquee--img-box img{
    border: 1px solid var(--wp--preset--color--text-terciary);
    background-color: var(--wp--preset--color--transparent);
    padding: 6px;
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 16px;
  }
  .marquee-company-item{
    min-width: 400px!important;
  }
 

  .hero-bottom-content-wrapper{
    position: relative;
  }
  
/* =========== Sticky Effect =========== */
.sticky-wrapper {
  position: relative; /* Mantém o wrapper como referência para o sticky */
  display: flex; /* Garante que as colunas fiquem lado a lado */
}


/* =========== Scrolls Effects =========== */

.appear-effect{
  filter: blur(50px);
  /* transform: translateY(-50%); */
  /* scale: 0; */
  transition: 0.8s all ease;
}
.appear-effect-show{
  /* scale: 1; */
  filter: blur(0);
  /* transform: translateY(0%); */
  transition: 0.8s all ease;

}
.item-slide-left{
  opacity: 0;
  transition: 1.5s all ease-in;
}
.item-slide-left-effect{
  opacity: 1;
  transition: 1.5s all ease-in;
}
.item-slide-up{
  opacity: 0;
  transform: translateY(50%);
  transition: 0.8s all ease-in;
}
.item-slide-up-effect{
  opacity: 1;
  transform: translateY(0%);
  transition: 0.8s all ease-in;
}
.item-slide-down{
  opacity: 0;
  transform: translateY(-50%);
  transition: 0.8s all ease-in;
}
.item-slide-down-effect{
  opacity: 1;
  transform: translateY(0%);
  transition: 0.8s all ease-in;
}
.slide-up-expand{
  opacity: 0.8;
  transform: translateY(150px);
  scale: 0.8;
  transition: 1s all ease;
}
.slide-up-expand-effect{
  opacity: 1;
  transform: translateY(0px);
  scale: 1;
}
.left-blur-slide{
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s;
}
.left-blur-slide-effect{
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  transition: all 1s;
}

/* =========== Hero Section =========== */


.hero-section .wp-block-cover__image-background {
  animation: heroZoomEffect 5s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes heroZoomEffect {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

/* =========== Portfolio Card Style =========== */

.portfolio-card{
  transition: 0.8s all ease-in;
  overflow: hidden;

}
.portfolio-tag{
  opacity: 0;
  transform: translateY(-150px);
}
.portfolio-card:hover img{
  transition: 0.8s all ease-in;
  scale: 1.2;

}
.portfolio-card::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 2;
  /* backdrop-filter: brightness(50%); */
  /* background-size: 110% 110%!important; */
  /* cursor: 'View'; */
  opacity: 0;
}
.portfolio-card:hover{
  backdrop-filter: brightness(50%);

}
.portfolio-card:hover .portfolio-tag{
  transition: 0.5s all ease-in;
  opacity: 1;
  transform: translateY(0px);

}

.portfolio-card:hover {
  background-size: 120% 120%; /* Aumenta o tamanho da imagem de fundo */
}


/* =========== Card Style =========== */


.theme-card{
  backdrop-filter: blur(0px);
  height: 100%;
}

.arrow-icon{
  opacity: 0;
  transition: 0.5s all ease-in;

}

.theme-card:hover .arrow-icon
{
  opacity: 1;
 
}

/* =========== Sticky Effects =========== */




.sticky-item-01{
  z-index: 1;
}
.sticky-item-02{
  z-index: 2;
}
.sticky-item-03{
  z-index: 3;
}

/*============== Showcase Section ==============*/


.marquee-showcase-wrapper{
  overflow: hidden;
}

@media only screen and (max-width: 769px){
  .marquee-showcase-wrapper{
    .marquee__group{
      min-width: auto;
     }
  }
  .marquee--img-box {
    width: 40vw;
  }

  .header-images-column{
    display: none;
  }
}

/*============== FAQ Section ==============*/
.faq-container {
  width: 100%;
  max-width: 800px; 
  margin: 0 auto;
  padding: 20px;
}

.faq-question {
  border: 1px solid  var(--wp--preset--color--text-primary);
  border-radius: 10px;
  background-color: transparent;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 100%;
}

.faq-question summary {
  padding: 20px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; 
}

.faq-question summary::after {
  content: "+"; 
  font-size: 40px;
  transition: transform 0.3s ease;
}

.faq-question[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  font-size: 14px;
  line-height: 1.6;
  padding: 20px 24px;
  margin-top: 0;
  border-radius: 0 0 10px 10px; 
}

/* Efeito de hover no <details> */
.faq-question:hover {
  background-color:  var(--wp--preset--color--text-secondary); 
  color:  var(--wp--preset--color--background-primary); 
}

.faq-question[open] {
  background-color: var(--wp--preset--color--text-secondary);
}

/*============== FORM Section ==============*/
.footer-newsletter-form {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 325px;
  max-width: 100%;
  border: 1px solid var(--wp--preset--color--text-terciary);
  border-radius: 10px;
  padding: 6px;
  gap: 10px;
}

.footer-newsletter-form input {
  padding: 10px 10px 10px 12px;
  background: transparent;
  
  border: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 190px;
  max-width: 100%;
  height: auto;
}

.footer-newsletter-form button {
  border: 3px solid var(--wp--preset--color--transparent-200);
  background-color: var(--wp--preset--color--text-secondary);
  color: var(--wp--preset--color--background-primary);
  border-radius: 10px;
  box-shadow: var(--wp--preset--color--text-secondary) 0px 8px 40px 0px, var(--wp--preset--color--transparent-200) 0px 0px 10px 1px inset;
  opacity: 1;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.footer-newsletter-form button:hover {
  opacity: 0.9;
}
.contact-form {
  border: 1px solid var(--wp--preset--color--text-primary);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: var(--wp--preset--color--background-primary);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  width: 100%;
  max-width: 100%;
  margin: auto;

  label {
    color: var(--wp--preset--color--text-primary);
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.form-wrapper{
  border: 1px solid var(--wp--preset--color--text-primary);
  border-radius: 20px;

  align-items: flex-start;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 30px;
    height: min-content;
    justify-content: flex-start;
    overflow: hidden;
    padding: 40px 40px 30px;
    position: relative;
    max-width: 100%;
}
.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;

}



.form-input, .form-select, .form-textarea {
  background-color: transparent;
  opacity: 90%;

  border: 1px solid var(--wp--preset--color--text-primary);
  color: var(--wp--preset--color--text-primary);
  padding: 18px 10px;
  border-radius: 5px;
  max-width: 100%;
}

.form-input::placeholder, .form-select, .form-textarea::placeholder {
  color:var(--wp--preset--color--text-primary);
}

.form-select option {
  background-color: var(--wp--preset--color--background-primary);
  color:var(--wp--preset--color--text-primary);
  padding: 18px 10px; 
  font-size: 14px; 
}

/* Estiliza a opção desativada (placeholder) */
.form-select option:disabled {
  color: rgba(255, 255, 255, 0.2);
  
}

.form-button {
  border: 3px solid var(--wp--preset--color--transparent-200);
  background-color: var(--wp--preset--color--text-secondary);
  color: var(--wp--preset--color--background-primary);
  border-radius: 10px;
  box-shadow: var(--wp--preset--color--text-secondary) 0px 4px 20px 0px, var(--wp--preset--color--transparent-200) 0px 0px 10px 1px inset;
  opacity: 1;
  padding: 18px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
}