@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "Noto Sans", sans-serif;
}

:root {
  --text-color: #21222c;
  --gray-color: #515152;
  --bg-color: #fff;
  --forground-color: #f4f4f6;
  --white-color: #fff;
  --black-color: #000;
  --primary-color: #fd4d0d;
  --error-color: #ff0000;
  --border-color: #ebebf0;
}

html[data-theme="dark"] {
  --text-color: #f4f4f6;
  --gray-color: #ababae;
  --bg-color: #13141a;
  --forground-color: #21222c;
  --white-color: #fff;
  --black-color: #000;
  --primary-color: #fd6a35;
  --error-color: #ff0000;
  --border-color: #282a36;
}

body {
  font-family: "Noto Sans", sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  font-size: 15px;
  padding-top: 100px;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  text-decoration: underline;
}

img {
  width: 100%;
  display: block;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 16px;
}

.header {
  position: fixed;
  top: 20px;
  left: 0px;
  right: 0px;
  z-index: 1000;
  padding: 0 16px;
}

.header .container {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 42px 0 #00000014;
  backdrop-filter: blur(10px);
  border-radius: 1rem;
}

html[data-theme="dark"] .header .container {
  background-color: rgba(0, 0, 0, 0.8);
}

.header__logo a,
.site__logo a {
  display: flex;
  color: var(--text-color);
  font-size: 1.2rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: 700;
  background: url("../images/logo.png") center left no-repeat;
  background-size: contain;
  height: 35px;
  padding-left: 45px;
  letter-spacing: 0.5px;
}

.site__logo a {
  height: 50px;
  padding-left: 60px;
  font-size: 1.5rem;
}

.header__logo a img {
  width: 40px;
  margin-right: 1rem;
}

.header__menu {
  margin-left: auto;
}

.header__menu_list {
  display: flex;
  align-items: center;
  list-style: none;
}

.header__menu_list li {
  margin-left: 0.5rem;
  position: relative;
}

.header__menu_dropdown {
  position: absolute;
  top: calc(100% + 10px);
  background: var(--bg-color);
  box-shadow: 0 5px 42px 0 #00000014;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all;
  list-style: none;
  width: 200px;
  padding: 10px;
  right: 0;
}

.mobile_only {
  display: none;
}

.header__menu_dropdown::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  top: -10px;
  opacity: 0;
}

.header__menu_dropdown li {
  margin: 0;
}

.header__menu_dropdown li a {
  color: var(--text-color);
  padding: 0.4rem 0.6rem !important;
  display: block;
  transition: 0.3s all;
  border-radius: 5px;
}

.header__menu_list li:hover .header__menu_dropdown {
  opacity: 1;
  visibility: visible;
}

.header__menu_list li a,
.header__menu_list li span {
  color: var(--text-color);
  padding: 0.5rem 0.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s all;
  font-size: 14px;
}

.header__menu_list li a:hover,
.header__menu_list li span:hover,
.header__menu_list li.active > a,
.header__menu_list li.active > span {
  color: var(--primary-color);
  text-decoration: none;
}

.has__submenu .header__menu_dropdown {
  display: none;
}

.has__submenu {
  position: relative;
}

.arrow_down {
  display: none;
}

.has__submenu .arrow_down {
  content: "";
  position: absolute;
  right: -10px;
  top: -2px;
  height: 40px;
  width: 50px;
  transition: 0.3s all;
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23000' fill='%23000' stroke-width='0' viewBox='0 0 512 512' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
  z-index: 1;
  display: flex;
  cursor: pointer;
}

html[data-theme="dark"] .has__submenu .arrow_down {
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23fff' fill='%23fff' stroke-width='0' viewBox='0 0 512 512' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'%3E%3C/path%3E%3C/svg%3E");
}

.has__submenu.active .arrow_down {
  transform: rotate(180deg);
}

.forbidden__found__section {
  display: none;
}

.forbidden__found__section img {
  max-height: 400px;
}

.forbidden__found__section h3 {
  text-align: center;
  position: relative;
  top: -30px;
}

.toggle_button {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' fill='none' aria-hidden='true' focusable='false'%3E%3Cg%3E%3Cpath d='M21.0672 11.8568L20.4253 11.469L21.0672 11.8568ZM12.1432 2.93276L11.7553 2.29085V2.29085L12.1432 2.93276ZM21.25 12C21.25 17.1086 17.1086 21.25 12 21.25V22.75C17.9371 22.75 22.75 17.9371 22.75 12H21.25ZM12 21.25C6.89137 21.25 2.75 17.1086 2.75 12H1.25C1.25 17.9371 6.06294 22.75 12 22.75V21.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75V1.25C6.06294 1.25 1.25 6.06294 1.25 12H2.75ZM15.5 14.25C12.3244 14.25 9.75 11.6756 9.75 8.5H8.25C8.25 12.5041 11.4959 15.75 15.5 15.75V14.25ZM20.4253 11.469C19.4172 13.1373 17.5882 14.25 15.5 14.25V15.75C18.1349 15.75 20.4407 14.3439 21.7092 12.2447L20.4253 11.469ZM9.75 8.5C9.75 6.41182 10.8627 4.5828 12.531 3.57467L11.7553 2.29085C9.65609 3.5593 8.25 5.86509 8.25 8.5H9.75ZM12 2.75C11.9115 2.75 11.8077 2.71008 11.7324 2.63168C11.6686 2.56527 11.6538 2.50244 11.6503 2.47703C11.6461 2.44587 11.6482 2.35557 11.7553 2.29085L12.531 3.57467C13.0342 3.27065 13.196 2.71398 13.1368 2.27627C13.0754 1.82126 12.7166 1.25 12 1.25V2.75ZM21.7092 12.2447C21.6444 12.3518 21.5541 12.3539 21.523 12.3497C21.4976 12.3462 21.4347 12.3314 21.3683 12.2676C21.2899 12.1923 21.25 12.0885 21.25 12H22.75C22.75 11.2834 22.1787 10.9246 21.7237 10.8632C21.286 10.804 20.7293 10.9658 20.4253 11.469L21.7092 12.2447Z' fill='%23000' stroke-width='1.5'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
    center no-repeat;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-size: 17px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-left: 20px;
}

html[data-theme="dark"] .toggle_button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' fill='none' aria-hidden='true' focusable='false'%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='5' stroke='%23fff' stroke-width='1.5'%3E%3C/circle%3E%3Cpath d='M12 2V4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M12 20V22' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M4 12L2 12' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M22 12L20 12' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M19.7778 4.22266L17.5558 6.25424' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M4.22217 4.22266L6.44418 6.25424' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M6.44434 17.5557L4.22211 19.7779' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M19.7778 19.7773L17.5558 17.5551' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.toogle_menu {
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-size: 17px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-left: 20px;
  background-color: transparent;
  position: relative;
  display: none;
}

.toogle_menu span,
.toogle_menu span::before,
.toogle_menu span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-color);
  transition: 0.3s all;
  border-radius: 5px;
}

.toogle_menu span::before {
  top: -4px;
}

.toogle_menu span::after {
  top: 6px;
}

.hero__section_content {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.hero__section {
  padding: 80px 0 0;
}

.hero__section .container {
  max-width: 800px;
}

.hero__section_title {
  font-size: 2.25rem;
}

.hero__section_subtitle {
  font-size: 1.125rem;
  color: var(--text-color);
}

.hero__section_description {
  font-size: 14px;
}

.hero__section_title span {
  color: var(--primary-color);
}

.hero__section_form {
  width: 100%;
}

.input_wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.hero__section_form input {
  flex: 1;
  box-shadow: 0 5px 20px 0 #00000010;
  appearance: none;
  padding: 17px 15px 17px 15px;
  background-color: var(--bg-color);
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-color);
  outline: none;
  transition: 0.3s all;
  color: var(--text-color);
}

.how__to__use img {
  border-radius: 20px;
  border: 2px solid var(--border-color);
}

.error__msg {
  text-align: left;
  color: var(--error-color);
  font-size: 0.7rem;
  display: none;
  position: absolute;
  bottom: -17px;
  left: 0;
}

.input_wrapper.error .error__msg {
  display: block;
}

.hero__section_form input::placeholder {
  opacity: 0.7;
}

.hero__section_form input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

.hero__section_form form {
  display: flex;
  align-items: center;
}

.hero__section_form button {
  margin-left: 15px;
  border-radius: 0.375rem;
  padding: 17px 15px 17px 15px;
  background-color: var(--primary-color);
  color: var(--bg-color);
  font-size: 0.875rem;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s all;
  width: 140px;
  font-weight: 500;
}

.hero__section_form button:hover {
  opacity: 0.9;
}

.hero__section_content .bookmark__text {
  font-size: 12px;
}

.content__section .container {
  max-width: 900px;
}

.content__wrapper {
  background-color: var(--forground-color);
  padding: 80px 0;
  border-radius: 1rem;
  padding: 30px;
}

.content__wrapper h1 {
  font-size: 2rem;
  text-align: center;
}

.content__wrapper h2 {
  text-align: center;
  font-size: 1.5rem;
}

.content__wrapper h2 span {
  color: var(--primary-color);
}

.content__wrapper > *:not(:first-child) {
  margin-top: 1.5rem;
}

.mt-60 {
  margin-top: 60px;
}

.content__wrapper .list > *:not(:first-child) {
  margin-top: 0.7rem;
}

.content__wrapper .list > * {
  padding-left: 20px;
}

.content__wrapper .list h3 {
  position: relative;
}

.content__wrapper .list h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--text-color);
}

.footer {
  padding: 5rem 0 2.2rem;
  margin-top: 120px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.footer__content__bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.footer .container {
  max-width: 1170px;
}

.footer__content__bottom .container {
  max-width: 1170px;
}

.footer__menu__list {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
}

.comparison__modal_wrapper {
  width: 90%;
  max-width: 800px;
}

.footer .disclaimer {
  font-size: 0.8rem;
  color: var(--text-color);
  margin-top: 16px;
  margin-bottom: 10px;
  text-align: left;
}

.footer__menu__item {
  padding: 5px 5px;
  border-radius: 0.5rem;
  transition: 0.3s all;
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px;
  display: inline-block;
}

.footer__menu__item > * {
  color: var(--gray-color);
}

.social__share_icons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-left: -5px;
  list-style: none;
}

.social__share_icons a {
  font-size: 16px;
  margin: 5px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s all;
  color: var(--text-color);
  height: 34px;
  width: 34px;
}

.social__share_icons a:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.footer__content__top .container {
  display: flex;
  max-width: 1170px;
  padding: 0px 10px 5rem;
  gap: 10px;
}

.site__info {
  width: 40%;
  padding-right: 30px;
}

.footer__menu {
  width: 20%;
}

.copyright {
  text-align: left;
  font-size: 14px;
}

.footer__menu h6 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
  text-align: left;
  padding-left: 8px;
}

.faqs__accordion .faqs__accordion__item {
  background-color: var(--forground-color);
  border-radius: 0.5rem;
  margin-bottom: 15px;
}

.faqs__accordion__item .faqs__accordion__item__header {
  padding: 15px 20px;
  cursor: pointer;
  position: relative;
}

.faqs__accordion__item .faqs__accordion__item__header h3 {
  font-size: 14px;
}

.faqs__accordion__item__header .faqs__accordion__item__header__icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' class='chakra-icon chakra-accordion__icon css-j2ph2z' aria-hidden='true'%3E%3Cpath fill='%23000' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'%3E%3C/path%3E%3C/svg%3E")
    center no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s all;
  cursor: pointer;
}

.faqs__accordion__item.active .faqs__accordion__item__header__icon {
  transform: translateY(-50%) rotate(180deg);
}

html[data-theme="dark"]
  .faqs__accordion__item__header
  .faqs__accordion__item__header__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' class='chakra-icon chakra-accordion__icon css-j2ph2z' aria-hidden='true'%3E%3Cpath fill='%23fff' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'%3E%3C/path%3E%3C/svg%3E");
}

.faqs__accordion__item__body {
  display: none;
}

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

.faqs .container {
  max-width: 900px;
}

.faqs__accordion__item__body {
  padding: 0 20px 20px;
}

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

.mobile__apps .container {
  display: flex;
  justify-content: center;
}

.mobile__apps__links__wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile__apps__links__wrapper a {
  display: flex;
  transition: 0.3s all;
}

.mobile__apps__links__wrapper a:hover {
  transform: translateY(-3px);
}

.mobile__apps__links__wrapper img {
  max-width: 180px;
}

.mobile__apps__links__wrapper .appstore img {
  max-width: 170px;
}

.page__content {
  padding: 50px 0 0;
}

.page__content .container {
  max-width: 1050px;
}

.page__content h1 {
  font-size: 2rem;
}

.page__content__wrapper > *:not(:last-child) {
  margin-bottom: 20px;
}

.max-750 .container {
  max-width: 750px;
}

.highlighted {
  border-radius: 0.5rem;
  background-color: #ebebf0;
  padding: 20px;
  text-align: center;
}

.video_wrapper.blur_thumb .vjs-poster:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  z-index: 2;
}

.video-js .vjs-big-play-button {
  z-index: 3;
}

html[data-theme="dark"] .highlighted {
  background-color: #181820;
}

video {
  max-width: 100%;
  border-radius: 0.5rem;
}

.bookmark__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 10px 20px;
  border: 1px dashed var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
  transition: 0.3s all;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content__page_section .container {
  max-width: 1100px;
  text-align: left;
}

.content__page_section h2 {
  text-align: left;
}

.content__section li {
  margin-left: 17px;
}

.content__page_section h1 {
  font-size: 2rem;
}

.form__group {
  width: 100%;
  margin-bottom: 20px;
}

.form__group input,
.form__group textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 10px 15px;
  font-size: 14px;
  transition: 0.3s all;
  background-color: var(--bg-color);
}

.form__group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 10px 20px;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: var(--bg-color);
  font-weight: 600;
  transition: 0.3s all;
  cursor: pointer;
}

.contact__form .btn {
  min-width: 150px;
}

.success__msg {
  display: none;
}

.max-800 .container {
  max-width: 800px;
}

.loading_section .content__wrapper {
  display: flex;
  gap: 30px;
}

.loading_section .content__wrapper > * {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 !important;
}

.skeleton {
  background-color: #e5e5e5;
  border-radius: 0.5rem;
  width: 100%;
  overflow: hidden;
}

html[data-theme="dark"] .skeleton {
  background-color: #1d1d25;
}

.not__found__section {
  display: none;
}

.not__found__section.show {
  display: block;
}

.not__found__section img {
  max-width: 450px;
}

.not__found__section .content__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.not__found__section .content__wrapper h3 {
  position: relative;
  top: -30px;
}

.skeleton::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  animation: loading 1s infinite;
  background: linear-gradient(
    to right,
    transparent,
    var(--bg-color),
    transparent
  );
}

.download__item__heading div {
  font-size: 600;
  font-size: 16px;
}

.download__results a {
  padding: 5px;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23fff' fill='none' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' class='css-45pu3z' height='18' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3Cpath d='M7 11l5 5l5 -5'%3E%3C/path%3E%3Cpath d='M12 4l0 12'%3E%3C/path%3E%3C/svg%3E");
  background-position: center left 16px;
  background-repeat: no-repeat;
  padding-left: 27px;
}

.download_item table td {
  font-size: 14px;
}

.download__items_tabs {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  margin-bottom: -1px;
  overflow: auto;
  margin-bottom: 5px;
}

.download__items_tabs__item {
  padding: 10px 15px;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: 0.3s all;
  font-weight: 600;
  white-space: nowrap;
}

.download__items_tabs__item.active {
  background-color: var(--forground-color);
}

.download_item {
  display: flex;
  background-color: var(--forground-color);
  padding: 2rem;
  border-radius: 1rem;
  display: none;
}

.download_item.active {
  display: flex;
}

.video_wrapper {
  width: 45%;
  border-radius: 8px;
  overflow: hidden;
}

.video_wrapper video,
video-js {
  width: 100% !important;
  border-radius: 0.5rem;
  aspect-ratio: 10/9;
  background-color: rgba(0, 0, 0, 1);
  height: auto !important;
}

.video_wrapper .video,
.video_wrapper .video > * {
  height: 100% !important;
  aspect-ratio: 1/1 !important;
}

.image_wrapper {
  width: 45%;
}

.download_item .btn:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23fff' fill='none' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' class='css-45pu3z' height='18' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3Cpath d='M7 11l5 5l5 -5'%3E%3C/path%3E%3Cpath d='M12 4l0 12'%3E%3C/path%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

html[data-theme="dark"] .download_item .btn:before {
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23000' fill='none' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' class='css-45pu3z' height='18' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3Cpath d='M7 11l5 5l5 -5'%3E%3C/path%3E%3Cpath d='M12 4l0 12'%3E%3C/path%3E%3C/svg%3E");
}

.vjs-poster img {
  object-fit: cover !important;
  border-radius: 8px !important;
}

.image_wrapper img {
  width: 100%;
  border-radius: 0.5rem;
  aspect-ratio: 10/9;
  background-color: rgba(0, 0, 0, 1);
  object-fit: cover;
}

.download_item_info {
  width: 55%;
  padding-left: 2rem;
}

.download__item__user_info {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.download__item__user_info span {
  font-size: 1rem;
}

.download__item__caption__text {
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.download_item table {
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
  border-spacing: 0px;
}

.bookmark__text {
  text-align: center;
  font-size: 14px;
}

.download_item table th,
.download_item table td {
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  text-align: center;
  background-color: var(--bg-color);
}

.download_item table .btn {
  padding: 5px 24px;
}

.download_item table th:first-child {
  border-radius: 8px 0 0;
}

.download_item table tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

.download_item table th:last-child {
  border-radius: 0 8px 0 0;
}

.download_item table tr:last-child td {
  border-radius: 0 0 8px 0;
}

.download_item table td:not(:first-child) {
  border-left: 0;
}

.download_item table tr td {
  border-top: 0;
}

.video-js {
  padding: 0 !important;
  border-radius: 10px;
  height: 300px !important;
}

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

.download__item__profile_pic img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  background-color: rgba(0, 0, 0, 0.1);
}

.download__item__profile_pic div {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.download__item__profile_pic div span:last-child {
  opacity: 0.6;
  line-height: 1;
  font-size: 14px;
}

.text-left {
  text-align: left !important;
}

.addblock_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--forground-color);
  z-index: 100000;
  display: none;
}

.download__item__profile_pic .profile {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  background: url("../images/reddit-icon.png") center no-repeat;
  background-size: 40px;
}

.addblock_popup > div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addblock_popup > div > div {
  max-width: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 10px;
  margin: auto;
}

.addblock_popup #animation__image {
  width: 100%;
  max-width: 450px;
  margin-top: -100px;
}

.addblock_popup h2 {
  font-size: 2rem;
}

.addblock_popup p {
  font-size: 1.1rem;
  margin-top: 10px;
}

.popup__close__button {
  background-color: var(--bg-color);
  border: 0;
  border-radius: 5px;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  z-index: 2;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 1255px) {
  .footer .container {
    max-width: 1000px;
  }
}

@media (max-width: 1060px) {
  .footer .container {
    max-width: 980px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 845px) {
  .footer__content__top .container {
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 50px;
  }

  .site__info {
    width: 100%;
    padding-left: 8px;
  }

  .footer__menu {
    width: calc(33.33% - 30px);
  }
}

@media (max-width: 767px) {
  .download_item {
    flex-direction: column;
  }

  .video_wrapper,
  .image_wrapper {
    width: 100%;
  }

  .video_wrapper .video,
  .video_wrapper .video > * {
    aspect-ratio: auto !important;
  }

  .video_wrapper .video > * {
    height: 300px !important;
  }

  .download_item_info {
    width: 100%;
    padding-left: 0;
    margin-top: 20px;
  }

  .toogle_menu {
    display: block;
  }

  .header__menu {
    position: fixed;
    height: 100vh;
    top: -20px;
    left: -316px;
    width: 300px;
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-color);
    z-index: 1002;
    transition: 0.3s all;
  }

  body.open__menu .header__menu {
    left: -16px;
  }

  .toggle_button {
    margin-left: auto;
  }

  .mobile_only {
    display: block;
  }

  .header__menu .header__logo {
    padding: 28px;
    border-bottom: 1px solid var(--border-color);
  }

  .header__menu_list {
    flex-direction: column;
    padding: 20px;
  }

  .header__menu_list li {
    text-align: left;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
  }

  .header__menu_list li a {
    padding: 7px 15px !important;
    border-radius: 5px;
    display: block;
  }

  .header__menu_list li.active > a {
    background-color: var(--forground-color);
  }

  .header__menu_list li span {
    display: none;
  }

  .header__menu_dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    background-color: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
  }

  .close__overlay {
    position: fixed;
    top: -20px;
    left: -16px;
    width: calc(100% + 32px);
    height: 100vh;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }

  .footer .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.open__menu .close__overlay {
    display: block;
  }

  .hero__section {
    padding: 40px 0 0;
  }

  .hero__section h1 {
    font-size: 24px;
  }

  .hero__section_content {
    gap: 14px;
  }

  .hero__section_form form {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
  }

  .hero__section_form input {
    width: 100%;
  }

  .hero__section_form button {
    min-width: 100%;
    margin: 25px 0 0 0;
  }

  .content__wrapper {
    padding: 20px;
  }

  .content__wrapper h2 {
    font-size: 20px;
  }

  .page__content h1,
  .content__wrapper h1 {
    font-size: 1.5rem;
  }

  .footer {
    padding: 3.5rem 0 2rem;
  }

  .video_wrapper video {
    max-height: 300px !important;
  }
}

@media (max-width: 575px) {
  .site__info {
    width: 100%;
  }

  .footer__menu {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .download_item {
    padding: 1rem;
  }

  .loading_section .content__wrapper {
    flex-direction: column;
  }
}

/* Downloader results CSS */
.download_result_section .container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    clear: both;
}

.download_result_section .container > * {
    display: contents !important;
}

.download_result_section .container > .download-item,
.download_result_section .container > [class*="download-item"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 15px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--bg-color) !important;
    transition: box-shadow 0.3s ease !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.download_result_section .container > .download-item:hover,
.download_result_section .container > [class*="download-item"]:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.download_result_section .container .media-preview {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 290px !important;
    aspect-ratio: 1/1 !important;
    margin: 0 auto !important;
}

.download_result_section .container .media-preview img,
.download_result_section .container .media-preview video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
}

.media-box {
  border: 1.5px solid #ebebf0;
  border-radius: 8px;
  background: #fff;
  width: 100% !important;
  max-width: 290px !important;
  aspect-ratio: 1/1 !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download_result_section .container .download-btn,
.download_result_section .container .btn.download-media {
    background: var(--primary-color) !important;
    color: var(--bg-color) !important;
    padding: 10px 16px 8px 16px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    transition: background 0.3s ease !important;
    margin: 12px auto 0 auto !important;
}

@media (max-width: 1024px) {
    .download_result_section .container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
    .download_result_section .container .media-preview,
    .media-box {
        max-width: 280px !important;
    }
}

@media (max-width: 768px) {
    .download_result_section .container {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    }
    .download_result_section .container .media-preview,
    .media-box {
        max-width: 110px !important;
    }
}

@media (max-width: 500px) {
    .download_result_section .container {
        grid-template-columns: 1fr !important;
    }
    .download_result_section .container .media-preview,
    .media-box {
        max-width: 70vw !important;
        min-width: 0 !important;
    }
}