@charset "UTF-8";
@media only screen and (min-width: 1024px) {
		:root {
				font-size: 1.25vw;
		}
		.h1 {
				font-size: 4.5rem;
				margin-bottom: 20px;
		}
		.h2 {
				font-size: 3.5rem;
				margin-bottom: 20px;
		}
		.container {
				max-width: 1440px;
		}
		.toggle-menu {
				display: none;
		}
		.menu-old {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 15px;
		}
		.menu-old .email {
				display: none;
		}
		.menu-old .btn {
				height: 55px;
		}
		.menu-old .links {
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px 20px;
				font-weight: bold;
				font-size: 18px;
				line-height: 1.4;
				margin: 0 auto;
		}
		.menu-old .btn:not(.btn-lime) {
				display: none;
		}
		.menu-old .btn-lime {
				color: var(--white) !important;
				background-color: rgba(255, 255, 255, 0.1);
		}
		@media (pointer:fine) {
				.menu-old .btn-lime:hover {
						background-color: rgba(255, 255, 255, 0.1);
						color: var(--lime) !important;
				}
		}
		.works-slider {
				--gap: 20px;
				--size: 374px;
		}
		.works-slider-logos {
				margin-top: 20px !important;
				--gap: 17.5px;
				--size: 219px;
		}
		.steps li {
				height: 575px;
				font-size: 20px;
				line-height: 30px;
				padding: 50px 40px;
		}
		.steps .big {
				font-size: 44px;
		}
		.steps h1, .steps .h1 {
				font-size: 4rem;
		}
		.benefits .top-text {
				margin-bottom: 10px;
		}
		.benefits ul {
				gap: 45px 20px;
				margin: 0;
				grid-template-columns: repeat(3, 1fr);
		}
		.benefits .img {
				max-width: none;
				margin-bottom: 20px;
		}
		.our-services {
				padding: 80px 30px;
				background-image: url("../img/services-desktop.png");
				background-size: auto 100%;
				background-position: 100% 50%;
		}
		.our-services > * {
				max-width: 61.5%;
		}
		.our-services .top-text {
				max-width: 25em;
		}
		.our-services .h1, .our-services .h2 {
				margin-bottom: 15px;
		}
		.our-services .top-text {
				margin-bottom: 30px;
		}
		.our-services .btns {
				margin-top: 60px;
		}
		.portfolio {
				padding-bottom: 30px;
		}
		.portfolio .h1 {
				margin-bottom: 27px;
		}
		.portfolio .top-text {
				margin-bottom: 58px;
		}
		.portfolio .top-text {
				font-size: 30px;
		}
		.portfolio .grid {
				grid-template-columns: repeat(3, 1fr);
		}
		.slider-reviews {
				--gap: 20px;
		}
		.slider-reviews .swiper-slide {
				width: 33.333333%;
				max-width: none;
		}
		.pricing .bg {
				background-size: 254px auto, 288px auto, 100% 100%;
		}
		.pricing .h1 {
				font-size: 5.5rem;
		}
		.pricing .bg ul {
				font-weight: normal;
				font-size: 24px;
		}
		.pricing .btns {
				margin-top: 50px;
		}
		.why {
				padding-bottom: 30px;
		}
		.why .top-text {
				margin-bottom: 60px;
		}
		.priorities .top-text {
				margin-bottom: 50px;
		}
		.priorities .grid {
				gap: 15px;
		}
		.faq {
				margin-bottom: 0;
				padding-bottom: 77px;
		}
		.faq .container {
				max-width: 1200px;
		}
		.faq .h2 {
				font-size: 2.75rem;
				margin-bottom: 15px;
		}
		.faq .el {
				padding: 9px 0 11px 0;
				font-size: 18px;
		}
		.faq .h3 {
				font-size: 24px;
				padding-top: 24px;
				padding-bottom: 23px;
		}
		.we-ready .h2 {
				font-size: 4rem;
		}
		.we-ready .top-text {
				margin-bottom: 40px;
		}
		.footer-old {
				text-align: left;
		}
		.footer-old .container {
				gap: 50px 40px;
				grid-template-areas:
						"lo so so em"
						"te te li li";
				grid-template-columns: 180px 1fr 1fr 180px;
				grid-template-rows: auto auto;
				align-items: center;
		}
		.footer-old .logo {
				grid-area: lo;
		}
		.footer-old .soc {
				grid-area: so;
		}
		.footer-old .email {
				grid-area: em;
		}
		.footer-old .text {
				grid-area: te;
		}
		.footer-old .text-links {
				grid-area: li;
		}
		.footer-old .logo {
				margin: 0;
		}
		.footer-old .email {
				text-align: right;
				white-space: nowrap;
		}
		.footer-old .text-links {
				justify-content: flex-end;
				margin: 0;
		}
		.footer-old .soc {
				font-size: 18px;
		}
		.pricing-info {
				padding-bottom: 130px;
		}
		.pricing-info .list-head {
				font-size: 2.75rem;
				padding: 50px 50px 40px 50px;
		}
		.pricing-info .list-text {
				padding: 1px 50px 50px 50px;
				font-size: 18px;
		}
		.pricing-info .list-text li {
				padding-top: 26px;
				padding-bottom: 26px;
		}
		.pricing-info .info .h1 {
				font-size: 3.5rem;
		}
		.achievements .h1 {
				font-size: 4rem;
		}
		.achievements ul {
				grid-template-columns: repeat(4, 1fr);
				gap: 0;
				margin: 60px -36px -36px -36px;
		}
		.achievements li {
				display: block;
				position: relative;
				padding: 36px;
		}
		.achievements .text {
				font-weight: 600;
				font-size: 23px;
				line-height: 29px;
				gap: 15px;
				flex-direction: column;
				align-items: flex-start;
				backface-visibility: hidden;
				position: absolute;
				top: 100%;
				left: 50%;
				width: 100%;
				max-width: 290px;
				z-index: 20;
				transform: translate3d(-50%, 0, 0);
				background: #17191F;
				border-radius: 22px;
				padding: 37px;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		}
		.achievements ul.hover video {
				opacity: 0.2;
		}
		.achievements ul.hover li:hover video {
				opacity: 1;
		}
		.achievements li:hover .text {
				opacity: 1;
		}
		.achievements .text > * {
				font-weight: bold;
		}
		.achievements .name {
				font-size: 1.875rem;
				margin-bottom: 15px;
		}
		.achievements video {
				display: block;
				width: 100%;
				max-width: 245px;
				height: auto;
				margin: 0 auto;
				aspect-ratio: 1/1;
				backface-visibility: hidden;
				pointer-events: none;
				transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
		}
}