@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Marko+One&display=swap');
.lexend{
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.bg{
    background-color: #EDE3CC;
}
.bg-pink{
    background-color: #EC268F;
}
.color-gold{
  color: #EDE3CC;
}
.color-pink{
    color: #EC268F;
}


@media screen and (max-width: 1024px) {
.bg-1{
    position: relative;
    background-image: url(../img/bg-1-1.webp);
    background-color: #EDE3CC;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}
  .card-overlay img {
    display: none;
  }
.bg-2{    
    background-image: url(../img/bg-2.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
header .col-md-8 {
  min-height: 100px;
}
}
@media screen and (min-width: 1025px) {
.bg-1{
    position: relative;
    background-image: url(../img/bg-1.webp);
    background-color: #EDE3CC;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-2{    
    background-image: url(../img/bg-2.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.mt-n5 {
  margin-top: -3.5rem; /* equivalente a mt-5, mas negativo */
}
.card-overlay {
  position: relative;
  display: inline-block;
}

.card-overlay img {
  width: 100%;
  display: block;
  border-radius: 0.5rem;
}

.card-overlay h5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5); /* fundo escuro com transparência */
  border-radius: 0.5rem;
  text-align: center;
}
  .depoimentos{

    min-height: 300px;
}
.c-1{
  min-height: 250px;
}
}

/*Botão Reflexo*/
.b-1 {
    width:100%;
      line-height:40px; 
    border-radius:5px; 
    overflow:hidden;
    position:relative;
    background: rgb(240,92,84);
    background: linear-gradient(50deg, #F05C36 0%, #F0574D 50%, #F05C36 100%);
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    border-color: orangered;
    max-width: 400px;  
    color:orangered;
    font-size:1.2em;
    -webkit-box-shadow: 0px 0px 8px 2px #00000023;
    -moz-box-shadow: 0px 0px 8px 2px #00000023;
    box-shadow: 0px 0px 8px 2px #00000023;
  }
  .b-1:hover {
      background: rgb(226,141,81);
      background: linear-gradient(50deg, #F0574D 0%, #F05C36 44%, #F0574D 100%);
      border-color: #fff;
      color:#fff;
      box-shadow: #00000063;
      font-size:1.3em;
      -xpedu-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
  }
  .b-1 span {
    z-index: 20;
    color:#ffffff;
  }
  .b-1:after {
    background: #f3d4b7b0;
    content: "";
    height: 155px;
    left: -85px;
    opacity: .1;
    position: absolute;
    top: -60px;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 70px;
    z-index:1;
  }
  
  .b-1:hover:after {
    left: 130%;
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    opacity: .1;
  }

  /*Botão Reflexo*/
.b-2 {
    width:100%;
      line-height:40px; 
    border-radius:5px; 
    overflow:hidden;
    position:relative;
    background: rgb(127, 255, 0);
    background: linear-gradient(50deg, rgb(127, 255, 0) 0%, rgb(114, 216, 11) 50%, rgb(127, 255, 0) 100%);
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    border-color: orangered;
    max-width: 400px;  
    color:orangered;
    font-size:1.2em;
    -webkit-box-shadow: 0px 0px 8px 2px #00000023;
    -moz-box-shadow: 0px 0px 8px 2px #00000023;
    box-shadow: 0px 0px 8px 2px #00000023;
  }
  .b-2:hover {
      background: rgb(226,141,81);
      background: linear-gradient(50deg, rgb(114, 216, 11) 0%, rgb(127, 255, 0) 44%, rgb(114, 216, 11) 100%);
      border-color: #fff;
      color:#fff;
      box-shadow: #00000063;
      font-size:1.3em;
      -xpedu-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
  }
  .b-2 span {
    z-index: 20;
    color:#ffffff;
  }
  .b-2:after {
    background: #f3d4b7b0;
    content: "";
    height: 155px;
    left: -85px;
    opacity: .1;
    position: absolute;
    top: -60px;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 70px;
    z-index:1;
  }
  
  .b-2:hover:after {
    left: 130%;
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    opacity: .1;
  }
  .btn-laranja{
    background: chartreuse;
    color: orangered;
    border-radius: 7px;
    border-color: orangered;
}
  .btn-laranja:hover{
    background: orangered;
    color: white;
}
.b-1, .b-2 {
  will-change: transform;
  transition: transform 0.3s ease;
}

#exitPopup {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    display: block; /* já deixa visível mas invisível visualmente */
}

#exitPopup.mostrar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.popup-saida {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: scale(0.95);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

.popup-saida.mostrar {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}