@media only screen and (min-width: 320px) and (max-width: 1024px) {
	.menu-logo__desktop {
		display: block;
    	position: relative;
    	z-index: 19
	}
	.menu__logo_mobile {
		display: none;
	}
	.main__overlay {
		background-color: #000000ab;
		color: #fff;
		height: 100%;
	}
	.main__header, .main__offer {
		color: #fff;
	}
	.menu__icon {
		display: block;
	}
	.nav-toggler {
    	display: block;
	    position: absolute;
	    right: 5%;
  	}
  	.site-navbar {
    	min-height: 60px;
  	}
	.site-navbar ul {
	    position: absolute;
	    width: 100%;
	    height: calc(100vh - 60px);
	    left: 0;
	    top: 30px;
	    flex-direction: column;
	    align-items: center;
	    background-color: #0c0b0cbd;
	    max-height: 0;
	    overflow: hidden;
	    transition: .3s;
	}
	.header {
		font-size: 30px;
	}
	.site-navbar ul li {
	    width: 90%;
	    text-align: center;
	}
	.site-navbar ul li a {
	    padding: 25px;
	    color: #fff;
	}
	.site-navbar ul li a:hover {
	    background-color: rgba(255,255,255,.1);
	}
	.site-navbar ul.open {
	    max-height: 100vh;
	    overflow: visible;
	    margin-top: 20px;
	}
	.hero-img-1 {
		position: absolute;
	    width: 186px;
	    bottom: -94px;
	    left: -26px;
	}
	.hero-img-2 {
		position: absolute;
	    width: 180px;
	    left: 20px;
	    bottom: 0;
	    z-index: 1;
	}
	.hero-img-3 {
		position: absolute;
		width: 87px;
		left: 0;
		bottom: 0;
		z-index: 1;
	}
	.hero-img-4 {
		position: absolute;
		width: 30px;
		left: 0;
		bottom: 130px
	}
	.hero-img-5 {
		position: absolute;
	    width: 35px;
	    left: 0;
	    bottom: 15px;
	    z-index: 0;
	}
	.hero-img-6 {
		position: absolute;
	    width: 50px;
	    left: -15px;
	    top: 50px;
	}
	.hero-img-7 {
		position: absolute;
	    width: 80px;
	    left: -10px;
	    bottom: 30px;
	}
	.hero-img-8 {
		position: absolute;
	    width: 53px;
	    left: 125px;
	    bottom: 120px;
	}
	.hero-img-9 {
		position: absolute;
		width: 100px;
		left: 290px;
		bottom: 0;
	}
	.hero-img-10 {
		position: absolute;
	    width: 250px;
	    right: -30px;
	    bottom: 0;
	    z-index: 2;
	}
	.hero-img-11 {
		position: absolute;
	    width: 180px;
	    right: 0;
	    bottom: 0;
	    z-index: 1;
	}
	.hero-img-12 {
		position: absolute;
	    width: 35px;
	    right: 70px;
	    top: 180px;
	}
	.hero-img-13 {
		position: absolute;
	    width: 45px;
	    right: 15px;
	    top: 30px;
	}
	.hero-img-14 {
		position: absolute;
	    width: 90px;
	    right: -30px;
	    bottom: 30px;
	    z-index: 30;
	}
	.hero-img-15 {
		position: absolute;
		width: 100px;
		right: 290px;
		bottom: 0;
	}
	.hero__title {
		margin-top: 20px;
	}
	.hero__mob_cost {
		display: block;
	}
	.hero__button {
		bottom: 20px;
		height: 60px;
	}
	.hero__header {
		display: none;
	}
	.hero__mob_cost {
		width: 300px;
	}
	.hero__title {
		font-size: 32px;
        width: 100%;
	}
	.hero__text {
		font-size: 20px;
	}
	.banner {
		overflow-x: hidden;
	}
	.banner__wrapper .main-title {
		width: 65%;
	}
	.banner__img {
		width: 160px;
        top: 15px;
        right: -15px;
	}
	.benefits__wrap1 img {
		width: 154px;
	}
	.main-title {
		font-size: 20px;
		line-height: 32px;
	}
	.container {
		width: 90%;
		margin: 50px auto;
	}
	.main {
		background-size: contain;
	}
	.stage__box, .benefits__container, 
	.stage__border, .video__wrap, .contact__title, 
	.footer__text, .terms-title, .benefits__wrap1  {
		width: 100%;
		margin: 0 auto;
	}
	.hero__title-text {
		width: 299.43px;
	}
	.hero__title-currency {
		width: 125px;
	}
	.steps__wrapper {
		flex-direction: column;
	}
	.steps__dots-desc {
		display: none;
	}
	.steps__dots-mob{
		display: block;
	}
	.benefits__wrap > .title > br {
		display: none;
	}
	.benefits__wrap {
		height: auto;
	}
	.banner__buttons {
		margin: inherit;
		width: 100%;
	}
	.banner__button_wrap {
		width: 264px;
	}
	.contact__title {
		font-size: 34.59px;
		line-height: 41.07px;
	}
	.stage__border, .stage__box, .benefits__container {
		height: auto;
	}
	.stage__box p {
		width: 65%;
	}
	.stage__image {
		bottom: 20px;
	}
	.button__banner {
		margin: 0 auto;
	}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.popup-2__wrapper, .popup-2, 
	.popup-2__border, .popup-2 .container,
	.contact-form {
		width: 100%;
	}
	.popup-2__wrapper {
		padding: 20px 10px;
	}
	.popup-2__wrap h3 {
		font-size: 16px;
	}
	.popup-2__wrap p {
		font-size: 12px;
    	line-height: 1.4;
	}
	.popup-2__border .main-title {
		font-size: 24px;
	}
	.video-popup-content {
		width: 100%;
	}
	.video-popup-content iframe {
		width: 100%;
	}
	.hero__image-bottom {
		z-index: 29;
	}
	.hero__wrapper {
		background-image: url(../images/background-hero.webp);
		background-size: cover;
	    width: 100%;
	    background-position: center;
	}
	.try-it-modal__close {
		position: absolute;
    	right: 2%;
    	top: 2%;
	}
	.form__iframe {
		width: 100%;
		height: 600px;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	}
	.form__iframe iframe {
	    width: 100%;
	    height: inherit;
	    border-radius: 10px;
	    position: relative;
	}
}
@media only screen and (min-width: 320px) and (max-width: 475px) {
	.button__banner {
		min-width: 100%;
    	width: 100%;
	}
	.form__iframe {
		width: 100%;
		height: inherit;
	}
	.banner__wrapper {
		gap: 15px;
		padding-top: 25px;
	}
	.banner__button_wrap {
		min-width: 100%;
	}
	.hero__button {
		min-width: 90%;
	}
	.button__popup_2 {
		min-width: 90%;
    	margin: 0 auto;
	}
	.banner__wrap img {
		width: 50px;
	}
	.banner__button_wrap img {
		width: 25px;
	}
	.banner__wrap {
		position: relative;
		padding-bottom: 15px;
		gap: 5px;
	}
	.banner .banner__box .title {
		font-size: 18px;
        position: absolute;
        top: 15px;
        left: 90px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
	.hero__image-bottom, .hero__left, .hero__right {
    	display: none;
	}
	.hero__wrapper {
		background-image: url(../images/background-hero.webp);
        height: 450px;
        background-size: cover;
        background-position: center;
	}
}