/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLucHtA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




:root {
	--max-width: 1200px;
	--border-radius: 12px;
	--font-mono: "Poppins", ui-monospace, Menlo, Monaco, "Cascadia Mono",
		"Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
		"Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

	/*COLOR*/
	--primary: 250, 0, 0;
	--secondary: 250, 240, 70;
	--black: 0, 0, 0;
	--white: 255, 255, 255;
	--gray: 153, 153, 153;
	--blackLight: 25, 25, 25;

	--foreground-rgb: 255, 255, 255;

	--main-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 1) 85%),
		radial-gradient(ellipse at top left, rgb(255 210 50 / 30%), transparent 50%),
		radial-gradient(ellipse at top right, rgb(255 100 100 / 30%), transparent 50%),
		radial-gradient(ellipse at center right, rgb(210 50 50 / 30%), transparent 50%),
		radial-gradient(ellipse at center left, rgb(210 170 50 / 30%), transparent 50%);

	--main-glow-flip: linear-gradient(0deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 1) 85%),
		radial-gradient(ellipse at bottom left, rgb(255 210 50 / 30%), transparent 50%),
		radial-gradient(ellipse at bottom right, rgb(255 100 100 / 30%), transparent 50%),
		radial-gradient(ellipse at bottom right, rgb(210 50 50 / 30%), transparent 50%),
		radial-gradient(ellipse at bottom left, rgb(210 170 50 / 30%), transparent 50%);

	--btn-glow: linear-gradient(-45deg, rgba(var(--primary), 0.7) 0%, rgba(var(--primary), 0.7) 91%);

}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline-width: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: var(--font-mono);
}

html,
body {
	color: rgb(var(--black));
	font-family: var(--font-mono);
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

ul,
ol {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
	transition: 0.2s;
}

img:hover {
	transition: 0.2s;
	transform: scale(0.90);
}

body {
	background-color: rgb(var(--foreground-rgb));
}

::selection {
	color: rgb(var(--white));
	background: rgb(var(--primary));
}

body::-webkit-scrollbar {
	width: 8px;
	background-color: rgba(var(--black), 4%);
}

body:not([no-y-overflow])::-webkit-scrollbar-thumb {
	height: 56px;
	border-radius: 8px;
	border: 0px solid transparent;
	background-clip: content-box;
	background-color: rgb(var(--black), 40%);
}

body::-webkit-scrollbar-thumb {
	height: 56px;
	border-radius: 8px;
	border: 0px solid transparent;
	background-clip: content-box;
	background-color: rgb(var(--black), 40%);
}

p {
	color: rgb(var(--black), 70%);
}

/*// Helper Class //*/
.block {
	display: block !important;
}

.none {
	display: none !important;
}

.paragraph p {
	padding-bottom: 16px;
}

.paragraph ul {
	list-style: initial !important;
}

.paragraph a {
	text-decoration: underline !important;
}

.paragraph a:hover {
	color: rgb(var(--primary));
}

.paragraph li {
	color: rgba(var(--black), 70%);
}

.sites {
	flex-wrap: wrap;
}

.sites .index {
	display: inline-flex;
	flex-flow: row wrap;
	width: 100%;
	background: rgba(var(--black), 7%);
	padding: 16px;
	margin-top: 16px;
	border-radius: 8px;
}

.sites {
	flex-wrap: wrap;
}

.sites .col {
	flex: inherit;
	text-align: left;
	width: 25%;
	display: inline-flex;
}


/*// Basic Class //*/
.btn:hover {
	box-shadow: rgba(var(--black), 20%) 0px 16px 30px 4px;
	transition: 0.2s;
	transform: scale(1);
}

.btn:before {
	content: "";
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	filter: blur(40px);
	opacity: var(0.8);
	transition: all 0.3s;
	border-radius: inherit;
	transform: translate3d(0px, 16px, 0) scale(0.80);
	z-index: -1;
}

.btn:hover:before {
	transition: all 0.3s;
	background: var(--btn-glow);
	display: block;
}


.btn:hover:after {
	display: block;
}

.btn:after {
	content: "";
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	z-index: -1;
}

.p-b-0 {
	padding-bottom: 0 !important;
}

.alink {
	text-decoration: underline !important;
}


/*// Header //*/
header,
footer {
	display: block;
	position: relative;
	width: 100%;
	align-items: center;
	background-image: var(--main-glow);
}

header .container,
footer .container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.menu__wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	margin: 0 auto;
	padding: 16px 0;
	position: relative;
}

.mobile-menu-trigger {
	display: none;
	cursor: pointer;
	padding: 8px;
}

.mobile-menu-trigger img {
	width: 24px;
	height: 24px;
}

.mobile-menu-trigger {
	display: none;
	cursor: pointer;
	padding: 8px;
}

.mobile-menu-trigger img {
	width: 24px;
	height: 24px;
}

/* Mobile Menu Styles */
.mobile-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: rgb(var(--white));
	padding: 16px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	border-radius: 0 0 12px 12px;
}

.mobile-nav.active {
	display: block;
}

.mobile-nav ul {
	flex-direction: column;
	align-items: flex-start;
}

.mobile-nav li {
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid rgba(var(--black), 0.05);
}

.mobile-nav li:last-child {
	border-bottom: none;
}

header .logo img {
	width: 50px;
}

nav>ul,
.menu__tool>ul {
	display: flex;
	align-items: center;
}

nav>ul>li {
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
	margin-right: 24px;
}

nav>ul>li a:hover {
	color: rgb(var(--primary));
	transition: 0.3s;
}

.menu {
	margin-left: auto;
}

.menu__tool {
	margin-left: 16px;
}

.menu__tool>ul>li {
	cursor: pointer;
	padding: 4px;
	margin: 0 4px;
	border-radius: 8px;
}

.menu__tool>ul>li:hover {
	background: rgba(var(--black), 0.05);
	transition: 0.3s;
}

.menu__tool>ul>li img {
	width: 28px;
}

.menu__tool>ul>li.app img {
	width: 110px;
}

.hero__wrapper {
	width: 100%;
	max-width: 900px;
	text-align: center;
	margin: 0 auto;
	padding-top: 120px;
	;
	padding-bottom: 80px;
}

.hero__wrapper h1 {
	font-size: 52px;
	line-height: 62px;
	font-weight: 700;
	margin-bottom: 8px;
}

.hero__wrapper h1>span {
	background: -webkit-linear-gradient(top, rgb(var(--primary)) 24%, rgb(var(--secondary)));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero__tabs {
	margin-top: 40px;
	margin-bottom: 40px;
}

.hero__tabs ul>li {
	display: inline-block;
}

.hero__tabs a {
	display: block;
	font-size: 16px;
	line-height: 16px;
	background: rgb(var(--black), 5%);
	padding: 8px 24px;
	border-radius: 8px;
}

.hero__tabs a.active {
	color: rgb(var(--primary));
	background: rgba(var(--primary), 7%);
	transition: 0.3s;
}


.hero__form {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.hero__inpit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 auto 16px auto;
}

.hero__inpit input {
	width: 100%;
	height: 60px;
	color: var(--black);
	font-size: 18px;
	line-height: 18px;
	font-weight: 500;
	background: rgba(var(--black), 1%);
	padding: 16px;
	border: 2px solid rgb(var(--primary));
	border-radius: 8px 0 0 8px;
	border-right: 0px;
}

.inpit__clear {
	display: flex;
	height: 60px;
	background: rgba(var(--black), 1%);
	padding-right: 12px;
	border: 2px solid rgb(var(--primary));
	border-radius: 0 8px 8px 0;
	border-left: 0px;
}


.inpit__clear img {
	display: none;
	cursor: pointer;
	width: 30px;
}

.hero__btn {
	cursor: pointer;
	position: relative;
	display: block;
	width: 100%;
	height: 60px;
	font-size: 18px;
	line-height: 60px;
	font-weight: 600;
	color: rgb(var(--white));
	background: rgb(var(--black));
	border-radius: 8px;
}




/*// Menu Tools //*/
.dropdown {
	position: relative;
}

.dropdown-content {
	display: none;
	position: absolute;
	width: 160px;
	background: rgb(var(--white));
	border-radius: 8px;
	box-shadow: 0px 3px 8px 0px #e1e1e1;
	overflow: hidden;
	z-index: 1;
}

.dropdown-content li {
	display: block;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 16px;
}

.dropdown-content li.select {
	color: rgb(var(--primary));
	background: rgba(var(--primary), 5%);
}

.dropdown-content li:hover {
	background: rgba(var(--black), 5%);
	transition: 0.3s;
}

.dropdown:hover .dropdown-content {
	display: block;
}


/*// Menu Tools //*/
.vd__section {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 40px;
}

.vd__section .container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
}

.vd__thumbnail {
	position: relative;
	display: block;
}

.vd__thumbnail>img {
	width: 600px;
	border: 8px solid rgb(var(--primary));
	border-radius: 16px;
}

.vd__thumbnail>img:hover {
	transform: scale(1);
}

.vd__overlay {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, rgb(var(--black)), rgb(var(--black), 40%));
	padding: 16px;
	border-radius: 16px;
}

.vd__title {
	color: rgb(var(--white), 90%);
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	margin-bottom: 4px;
}

.vd__profile {
	display: flex;
	align-items: center;
}

.vd__profile img {
	width: 30px;
	height: 30px;
	margin-right: 8px;
	border-radius: 50%;
}

.vd__user {
	color: rgb(var(--white), 60%);
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
}

.vd__format_list {
	background: rgba(var(--black), 5%);
	margin-top: 32px;
	padding: 0 16px;
	border-radius: 16px;
}

.vd__format_list ul {
	list-style: none;
}

.vd__format {
	display: flex;
	align-items: center;
	padding: 32px 0;
	border-bottom: 1px solid rgb(var(--gray), 0.2);
}

.vd__format_list ul li:last-child .vd__format {
	border-bottom: none;
}

.vd__format img {
	width: 48px;
	background: #FFC107;
	margin-right: 16px;
	padding: 8px;
	border-radius: 50%;
}

.vd__format.audio img {
	background: #00BCD4;
}

.vd__format__info {
	font-size: 16px;
	font-weight: 600;
}

.vd__download {
	cursor: pointer;
	font-size: 16px;
	line-height: 16px;
	font-weight: 600;
	color: rgba(var(--white), 90%);
	background: rgba(var(--black));
	padding: 12px 24px;
	margin-left: auto;
	border-radius: 4px;
}

/*// Section Setting //*/
main {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}

.section {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 40px;
	padding: 100px 80px;
	background: linear-gradient(180deg, rgb(var(--white)), #fff4d1);
	border-radius: 30px;
}

.container {
	width: 100%;
	max-width: 700px;
	padding-bottom: 32px;
}

.container:not(:is(:has(~ .feature__list))) {
	padding-bottom: 0;
}

.container h2 {
	font-size: 32px;
	line-height: 42px;
	padding-bottom: 16px;
}

.footer-nav,
.feature__list {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.col {
	flex: 1;
	text-align: left;
	padding: 16px 16px 0;
	margin: 16px 16px 0;
}

.col img {
	padding-bottom: 16px;
}

.col h3 {
	font-size: 20px;
	line-height: 30px;
	padding-bottom: 8px;
}

dl dt {
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	padding-bottom: 4px;
}

dl dd {
	color: rgb(var(--black), 70%);
	padding-bottom: 24px;
}

footer {
	background: var(--main-glow-flip);
	padding: 60px 0;
}

footer h4 {
	font-size: 18px;
	line-height: 28px;
	padding-bottom: 16px;
}

footer a {
	display: inline-block;
	padding-bottom: 8px;
}

footer a:hover {
	color: rgba(var(--primary));
}


.copy {
	width: 100%;
	padding: 36px 36px 0px;
	color: rgb(var(--black), 70%);
}

.copy a {
	text-decoration: underline !important;
}


@media (max-width: 768px) {

	header nav,
	.menu__tool,
	.hero__wrapper h1 br {
		display: none;
	}

	.mobile-menu-trigger {
		display: block;
		order: 1;
		/* Left side */
	}

	header .logo {
		order: 2;
		/* Center */
		margin: 0 auto;
	}

	.menu__wrapper {
		justify-content: space-between;
	}

	.menu {
		display: none;
	}

	header .container,
	footer .container {
		padding-right: 80px;
		padding-left: 80px
	}

	.footer-nav,
	.feature__list {
		flex-direction: column;
	}
}

@media (max-width: 768px) {

	header nav,
	.hero__wrapper h1 br {
		display: none;
	}

	.hero__wrapper h1 {
		font-size: 42px;
		line-height: 52px;
	}

	.hero__tabs ul>li {
		padding: 8px;
	}

	.copy {
		padding-right: 0;
		padding-left: 0;
	}

	.vd__section .container {
		padding-right: 16px;
		padding-left: 16px
	}

	.section {
		padding-right: 40px;
		padding-left: 40px
	}

	header .container,
	footer .container {
		padding-right: 40px;
		padding-left: 40px
	}

	.col {
		padding-right: 0;
		padding-left: 0;
		margin-right: 0;
		margin-left: 0;
	}

	.vd__download {
		padding: 16px 28px;
		margin-left: initial;
	}

	.vd__format img {
		margin-right: 0;
		margin-bottom: 8px;
	}

	.vd__format>* {
		margin-bottom: 16px;
	}



	footer {
		padding-top: 0;
	}

	.vd__format,
	.footer-nav,
	.feature__list {
		flex-direction: column;
	}
}


@media (max-width: 375px) {

	header nav,
	.hero__wrapper h1 br {
		display: none;
	}

	.hero__wrapper {
		padding: 40px 0;
	}

	.hero__wrapper h1 {
		font-size: 32px;
		line-height: 42px;
	}

	.hero__tabs ul>li {
		padding: 8px;
	}

	.copy {
		padding-right: 0;
		padding-left: 0;
	}

	.vd__section .container {
		padding-right: 16px;
		padding-left: 16px
	}

	.section {
		padding-right: 40px;
		padding-left: 40px
	}

	header .container,
	footer .container {
		padding-right: 40px;
		padding-left: 40px
	}

	.col {
		padding-right: 0;
		padding-left: 0;
		margin-right: 0;
		margin-left: 0;
	}

	.vd__download {
		padding: 16px 28px;
		margin-left: initial;
	}

	.vd__format img {
		margin-right: 0;
		margin-bottom: 8px;
	}

	.vd__format>* {
		margin-bottom: 16px;
	}

	footer {
		padding-top: 0;
	}

	.vd__format,
	.footer-nav,
	.feature__list {
		flex-direction: column;
	}
}

:root {
	/*	DarkColor*/
	--dark-foreground-rgb: 15, 15, 15;
	--d-white: 240, 240, 240;
	--d-black: 15, 15, 15;

	--dark-main-glow: linear-gradient(180deg, rgba(15, 15, 15, 0.01), rgba(15, 15, 15, 1) 85%),
		radial-gradient(ellipse at top left, rgb(255 210 50 / 30%), transparent 50%),
		radial-gradient(ellipse at top right, rgb(255 100 100 / 30%), transparent 50%),
		radial-gradient(ellipse at center right, rgb(210 50 50 / 30%), transparent 50%),
		radial-gradient(ellipse at center left, rgb(210 170 50 / 30%), transparent 50%);

	--dark-main-glow-flip: linear-gradient(0deg, rgba(15, 15, 15, 0.01), rgba(15, 15, 15, 1) 85%),
		radial-gradient(ellipse at bottom left, rgb(255 210 50 / 30%), transparent 50%),
		radial-gradient(ellipse at bottom right, rgb(255 100 100 / 30%), transparent 50%),
		radial-gradient(ellipse at bottom right, rgb(210 50 50 / 30%), transparent 50%),
		radial-gradient(ellipse at bottom left, rgb(210 170 50 / 30%), transparent 50%);
}

body.dark-mode {
	color: rgb(var(--d-white));
}

body.dark-mode {
	background-color: rgb(var(--dark-foreground-rgb));
}

body.dark-mode::-webkit-scrollbar {
	background-color: rgba(var(--d-white), 4%);
}

body.dark-mode::-webkit-scrollbar-thumb,
body.dark-mode:not([no-y-overflow])::-webkit-scrollbar-thumb {
	background-color: rgb(var(--d-white), 40%);
}

body.dark-mode p {
	color: rgb(var(--d-white), 70%);
}

body.dark-mode .btn:hover {
	box-shadow: rgba(var(--d-white), 20%) 0px 16px 30px 4px;
}

body.dark-mode .btn:hover:before {
	background: var(--btn-glow);
}

body.dark-mode header,
body.dark-mode footer {
	background-image: var(--dark-main-glow);
}

body.dark-mode .hero__tabs a,
body.dark-mode .menu__tool>ul>li:hover {
	background: rgba(var(--d-white), 10%);
}

body.dark-mode .hero__wrapper h1>span {
	background: -webkit-linear-gradient(top, rgb(var(--primary)) 24%, rgb(var(--secondary)));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

body.dark-mode .hero__tabs a.active {
	color: rgb(var(--primary));
	background: rgba(var(--primary), 7%);
}

body.dark-mode .hero__inpit input {
	color: var(--d-white);
	background: rgba(var(--d-white), 1%);
	border: 2px solid rgb(var(--primary));
	border-right: 0px;
}

body.dark-mode .inpit__clear {
	background: rgba(var(--d-white), 1%);
	border: 2px solid rgb(var(--primary));
	border-left: 0px;
}

body.dark-mode .hero__btn {
	color: rgb(var(--d-white));
	background: #444444;
}

body.dark-mode .dropdown-content {
	background: rgb(var(--d-black));
	box-shadow: 0px 3px 8px 0px #191919;
}

body.dark-mode .dropdown-content li.select {
	color: rgb(var(--primary));
	background: rgba(var(--primary), 7%);
}

body.dark-mode .dropdown-content li:hover {
	background: rgba(var(--d-white), 10%);
}

body.dark-mode .vd__thumbnail>img {
	border: 8px solid rgb(var(--primary));
}

body.dark-mode .vd__overlay {
	background: linear-gradient(0deg, rgb(var(--black)), rgb(var(--black), 40%));
}

body.dark-mode .vd__title {
	color: rgb(var(--d-white), 90%);
}

body.dark-mode .vd__user {
	color: rgb(var(--d-white), 60%);
}

body.dark-mode .vd__format_list {
	background: rgba(var(--d-white), 10%);
}

body.dark-mode .vd__format {
	border-bottom: 1px solid rgb(var(--gray), 0.2);
}

body.dark-mode .vd__format img {
	background: #FFC107;
}

body.dark-mode .vd__format.audio img {
	background: #00BCD4;
}

body.dark-mode .vd__format__info {
	color: rgba(var(--d-white), 70%);
}

body.dark-mode .vd__download {
	color: rgba(var(--d-white), 90%);
	background: #444444;
}

body.dark-mode .col img {
	padding-bottom: 16px;
	opacity: 0.8;
}

body.dark-mode .section {
	background: linear-gradient(180deg, rgb(var(--d-black)), #413304);
}

body.dark-mode dl dd {
	color: rgb(var(--d-white), 70%);
}

body.dark-mode footer {
	background: var(--dark-main-glow-flip);
}

body.dark-mode footer a:hover {
	color: rgba(var(--primary));
}

body.dark-mode .copy {
	color: rgb(var(--d-white), 70%);
}

body.dark-mode .paragraph li {
	color: rgba(var(--d-white), 70%);
}

body.dark-mode .sites .index {
	background: rgba(var(--d-white), 7%);
}