* {
  font-family: "Exo 2", sans-serif;
}

body {
  background-image: linear-gradient(#44444427 1px, transparent 1px),
    linear-gradient(90deg, #44444421 1px, transparent 1px),
    url("../img/fundo.webp");
  background-color: black;
  background-position: 0 0, 0 0, center -190px;
  background-repeat: repeat, repeat, no-repeat;
  background-size: 20px 20px, 20px 20px, 100%;
  color: #e0e0e0;
  zoom: 1.0;
}

.h2,
h2 {
  font-size: calc(1.325rem + 0.9vw);
  text-align: center;
}

.container {
  width: 100%;
}

a {
  color: #e0e0e0;
}

img {
  border-radius: 20px;
}

.main-header {
  background-image: url("../img/over.webp");
  background-position: center;
  background-size: 100%;
  display: flex;
  border-radius: 20px;
  margin-top: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #333;
}

.logo {
  font-weight: bold;
  font-size: 1.8rem;
  width: 50%;
}

.container-center {
  max-width: 1200px;
  margin: 0 auto;
  zoom: 1.8;
}

a.btn {
  background: linear-gradient(
    95.27deg,
    #b9050550 -0.85%,
    #e60909 39.07%,
    #ff00003f 89.32%
  );
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

a.btn .bi {
  margin-left: 8px;
  font-size: 1.1em;
}

.benefits {
  background: #0e0e0e00;
  padding: 50px 0;
}

.benefits .item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding: 15px;
}

.benefits img {
  max-width: 200px;
  margin-bottom: 20px;
}

.titulos {
  background-image: radial-gradient(
    110.706% 204.243% at 48.7641% 107.874%,
    rgb(255, 255, 255) 14.7137%,
    rgba(255, 255, 255, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.benefits h1 {
  background-image: radial-gradient(
    110.706% 204.243% at 48.7641% 107.874%,
    rgb(255, 255, 255) 14.7137%,
    rgba(255, 255, 255, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.sociedade-hacker {
  background-image: radial-gradient(
    110.706% 204.243% at 48.7641% 107.874%,
    rgba(255, 0, 0, 0.432) 14.7137%,
    rgba(255, 255, 255, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.sistem {
  font-size: 1.1rem;
}

.benefits h2 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 20px;
  color: #ccc;
  background-image: radial-gradient(
    110.706% 204.243% at 48.7641% 107.874%,
    rgb(255, 255, 255) 14.7137%,
    rgba(255, 255, 255, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 40px 0;
  border-radius: 20px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px;
}

.how-it-works {
  padding: 50px 0;
  text-align: center;
}

.how-it-works h2 {
  margin-bottom: 40px;
}

.step {
  width: 100%;
  max-width: 300px;
  margin: 20px auto;
  background-image: url(https://projects.clickmax.io/d29701b2-e853-444f-a70d-a9e0a9c33fdd/assets/e2fd44e3-33f4-4840-93f3-5d5b3abf6002);
  background-size: 300%;
  background: no-repeat;
  background-position: top;
  padding: 30px;
  border-radius: 20px;
  border: solid 1px rgb(88, 88, 88);
  text-align: left;
}

.gradient-title {
  background-image: radial-gradient(
    110.706% 204.243% at 48.7641% 107.874%,
    rgb(255, 255, 255) 14.7137%,
    rgba(255, 255, 255, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.how-it-works i {
  margin-right: 8px;
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 50px 0;
  border: solid 1px rgb(88, 88, 88);
  border-radius: 20px;
  box-shadow: 0px 0px 152px 51px red;
}

.carousel .slides {
  display: flex;
  width: 200%;
  animation: slide 20s linear infinite;
}

.carousel .slide {
  flex: 0 0 auto;
  width: 10%;
}

.carousel .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 20px;
  border: solid 1px rgb(88, 88, 88);
  border-radius: 10px;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.carousel:hover .slides {
  animation-play-state: paused;
}

.cta-plans {
  padding: 80px 20px;
  text-align: center;
}

.cta-plans h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  background-image: radial-gradient(
    110.706% 204.243% at 48.7641% 107.874%,
    rgb(255, 255, 255) 14.7137%,
    rgba(255, 255, 255, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.cta-plans p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #ccc;
}

.products {
  background-image: url("../img/blur.webp");
  background-size: 100%;
  background: no-repeat;
  background-position: bottom;
  padding: 50px 0;
  border-radius: 20px;
}

.products h2 {
  text-align: center;
  margin-bottom: 40px;
}

.product-card {
  background-image: url(https://projects.clickmax.io/d29701b2-e853-444f-a70d-a9e0a9c33fdd/assets/e2fd44e3-33f4-4840-93f3-5d5b3abf6002);
  background-size: 300%;
  background: no-repeat;
  background-position: top;
  padding: 20px;
  border-radius: 20px;
  border: solid 1px rgb(88, 88, 88);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  color: #e0e0e0;
}

.product-card img {
  display: block;
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 0.75rem;
  margin: 0 auto 15px;
}

.product-card h5,
.product-card p {
  width: 100%;
  text-align: left;
  margin: 0 0 10px;
}

.product-card .btn {
  background: #ff0000;
  border: none;
  padding: 8px 20px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 30px;
  margin-top: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.product-card .btn .bi {
  margin-left: 8px;
}

.faq {
  padding: 50px 20px;
  background: transparent;
}

.faq .accordion-item {
  background-image: url(https://projects.clickmax.io/d29701b2-e853-444f-a70d-a9e0a9c33fdd/assets/e2fd44e3-33f4-4840-93f3-5d5b3abf6002);
  background-size: 300%;
  background: no-repeat;
  background-position: top;
  border: solid 1px rgb(88, 88, 88);
  border-radius: 20px;
  margin-bottom: 20px;
}

.faq .accordion-button {
  background: transparent;
  color: #e0e0e0;
  padding: 20px;
  font-weight: bold;
  border: none;
  border-radius: 20px;
  box-shadow: none;
}

.faq .accordion-button.collapsed {
  opacity: 0.8;
}

.faq .accordion-button:focus {
  outline: none;
  box-shadow: none;
}

.faq .accordion-button::after {
  filter: invert(1);
}

.faq .accordion-collapse {
  background: transparent;
}

.faq .accordion-body {
  background: transparent;
  color: #ccc;
  padding: 20px;
}

footer {
  padding: 50px;
  background-image: url("../img/blur.webp");
  background-size: 100%;
  background: no-repeat;
  background-position: bottom;
  font-size: 0.85rem;
  color: #666;
  text-align: center;
}

footer .disclaimer {
  max-width: 800px;
  margin: 0 auto 30px;
  color: #777;
  line-height: 1.4;
}

footer .credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  z-index: 1;
  cursor: pointer;
}

footer .credits .left,
footer .credits .right,
footer .credits .center {
  flex: 1 1 200px;
  text-align: center;
  margin: 5px 0;
}

footer .credits img {
  height: 40px;
}

.oferta-outsider {
  text-align: center;
  border-radius: 20px;
  background-color: #f6f3ff00;
  padding: 40px 20px;
  zoom: 1.9;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 20px;
}

.card-oferta {
  background: #fff;
  max-width: 340px;
  flex: 1 1 300px;
  padding: 30px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.card-oferta::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  background: #a288f2;
  opacity: 0.2;
  border-radius: 30px;
  z-index: 0;
}

.livro-img {
  width: 160px;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}

.card-oferta h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  z-index: 1;
  position: relative;
  color: #111;
}

.card-oferta p {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}

.preco {
  font-size: 1rem;
  position: relative;
  z-index: 1;
}

.de {
  display: block;
  color: #aaa;
  margin-bottom: 10px;
}

.gratis {
  font-size: 1.4rem;
  color: #181014;
  font-weight: bold;
}

.promo {
  position: relative;
  padding: 20px;
  background: #000;
  border: 5px dashed transparent;
  border-radius: 8px;
  z-index: 1;
  color: #fff;
}

.promo::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px dashed;
  border-radius: 8px;
  z-index: -1;
  background: linear-gradient(90deg, #888, #ccc, #888);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 5px;
  box-sizing: border-box;
  pointer-events: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 10px;
  border: 1px solid #000000;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #520a0a;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #7c0909 #000000;
}

.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 1rem);
  background-color: transparent;
}

.modal-content {
  border-radius: 10px;
  padding: 0;
  border: 1px solid rgb(78, 78, 78);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background-color: black;
}

.modal-header {
  border-bottom: 1px solid #dee2e6;
  background-color: #000000;
  border-bottom: none;
}

.modal-title {
  font-weight: bold;
  font-size: 1.25rem;
  color: #e0e0e0;
}

.modal-body {
  padding: 1.5rem;
  background-color: black;
  text-align: center;
}

.modal-footer {
  padding: 1rem 1.5rem;
  background-color: #000000;
  border-top: none;
  justify-content: flex-start;
}

.form-control {
  font-size: 1rem;
  padding: 0.75rem;
  border-radius: 6px;
  color: white;
  background-color: black;
  border: 1px solid #555;
  outline: none;
  box-shadow: none;
  margin-bottom: 1rem;
}

.form-control:focus {
  background-color: black;
  color: white;
  border-color: #555;
  outline: none;
  box-shadow: none;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  margin: 0;
}

.form-check-input {
  margin: 0;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff0000;
  --bs-btn-border-color: #000000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
  padding: 12px 24px;
  font-size: 1.25rem;
}

.btn {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  background-color: #ff0000;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.btn:hover {
  color: white;
  background-color: rgb(132, 0, 0);
  border-color: black;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  color: #fff;
  pointer-events: none;
  background-color: #ff0000;
  border-color: #000000;
  opacity: 0.65;
}

.form-check-input:checked {
  background-color: #ff0000;
  border-color: #fd0d0d;
}

.form-check-input:focus {
  border-color: #000000;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
}

.btn-primary:hover {
  background-color: #ff0707 !important;
}

.btn-close {
  display: none !important;
}

.wistia-container {
  border: 4px solid #88888862;
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
}

wistia-player[media-id="6gd00v2ts8"]:not(:defined) {
  background: center / contain no-repeat
    url("https://fast.wistia.com/embed/medias/6gd00v2ts8/swatch");
  display: block;
  filter: blur(5px);
  padding-top: 56.25%;
}

.wistia-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
}

.wistia-wrapper > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hubla {
  color: #d6ff5b;
  background: linear-gradient(93deg, #c30b0b00 33.61%, #386300b6 108.74%);
}

.sociedade-hacker-copy {
  max-width: 100%;
  padding: 2rem;
  border-radius: 20px;
  text-align: left;
  font-size: 2.25rem;
  line-height: 1.8;
  background-color: #4747472b;
  color: #ffffff;
}

.sociedade-hacker-copy h2 {
  text-align: left;
  font-size: 5rem;
  margin-bottom: 1.5rem;
}

.sociedade-hacker-copy strong {
  font-weight: bold;
  color: #98ff65;
  background: linear-gradient(93deg, #c30b0b00 33.61%, #ff000030 108.74%);
}

.sociedade-hacker-copy em {
  font-style: italic;
}

.member-counter {
  position: relative;
  display: inline-block;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #222;
  user-select: none;
}

.member-counter h1 {
  font-size: 1.5rem !important;
  margin: 0;
}

.banner-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 53px 24px 0 24px;
  border-radius: 20px;
  gap: 20px;
  flex-wrap: wrap;
}

.banner {
  border-radius: 15px;
  max-width: 25%;
  height: auto;
  display: block;
}

.banner-text {
  max-width: 50%;
  text-align: left;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5;
}

.video-carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 10;
}

.video-carousel {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.video-card {
  background-image: url("../img/depo.webp");
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  min-width: 300px;
  max-width: 300px;
  color: white;
  flex-shrink: 0;
}

.video-wrapper {
  position: relative;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow: hidden;
}

.video-wrapper wistia-player {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: red;
  color: white;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.8;
  z-index: 12;
}

.left-arrow {
  left: 5px;
}

.right-arrow {
  right: 5px;
}

@media (max-width: 768px) {
  .banner-container {
    flex-direction: column;
    text-align: center;
    margin-top: -99px;
  }

  .banner {
    max-width: 80%;
  }

  .carousel .slide {
    flex: 0 0 auto;
    width: 20% !important;
  }

  .banner-text {
    max-width: 100%;
    text-align: center;
    font-size: 1rem;
    margin-top: -74px;
  }

  .container-center {
    max-width: 1200px;
    margin: 0 auto;
    zoom: 1.0 !important;
}

}

@media (max-width: 576px) {
  .product-card,
  .faq .accordion-item {
    width: 100%;
  }

  .products {
    margin-top: -45px;
  }

  .how-it-works {
    padding: 0;
    text-align: center;
  }

  .carousel .slide img {
    height: 100px;
  }

  .container {
    width: 100%;
  }

  .carousel .slide img {
    height: 290px;
  }

  .step {
    max-width: 90%;
  }

  .card-oferta {
    width: 100%;
  }

  footer {
    padding: 50px;
  }

  .sociedade-hacker-copy {
    width: 100%;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding: 1rem;
    font-size: 1.25rem;
  }

  .sociedade-hacker-copy h2 {
    text-align: left;
    font-size: 2rem;
    padding: 0;
    margin: 0;
  }

  body,
  .oferta-outsider {
    zoom: 1;
  }

  .banner {
    border-radius: 15px;
    max-width: 100%;
    margin: 50px auto;
    padding-top: 0;
    overflow: hidden;
    display: block;
  }

  .banner-container {
    padding-top: 0;
  }

  .benefits {
    padding: 0;
  }
}

label {
  display: inline-block;
  text-align: left;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  z-index: 1;
  cursor: pointer;
  border: none !important;
  border-radius: 10px;
  font-weight: bold;
  color: white;
}

.btn-close {
  display: none !important;
}