/*!
Theme Name: Video Downloader
Theme URI: https://lightgreen-owl-856080.hostingersite.com/
Author: DevInc.
Author URI: https://lightgreen-owl-856080.hostingersite.com/
Description: Hi. I'm a starter theme called <code>Video Downloader</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Video Downloader
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL..h1-sidebar-menu .sidebar-menu li a:hover, .hpt-footer-social-content ul li a:hover, .hpt-footer-widget .menu-widget li a:hover, .hpt-search-btn-1:hover, .hpt-testimonial-1-slider-1-content .left .parson-wrap .parson-content .name:hover
Use it to make something cool, have fun, and share what you've learned.

Video Downloader is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html {
	-webkit-text-size-adjust: 100%;
	line-height: 1.15
}

#result {
	display: none;
	margin-top: 20px;
}

img {
	max-width: 100%;
}

#thumbnail {
	width: 100%;
	max-height: 500px;
	object-fit: contain;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	/* box-shadow: 0 8px 15px rgba(0,0,0,0.3); */
	margin-bottom: -3px;
	transition: transform 0.3s ease;
	cursor: pointer;
}

#thumbnail:hover {
	opacity: .9;
}

.video-style {
	/* width: 100%; */
	max-height: 500px;
	/* ✅ fixed height to match thumbnail */
	object-fit: contain;
	border-radius: 14px;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
	margin: 0px auto 20px auto;
	justify-content: center;
    display: flex;
	background: #000;
	/* optional: prevents white flash */
}

.download-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 20px; /* allow wrapping on small screens */
}

/* keep your button styles */
.download-btn #downloadLink,
.hd-download-btn #hd-downloadLink {
    background-color: #f4663b;
    border-radius: 8px;
    color: #fff !important;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    padding: 10px 40px;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .7s ease;
    border: none;
    border-bottom: 4px solid #ad492b;
    display: flex;
    justify-content: center;
    text-align: center;

	white-space: nowrap;   /* ✅ keep text in one line */
   
}

.download-btn #downloadLink:hover,
.hd-download-btn #hd-downloadLink:hover {
    background: #ad492b;
}

.download-btn,
.hd-download-btn {
    flex: 1; /* take equal width */
    min-width: 250px; /* prevent too small on mobile */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* responsive behavior */
@media (max-width: 768px) {
  .download-container {
      flex-direction: column; /* stack buttons vertically */
  }
}
/*ad container code*/

.test-advert{

	align-items: center;
}
.test-advert img{
	display: block;
  margin: 42px auto 0px;;
  
}
/* Search Result */
.search-result #message2 {
	font-size: 38px;
	line-height: 44px;
	margin: 22px 0;
}
.search-result {
	max-width: 1024px;
	padding: 0 20px;
}

.search-result {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-family: Roboto, sans-serif;
	font-style: normal;
	font-weight: 400;
	margin: 0 auto;

	max-width: 930px;
	padding: 0 12px;
	width: 100%;
}

/* Loader Code Starts */

#message {
	display: none;
}

.loader {
	width: 50px;
	--b: 8px;
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 1px;
	background: conic-gradient(#0000 10%, #f03355) content-box;
	-webkit-mask:
		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
		radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
	-webkit-mask-composite: destination-in;
	mask-composite: intersect;
	animation: l4 1s infinite steps(10);
}

@keyframes l4 {
	to {
		transform: rotate(1turn)
	}
}

.loader-component {
	margin-bottom: 40px;
	margin-top: 40px
}

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

.loader-component__circle {
	animation: loader-component-circle 1.3s ease-in-out infinite;
	background: white;
	 border: 4px solid #fc5b2b; 
	border-radius: 10px;
	display: inline-block;
	height: 18px;
	margin: 0 8px;
	opacity: 0;
	width: 18px
}

.loader-component__circle:nth-of-type(2) {
	animation-delay: .15s
}

.loader-component__circle:nth-of-type(3) {
	animation-delay: .3s
}

.loader-component__message {
	color: #353535;
	font-size: 1.125rem;
	line-height: 1.2;
	margin: 0;
	text-align: center
}

@keyframes loader-component-circle {
	0% {
		opacity: 0
	}

	15% {
		opacity: 1
	}

	90% {
		opacity: 0
	}
}


/* Loader Code Ends */

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
	-webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
	border-style: none;
	padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

[hidden],
template {
	display: none
}

:root {
	--color-white: #fff;
	--color-black-primary: #000;
	--color-black-second: rgba(0, 0, 0, .7);
	--color-primary:  rgba(240, 67, 54, .9);
	--color-purple: #be185d
}

* {
	box-sizing: border-box
}

html {
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

body,
html {
	overflow-x: hidden
}

body {
	background: var(--color-white);
	background: #f9fafb;
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	min-height: 100vh
}

main {
	flex-grow: 1
}

.header {
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 984px;
	padding: 6px 20px;
	width: 100%
}

.header,
.header__logo {
	display: flex
}

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

/* Primary Menu */
.header__menu {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu Links */
.header__menu > li > a {
    text-decoration: none;
    color: var(--color-black-primary);
    font-weight: 400;
    line-height: 18.667px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

/* Dropdown Container */
.header__menu li {
    position: relative;
}

/* Submenu Styling */
.header__menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 0;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 100;
}

/* Submenu Links */
.header__menu .sub-menu li a {
    display: block;
    padding: 8px 12px;
    color: var(--color-black-primary);
    text-decoration: none;
}

/* Hover Effect */
.header__menu li:hover > .sub-menu {
    display: block;
}

/* Dropdown Arrow */
.header__menu .menu-item-has-children > a::after {
    content: " ▼";
    font-size: 12px;
    margin-left: 6px;
}

/* Remove bullets from all menu items */
.header__menu,
.header__menu ul,
.header__menu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Specifically remove ::marker from submenu items */
.header__menu .sub-menu li::marker {
    content: none;
    display: none;
}

.header__faq {
	transition: all .3s ease-in
}

@media (hover: hover) and (pointer:fine) {
	.header__faq:hover {
		opacity: .4
	}
}

.header__faq {
	color: var(--color-black-primary);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	padding: 12px;
	text-decoration: none;
	text-transform: uppercase
}

.header__lang {
	position: relative
}

.header__lang-button {
	align-items: center;
	background: inherit;
	border: none;
	color: var(--color-black-primary);
	cursor: pointer;
	display: flex;
	font-size: 18px;
	font-weight: 400;
	justify-content: center;
	line-height: 24px;
	margin: 0;
	padding: 12px 8px 12px 12px;
	text-transform: uppercase;
	transition: all .3s ease-in
}

@media (hover: hover) and (pointer:fine) {
	.header__lang-button:hover {
		opacity: .4
	}
}

.header__lang-menu {
	background: var(--color-white);
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 52px;
	width: 300px;
	z-index: 99999999
}

.header__lang-menu_active {
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2);
	display: grid;
	grid-template-columns: 1fr 1fr
}

.header__lang-menu li {
	display: grid
}

@media (hover: hover) and (pointer:fine) {
	.header__lang-menu li:hover:has(a) {
		background: linear-gradient(315deg, #60a5fa, #f4673b);
	}

	.header__lang-menu li:hover:has(a) a {
		color: var(--color-white)
	}
}

.header__lang-menu a {
	text-decoration: none
}

.header__lang-menu a,
.header__lang-menu span {
	color: var(--color-black-primary);
	display: grid;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	padding: 8px 16px
}

body:dir(rtl) .header__lang-menu {
	left: 0;
	right: inherit
}

/* Reset */
.header__menu,
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Header layout */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* Desktop menu */
.header__menu {
  display: flex;
  gap: 20px;
}

.menu-item a {
  text-decoration: none;
  padding: 8px 12px;
  display: block;
}

/* Submenu hidden by default */
.sub-menu {
  display: none;
  position: absolute;
  background: #fff;
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children:hover .sub-menu {
  display: block; /* desktop hover */
}

/* Hide submenu toggle button on desktop */
.submenu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.header__toggle {
    display: none;
  }

/* Mobile */
@media (max-width: 768px) {
  .header__toggle{
    display: block;
  }

  /* Stack header vertically */
  .header {
    flex-wrap: wrap;
  }

  .header__nav{
	width: 100%;
  }

  /* Menu should appear below header, full-width */
  .header__menu {
    flex-direction: column;
    display: none; /* hidden until toggle */
    width: 100%;
    background: #fff;
    margin-top: 10px;
    border-top: 1px solid #eee;
  }

  .header__menu.show {
    display: flex;
  }

  /* Parent items */
  .menu-item {
    width: 100%;
  }

  /* Submenu toggle */
  .submenu-toggle {
    display: inline-block;
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
  }

  /* Submenu */
  .sub-menu {
    position: static;     /* fixes opening to the right */
    display: none;
    padding-left: 20px;
    background: #f9f9f9;
    width: 100%;
  }

  .sub-menu.open {
    display: block !important;
  }
}



.category {
	background: hsla(0, 0%, 100%, .24);
	border-radius: 6px;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	list-style: none;
	margin: 0 auto;
	max-width: -moz-max-content;
	max-width: 900px;
	padding: 0
}

@media (max-width: 768px) {
	.category {
		min-width: 100%
	}
}

.category__element {
	position: relative
}

.category__element:after {
	background: hsla(0, 0%, 100%, .2);
	content: "";
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 2px
}

.category__element:last-child:after {
	content: none
}

.category__element_active span {
	opacity: .5
}

.category a {
	text-decoration: none;
	transition: all .3s ease-in
}

@media (hover: hover) and (pointer:fine) {
	.category a:hover {
		opacity: .5
	}
}

.category a,
.category span {
	align-items: center;
	color: var(--color-white);
	display: flex;
	font-size: 16px;
	font-weight: 400;
	gap: 6px;
	justify-content: center;
	line-height: 24px;
	padding: 6px 10px
}

@media (max-width: 768px) {

	.category a,
	.category span {
		font-size: 0;
		gap: 0
	}
}

@media (max-width: 350px) {

	.category a,
	.category span {
		padding: 6px 2px
	}
}

body:dir(rtl) .category li:after {
	left: 0;
	right: inherit
}

.search-form {
	background: var(--color-white);
	border-radius: 8px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	display: grid;
	gap: 6px;
	grid-template-columns: 1fr max-content;
	margin: 0 auto;
	max-width: 750px;
	padding: 8px
}

@media (max-width: 768px) {
	.search-form {
		background: none;
		box-shadow: none;
		gap: 12px;
		grid-template-columns: 1fr;
		padding: 0
	}
}

.search-form__field {
	display: grid;
	gap: 2px;
	grid-template-columns: 1fr max-content
}

@media (max-width: 768px) {
	.search-form__field {
		background: var(--color-white);
		border-radius: 8px
	}
}

.search-form__label {
	display: flex;
	width: 100%
}

.search-form__input {
	border: none;
	color: var(--color-black);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	padding: 0 14px;
	width: 100%
}

@media (max-width: 768px) {
	.search-form__input {
		border-radius: 8px 0 0 8px
	}
}

.search-form__clipboard {
	display: flex
}

.search-form__clipboard button {
	align-items: center;
	background: #f3f4f6;
	border: 2px solid #e5e7eb;
	border-radius: 24px;
	color: var(--color-black);
	cursor: pointer;
	display: flex;
	font-size: 16px;
	font-weight: 400;
	gap: 4px;
	justify-items: center;
	line-height: 24px;
	padding: 18px 12px
}

@media (max-width: 768px) {
	.search-form__clipboard button {
		border-radius: 0 8px 8px 0
	}
}

@media (hover: hover) and (pointer:fine) {
	.search-form__clipboard button:hover {
		background: rgba(243, 244, 246, .6)
	}
}

.search-form__button {
	background: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border: none;
	border-radius: 8px;
	color: var(--color-white);
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	padding: 20px
}

@media (max-width: 768px) {
	.search-form__button {
		padding: 16px 20px;
		background: #237cfa;
	}
	.test-advert img{
		margin: 28px auto 0px;
	}
}

@media (hover: hover) and (pointer:fine) {
	.search-form__button:hover {
		background: linear-gradient(to top left, rgba(240, 67, 54, .9), rgba(251, 171, 63, .9)) !important
		
	}
}

@media (max-width: 768px) {
	body:dir(rtl) .search-form__clipboard button {
		border-radius: 8px 0 0 8px
	}

	body:dir(rtl) .search-form__input {
		border-radius: 0 8px 8px 0
	}
}

.section-main {
	background: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	margin: 0 auto;
	padding: 30px 20px 44px
}

@media (max-width: 768px) {
	.section-main {
		padding: 20px 20px 30px
	}
}

.section-main__content {
	margin: 30px auto;
	text-align: center
}

.section-main__title {
	color: var(--color-white);
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	margin: 10px auto
}

@media (max-width: 768px) {
	.section-main__title {
		font-size: 24px;
		line-height: 28px
	}
}

.section-main__text {
	color: var(--color-white);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 10px auto
}

.footer {
	background: #f5f9ff;
	margin: 0 auto;
	padding: 40px 20px 22px;
	position: relative;
	text-align: center;
	width: 100%
}

@media (max-width: 768px) {
	.footer {
		padding: 24px 20px 22px
	}
}

.footer:before {
	background: var(--fastinstdl-gradient, linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%));
	content: "";
	height: 1px;
	left: 0;
	opacity: .5;
	position: absolute;
	right: 0;
	top: 0
}

.footer__links {
	margin: 40px auto
}

@media (max-width: 768px) {
	.footer__links {
		margin: 24px auto 58px
	}
}

.footer__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 0;
	justify-content: center;
	list-style: none;
	margin: 14px auto;
	padding: 0
}

@media (max-width: 768px) {
	.footer__list {
		margin: 10px auto
	}
}

.footer__list li {
	position: relative
}

.footer__list li:after {
	color: var(--color-black-primary);
	content: "|";
	opacity: .7;
	position: absolute;
	right: 0;
	top: 0;
	width: 2px
}

.footer__list li:last-child:after {
	content: none
}

.footer__list a {
	text-decoration: none;
	transition: all .3s ease-in
}

@media (hover: hover) and (pointer:fine) {
	.footer__list a:hover {
		opacity: .6
	}
}

.footer__list a,
.footer__list span {
	color: var(--color-black-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 18.667px;
	padding: 0 8px
}

.footer__copyright {
	border-top: 1px solid hsla(0, 0%, 50%, .29);
	color: var(--color-black-primary);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	margin: 0 auto;
	max-width: 984px;
	padding-top: 20px
}

body:dir(rtl) .footer li:after {
	left: 0;
	right: inherit
}

.section-text {
	display: grid;
	grid-template-columns: 1fr;
	margin: 64px auto;
	max-width: 1024px;
	padding: 0 20px;
	text-align: center
}

@media (max-width: 768px) {
	.section-text {
		margin: 32px auto
	}
}

.section-text__card {
	align-items: center;
	background: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	display: grid;
	grid-template-columns: max-content 1fr
}

@media (max-width: 768px) {
	.section-text__card {
		grid-template-columns: 1fr;
		margin: 0 auto;
		max-width: 492px
	}
}

.section-text__content {
	padding: 0 32px;
	text-align: left
}

@media (max-width: 768px) {
	.section-text__content {
		padding: 20px 16px
	}
}

.section-text__content h2 {
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto 18px
}

@media (max-width: 768px) {
	.section-text__content h2 {
		font-size: 24px;
		line-height: 28px;
		margin: 0 auto 16px
	}
}

.section-text__content p {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 0 auto
}

.section-text picture {
	height: 100%
}

.section-text img {
	border-radius: 12px 0 0 12px;
	display: block;
	height: 100%;
	max-width: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

@media (max-width: 768px) {
	.section-text img {
		border-radius: 12px 12px 0 0;
		width: 100%
	}
}

.section-instruction {
	margin: 64px auto;
	max-width: 1024px;
	padding: 0 20px
}

@media (max-width: 768px) {
	.section-instruction {
		margin: 32px auto
	}
}

.section-instruction__title {
	border-bottom: 2px solid transparent;
	-o-border-image: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image-slice: 1;
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: center
}

@media (max-width: 768px) {
	.section-instruction__title {
		font-size: 24px;
		line-height: 28px
	}
}

.section-instruction__text {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 20px auto;
	text-align: center
}

.section-instruction__list {
	display: grid;
	gap: 24px;
	grid-template-areas: "a b c";
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0
}

@media (max-width: 900px) {
	.section-instruction__list {
		grid-template-areas: "a a b b"". c c .";
		grid-template-columns: inherit
	}
}

@media (max-width: 600px) {
	.section-instruction__list {
		grid-template-areas: "a""b""c"
	}
}

.section-instruction__list li {
	background: var(--color-white);
	border-radius: 8px;
	box-shadow: 0 8px 12px -2px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1)
}

.section-instruction__list li:first-of-type {
	grid-area: a
}

.section-instruction__list li:nth-of-type(2) {
	grid-area: b
}

.section-instruction__list li:nth-of-type(3) {
	grid-area: c
}

.section-instruction__list div {
	padding: 14px 18px 20px
}

.section-instruction__list img {
	border-radius: 12px 12px 0 0;
	height: auto;
	max-width: 100%
}

@media (max-width: 900px) {
	.section-instruction__list img {
		width: 100%
	}
}

.section-instruction__list h3 {
	border-bottom: 2px solid #e5e7eb;
	color: var(--color-purple);
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	margin: 0 auto 16px;
	padding-bottom: 16px;
	text-align: center
}

.section-instruction__list p {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 16px auto 0
}

.section-benefits {
	margin: 64px auto;
	max-width: 1024px;
	padding: 0 20px
}

@media (max-width: 768px) {
	.section-benefits {
		margin: 32px auto
	}
}

.section-benefits__title {
	border-bottom: 2px solid transparent;
	-o-border-image: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image-slice: 1;
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: center
}

@media (max-width: 768px) {
	.section-benefits__title {
		font-size: 24px;
		line-height: 28px
	}
}

.section-benefits__text {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 20px auto;
	text-align: center
}

.section-benefits__list {
	display: grid;
	gap: 42px 20px;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: 0;
	padding: 20px 0 0
}

@media (max-width: 768px) {
	.section-benefits__list {
		gap: 24px;
		grid-template-columns: 1fr;
		padding-top: 0
	}
}

.section-benefits__list li {
	padding: 10px 40px 20px;
	text-align: center
}

@media (max-width: 1000px) {
	.section-benefits__list li {
		padding: 10px 20px 20px
	}
}

@media (max-width: 768px) {
	.section-benefits__list li {
		padding: 10px 0 20px
	}
}

.section-benefits__list div {
	padding: 0 18px
}

.section-benefits__list h3 {
	border-bottom: 2px solid #e5e7eb;
	color: var(--color-purple);
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	margin: 18px auto 16px;
	padding-bottom: 16px;
	text-align: center
}

.section-benefits__list p {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 16px auto 0
}

.section-features {
	margin: 64px auto;
	max-width: 1024px;
	padding: 0 20px
}

@media (max-width: 768px) {
	.section-features {
		margin: 32px auto
	}
}

.section-features__title {
	border-bottom: 2px solid transparent;
	-o-border-image: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image-slice: 1;
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto 20px;
	padding-bottom: 20px;
	text-align: center
}

@media (max-width: 768px) {
	.section-features__title {
		font-size: 24px;
		line-height: 28px
	}
}

.section-features__text {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 20px auto;
	text-align: center
}

.section-features__list {
	display: grid;
	gap: 42px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 12px 0 0
}

@media (max-width: 768px) {
	.section-features__list {
		gap: 26px
	}
}

.section-features__list li {
	align-items: center;
	background: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	display: grid;
	grid-template-areas: "text img"
}

.section-features__list li img {
	border-radius: 0 12px 12px 0
}

@media (max-width: 768px) {
	.section-features__list li {
		grid-template-areas: "img""text";
		margin: 0 auto;
		max-width: 492px
	}

	.section-features__list li img {
		border-radius: 12px 12px 0 0
	}
}

.section-features__list li:nth-of-type(2n) {
	grid-template-areas: "img text"
}

.section-features__list li:nth-of-type(2n) img {
	border-radius: 12px 0 0 12px
}

@media (max-width: 768px) {
	.section-features__list li:nth-of-type(2n) {
		grid-template-areas: "img""text"
	}

	.section-features__list li:nth-of-type(2n) img {
		border-radius: 12px 12px 0 0
	}
}

.section-features__list picture {
	height: 100%
}

.section-features__list img {
	display: block;
	grid-area: img;
	height: 100%;
	max-width: -moz-max-content;
	max-width: max-content;
	-o-object-fit: cover;
	object-fit: cover
}

@media (max-width: 768px) {
	.section-features__list img {
		width: 100%
	}
}

.section-features__list div {
	padding: 0 40px
}

@media (max-width: 768px) {
	.section-features__list div {
		padding: 20px 16px
	}
}

.section-features__list div h3 {
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto 18px
}

@media (max-width: 768px) {
	.section-features__list div h3 {
		font-size: 24px;
		line-height: 28px;
		margin: 0 auto 16px
	}
}

.section-features__list div p {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 0 auto
}

.section-app {
	margin: 64px auto;
	max-width: 1024px;
	padding: 0 20px
}

@media (max-width: 768px) {
	.section-app {
		margin: 32px auto
	}
}

.section-app__wrapper {
	background: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-radius: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 114px
}

@media (max-width: 1000px) {
	.section-app__wrapper {
		margin-top: inherit
	}
}

@media (max-width: 768px) {
	.section-app__wrapper {
		gap: 40px;
		grid-template-columns: 1fr;
		padding: 30px 16px 0
	}
}

.section-app__images {
	position: relative
}

.section-app__images img {
	bottom: 0;
	height: auto;
	left: 0;
	max-width: 100%;
	position: absolute
}

@media (max-width: 768px) {
	.section-app__images img {
		display: block;
		position: inherit
	}
}

.section-app__text {
	padding: 30px 50px 25px 32px
}

@media (max-width: 768px) {
	.section-app__text {
		grid-row: 1/2;
		padding: 0
	}
}

.section-app__text h2 {
	color: var(--color-white);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto 14px
}

@media (max-width: 768px) {
	.section-app__text h2 {
		font-size: 24px;
		line-height: 28px;
		text-align: center
	}
}

.section-app__text p {
	color: var(--color-white);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 14px auto 32px
}

.section-app__text a {
	align-items: center;
	background: var(--color-white);
	border-radius: 6px;
	color: #141414;
	display: flex;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	gap: 10px;
	justify-content: center;
	line-height: 24px;
	max-width: 218px;
	padding: 12px 20px;
	text-decoration: none;
	transition: all .3s ease-in
}

@media (hover: hover) and (pointer:fine) {
	.section-app__text a:hover {
		opacity: .8
	}
}

@media (max-width: 768px) {
	.section-app__text a {
		margin: 0 auto;
		max-width: 350px
	}
}

.section-faq {
	margin: 64px auto;
	max-width: 1024px;
	padding: 0 20px
}

@media (max-width: 768px) {
	.section-faq {
		margin: 32px auto
	}
}

.section-faq__title {
	border-bottom: 2px solid transparent;
	-o-border-image:linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image: linear-gradient(108deg, rgba(240, 67, 54, .9) -57.13%, #f46939 11.08%, rgba(251, 171, 63, .9) 102.57%);
	border-image-slice: 1;
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: center
}

@media (max-width: 768px) {
	.section-faq__title {
		font-size: 24px;
		line-height: 28px
	}
}

.section-faq__text {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 20px auto;
	text-align: center
}

.section-faq ul {
	display: flex;
	flex-direction: column;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 10px 0 0
}

.section-faq ul h3 {
	color: var(--color-primary);
	font-size: 18px;
	font-weight: 400;
	font-weight: 700;
	line-height: 28px;
	margin: 0 auto 10px
}

.section-faq ul p {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	margin: 10px auto 0
}

.section-faq ol {
	padding-left: 20px
}

body:dir(rtl) .section-faq ol {
	padding-left: inherit;
	padding-right: 20px
}

.section-service {
	margin: 64px auto;
	max-width: 1024px;
	padding: 0 20px
}

@media (max-width: 768px) {
	.section-service {
		margin: 32px auto
	}
}

.section-service h1 {
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
	margin: 36px auto;
	text-align: center
}

@media (max-width: 768px) {
	.section-service h1 {
		font-size: 24px;
		line-height: 28px
	}
}

.section-service p {
	color: var(--color-black-second);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px
}

.section-service a {
	color: var(--color-primary);
	font-weight: 700
}

.section-service ol,
.section-service ul {
	padding-left: 20px
}

.section-service ol li,
.section-service ul li {
	margin: 10px auto
}