/******************************************************************
  Theme Name: Anime
  Description: Anime video tamplate
  Author: Colorib
  Author URI: https://colorib.com/
  Version: 1.0
  Created: Colorib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Intagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Mulish", sans-serif;
	-webkit-font-smoothing: antialiased;
	background: #0b0c2a;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Mulish", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: "Mulish", sans-serif;
	color: #3d3d3d;
	font-weight: 400;
	line-height: 25px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 30px;
}

.section-title h4,
.section-title h5 {
	color: #ffffff;
	font-weight: 600;
	line-height: 21px;
	text-transform: uppercase;
	padding-left: 20px;
	position: relative;
	font-family: "Oswald", sans-serif;
}

.section-title h4:after,
.section-title h5:after {
	position: absolute;
	left: 0;
	top: -6px;
	height: 32px;
	width: 4px;
	background: #e53637;
	content: "";
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	letter-spacing: 2px;
}

.primary-btn span {
	font-size: 18px;
	margin-left: 5px;
	position: relative;
	top: 3px;
}

.site-btn {
	font-size: 13px;
	color: #ffffff;
	background: #e53637;
	font-weight: 700;
	border: none;
	border-radius: 2px;
	letter-spacing: 2px;
	text-transform: uppercase;
	display: inline-block;
	padding: 12px 30px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: 0 0;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header {
    background: #000000; /* Cor escura para o fundo */
    padding: 20px 0;
}

/* Logo */
.header__logo {
    padding: 20px 0 17px;
}

.header__logo a {
    display: inline-block;
}

.header__logo img {
    max-width: 100%; /* Garante que a logo se ajuste bem */
    height: auto;
    display: block;
}

/* Menu Principal */
.header__menu {
    text-align: center;
}

.header__menu ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    margin-right: 16px;
}

.header__menu ul li.active a {
    background: #1bf0f0; /* Cor de fundo para o item ativo */
    color: #d427f7;
    animation: pulse 1s infinite; /* Efeito de pulso para o item ativo */
}

.header__menu ul li:hover a {
    color: #ffffff;
}

.header__menu ul li a {
    font-size: 15px;
    color: #25c2f1;
    display: block;
    font-weight: 700;
    padding: 20px;
    text-transform: uppercase;
    border-radius: 30px;
    transition: all 0.3s ease; /* Transição suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Efeito de hover nos links */
.header__menu ul li a:hover {
    background-color: #28c2ff; /* Cor de destaque ao passar o mouse */
    color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta a sombra no hover */
    transform: scale(1.05); /* Leve aumento de tamanho no hover */
}

/* Dropdown */
.header__menu ul li .dropdown {
    position: absolute;
    left: 0;
    top: 82px;
    width: 200px;
    background: #333;
    text-align: left;
    padding: 10px 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out; /* Animação suave de transição */
}

/* Quando o usuário passar o mouse, o dropdown aparecerá com uma transição */
.header__menu ul li:hover .dropdown {
    top: 62px;
    opacity: 1;
    visibility: visible;
    transform: translateY(10px); /* Efeito de deslizar para baixo */
}

/* Estilo dos itens do dropdown */
.header__menu ul li .dropdown li {
    display: block;
    margin-right: 0;
}

.header__menu ul li .dropdown li a {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

/* Hover no item do dropdown */
.header__menu ul li .dropdown li a:hover {
    background-color: #e90c0c; /* Cor de destaque */
}

/* Último item do menu */
.header__menu ul li:last-child {
    margin-right: 0;
}

/* Barra direita (onde ficam os links de Discord, Twitter, etc) */
.header__right {
    text-align: right;
    padding: 20px 0 15px;
}

.header__right a {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    margin-right: 30px;
}

.header__right a:last-child {
    margin-right: 0;
}

/* Menus móveis (configurações responsivas) */
.slicknav_menu {
    display: none;
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    .header__menu {
        display: block;
    }
    .header__menu ul {
        display: block;
        text-align: left;
    }
    .header__menu ul li {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .header__right {
        text-align: center;
    }
}

/* Efeito de pulso (pulse) para o item ativo */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* Leve aumento de tamanho */
    }
    100% {
        transform: scale(1);
    }
}
/*---------------------
  Hero
-----------------------*/

.hero__items {
    height: 500px; /* Define altura fixa, ajuste conforme desejar */
    padding: 0 50px; /* Só padding horizontal para o conteúdo respirar */
    border-radius: 5px;
    display: flex;
    align-items: center; /* Centraliza verticalmente o conteúdo */
    position: relative;
    background-size: cover;
    background-position: center;
	color: #131313;
}

/* Ajuste responsivo para telas menores */
@media (max-width: 768px) {
    .hero__items {
        height: 350px; /* Menor altura para telas pequenas */
        padding: 0 20px;
    }
}


.hero__items .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 10, 0.5);
  z-index: 1;
  border-radius: 12px;
  transition: background 0.5s ease;
}

.hero__items:hover .overlay {
  background: rgba(10, 10, 10, 0.7);
}

.hero__text {
  position: relative;
  z-index: 2;
  max-width: 600px;
  text-shadow: 0 3px 8px rgba(255, 255, 255, 0.8);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.hero__text .label {
  font-size: 14px;
  background: linear-gradient(45deg, #0c0c0c, #181818, #080808);
  padding: 8px 22px;
  display: inline-block;
  border-radius: 30px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  box-shadow: 0 0 12px rgba(77, 93, 251, 0.8);
  text-transform: uppercase;
  user-select: none;
  animation: pulseGlow 4s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 6px rgba(77, 93, 251, 0.6);
  }
  100% {
    box-shadow: 0 0 20px rgba(77, 93, 251, 1);
  }
}

.hero__text h2 {
  font-size: 48px;
  font-family: "Oswald", sans-serif;
  font-weight: 800;
  margin-bottom: 20px;
  color: #fff9f9;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color 0.3s ease;
}

.hero__text p {
  font-size: 18px;
  line-height: 1.6;
  color: #c1c6d1;
  margin-bottom: 0;
  user-select: text;
}

/* Animação suave para os textos */
.hero__slider .owl-item.active .hero__text {
  opacity: 1;
  transform: translateY(0);
}

.hero__slider .owl-item .hero__text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.hero__slider.owl-carousel .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #32abbb;
  font-size: 28px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(255,255,255,0.2);
  z-index: 10;
}

.hero__slider.owl-carousel .owl-nav button:hover {
  background: rgba(255, 255, 255, 0.4);
  color: #4D5DFB;
  box-shadow: 0 0 15px #4D5DFB;
}

.hero__slider.owl-carousel .owl-nav button.owl-prev {
  left: 15px;
}

.hero__slider.owl-carousel .owl-nav button.owl-next {
  right: 15px;
}


/*---------------------
  Product
-----------------------*/

.product {
	padding-bottom: 60px;
	padding-top: 80px;
}

.product-page {
	padding-top: 60px;
}

.btn__all {
	text-align: right;
	margin-bottom: 30px;
}

.trending__product {
	margin-bottom: 50px;
}

.popular__product {
	margin-bottom: 50px;
}

.recent__product {
	margin-bottom: 50px;
}

.product__item {
	margin-bottom: 30px;
}

.product__item__text {
	padding-top: 20px;
}

.product__item__text ul {
	margin-bottom: 10px;
}

.product__item__text ul li {
	list-style: none;
	font-size: 10px;
	color: #ffffff;
	font-weight: 700;
	padding: 1px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	display: inline-block;
}

.product__item__text h5 a {
	color: #ffffff;
	font-weight: 700;
	line-height: 26px;
}

.product__sidebar .section-title h5 {
	color: #ffffff;
	font-weight: 600;
	font-family: "Oswald", sans-serif;
	line-height: 21px;
	text-transform: uppercase;
	padding-left: 20px;
	position: relative;
}

.product__sidebar .section-title h5:after {
	position: absolute;
	left: 0;
	top: -6px;
	height: 32px;
	width: 4px;
	background: #e53637;
	content: "";
}

.product__sidebar__view {
	position: relative;
	margin-bottom: 80px;
}

.product__sidebar__view__item {
	height: 190px;
	position: relative;
	border-radius: 5px;
	margin-bottom: 20px;
}

.product__sidebar__view__item .view {
	font-size: 13px;
	color: #ffffff;
	background: #3d3d3d;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 4px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.product__sidebar__view__item h5 {
	position: absolute;
	left: 0;
	bottom: 25px;
	width: 100%;
	padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
	color: #ffffff;
	font-weight: 700;
	line-height: 26px;
}

.product__sidebar__comment {
	margin-bottom: 35px;
}

.product__sidebar__comment__item {
	margin-bottom: 20px;
	overflow: hidden;
}

.product__sidebar__comment__item__pic {
	float: left;
	margin-right: 15px;
}

.product__sidebar__comment__item__text {
	overflow: hidden;
}

.product__sidebar__comment__item__text ul {
	margin-bottom: 10px;
}

.product__sidebar__comment__item__text ul li {
	list-style: none;
	font-size: 10px;
	color: #ffffff;
	font-weight: 700;
	padding: 1px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	display: inline-block;
}

.product__sidebar__comment__item__text h5 {
	margin-bottom: 10px;
}

.product__sidebar__comment__item__text h5 a {
	color: #ffffff;
	font-weight: 700;
	line-height: 26px;
}

.product__sidebar__comment__item__text span {
	display: block;
	font-size: 13px;
	color: #b7b7b7;
}

.product__page__title {
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 10px;
	margin-bottom: 30px;
}

.product__page__title .section-title {
	margin-bottom: 0;
}

.product__pagination a {
	display: inline-block;
	font-size: 15px;
	color: #b7b7b7;
	font-weight: 600;
	height: 50px;
	width: 50px;
	border: 1px solid transparent;
	border-radius: 50%;
	line-height: 48px;
	text-align: center;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.product__pagination a:hover {
	color: #ffffff;
}

.product__pagination a.current-page {
	border: 1px solid #ffffff;
}

.product__pagination a i {
	color: #b7b7b7;
	font-size: 15px;
}

/*---------------------
  Anime Details
-----------------------*/

.anime-details {
	padding-top: 60px;
}

.anime__details__content {
	margin-bottom: 65px;
}

.anime__details__text {
	position: relative;
}

.anime__details__text p {
	color: #b7b7b7;
	font-size: 18px;
	line-height: 30px;
}

.anime__details__pic {
	height: 440px;
	border-radius: 50px;
	position: relative;
}

.anime__details__pic .comment {
	font-size: 13px;
	color: #ffffff;
	background: #3d3d3d;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 4px;
	position: absolute;
	left: 10px;
	bottom: 25px;
}

.anime__details__pic .view {
	font-size: 13px;
	color: #ffffff;
	background: #3d3d3d;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 4px;
	position: absolute;
	right: 10px;
	bottom: 25px;
}

.anime__details__title {
	margin-bottom: 20px;
}

.anime__details__title h3 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 13px;
}

.anime__details__title span {
	font-size: 15px;
	color: #b7b7b7;
	display: block;
}

.anime__details__rating {
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
}

.anime__details__rating .rating i {
	font-size: 24px;
	color: #e89f12;
	display: inline-block;
}

.anime__details__rating span {
	display: block;
	font-size: 18px;
	color: #b7b7b7;
}

.anime__details__widget {
	margin-bottom: 15px;
}

.anime__details__widget ul {
	margin-bottom: 20px;
}

.anime__details__widget ul li {
	list-style: none;
	font-size: 15px;
	color: #ffffff;
	line-height: 30px;
	position: relative;
	padding-left: 18px;
}

.anime__details__widget ul li:before {
	position: absolute;
	left: 0;
	top: 12px;
	height: 6px;
	width: 6px;
	background: #b7b7b7;
	content: "";
}

.anime__details__widget ul li span {
	color: #b7b7b7;
	width: 115px;
	display: inline-block;
}

.anime__details__btn .follow-btn {
	font-size: 13px;
	color: #ffffff;
	background: #e53637;
	display: inline-block;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 14px 20px;
	border-radius: 4px;
	margin-right: 11px;
}

.anime__details__btn .watch-btn span {
	font-size: 13px;
	color: #ffffff;
	background: #0a0a0a;
	display: inline-block;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 14px 20px;
	border-radius: 4px 0 0 4px;
	margin-right: 1px;
}

.anime__details__btn .watch-btn i {
	font-size: 20px;
	display: inline-block;
	background: #030303;
	padding: 11px 5px 16px 8px;
	color: #ffffff;
	border-radius: 0 4px 4px 0;
}

.anime__details__review {
	margin-bottom: 55px;
}

.anime__review__item {
	overflow: hidden;
	margin-bottom: 15px;
}

.anime__review__item__pic {
	float: left;
	margin-right: 20px;
	position: relative;
}

.anime__review__item__pic:before {
	position: absolute;
	right: -30px;
	top: 15px;
	border-top: 15px solid transparent;
	border-left: 15px solid #1d1e39;
	content: "";
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.anime__review__item__pic img {
	height: 50px;
	width: 50px;
	border-radius: 50%;
}

.anime__review__item__text {
	overflow: hidden;
	background: #1d1e39;
	padding: 18px 30px 16px 20px;
	border-radius: 10px;
}

.anime__review__item__text h6 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 10px;
}

.anime__review__item__text h6 span {
	color: #b7b7b7;
	font-weight: 400;
}

.anime__review__item__text p {
	color: #b7b7b7;
	line-height: 23px;
	margin-bottom: 0;
}

.anime__details__form form textarea {
	width: 100%;
	font-size: 15px;
	color: #b7b7b7;
	padding-left: 20px;
	padding-top: 12px;
	height: 110px;
	border: none;
	border-radius: 5px;
	resize: none;
	margin-bottom: 24px;
}

.anime__details__form form button {
	font-size: 11px;
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: #e53637;
	border: none;
	padding: 10px 15px;
	border-radius: 2px;
}

/*---------------------
  Anime Watching
-----------------------*/

.anime__video__player {
	margin-bottom: 70px;
}

.anime__video__player .plyr--video {
	border-radius: 5px;
	background: transparent;
}

.anime__video__player .plyr audio,
.anime__video__player .plyr iframe,
.anime__video__player .plyr video {
	width: 102%;
}

.anime__video__player .plyr--full-ui.plyr--video .plyr__control--overlaid {
	display: block;
}

.anime__video__player .plyr--video .plyr__control.plyr__tab-focus,
.anime__video__player .plyr--video .plyr__control:hover,
.anime__video__player .plyr--video .plyr__control[aria-expanded="true"] {
	background: transparent;
}

.anime__video__player .plyr--video .plyr__controls {
	background: transparent;
}

.anime__video__player .plyr--video .plyr__progress__buffer {
	color: transparent;
}

.anime__video__player .plyr--full-ui input[type="range"] {
	color: #ffffff;
}

.anime__video__player
	.plyr__controls
	.plyr__controls__item.plyr__progress__container {
	position: absolute;
	left: 26px;
	bottom: 45px;
	width: calc(100% - 60px);
}

.anime__video__player .plyr__menu {
	margin-right: 70px;
}

.anime__video__player .plyr__controls .plyr__controls__item:first-child {
	position: absolute;
	left: 32px;
	bottom: 8px;
}

.anime__video__player .plyr__controls .plyr__controls__item:last-child {
	position: absolute;
	right: 32px;
	bottom: 8px;
}

.anime__video__player .plyr__volume {
	position: absolute;
	width: auto;
	left: 76px;
	bottom: 8px;
}

.anime__video__player .plyr__controls .plyr__controls__item.plyr__time {
	position: absolute;
	left: 106px;
	bottom: 12px;
}

.anime__video__player .plyr__control--overlaid {
	background: transparent;
	background: var(
		--plyr-video-control-background-hover,
		var(--plyr-color-main, var(--plyr-color-main, transparent))
	);
}

.anime__video__player .plyr__control--overlaid svg {
	height: 60px;
	width: 50px;
}

.anime__details__episodes {
	margin-bottom: 35px;
}

.anime__details__episodes a {
	display: inline-block;
	font-size: 15px;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.2);
	padding: 10px 20px;
	border-radius: 4px;
	margin-right: 15px;
	margin-bottom: 20px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.anime__details__episodes a:hover {
	color: #000000;
	background: #ffffff;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	padding-top: 35px;
}

.breadcrumb__links a {
	font-size: 15px;
	color: #ffffff;
	margin-right: 18px;
	display: inline-block;
	position: relative;
}

.breadcrumb__links a i {
	margin-right: 5px;
	color: #e53637;
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "";
	font-family: "FontAwesome";
}

.breadcrumb__links span {
	font-size: 15px;
	color: #b7b7b7;
	display: inline-block;
}

/*---------------------
    Normal Breadcrumb
-----------------------*/

.normal-breadcrumb {
	height: 300px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.normal__breadcrumb__text h2 {
	color: #ffffff;
	font-size: 48px;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	margin-bottom: 22px;
}

.normal__breadcrumb__text p {
	color: #ffffff;
	font-size: 24px;
	margin-bottom: 0;
}

/*---------------------
    Blog
-----------------------*/

.blog {
	padding-top: 70px;
	padding-bottom: 90px;
}

.blog__item {
	height: 580px;
	position: relative;
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: 10px;
}

.blog__item.small__item {
	height: 285px;
}

.blog__item.small__item .blog__item__text {
	padding: 0 30px;
}

.blog__item.small__item .blog__item__text p {
	margin-bottom: 5px;
}

.blog__item.small__item .blog__item__text h4 a {
	font-size: 20px;
	line-height: 30px;
}

.blog__item__text {
	position: absolute;
	left: 0;
	bottom: 25px;
	text-align: center;
	width: 100%;
	padding: 0 105px;
}

.blog__item__text p {
	color: #ffffff;
	margin-bottom: 12px;
}

.blog__item__text p span {
	color: #e53637;
	margin-right: 5px;
}

.blog__item__text h4 a {
	color: #ffffff;
	line-height: 34px;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
	padding-top: 70px;
}

.blog__details__title {
	text-align: center;
	margin-bottom: 70px;
}

.blog__details__title h6 {
	font-size: 15px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.blog__details__title h6 span {
	color: #b7b7b7;
	font-weight: 400;
	text-transform: none;
}

.blog__details__title h2 {
	color: #ffffff;
	font-size: 48px;
	font-weight: 700;
	line-height: 60px;
	margin-bottom: 38px;
}

.blog__details__title .blog__details__social a {
	display: inline-block;
	font-size: 15px;
	color: #ffffff;
	padding: 16px 35px 14px 20px;
	border-radius: 2px;
	margin-right: 6px;
}

.blog__details__title .blog__details__social a:last-child {
	margin-right: 0;
}

.blog__details__title .blog__details__social a.facebook {
	background: #3b5998;
}

.blog__details__title .blog__details__social a.pinterest {
	background: #ca2027;
}

.blog__details__title .blog__details__social a.linkedin {
	background: #0372b1;
}

.blog__details__title .blog__details__social a.twitter {
	background: #39a1f2;
}

.blog__details__title .blog__details__social a i {
	margin-right: 6px;
}

.blog__details__pic {
	margin-bottom: 30px;
}

.blog__details__pic img {
	min-width: 100%;
}

.blog__details__text {
	margin-bottom: 40px;
}

.blog__details__text p {
	color: #ffffff;
	font-size: 17px;
	line-height: 30px;
}

.blog__details__item__text {
	margin-bottom: 42px;
}

.blog__details__item__text h4 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 35px;
}

.blog__details__item__text img {
	min-width: 100%;
	margin-bottom: 26px;
}

.blog__details__item__text p {
	color: #ffffff;
	font-size: 17px;
	line-height: 30px;
	margin-bottom: 0;
}

.blog__details__tags {
	margin-bottom: 60px;
}

.blog__details__tags a {
	display: inline-block;
	color: #b7b7b7;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	margin-right: 6px;
	padding: 6px 15px;
	margin-bottom: 10px;
}

.blog__details__tags a:last-child {
	margin-right: 0;
}

.blog__details__btns {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding: 20px 0 15px;
	margin-bottom: 65px;
}

.blog__details__btns__item {
	margin-bottom: 20px;
}

.blog__details__btns__item.next__btn {
	text-align: right;
}

.blog__details__btns__item h5 a {
	font-size: 17px;
	letter-spacing: 2px;
	color: #ffffff;
}

.blog__details__btns__item h5 a span {
	font-size: 30px;
	color: #b7b7b7;
	position: relative;
	top: 8px;
}

.blog__details__comment {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 30px;
}

.blog__details__comment h4 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 26px;
}

.blog__details__comment__item {
	margin-bottom: 40px;
	overflow: hidden;
}

.blog__details__comment__item.blog__details__comment__item--reply {
	padding-left: 112px;
}

.blog__details__comment__item__pic {
	float: left;
	margin-right: 40px;
}

.blog__details__comment__item__text {
	overflow: hidden;
}

.blog__details__comment__item__text span {
	font-size: 14px;
	color: #b7b7b7;
	display: block;
	margin-bottom: 10px;
}

.blog__details__comment__item__text h5 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 10px;
}

.blog__details__comment__item__text p {
	color: #b7b7b7;
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 25px;
}

.blog__details__comment__item__text a {
	display: inline-block;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
	padding: 6px 20px;
	letter-spacing: 2px;
	border-radius: 2px;
	margin-right: 14px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__details__comment__item__text a:hover {
	background: #e53637;
}

.blog__details__form {
	padding-top: 50px;
}

.blog__details__form h4 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 26px;
}

.blog__details__form form input {
	height: 50px;
	width: 100%;
	background: #ffffff;
	font-size: 15px;
	color: #a6a6a6;
	padding-left: 20px;
	border-radius: 2px;
	border: none;
	margin-bottom: 30px;
}

.blog__details__form form input::-webkit-input-placeholder {
	color: #a6a6a6;
}

.blog__details__form form input::-moz-placeholder {
	color: #a6a6a6;
}

.blog__details__form form input:-ms-input-placeholder {
	color: #a6a6a6;
}

.blog__details__form form input::-ms-input-placeholder {
	color: #a6a6a6;
}

.blog__details__form form input::placeholder {
	color: #a6a6a6;
}

.blog__details__form form textarea {
	height: 115px;
	width: 100%;
	background: #ffffff;
	font-size: 15px;
	color: #a6a6a6;
	padding-left: 20px;
	border-radius: 2px;
	padding-top: 12px;
	resize: none;
	border: none;
	margin-bottom: 34px;
}

.blog__details__form form textarea::-webkit-input-placeholder {
	color: #a6a6a6;
}

.blog__details__form form textarea::-moz-placeholder {
	color: #a6a6a6;
}

.blog__details__form form textarea:-ms-input-placeholder {
	color: #a6a6a6;
}

.blog__details__form form textarea::-ms-input-placeholder {
	color: #a6a6a6;
}

.blog__details__form form textarea::placeholder {
	color: #a6a6a6;
}

/*---------------------
  Login
-----------------------*/

.login {
	padding-top: 130px;
	padding-bottom: 120px;
}

.login__form {
	position: relative;
	padding-left: 145px;
}

.login__form:after {
	position: absolute;
	right: -14px;
	top: -40px;
	height: 330px;
	width: 1px;
	background: rgba(255, 255, 255, 0.2);
	content: "";
}

.login__form h3 {
	color: #ffffff;
	font-weight: 700;
	font-family: "Oswald", sans-serif;
	margin-bottom: 30px;
}

.login__form form .input__item {
	position: relative;
	width: 370px;
	margin-bottom: 20px;
}

.login__form form .input__item:before {
	position: absolute;
	left: 50px;
	top: 10px;
	height: 30px;
	width: 1px;
	background: #b7b7b7;
	content: "";
}

.login__form form .input__item input {
	height: 50px;
	width: 100%;
	font-size: 15px;
	color: #b7b7b7;
	background: #ffffff;
	border: none;
	padding-left: 76px;
}

.login__form form .input__item input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.login__form form .input__item input::-moz-placeholder {
	color: #b7b7b7;
}

.login__form form .input__item input:-ms-input-placeholder {
	color: #b7b7b7;
}

.login__form form .input__item input::-ms-input-placeholder {
	color: #b7b7b7;
}

.login__form form .input__item input::placeholder {
	color: #b7b7b7;
}

.login__form form .input__item span {
	color: #b7b7b7;
	font-size: 20px;
	position: absolute;
	left: 15px;
	top: 13px;
}

.login__form form button {
	border-radius: 0;
	margin-top: 10px;
}

.login__form .forget_pass {
	font-size: 15px;
	color: #ffffff;
	display: inline-block;
	position: absolute;
	right: 60px;
	bottom: 12px;
}

.login__register {
	padding-left: 30px;
}

.login__register h3 {
	color: #ffffff;
	font-weight: 700;
	font-family: "Oswald", sans-serif;
	margin-bottom: 30px;
}

.login__register .primary-btn {
	background: #e53637;
	padding: 12px 42px;
}

.login__social {
	padding-top: 52px;
}

.login__social__links {
	text-align: center;
}

.login__social__links span {
	color: #ffffff;
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.login__social__links ul li {
	list-style: none;
	margin-bottom: 15px;
}

.login__social__links ul li:last-child {
	margin-bottom: 0;
}

.login__social__links ul li a {
	color: #ffffff;
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	width: 460px;
	padding: 14px 0;
	position: relative;
	margin: 0 auto;
}

.login__social__links ul li a.facebook {
	background: #4267b2;
}

.login__social__links ul li a.google {
	background: #ff4343;
}

.login__social__links ul li a.twitter {
	background: #1da1f2;
}

.login__social__links ul li a i {
	font-size: 20px;
	position: absolute;
	left: 32px;
	top: 14px;
}

/*---------------------
  Sign Up
-----------------------*/

.signup {
	padding-top: 130px;
	padding-bottom: 150px;
}

.signup .login__form:after {
	height: 450px;
}

.signup .login__form h5 {
	font-size: 15px;
	color: #ffffff;
	margin-top: 36px;
}

.signup .login__form h5 a {
	color: #e53637;
	font-weight: 700;
}

.signup .login__social__links {
	text-align: left;
	padding-left: 40px;
}

.signup .login__social__links h3 {
	color: #ffffff;
	font-weight: 700;
	font-family: "Oswald", sans-serif;
	margin-bottom: 30px;
}

.signup .login__social__links ul li a {
	margin: 0;
	text-align: center;
}

/*---------------------
  Footer
-----------------------*/

:root {
    /* Definindo variáveis de cor para facilitar a manutenção */
    --color-dark: #0f0f0f;
    --color-primary: #f11e1e;
    --color-accent: #f00f0f;
    --color-text-light: #04e2ff;
    --color-text-accent: #e7e7e7;
}

footer {
    background: var(--color-dark);
    padding: 60px 0 40px; /* Unificando o padding */
    position: relative;
}

.page-up {
    position: absolute;
    left: 50%;
    top: -25px;
    transform: translateX(-50%); /* Centraliza melhor o botão */
}

.page-up a {
    display: inline-block;
    font-size: 36px;
    color: #fff;
    height: 50px;
    width: 50px;
    background: var(--color-primary);
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: background 0.3s ease; /* Adicionando transição */
}

.page-up a:hover {
    background: var(--color-accent); /* Efeito de hover */
}

.page-up a span {
    position: relative;
    top: 2px;
    left: -1px;
}

.footer__nav {
    text-align: center;
    margin-top: 20px;
}

.footer__nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer__nav ul li {
    display: inline-block;
    margin-right: 40px;
}

.footer__nav ul li:last-child {
    margin-right: 0;
}

.footer__nav ul li a {
    font-size: 15px;
    color: var(--color-text-light);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease; /* Transição suave de cor */
}

.footer__nav ul li a:hover {
    color: var(--color-text-accent); /* Efeito de hover */
}

.footer__copyright__text {
    color: var(--color-text-light);
    margin-top: 20px;
    text-align: right;
    font-size: 14px;
}

.footer__copyright__text a {
    color: var(--color-text-accent);
    text-decoration: none;
}

.footer__copyright__text a:hover {
    text-decoration: underline; /* Adicionando underline no hover */
}


/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) and (max-width: 1300px) {
	.hero {
		overflow: hidden;
	}
}

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.hero {
		overflow: hidden;
	}

	.login__form {
		position: relative;
		padding-left: 32px;
	}

	.login__social__links ul li a {
		width: 380px;
	}

	.blog__item__text {
		padding: 0 50px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.hero {
		overflow: hidden;
	}

	.header {
		position: relative;
	}

	.header .container {
		position: relative;
	}

	.header__right {
		position: absolute;
		right: 120px;
		top: -42px;
		padding: 0;
	}

	.header__menu {
		display: none;
	}

	.slicknav_menu {
		background: transparent;
		padding: 0;
		display: block;
	}

	.slicknav_nav {
		position: absolute;
		left: 0;
		top: 60px;
		width: 100%;
		background: #ffffff;
		padding: 15px 30px;
		z-index: 9;
	}

	.slicknav_nav ul {
		margin: 0;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #111111;
		font-weight: 600;
	}

	.slicknav_btn {
		border-radius: 0;
		background-color: #222;
		position: absolute;
		right: 0;
		top: 9px;
	}

	.slicknav_nav .slicknav_arrow {
		color: #111111;
	}

	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}

	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}

	.product__sidebar {
		padding-top: 50px;
	}

	.footer__logo {
		text-align: center;
		margin-bottom: 20px;
	}

	.footer__nav {
		margin-bottom: 15px;
	}

	.footer__copyright__text {
		text-align: center;
	}

	.anime__details__widget ul li span {
		width: 90px;
	}

	.anime__details__pic {
		margin-bottom: 40px;
	}

	.anime__details__sidebar {
		padding-top: 50px;
	}

	.login__form {
		padding-left: 0;
		margin-bottom: 40px;
	}

	.login__form:after {
		display: none;
	}

	.login__form form .input__item {
		width: auto;
	}

	.login__register {
		padding-left: 0;
	}

	.signup .login__social__links {
		padding-left: 0;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	.hero {
		overflow: hidden;
	}

	.header {
		position: relative;
	}

	.header .container {
		position: relative;
	}

	.header__right {
		position: absolute;
		right: 120px;
		top: -42px;
		padding: 0;
	}

	.header__menu {
		display: none;
	}

	.slicknav_menu {
		background: transparent;
		padding: 0;
		display: block;
	}

	.slicknav_nav {
		position: absolute;
		left: 0;
		top: 60px;
		width: 100%;
		background: #ffffff;
		padding: 15px 30px;
		z-index: 9;
	}

	.slicknav_nav ul {
		margin: 0;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #111111;
		font-weight: 600;
	}

	.slicknav_btn {
		border-radius: 0;
		background-color: #222;
		position: absolute;
		right: 0;
		top: 9px;
	}

	.slicknav_nav .slicknav_arrow {
		color: #111111;
	}

	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}

	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}

	.product__sidebar {
		padding-top: 50px;
	}

	.footer__logo {
		text-align: center;
		margin-bottom: 20px;
	}

	.footer__nav {
		margin-bottom: 15px;
	}

	.footer__copyright__text {
		text-align: center;
	}

	.blog__details__title h2 {
		font-size: 34px;
		line-height: normal;
	}

	.anime__details__pic {
		margin-bottom: 40px;
	}

	.anime__details__sidebar {
		padding-top: 500px;
	}

	.btn__all {
		text-align: left;
	}

	.product__page__title .section-title {
		margin-bottom: 30px;
	}

	.anime__details__rating {
		text-align: left;
		position: relative;
		margin-bottom: 20px;
	}

	.blog__details__social {
		overflow: hidden;
	}

	.blog__details__title .blog__details__social a {
		margin-right: 10px;
		margin-bottom: 10px;
		width: calc(50% - 10px);
		float: left;
	}

	.login__form {
		padding-left: 0;
		margin-bottom: 40px;
	}

	.login__form:after {
		display: none;
	}

	.login__form form .input__item {
		width: auto;
	}

	.signup .login__social__links {
		padding-left: 0;
	}

	.login__social__links ul li a {
		width: auto;
	}

	.blog__item__text {
		padding: 0 30px;
	}

	.login__register {
		padding-left: 0;
	}

	.search-model-form input {
		width: 100%;
	}
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
    /* Hero Section */
    .hero__slider.owl-carousel .owl-nav {
        display: none;
    }

    .hero__items {
        padding: 250px 0 42px 15px;
    }

    .hero__text h2 {
        font-size: 32px;
    }

    /* Footer Navigation */
    .footer__nav ul li {
        margin-right: 10px;
    }

    /* Anime Details */
    .anime__details__btn .follow-btn {
        padding: 14px 26px;
        margin-right: 11px;
        margin-bottom: 25px;
    }

    .anime__details__widget ul li span {
        width: 85px;
    }

    /* Video Player */
    .anime__video__player .plyr__volume {
        left: 65px;
    }

    .anime__video__player .plyr__controls .plyr__controls__item.plyr__time {
        left: 95px;
    }

    .anime__video__player .plyr__menu {
        margin-right: 60px;
    }

    /* Blog Details */
    .blog__details__title h2 {
        font-size: 30px;
        line-height: normal;
    }

    .blog__details__title .blog__details__social a {
        padding: 16px 25px 14px 20px;
    }

    .blog__details__comment__item.blog__details__comment__item--reply {
        padding-left: 0;
    }

    .blog__details__comment__item__pic {
        margin-right: 25px;
    }

    .blog__details__comment__item__text a {
        margin-right: 6px;
    }

    /* Login Section */
    .login__social__links ul li a i {
        left: 20px;
    }

    .login__form .forget_pass {
        position: relative;
        left: 0;
        bottom: 0;
        margin-top: 25px;
    }

    .header__right a {
        margin-right: 10px;
    }

    /* Anime Review */
    .anime__review__item__text h6 span {
        font-size: 22px;
    }

    .anime__review__item__text {
        padding: 18px 20px 20px;
    }
}



/* Definindo variáveis de cores e fontes para facilitar a manutenção */
:root {
    --primary-color: #008cff;
    --highlight-color: #a9afff;
    --accent-color: #ff0000cc;
    --text-color-light: #d6f9fa;
    --text-color-dark: rgb(152, 228, 252);
    --background-overlay: rgba(0, 0, 0, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --box-shadow-light: rgba(245, 245, 245, 0.856);
    --font-size-base: 18px;
    --font-size-heading: 36px;
    --font-size-label: 20px;
    --font-size-title: 28px;
    --font-weight-bold: bold;
    --border-radius: 8px;
}

/* Estilo para o Hero Section */
.hero__items {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 60vh; /* Altura responsiva com base na altura da viewport */
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo */
    color: var(--text-color-dark);
}

.hero__text {
    background-color: var(--background-overlay);
    padding: 1.25rem; /* 20px usando rem */
    border-radius: var(--border-radius);
    max-width: 90%; /* Limita a largura do texto */
    text-align: center; /* Centraliza o texto */
}

.hero__text .label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: 0.625rem; /* 10px */
    color: var(--highlight-color);
}

.hero__text h2 {
    font-size: var(--font-size-heading);
    margin-bottom: 1rem; /* 15px */
    color: var(--text-color-light);
}

.hero__text p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-color-light);
}

/* Estilo para a seção de produtos ao vivo */
.live__product .section-title h4 {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 1.875rem; /* 30px */
    text-align: center;
}

/* Estilo para os itens de produto */
.product__item {
    margin-bottom: 3rem; /* 50px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(29, 29, 29, 0.71); /* Cor de fundo mais suave */
    box-shadow: 0 4px 8px var(--box-shadow-light); /* Sombra sutil */
}

.product__item:hover {
    transform: translateY(-0.625rem); /* Eleva o card no hover */
    box-shadow: 0 8px 16px var(--shadow-color); /* Aumenta a sombra no hover */
}

/* Estilo para a imagem do produto */
.product__item__pic {
    height: 300px;
    background-size: cover; /* Garante que a imagem cubra todo o espaço */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetições */
    width: 100%; /* Garante que a largura seja total */
}

/* Ajustando para telas menores */
@media (max-width: 768px) {
    .hero__items {
        height: 50vh; /* Menor altura do banner em dispositivos menores */
    }

    .hero__text h2 {
        font-size: 28px;
    }

    .hero__text p {
        font-size: 16px;
    }

    .product__item {
        margin-bottom: 2rem; /* 32px em dispositivos menores */
    }
}

@media (max-width: 479px) {
    .hero__text h2 {
        font-size: 24px;
    }

    .hero__text p {
        font-size: 14px;
    }

    .product__item__pic {
        height: 250px; /* Reduz a altura da imagem do produto em telas pequenas */
    }
}


.product__item__text {
    padding: 15px;
    text-align: center;
}

.product__item__text h5 a {
    font-size: 18px;
    color: #ff0000; /* Cor de destaque */
    text-decoration: none;
    transition: color 0.3s ease;
}

.product__item__text h5 a:hover {
    color: #0049e5; /* Cor de destaque no hover */
}

/* Flexbox para garantir alinhamento */
.row.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Correções de estilo */
.col-lg-8, .col-lg-4 {
    padding: 15px;
    box-sizing: border-box;
}

/* Garantir que as colunas ocupem o espaço certo */
.col-lg-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
}

.col-lg-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.product__sidebar__view__item {
    margin-bottom: 15px;
}

/* Ajuste para garantir que a sidebar não flutue para baixo */
.product__sidebar {
    display: flex;
    flex-direction: column;
}

/* Contêiner dos Anúncios e Créditos */
.sidebar-container {
    position: fixed; /* Fixa o contêiner na tela */
    top: 10px; /* Espaçamento do topo */
    right: 10px; /* Espaçamento da direita */
    width: 300px; /* Largura do contêiner */
    display: flex; /* Flexbox para layout vertical */
    flex-direction: column; /* Alinha os itens verticalmente */
    gap: 20px; /* Espaçamento entre os itens */
    z-index: 9999; /* Garante que o contêiner esteja acima de outros elementos */
}

/* Itens do Sidebar */
.sidebar-item {
    position: relative; /* Necessário para o posicionamento absoluto do conteúdo interno */
    width: 100%; /* Largura do item */
    height: 80px; /* Altura do item */
    background-size: cover;
    background-position: center;
    border-radius: 12px; /* Borda arredondada para um visual mais moderno */
    overflow: hidden; /* Oculta o conteúdo que ultrapassa as bordas do item */
    display: flex; /* Flexbox para centralizar o texto */
    align-items: center; /* Alinha o texto verticalmente */
    justify-content: center; /* Alinha o texto horizontalmente */
    background-color: rgba(0, 0, 0, 0.4); /* Fundo semitransparente para melhorar a visibilidade do texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra suave ao redor do item */
    transition: transform 0.3s, box-shadow 0.3s; /* Transição suave para efeitos de hover */
}

.sidebar-item:hover {
    transform: scale(1.05); /* Aumenta ligeiramente o item ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Aumenta a sombra no hover */
}

.sidebar-item h5 {
    margin: 0; /* Remove a margem padrão dos títulos */
    text-align: center; /* Alinha o texto ao centro */
    color: #fff; /* Cor do texto */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Destaca o texto */
}

/* Contêiner dos Anúncios e Créditos */
.sidebar-container {
    position: fixed; /* Fixa o contêiner na tela */
    top: 10px; /* Espaçamento do topo */
    right: 10px; /* Espaçamento da direita */
    width: 300px; /* Largura do contêiner */
    display: flex; /* Flexbox para layout vertical */
    flex-direction: column; /* Alinha os itens verticalmente */
    gap: 20px; /* Espaçamento entre os itens */
    z-index: 9999; /* Garante que o contêiner esteja acima de outros elementos */
}

/* Itens do Sidebar */
.sidebar-item {
    position: relative; /* Necessário para o posicionamento absoluto do conteúdo interno */
    width: 100%; /* Largura do item */
    height: 120px; /* Altura do item */
    background-size: cover;
    background-position: center;
    border-radius: 12px; /* Borda arredondada para um visual mais moderno */
    overflow: hidden; /* Oculta o conteúdo que ultrapassa as bordas do item */
    display: flex; /* Flexbox para centralizar o texto */
    align-items: center; /* Alinha o texto verticalmente */
    justify-content: center; /* Alinha o texto horizontalmente */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente para melhorar a visibilidade do texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra suave ao redor do item */
    transition: transform 0.3s, box-shadow 0.3s; /* Transição suave para efeitos de hover */
}

.sidebar-item:hover {
    transform: scale(1.05); /* Aumenta ligeiramente o item ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Aumenta a sombra no hover */
}

.sidebar-item h5 {
    margin: 0; /* Remove a margem padrão dos títulos */
    text-align: center; /* Alinha o texto ao centro */
    color: #d17c7c; /* Cor do texto */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Destaca o texto */
}

/* Créditos */
.sidebar-credits {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(0, 0, 0, 0.6)); /* Gradiente suave */
    padding: 15px; /* Espaçamento interno */
    border-radius: 12px; /* Borda arredondada para um visual mais moderno */
    box-shadow: 0 4px 20px rgba(207, 186, 186, 0.63); /* Sombra mais suave e pronunciada ao redor do contêiner */
    position: relative; /* Para permitir o posicionamento absoluto dos elementos de iluminação */
    overflow: hidden; /* Para evitar que os efeitos de iluminação saiam do contêiner */
}

/* Efeito de iluminação */
.sidebar-credits::before {
    content: ""; /* Cria um elemento vazio */
    position: absolute; /* Permite o posicionamento relativo ao contêiner */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 10%, rgba(255, 0, 0, 0) 70%); /* Efeito de brilho radial */
    pointer-events: none; /* Ignora eventos do mouse */
    animation: pulse 3s infinite; /* Animação de pulsação */
}

/* Animação de pulsação */
@keyframes pulse {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

.sidebar-credits .section-title {
    margin-bottom: 10px; /* Espaço abaixo do título */
    text-align: center; /* Alinha o título ao centro */
}

.sidebar-credits h5 {
    margin: 5px 0; /* Espaço entre itens de crédito */
    font-size: 14px; /* Tamanho da fonte */
    color: #ff0000; /* Cor do texto */
}

.sidebar-credits a {
    color: #ff0000; /* Cor dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-weight: bold; /* Destaca o texto dos links */
    transition: color 0.3s ease; /* Suaviza a transição de cor */
}

.sidebar-credits a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
    color: #fff; /* Muda a cor do link ao passar o mouse */
}


.anime__details__pic {
    border-radius: 15px; /* Bordas arredondadas */
    overflow: hidden;
    box-shadow:  4px 15px rgba(0, 0, 0, 0.6); /* Sombra ao redor da imagem */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave */
}

.anime__details__pic img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* Animação suave ao passar o mouse */
}

.anime__details__pic:hover {
    transform: scale(1.05); /* Aumenta levemente a imagem ao passar o mouse */
    box-shadow: 0 6px 20px rgba(252, 252, 252, 0.8); /* Aumenta a sombra ao passar o mouse */
}

.anime__details__pic img:hover {
    transform: scale(1.1); /* Zoom na imagem ao passar o mouse */
}

.anime__details__btn {
    text-align: center; /* Centraliza o botão */
    margin: 20px 0; /* Espaçamento em cima e embaixo */
}

.watch-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #000000; /* Cor de fundo preta */
    color: #ffffff;
    border-radius: 10px; /* Bordas arredondadas */
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.6); /* Sombra com brilho suave debaixo do botão */
}

.watch-btn:hover {
    background-color: #333333; /* Tom mais escuro no hover */
    transform: translateY(-5px); /* Elevação ao passar o mouse */
    box-shadow: 0 12px 30px rgba(0, 255, 255, 0.8); /* Brilho mais intenso no hover */
}

.watch-btn:active {
    transform: translateY(0); /* Remove elevação ao clicar */
    box-shadow: 0 4px 10px rgba(0, 255, 255, 0.4); /* Brilho reduzido ao clicar */
}

.watch-btn i {
    margin-left: 10px;
    font-size: 1.2em;
}

        /* Estilo do menu de navegação */
.navbar {
    background-color: #333333;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar a {
    color: #ff1818;
    text-decoration: none;
    margin-right: 15px;
    font-weight: bold;
}

/* Ajuste do contêiner principal */
.main-container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
}

/* Contêiner para anúncios e barra de progresso */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000; /* Garante que a barra de anúncios fique acima de outros elementos */
    margin-right: 20px;
    position: relative; /* Garantir que a sidebar se comporte como esperado em dispositivos móveis */
}

/* Botões dos anúncios */
.ad-button {
    width: 220px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    transition: background-color 0.3s;
}

.ad-discord { background-color: #5865f2; }
.ad-twitter { background-color: #1DA1F2; }
.ad-patreon { background-color: #FF424D; }

/* Hover Effects */
.ad-discord:hover { background-color: #940317; }
.ad-twitter:hover { background-color: #4f01b6; }
.ad-patreon:hover { background-color: #ffda0b; }

.progress-section {
    background-color: #1e1e2f;
    padding: 30px;
    border-radius: 12px;
    width: 300px;
    box-shadow: 0px 4px 15px rgb(255, 255, 255);
}

.progress-section h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #ffcc00;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-progress {
    margin-bottom: 25px;
}

.game-progress h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
}

.progress-bar-container {
    background-color: #292942;
    border-radius: 25px;
    overflow: hidden;
    height: 16px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    position: relative;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff0a0a, #00b3ff);
    border-radius: 25px;
    transition: width 0.6s ease;
    box-shadow: 0 4px 10px rgba(243, 243, 243, 0.4);
}

.progress-bar-container::before {
    content: attr(data-progress) "%";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    z-index: 1;
}

.game-progress p {
    text-align: right;
    margin-top: 5px;
    font-size: 12px;
    color: #bbbbbb;
}

/* Adiciona um efeito de brilho ao texto */
.game-progress h3, .progress-section h2 {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Estilos específicos para dispositivos móveis */
@media (max-width: 768px) {
    /* Escondendo a barra de progresso, mas mantendo os botões */
    .sidebar .progress-section {
        display: none; /* Esconde apenas a barra de progresso */
    }

    /* Garantir que os botões não sejam escondidos e fiquem acessíveis */
    .ad-button {
        width: 100%; /* Faz os botões se ajustarem à largura da tela em dispositivos móveis */
        margin-bottom: 10px; /* Espaçamento entre os botões */
    }
}