@media (max-width: 1145px) {
	.hero {
		position: relative;
	}
	.hero__socials {
		justify-content: center;
		flex-direction: row;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.hero__social {
		background: #272727;
	}
}

@media (max-width: 960px) {
	.hero__content__title {
		font-size: 35px;
	}
	.hero__content__par {
		font-size: 16px;
	}
	.footer__info {
		position: static;
	}
}

@media (max-width: 740px) {
	.header__nav {
		flex-direction: column;
		z-index: 100;
	}
	.header__title__text {
		display: none;
	}
	.hero__content {
		/* text-align: center; */
		background-position: top left;
	}
	.hero__content__title {
		font-size: 24px;
		letter-spacing: 4px;
	}
	.hero__content__par {
		font-size: 14px;
	}
	.hero__content__btn {
		padding: 12px;
		font-size: 12px;
	}
	.header__menu__btn {
		display: flex;
		margin-right: 10px;
		cursor: pointer;
	}
	.header__nav {
		flex-direction: row;
	}
	.header__items {
		flex-direction: column;
		padding: 10px 0;
	}
	#responsive__navbar {
		background: #272727;
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
		z-index: 25;
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s;
	}
	#responsive__navbar.active {
		transform: translateY(110px);
		opacity: 1;
		visibility: visible;
	}
	.header__items {
		flex-wrap: wrap;
		gap: 10px;
	}
	.header__item,
	a {
		font-size: 12px !important;
		line-height: normal;
	}
	.header__title__image {
		max-width: 50px;
	}
}

@media (max-width: 600px) {
	.hero {
		padding: 0;
		z-index: 10;
		margin-bottom: 40px;
	}
	.about,
	.catalog {
		padding: 0 10px;
		margin-bottom: 20px;
	}
	.footer {
		padding: 10px;
	}
	.container {
		padding: 0px;
	}
	.hero__content {
		padding: 10px;
	}
	.hero__content__title {
		font-size: 30px;
	}
	.hero__content__par {
		font-size: 15px;
	}
	.hero__content__btn {
		font-size: 10px !important;
	}
	.hero__socials {
		bottom: -50px;
	}
	.hero__social {
		padding: 5px;
		border: 0.5px solid #fff;
	}
	.detail__image {
		width: 278px !important;
	}
	.footer__phone {
		font-size: 16px !important;
	}
	.footer__info {
		padding: 30px;
	}
	.footer__info__title {
		font-size: 16px;
	}
	.footer__info__par {
		font-size: 14px;
	}
	.about__image__content__btn {
		right: 10px;
	}
	.catalog__item__title:first-child {
		font-size: 16px;
	}
	.about__title,
	.catalog__title,
	.about__title > span,
	.catalog__title > span {
		font-size: 28px;
	}
}