@import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
@import url('https://fonts.cdnfonts.com/css/poppins');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 200px;
    height: 250px;
    top: 10%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 20s linear infinite;
    z-index: 2;
}
@keyframes autoRun{
    from{
        transform: perspective(3000px) rotateX(-10deg) rotateY(0deg);
    }to{
        transform: perspective(3000px) rotateX(-10deg) rotateY(360deg);
    }
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(550px);
}
.banner .slider .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner .content{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 100vw);
  height: max-content;
  padding-bottom: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
.banner .content h1{
  font-family: 'ICA Rubrik';
  font-size: 16em;
  line-height: 1em;
  color: #25283B;
  position: relative;
}
.banner .content h1::after{
  position: absolute;
  inset: 0 0 0 0;
  content: attr(data-content);
  z-index: 2;
  -webkit-text-stroke: 2px #d2d2d2;
  color: transparent;
}
.banner .content .author{
  font-family: Poppins;
  text-align: right;
  max-width: 200px;
}
.banner .content h2{
  font-size: 3em;
}
.banner .content .model{
  background-image: url(images/Logo3.png);
  width: 100%;
  height: 85%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-size: auto 130%;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 1;
}
@media screen and (max-width: 1023px) {
    .banner .slider{
        width: 160px;
        height: 200px;
        left: calc(50% - 80px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(300px);
    }
    .banner .content h1{
        text-align: end;
        width: 100%;
        text-shadow: 0 10px 20px #000;
        font-size: 7em;
    }
    .banner .content .author{
        color: #fff;
        padding: 20px;
        text-shadow: 0 10px 20px #000;
        z-index: 2;
        max-width: unset;
        width: 100%;
        text-align: center;
        padding: 0 30px;
    }
}
@media screen and (max-width: 767px) {
    .banner .slider{
        width: 100px;
        height: 150px;
        left: calc(50% - 50px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(180px);
    }
    .banner .content h1{
        font-size: 5em;
    }

}
/*Botão Pulsa*/

.box-pulse { 
 
    width:100%; 
    width:200px; 
    margin:0 auto; padding:0 10px;
    text-align: center;
}
.box-pulse a {  

  text-decoration:none;
  display: inline-block;
  font-size: 1.1em;
  font-family:Verdana, Geneva, sans-serif;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.botao-pulse1{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #200075;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.5s;
  outline: none;
  margin-top: 20px;

  

}
.botao-pulse {

  padding: 20px 30px;
  color: #fff;
  background-color: #200075;
  border-radius:3px; 
  -webkit-animation: pulse 1s ease infinite;
  -moz-animation: pulse 1s ease infinite;
  -ms-animation: pulse 1s ease infinite;
  -o-animation: pulse 1s ease infinite;
  animation: pulse 1s ease infinite;
}
.botao-pulse:hover {
  color: #fff;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }
  25% {
    -moz-transform: scale(1.1);
  }
  50% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-ms-keyframes pulse {
  0% {
    -ms-transform: scale(1);
  }
  25% {
    -ms-transform: scale(1.1);
  }
  50% {
    -ms-transform: scale(1);
  }
  100% {
    -ms-transform: scale(1);
  }
}
@-o-keyframes pulse {
  
  0% { -o-transform: scale(1); }
  25% { -o-transform: scale(1.1); }
  50% { -o-transform: scale(1); }
  100% { -o-transform: scale(1); } 
}
@keyframes pulse { 
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
/*Botão Pulsa*/

.row{
  width: 100%;
  padding: 0px 80px;
}
.navbar{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
  position: relative;
  z-index: 1;
}

.navbar ul{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.navbar ul li{
  list-style: none;
}
.navbar ul li a{
  padding: 10px 18px;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 16px;
  color: #000;
  text-decoration: none;
}
/* Imagens responsivas */
.card img {
  max-width: 100%;
  height: auto;
}
.whatsapp-icon {
  position: fixed; /* Fixa o elemento na tela */
  bottom: 20px; /* 20 pixels da parte inferior da tela */
  right: 20px; /* 20 pixels da lateral direita da tela */
  z-index: 1000; /* Garante que o ícone fique acima de outros elementos */
}

.whatsapp-icon img {
  width: 70px; /* Tamanho do ícone do WhatsApp */
  height: auto; /* Mantém a proporção da imagem */
  transition: transform 0.3s; /* Animação para efeito hover */
}

.whatsapp-icon:hover img {
  transform: scale(1.1); /* Aumenta o ícone quando o mouse passa por cima */
}
.botao-pulse2{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #200075;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.5s;
  outline: none;
  margin-top: 20px;
  bottom: 20px; /* 20 pixels da parte inferior da tela */
  position: fixed; /* Fixa o elemento na tela */
  z-index: 1000; /* Garante que o ícone fique acima de outros elementos */

}

.whatsapp-icon2{
  position: fixed; /* Fixa o elemento na tela */
  bottom: 20px; /* 20 pixels da parte inferior da tela */
  z-index: 1000; /* Garante que o ícone fique acima de outros elementos */
  display: inline-block;
  padding: 10px 20px;
  background-color: #00751d;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.5s;
  outline: none;
  margin-top: 20px;
  -webkit-animation: pulse 1s ease infinite;
  -moz-animation: pulse 1s ease infinite;
  -ms-animation: pulse 1s ease infinite;
  -o-animation: pulse 1s ease infinite;
  animation: pulse 1s ease infinite;
}

.whatsapp-icon2 img {
  width: 70px; /* Tamanho do ícone do WhatsApp */
  height: auto; /* Mantém a proporção da imagem */
  transition: transform 0.3s; /* Animação para efeito hover */
}

.whatsapp-icon2:hover img {
  transform: scale(1.1); /* Aumenta o ícone quando o mouse passa por cima */
}