@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap");

*,
:after,
:before,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

.free-container * {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.free-container button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.free-container img,
.free-container video {
  max-width: 100%;
  height: auto;
}

.free-container img,
.free-container svg,
.free-container video,
.free-container canvas,
.free-container audio,
.free-container iframe,
.free-container embed,
.free-container object {
  vertical-align: middle;
  display: block;
}

::-webkit-scrollbar {
  width: 5px;
  height: 50px;
}

::-webkit-scrollbar-track {
  background: #131314;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #888;
}

::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 2px;
}

* {
  font-family: Nunito, sans-serif;
}
body {
  background: #000 !important;
}
.overflow_hidden {
  overflow: hidden;
}

button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#main_header {
  position: fixed;
  display: flex;
  width: 100%;
  padding: 12px;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  transition: all 0.3s;
}

body.scrolled #main_header {
  backdrop-filter: blur(64px);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.3) 0px 10px 10px 0px, rgba(0, 0, 0, 0.15) 0px 8px 12px 6px;
}

#main_header .logo {
  width: 132px;
}

#main_header .centered_menu {
  color: #fff;
  font-weight: 600;
}

#main_header .centered_menu ul {
  list-style: none;
  cursor: pointer;
}

#main_header .centered_menu > ul {
  display: flex;
  gap: 32px;
}

#main_header .centered_menu > ul > li {
  position: relative;
  display: flex;
  gap: 8px;
  line-height: 24px;
  align-items: center;
}

#main_header .centered_menu > ul > li span {
  line-height: 24px;
}

#main_header .centered_menu > ul > li:hover span,
#main_header .centered_menu > ul > li:hover svg {
  color: #fb2c36;
}

#main_header .centered_menu > ul > li .icon svg {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

#main_header .centered_menu > ul > li:hover .icon {
  transform: rotate(180deg);
}

#main_header .centered_menu .submenu {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 24px;
  padding-top: 12px;
  left: 0;
  transition: all 0.2s;
}

#main_header .centered_menu ul > li:hover .submenu {
  visibility: visible;
  opacity: 1;
}

/* #main_header .centered_menu .submenu ul {
    width: 192px;
    background: #101828;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    transform: scale(0.9);
    transform-origin: top;
    transition: all 0.2s ease-in-out;
}

#main_header .centered_menu ul > li:hover .submenu ul {
    transform: scale(1);
}

#main_header .centered_menu .submenu li {
    padding: 12px;
    line-height: 24px;
} */

#main_header .right {
  display: flex;
  gap: 8px;
  align-items: center;
}

#main_header .right button {
  padding: 4px 24px;
  border-radius: 10px;
  background: linear-gradient(
    oklch(0.637 0.237 25.331) 0%,
    oklch(0.577 0.245 27.325) 100%
  );
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  transition: all 0.3s;
  cursor: pointer;
}

#main_header .right button:hover {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(229, 9, 20, 0.7) 0px 0px 20px 0px;
}

#burger_menu {
  color: #fff;
  cursor: pointer;
}

@keyframes shine {
  0% {
    background-position: -100%;
  }

  50% {
    background-position: 100%;
  }
  100% {
    background-position: -100%;
  }
}

#side_menu {
  position: fixed;
  display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(40px);
  inset: 0;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}
#side_menu a {
  text-decoration: none;
}
#side_menu.open {
  visibility: visible;
  opacity: 1;
}

#side_menu .bar {
  width: 300px;
  height: 100%;
  background-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    oklab(0 0 0 / 0.5) 0px 10px 15px -3px, oklab(0 0 0 / 0.5) 0px 4px 6px -4px;
  transform: translateX(100%);
  transition: all 0.2s;
}

#side_menu.open .bar {
  transform: translateX(0);
}

#side_menu .inner {
  padding: 24px;
  color: #fff;
}

#side_menu .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 32px;
}

#side_menu .top h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

#side_menu #side_menu_close_button {
  padding: 8px;
  transition: all 0.2s;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

#side_menu #side_menu_close_button svg {
  width: 18px;
  height: 24px;
  line-height: 24px;
  overflow: visible;
  vertical-align: -0.125em;
}

#side_menu ul {
  list-style: none;
}

#side_menu li {
  margin: 0 0 16px;
  padding: 12px;
  font-size: 18px;
  line-height: 28px;
  border-radius: 10px;
  transition: all 0.2s;
  cursor: pointer;
  text-align: -webkit-match-parent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#side_menu li:hover {
  background-color: #101828;
}

#side_menu li span {
  position: absolute;
  padding: 0 8px;
  background-image: linear-gradient(
    to right,
    oklch(0.637 0.237 25.331) 0%,
    oklch(0.577 0.245 27.325) 50%,
    rgb(255, 255, 255) 100%
  );
  background-size: 150% 100%;
  background-position: 0% 0%;
  animation: 2.5s ease-in-out 0s infinite normal none running shine;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 0px 5px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  border-radius: 6px;
}

.free-content {
  width: 100%;
}

#main_footer {
  padding: 60px 80px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

#main_footer ul {
  list-style: none;
}

#main_footer .title {
  margin-bottom: 32px;
  color: #fff;
  letter-spacing: 4px;
  font-size: 27px;
  font-weight: 700;
  line-height: 40.5px;
}

#main_footer .social_items {
  margin: 0 0 32px;
}

#main_footer .social_items ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

#main_footer .social_items ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 16px;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 32px;
  transition: all 0.9s;
}

#main_footer .social_items ul li:hover {
  background: #fff;
}

#main_footer .social_items ul li:last-child {
  margin: 0;
}

#main_footer .social_items div {
  width: 20px;
}

#main_footer .social_items div svg {
  width: 100%;
  height: 100%;
  font-size: 24px;
  height: 24px;
}

#main_footer .social_items span {
  line-height: 28px;
  font-weight: 700;
  font-size: 20px;
}

#main_footer .social_items .facebook {
  color: rgb(87, 110, 238);
}

#main_footer .social_items .twitter div {
  color: #fff;
}

#main_footer .social_items .twitter span {
  color: #51a2ff;
}

#main_footer .social_items li.twitter:hover div {
  color: #111;
}

#main_footer .social_items .youtube {
  color: #e7000b;
}

#main_footer .social_items .instagram {
  color: #f8079a;
}

#main_footer .hr_break {
  width: 80%;
  height: 1px;
  margin: 0 0 40px;
  background: #555;
}

#main_footer .two_main_columns {
  flex-wrap: wrap;
  display: flex;
  max-width: 1367px;
  margin: 0 auto;
  line-height: 24px;
  margin-bottom: 48px;
  gap: 80px;
}

#main_footer .two_main_columns .left img {
  width: 192px;
  border-radius: 8px;
  overflow: clip;
  border: 1px solid #e2e8f0;
  cursor: pointer;
}

#main_footer .two_main_columns .left img:last-child {
  margin-top: 12px;
}

#main_footer .footer_title {
  color: #33c3a5;
  letter-spacing: 0.01rem;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 16px;
}

#main_footer .four_columns {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

#main_footer .four_columns ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#main_footer .four_columns ul li {
  cursor: pointer;
  transition: all 0.15s;
}

#main_footer .four_columns ul li:hover {
  color: #33c3a5;
}

#main_footer .copyright_row {
  display: flex;
  justify-content: space-between;
  line-height: 24px;
  margin: 16px 0;
  gap: 208px;
  color: #ebe6e7;
  letter-spacing: 0.01rem;
  align-items: center;
  font-size: 15px;
}

#main_footer .copyright_row img {
  width: 208px;
}

#mobile_fixed_menu {
  display: none;
  width: 100%;
  position: fixed;
  padding: 12px 16px;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 50;
  background-color: #000;
}
#mobile_fixed_menu * {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#mobile_fixed_menu .inner {
  display: flex;
  width: 100%;
  max-width: 512px;
  margin-inline: auto;
  justify-content: space-between;
  align-items: center;
}

#mobile_fixed_menu .item {
  display: flex;
  width: 64px;
  padding: 8px 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s;
  background-color: transparent;
  color: #6a7282;
}

#mobile_fixed_menu .item.selected {
  transform: translateY(-5.74065px) scale(1.1);
}

#mobile_fixed_menu .item:active {
  transform: scale(0.9);
}

#mobile_fixed_menu .text {
  font-size: 12px;
  font-weight: 500;
  color: #99a1af;
}

#mobile_fixed_menu .item.selected .icon,
#mobile_fixed_menu .item.selected .text {
  color: #fff;
}

.content {
  /* height: 300px; */
  width: 100%;
  padding: 0;
}

#mute_button {
  position: absolute;
  padding: 12px;
  border-radius: 100%;
  top: 80px;
  right: 24px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
  z-index: 49;
  border-width: 1px;
  transition: all 0.3s;
}

#mute_button:hover {
  background: rgba(0, 0, 0, 0.4);
}

#mute_button.off .mute {
  display: block;
}

#mute_button.off .loud {
  display: none;
}

#mute_button .loud {
  display: block;
}

#mute_button .mute {
  display: none;
}

.tags {
  display: flex !important;
  gap: 24px;
  line-height: 24px;
  margin: 0 0 16px;
}

.tags > span {
  color: #00d492;
  line-height: 28px;
  font-size: 18px;
  font-weight: 600;
}

.tags > div {
  display: flex;
  align-items: center;
  color: #fdc700;
  font-size: 16px;
  font-weight: 500;
  gap: 4px;
}

.tags > div svg {
  width: 16px;
  height: 16px;
}

/* --- Media Queries --- */
@media (max-width: 768px) {
  .tags {
    gap: 16px;
  }
  .tags > span {
    font-size: 16px;
    line-height: 24px;
  }
  .tags > div svg {
    width: 12px;
  }
}

.categories {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

.categories span {
  padding: 4px 12px;
  border-radius: 20px;
  line-height: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Media Queries --- */
@media (max-width: 768px) {
  .categories span {
    font-size: 16px;
    line-height: 24px;
  }
}

.free-container .categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-direction: row;
}

.free-container .categories span {
  padding: 4px 12px;
  border-radius: 20px;
  line-height: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

.the_text {
  width: 50%;
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 32.5px;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  text-align: left;
}

/* --- Media Queries --- */
@media (max-width: 1024px) {
  .the_text {
    display: none;
  }
}

.main_buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.main_buttons button {
  transition: all 0.3s;
}

.main_buttons button:hover {
  transform: scale(1.02);
}

.round_button {
  padding: 12px;
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.2);
  border-width: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  color: #fff;
}

.round_button svg {
  font-size: 24px;
  line-height: 32px;
}

.main_buttons .round_button:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1024px) {
  .play_button svg,
  .play_button span,
  .round_button svg {
    font-size: 14px;
    line-height: 20px;
  }

  .round_button.info svg {
    width: 16px;
    height: 16px;
  }
}

.play_button {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: oklch(0.577 0.245 27.325);
  color: #fff;
  border-radius: 10px;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
}

.play_button .gradient {
  position: absolute;
  opacity: 0;
  inset: 0;
  background: linear-gradient(
    to right,
    oklch(0.637 0.237 25.331) 0%,
    oklch(0.577 0.245 27.325) 100%
  );
  transition: all 0.3s;
}

.play_button:hover .gradient {
  opacity: 1;
}

.play_button span {
  line-height: 28px;
  z-index: 10;
}

.play_button svg {
  z-index: 10;
}

@media (max-width: 1024px) {
  .play_button svg,
  .play_button span,
  .round_button svg {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 768px) {
  .play_button {
    padding: 8px 12px;
    font-size: 16px;
  }
}

main {
  background-color: #000;
}

.swiper-slide {
  position: relative;
  text-align: center;
  font-size: 18px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  overflow: hidden;
}

.swiper-slide .overlay_1 img {
  position: realative; /* Provavelmente um erro de digitação, deveria ser "relative" */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.swiper {
  width: 100%;
  overflow: hidden;
  height: 100vh;
}

.overlay_1,
.overlay_2,
.overlay_3,
.overlay_4 {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.overlay_1 {
  background: linear-gradient(
    to right,
    oklab(0 0 0 / 0.9) 0%,
    oklab(0 0 0 / 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.overlay_2 {
  background: linear-gradient(
    oklab(0 0 0 / 0.9) 0%,
    oklab(0 0 0 / 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.overlay_3 {
  background: linear-gradient(
    to right,
    oklab(0 0 0 / 0.2) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.overlay_4 {
  background: linear-gradient(
    to top in oklab,
    rgb(0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.overlay_1 iframe {
  position: relative;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: scale(1.3);
  z-index: 21;
}

.swiper-slide .overlay_1 img {
  position: realative; /* Provavelmente "relative" */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.top_part {
  margin: 3rem 0;
}

.top_part > img {
  width: 30%;
  height: fit-content;
}

.swiper_content {
  position: relative;
  z-index: 99;
  width: 100%;
  height: 80%;
  padding: 0 24px;
}

.swiper_content {
  display: flex;
  align-items: center;
  height: 100%;
}

.bottom_most_section {
  position: relative;
  overflow: hidden;
}

.bottom_most_section img {
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 320px;
  z-index: 0;
}

.bottom_most_section .red_fitler {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    oklab(0.637 0.214213 0.1014 / 0.5) 0%,
    oklab(0.637 0.214213 0.1014 / 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
}

.bottom_most_section .content_wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  z-index: 2;
}

.bottom_most_section .free-content {
  width: 672px;
  text-align: center;
  color: #fff;
}

.bottom_most_section h3 {
  margin: 0 0 16px;
  filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 4px 4px);
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
}

.bottom_most_section h4 {
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 24px;
  text-align: center;
}

.bottom_most_section .button {
  display: inline-block;
  padding: 8px 28px;
  border-radius: 10px;
  background: linear-gradient(
    oklch(0.637 0.237 25.331) 0%,
    oklch(0.577 0.245 27.325) 100%
  );
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none;
}

ol,
ul {
  padding-left: 0rem;
  padding: 0;
}

@media (max-width: 1024px) {
  .play_button svg,
  .play_button span,
  .round_button svg {
    font-size: 24px;
    line-height: 32px;
  }

  .round_button.info svg {
    width: 16px;
    height: 16px;
  }

  #main_header .centered_menu {
    display: none;
  }

  #main_header .right button {
    padding: 4px 20px;
    font-size: 16px;
    line-height: 24px;
  }

  #main_footer {
    padding: 40px 20px 0;
  }

  #main_footer .hr_break {
    margin: 0 0 16px;
  }

  #main_footer .two_main_columns {
    margin-bottom: 16px;
    gap: 40px;
  }

  #main_footer .two_main_columns .left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #main_footer .four_columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  #main_footer .copyright_row {
    margin: 16px auto 88px;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .tags {
    gap: 16px;
  }

  .tags > span {
    font-size: 16px;
    line-height: 24px;
  }

  .tags > div svg {
    width: 12px;
  }
  .free-container .categories span {
    font-size: 16px;
    line-height: 24px;
  }
  .play_button {
    padding: 8px 12px;
    font-size: 16px;
  }

  .swiper_content {
    position: absolute;
    display: flex;
    inset: 0;
    top: 80px;
    align-items: center;
    z-index: 500;
  }

  /* --- Media Queries --- */
  @media (max-width: 768px) {
    .swiper_content {
      top: 72px;
    }
  }

  .swiper_content .container {
    position: relative;
    z-index: 99;
    max-width: 95%;
    padding: 0 24px;
  }

  .swiper_content .container img {
    height: 128px;
    object-fit: contain;
    margin: 0 0 16px;
    transform: scale(0.95);
    transform-origin: bottom;
    transition-duration: 0.3s !important;
  }

  .swiper_content .container img.show {
    transform: scale(1);
  }

  .swiper_content .container .item {
    /*opacity: 0;*/
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }

  .swiper_content .container .item.show {
    opacity: 1;
    visibility: visible;
  }

  /* --- Media Queries --- */
  @media (max-width: 768px) {
    .swiper_content .container {
      width: 100%;
      max-width: initial;
      padding: 0 16px;
    }
    .swiper_content .container img {
      height: 64px;
    }
  }

  .swiper_content .top_part {
    margin-bottom: 32px;
  }

  /* --- Media Queries --- */
  @media (max-width: 768px) {
    .swiper_content .top_part {
      margin-bottom: 24px;
    }
  }

  #mobile_fixed_menu .icon {
    height: auto;
    width: auto;
    display: block;
  }
}

@media (max-width: 640px) {
  #mobile_fixed_menu {
    display: flex;
  }

  #main_footer .two_main_columns {
    justify-content: center;
  }
}

.status-on-off {
  color: #e7000b !important;
  font-weight: bold;
}