/*START CSS RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*END CSS RESET */
/*START all site*/
* {
	transition: all .3s;
}

html {
	background: #181818;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
	backdrop-filter: blur(25px) saturate(186%);
	-webkit-backdrop-filter: blur(25px) saturate(186%);
	background-color: rgb(13 13 13 / 70%);
	width: 100%;
	display: flex;
	justify-content: center;
	font-family: inter;
	color: white;
	position: relative;
	height: 1500px;
}

@media (min-width:768.1px) and (max-width:1440px) {
	body {
		height: 246vw;
	}
}

body::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1000000;
	background-image: url("../image/otis-redding.png");
	background-repeat: repeat;
	background-size: auto;
	opacity: 1;
	mix-blend-mode: overlay;
}

.container {
	width: 85%;
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.inter-font {
	font-family: "inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

.roboto-font {
	font-family: "roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
}

.nunito-sans-fo {
	font-family: "Nunito Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings:
		"wdth" 100,
		"YTLC" 500;
}

.gabarito-font {
	font-family: "Gabarito", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}


.halo {
	position: fixed;
	border-radius: 50%;
	filter: blur(6vw);
	opacity: 0.5;
	mix-blend-mode: screen;
	z-index: 0;
}

.halo1 {
	width: 30vw;
	height: 30vw;
	background: rgba(199, 139, 74, 0.948);
	top: 5vw;
	left: -4vw;
}

.halo2 {
	width: 30vw;
	height: 30vw;
	background: rgb(31 223 223 / 40%);
	top: 55vw;
	right: -17vw;
	position: absolute;
}

.halo3 {
	width: 14vw;
	height: 14vw;
	background: rgb(255 255 0 / 28%);
	top: 53vw;
	left: 22vw;
	z-index: 0;
}

.haloo1 {
	top: 95vw;
	left: -12vw;
}

.haloo2 {
	top: 130vw;
}

.haloo3 {
	top: 188vw;
	left:-12vw;
}

.haloo4 {
	top: 215vw;
}

.btnco {
	color: #000000;
	border: none;
	padding: 1vw 2.5vw 1vw 2.3vw;
	font-size: 1.1vw;
	font-family: roboto;
	font-weight: 500;
	border-radius: 4vw;
	background: #96C671 ;
	background: linear-gradient(90deg, rgba(150, 198, 113, 1) 0%, rgba(242, 200, 97, 1) 81%) ;
	background-size: 400% 400%;
	animation: gradientAnim 2s ease infinite;
}

.btnco:hover {
	transform: translateX(0.2vw);
	cursor: pointer;
}

@keyframes gradientAnim {
	0% {
		background-position: 0% 50%;
	}

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

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

.btntx {
	color: #ffffff;
	border: .1vw solid #00000000;
	padding: 1vw 1.5vw;
	font-size: 1.1vw;
	font-family: roboto;
	font-weight: 500;
	border-radius: 4vw;
	background: none;
	display: flex;
	align-items: center;
	gap: 0.6vw;
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.btntx::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4vw;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
	z-index: 0;
	pointer-events: none;
}

.btntx:hover::before {
	transform: scaleX(1);
}

.btntx .arrow {
	opacity: 0;
	transform: translateX(-10px);
	transition: all 0.3s ease;
	font-size: 1.3vw;
	position: relative;
	z-index: 1;
}

.btntx:hover {
	transform: translateX(-0.2vw);
	border: 0.1vw solid white;
	cursor: pointer;
}

.btntx:hover .arrow {
	opacity: 1;
	transform: translateX(0);
}

/*END all site*/
/*START header */
header {
	width: 100%;
	padding-top: 1vw;
	display: flex;
	justify-content: space-between;
	color: white;
}

header ul {
	display: flex;
	gap: 1.2vw;
}

header ul li {
	padding: 1.3vw 1.8vw;
	border-radius: 4vw;
	font-family: roboto;
	font-size: 1.4vw;
	border: .1vw solid #00000000;
}

header ul li:nth-child(4) {
	border: solid .1vw white;
	margin-left: .5vw;
}

header ul li:nth-child(4):hover {
	background-color: white;
	color: #000000;
	transform: scale(1);
	cursor: pointer;
}

header ul li:not(:nth-child(4)):hover {
	border: white solid .1vw;
	color: white;
	cursor: pointer;
	transform: scale(1.1);
}

.hlogo p {
	font-size: 1.5vw;
	margin-top: 1vw;
}

/*END header */
/*START SECTION1 - START */
.s1 {
	display: flex;
	flex-wrap: wrap;
	margin-top: 7vw;
}

.s1 div {
	flex-wrap: wrap;
}

.s1-left {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	gap: 3.5vw;
}

.s1-left h1 {
	font-size: 6vw;
	font-family: Gabarito;
	font-weight: 500;
	width: 39vw;
}

.p-titles {
	font-size: 1.1vw;
	line-height: 2vw;
}

.s1-left .p-titles {
	font-size: 1.1vw;
	line-height: 2vw;
	width: 35vw;
}

.s1-right {
	position: relative;
	width: 40%;
}

.s1-bottom {
	width: 100%;
	background: rgb(11 11 11 / 73%);
	border-radius: 2vw;
	backdrop-filter: blur(2vw);
	box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(12.8px);
	display: flex;
	margin-top: 6vw;
	padding: 5vw;
}

.stbtn {
	display: flex;
	gap: 1.3vw;
}

.s1-right img:nth-child(1) {
	position: absolute;
	width: 46vw;
	left: -4vw;
	top: -4vw;
}

.s1-right img:nth-child(2) {
	position: absolute;
	width: 12vw;
	left: 2vw;
	top: 0vw;
	transform: rotate(26deg);
	z-index: -1;
	height: 17vw;
}

.s1-right img:nth-child(3) {
	position: absolute;
	width: 7vw;
	left: 34vw;
	height: 43vw;
	top: 0vw;
	transform: rotate(190deg) scaleX(-1);
	z-index: -1;
}

.s1bl {
	width: 60%;
	display: flex;
	gap: 3.5vw;
	justify-content: start;
	align-items: center;
}

.cards1 {
	display: flex;
	flex-direction: column;
	gap: 1vw;
}

.s1bl p:nth-child(1) {
	font-size: 1.3vw;
}

.s1bl p:nth-child(2) {
	font-size: 3.5vw;
	margin-bottom: 1vw;
	font-weight: 600;
}

.s1br {
	width: 40%;
	display: flex;
	flex-direction: column;
	gap: 2vw;
	justify-content: center;
	align-items: start;
}

.topb1 {
	display: flex;
	gap: 2vw;
}

.topb1 p:nth-child(1) {
	font-size: 1.3vw;
	margin-top: .2vw;
}

.topb1 p:nth-child(2) {
	font-size: 1.8vw;
	font-weight: 600;
}

.botb1 {
	display: flex;

}

.botb1 div {
	width: 5vw;
	height: 5vw;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	margin-left: -1vw;
}

.botb1 div:hover {
	transform: scale(1.2) translateX(-1.3vw);
}

.botb1 img {
	position: absolute;
	width: 5vw;
	height: 5vw;
}

/*END SECTION1 - START */
/*START SECTION2 - HOT TRENDING */
.s2 {
	display: flex;
	margin-top: 13vw;
	gap: 2vw;
}

.left-s2 {
	display: flex;
	flex-wrap: wrap;
	width: 55%;
	gap: 2vw;
	justify-content: center;
	align-items: center;
}

.right-s2 {
	width: 45%;
	display: flex;
	flex-direction: column;
	gap: 2vw;
}

.left-s2 div {
    height: 12vw;
    width: 18.5vw;
    border-radius: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: end;
	margin-bottom: 4vw;
    /* flex-grow: 1; */
    /* flex-shrink: 1; */
}

.left-s2 div:nth-child(1) {
	background: #433F30;
	background: linear-gradient(90deg, rgba(67, 63, 48, 1) 0%, rgba(67, 67, 47, 1) 50%, rgba(45, 47, 39, 1) 100%);
}

.left-s2 div:nth-child(2) {
    background: #353F33;
    background: linear-gradient(90deg, rgba(53, 63, 51, 1) 0%, rgba(52, 67, 54, 1) 40%, rgba(48, 79, 69, 1) 100%);
}

.left-s2 div:nth-child(3) {
	background: #565553;
	background: linear-gradient(90deg, rgba(86, 85, 83, 1) 0%, rgba(91, 79, 79, 1) 40%, rgba(77, 54, 48, 1) 100%);
}

.left-s2 div:nth-child(4) {
	background: #423931;
	background: linear-gradient(90deg, rgba(66, 57, 49, 1) 0%, rgba(65, 55, 45, 1) 40%, rgba(73, 57, 47, 1) 100%);
}

.left-s2 div:nth-child(1) img {
	width: 80%;
}

.left-s2 div:nth-child(2) img {
    width: 103%;
    margin-right: 2.2vw;
}

.left-s2 div:nth-child(3) img {
	width: 80%;
	margin-right: 1.3vw;
}

.left-s2 div:nth-child(4) img {
	width: 80%;
}

.green-txt {
	color: #aac495;
	font-size: 1.1vw;
}

.titles {
    font-size: 4vw;
	line-height: 4.2vw;
    font-weight: 600;
}

.titles span {
	display: block;
}

.btntx2 {
	padding-left: 0;
	transition: padding-left .5s;
	width: 9vw;
}

.btntx2:hover {
	padding-left: 1.5vw;
}
/*END SECTION2 - HOT TRENDING */
/*START SECTION3 -  TOP LIST */
.s3 {
	margin-top: 10vw;
	display: flex;
}

.left-s3 {
	display: flex;
	flex-direction: column;
	gap: 2vw;
	width: 35%;
}

.right-s3 {
	display: flex;
	gap: 1vw;
	flex-wrap: wrap;
	width: 65%;
}

.cards3 {
    background-color: #181818e6;
    border-radius: 2.3vw;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    flex-grow: 1;
    gap: .8vw;
}

.cards3 img:nth-child(1)  {
	border-radius: 50%;
	width: 25%;
	position: absolute;
	top: -3.5vw;
}

.cards3 img:nth-child(2) {
    width: 1.3vw;
    margin-top: 4.5vw;
    margin-right: .5vw;
}

.cards3 p:nth-child(3) {
    font-family: roboto;
    font-weight: 500;
    font-size: 1.4vw;
}

.cards3 p:nth-child(4) {
	font-size: .95vw;
}

.spacer {
	flex-grow: 1;
	flex-shrink: 1;
	width: 100%;
}


.cards3 img:last-child {
	object-fit: cover;
	width: 100%;
	object-position: center 38%;
	height: 12vw;
	border-radius: 2.3vw;
}

/*END SECTION3 - TOP LIST */
/*START SECTION4 - apps */
.s4 {
	margin-top: 9.5vw;
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 2.5vw;
	height: 11vw;
	justify-content: center;
	align-items: center;
	margin-bottom: 9vw;
}

.s4 img {
  height: 2.5vw;
  width: auto;
  object-fit: contain;
  flex-grow: 1;
  flex-shrink: 1;
}
/*END SECTION4 - apps */
/*START SECTION5 - SUBSCRIBE */
.s5 h3 {
    font-size: 7vw;
    width: 76vw;
    font-weight: 500;
    font-family: roboto;
    margin-bottom: 4vw;
}

.s5 button {
	width: 12vw;
	margin-bottom: 7vw;
	height: 4vw;
}
/*END SECTION5 - SUBSCRIBE */
/*START FOOTER */
footer {
	margin-top: 3vw;
	display: flex;
	gap: 3vw;
}

.footl {
	width: 35%;
	display: flex;
	flex-direction: column;
	gap: 2vw;
}

.footl p:nth-child(1) {
    font-size: 1.5vw;
    margin-top: 1vw;
}

.logo-apps {
	display: flex;
	gap: 1.5vw;
}

.logo-apps i {
	font-size: 1.5vw;
}

.logo-apps i:hover {
	cursor: pointer;
	transform:scale(1.2);
}

.footl p:nth-child(4) {
	font-size: 1vw;
}

.footr {
	width: 65%;
	display: flex;
}

.footr table {
	flex-shrink: 1;
	flex-grow: 1;
	text-align: left;
}

footer th {
	font-weight: 600;
	font-size: 1.5vw;
	padding-bottom: 2vw;
	width: 2vw;;
}

footer td {
	font-size: 1.2vw;
	height: 1vw;
	padding-left: .1vw;
}

footer td:hover {
	cursor: pointer;
	transform: translateX(1vw) scale(1.1);
}

/*END FOOTER*/

#main-content {
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#loader {
  position: fixed;
  z-index: 9999;
  background-color: #0f0f0f; 
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newtons-cradle {
 --uib-size: 50px;
 --uib-speed: 1.2s;
 --uib-color: #474554;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: var(--uib-size);
 height: var(--uib-size);
}

.newtons-cradle__dot {
 position: relative;
 display: flex;
 align-items: center;
 height: 100%;
 width: 25%;
 transform-origin: center top;
}

.newtons-cradle__dot::after {
 content: '';
 display: block;
 width: 100%;
 height: 25%;
 border-radius: 50%;
 background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
 animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
 animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
 0% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 25% {
  transform: rotate(70deg);
  animation-timing-function: ease-in;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }
}

@keyframes swing2 {
 0% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 75% {
  transform: rotate(-70deg);
  animation-timing-function: ease-in;
 }
}

@media (min-width:768.1px) and (max-width:1440px) {
	
.haloo5 {
	display: none;
}

.haloo6 {
    display: none;
}

.haloo7 {
    display: none;
}

.haloo8 {
    display: none;
}

.haloo9 {
    display: none;
}

.haloo10 {
    display: none;
}

.haloo11 {
    display: none;
}

.haloo12 {
    display: none;
}

.haloo13 {
    display: none;
}

.haloo14 {
    display: none;
}
}