.elementor-2644 .elementor-element.elementor-element-ab0591e{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-2644 .elementor-element.elementor-element-ab0591e{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-ab0591e */<style>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.slider{
  position:relative;
  width:100%;
  height:700px;
  overflow:hidden;
  font-family:'Sora',sans-serif;
}

.slide{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;

  transition:opacity .8s ease;
}

.slide.active{
  opacity:1;
  visibility:visible;
}

.slide-bg{
  position:absolute;
  inset:0;
}

.slide-content{
  position:relative;
  z-index:2;

  width:100%;
  max-width:1000px;

  text-align:center;

  padding:0 2rem;

  transform:translateY(60px);
}

.slide-eyebrow{
  font-size:.82rem;
  font-weight:500;

  letter-spacing:.15em;
  text-transform:uppercase;

  color:rgba(0,0,0,.55);

  margin-bottom:.8rem;
}

.slide-title{
  font-size:clamp(2.8rem,6vw,5.5rem);
  line-height:1;

  color:#0a0a0a;

  margin-bottom:.7rem;
}

.slide-title span{
  font-weight:400;
}

.slide-title strong{
  font-weight:800;
}

.slide-subtitle{
  font-size:1.05rem;
  color:rgba(0,0,0,.65);

  margin-bottom:2rem;
}

.slide-buttons{
  display:flex;
  justify-content:center;
  gap:1rem;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:.9rem 1.8rem;

  border-radius:999px;

  background:#fff;
  color:#000;

  text-decoration:none;

  font-size:.95rem;
  font-weight:600;

  transition:.25s ease;
}

.btn:hover{
  background:#000;
  color:#fff;
}

@media(max-width:640px){

  .slider{
    height:760px;
  }

  .slide-content{
    transform:translateY(90px);
    padding:0 1.5rem;
  }

  .slide-title{
    font-size:clamp(2rem,11vw,3.2rem);
  }

  .slide-subtitle{
    font-size:1rem;
  }

  .slide-buttons{
    flex-direction:column;
    align-items:center;
  }

  .btn{
    width:100%;
    max-width:240px;
  }

}

</style>

<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap" rel="stylesheet">

<div class="slider">

  <!-- SLIDE 1 -->
  <div class="slide active">

    <div class="slide-bg" style="background:url('https://teste.lojaladymaria.com.br/wp-content/uploads/2026/05/FOTO-BG-LITO-X1-1.png') center center / cover no-repeat;"></div>

    <div class="slide-content">

      <h1 class="slide-title">
        <span>DJI</span> <strong>LITO X1</strong>
      </h1>

      <p class="slide-subtitle">
        Tecnologia de drone avançado, feito para voar sem esforço.
      </p>

      <div class="slide-buttons">
        <a href="https://teste.lojaladymaria.com.br/litox1/" class="btn">Saiba mais ›</a>
        <a href="https://teste.lojaladymaria.com.br/loja/?wpf_filter_cat_1=63&wpf_fbv=1" class="btn">Comprar já ›</a>
      </div>

    </div>
  </div>

  <!-- SLIDE 2 -->
  <div class="slide">

    <div class="slide-bg" style="background:url('https://teste.lojaladymaria.com.br/wp-content/uploads/2026/05/AVATA-360-1.png') center center / cover no-repeat;"></div>

    <div class="slide-content">

      <p class="slide-eyebrow">
        Drone 360º de ponta
      </p>

      <h1 class="slide-title">
        <span>DJI</span> <strong>AVATA 360</strong>
      </h1>

      <p class="slide-subtitle">
        Acima de tudo, veja sem limites
      </p>

      <div class="slide-buttons">
        <a href="https://teste.lojaladymaria.com.br/avata-360/" class="btn">Saiba mais ›</a>
        <a href="https://teste.lojaladymaria.com.br/?s=dji+avata&e_search_props=0f3824f-108&orderby=price-desc" class="btn">Comprar já ›</a>
      </div>

    </div>
  </div>

  <!-- SLIDE 3 -->
  <div class="slide">

    <div class="slide-bg" style="background:url('https://teste.lojaladymaria.com.br/wp-content/uploads/2026/05/7583ea76f1c883417cd79e1b37865cc6@origin-scaled.jpg') center center / cover no-repeat;"></div>

    <div class="slide-content">

      <p class="slide-eyebrow">
        Mini microfone sem fio
      </p>

      <h1 class="slide-title">
        <span>DJI</span> <strong>MIC MINI 2</strong>
      </h1>

      <p class="slide-subtitle">
        Mais do que som
      </p>

      <div class="slide-buttons">
        <a href="https://teste.lojaladymaria.com.br/mic-mini-2/" class="btn">Saiba mais ›</a>
        <a href="#" class="btn">Comprar já ›</a>
      </div>

    </div>
  </div>

  <!-- SLIDE 4 -->
  <div class="slide">

    <div class="slide-bg" style="background:url('https://teste.lojaladymaria.com.br/wp-content/uploads/2026/05/osmo-pocket-4-ft-1.png') center center / cover no-repeat;"></div>

    <div class="slide-content">

      <p class="slide-eyebrow">
        Câmera com estabilizador de bolso com CMOS de 1
      </p>

      <h1 class="slide-title">
        <span>OSMO</span> <strong>POCKET 4</strong>
      </h1>

      <p class="slide-subtitle">
        Meu Mundo, Minha Pocket
      </p>

      <div class="slide-buttons">
        <a href="https://teste.lojaladymaria.com.br/osmo-pocket-4/" class="btn">Saiba mais ›</a>
        <a href="https://teste.lojaladymaria.com.br/loja/?wpf_filter_cat_1=72&wpf_fbv=1" class="btn">Comprar já ›</a>
      </div>

    </div>
  </div>

  <!-- SLIDE 5 -->
  <div class="slide">

    <div class="slide-bg" style="background:url('https://teste.lojaladymaria.com.br/wp-content/uploads/2026/05/osmo-action-6-ft-1.png') center center / cover no-repeat;"></div>

    <div class="slide-content">

      <p class="slide-eyebrow">
        Câmera de ação multifuncional de última geração
      </p>

      <h1 class="slide-title">
        <span>OSMO</span> <strong>ACTION 6</strong>
      </h1>

      <p class="slide-subtitle">
        Enquadre e domine a cena
      </p>

      <div class="slide-buttons">
        <a href="https://teste.lojaladymaria.com.br/osmo-action-6/" class="btn">Saiba mais ›</a>
        <a href="https://teste.lojaladymaria.com.br/loja/?wpf_filter_cat_1=73&wpf_fbv=1" class="btn">Comprar já ›</a>
      </div>

    </div>
  </div>

  <!-- SLIDE 6 -->
  <div class="slide">

    <div class="slide-bg" style="background:url('https://teste.lojaladymaria.com.br/wp-content/uploads/2026/05/mini-5-pro-ft.png') center center / cover no-repeat;"></div>

    <div class="slide-content">

      <p class="slide-eyebrow">
        Minidrone com câmera com sensor CMOS de 1 polegada e design tudo-em-um
      </p>

      <h1 class="slide-title">
        <span>DJI</span> <strong>MINI 5 PRO</strong>
      </h1>

      <p class="slide-subtitle">
        Tudo de Pro em Mini
      </p>

      <div class="slide-buttons">
        <a href="https://teste.lojaladymaria.com.br/mini-5-pro/" class="btn">Saiba mais ›</a>
        <a href="https://teste.lojaladymaria.com.br/?s=Drone%20Mini%205%20pro&e_search_props=0f3824f-108&wpf_filter_cat_1=52&wpf_fbv=1" class="btn">Comprar já ›</a>
      </div>

    </div>
  </div>

</div>

<script>

const slides = document.querySelectorAll('.slide');

let current = 0;

function showSlide(index){

  slides.forEach(slide=>{
    slide.classList.remove('active');
  });

  slides[index].classList.add('active');

}

function nextSlide(){

  current++;

  if(current >= slides.length){
    current = 0;
  }

  showSlide(current);

}

setInterval(nextSlide,6000);

</script>/* End custom CSS */