/* === DESKTOP FIRST === */
@media (max-width: 2560px) and (min-width: 1200px) {
	.header {
		display: block;
	}
}
/* xl <= Extra extra large (xxl) */
@media (max-width : 1400px) {
	.about-me__picture img {
		max-width: 375px;
	}
	.about-me__info {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

/* lg <= Extra large (xl) */
@media (max-width : 1200px) {
	.header {
		position: static;
		transform: none !important;
	}
	.section-one__container {
		grid-template-columns: 1fr;
	}
	.problems__container {
		grid-template-columns: 1fr;
	}
	.problems__right {
		width: 100%;
		height: 600px;
	}
	.about-me {
		padding: 40px 0;
	}
	.problems__right img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}
	.about-me__picture {
		position: relative;
		left: 0;
		right: 0;
		margin: 0 auto;
		order: 2;
		transform: translateY(60px);
	}
	.about-me__right-top {
		max-width: 100%;
		order: 1;
	}
	.about-me__right-bottom {
		max-width: 100%;
		order: 3;
	}
	.about-me__container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 60px;
	}
	.main-page__title h1 .main-page__title-main {
		font-size: 100px;
	}
	.main-page__title h1 .main-page__title-accent, .main-page__title h1 .main-page__title-right {
		font-size: 44px;
	}
	.feedback__container {
		grid-template-columns: 1fr;
	}
	.container-custom {
		padding-top: 0;
	}

	/*	mobile menu*/

	.header__desktop {
		display: none;
	}

	.header__mobile {
		display: block;
		position: relative;
	}

	.header__menu-toggle {
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		position: relative;
		z-index: 1001;
	}

	.header__menu-icon--open {
		display: block;
	}

	.header__menu-icon--close {
		display: none;
	}

	.header__mobile-menu--open + .header__menu-toggle .header__menu-icon--open {
		display: none;
	}

	.header__mobile-menu--open + .header__menu-toggle .header__menu-icon--close {
		display: block;
	}

	.menu-open .header__menu-icon--open {
		display: none;
	}

	.menu-open .header__menu-icon--close {
		display: block;
	}

	.header__mobile-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 30px;
		transform: translateY(-100%);
		opacity: 0;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
		padding: 0 20px;
	}

	.header__mobile-item {
		transform: translateY(20px);
		opacity: 0;
		transition: all 0.3s ease;
		text-align: center;
	}

	.header__mobile-menu--open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: all;
	}

	.header__mobile-menu--open .header__mobile-item {
		transform: translateY(0);
		opacity: 1;
	}

	.header__mobile-menu--open .header__mobile-item:nth-child(1) {
		transition-delay: 0.1s;
	}

	.header__mobile-menu--open .header__mobile-item:nth-child(2) {
		transition-delay: 0.2s;
	}

	.header__mobile-menu--open .header__mobile-item:nth-child(3) {
		transition-delay: 0.3s;
	}
	.header__mobile .header__contacts {
		flex-direction: column;
	}
}

/* md <= Large (lg) */
@media (max-width : 992px) {
	.main-page__center.mobile-image {
		display: none;
	}
	.mobile-image {
		display: inline-flex;
	}
	.desktop-image {
		display: none;
	}
	.main-page {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.main-page__center {
		position: relative;
	}
	.main-page__right {
		justify-items: normal;
	}
	.main-page__description {
		max-width: 100%;
	}
	.custom-title-h2 {
		font-size: 44px;
	}
	.cases-box {
		grid-template-columns: 1fr;
	}
	.container-custom, .header__container {
		margin: 0 6%;
	}
	.main-page__title-bg svg {
		max-width: 100%;
		height: 100px;
		width: 360px;
	}
	.main-page__center {
		position: relative;
	}
}

/* sm <= Medium (md) */
@media (max-width : 768px) {
	.banner__container {
		padding: 16px 16px 0 16px;
	}
	.feedback__result {
		flex-direction: column;
		gap: 12px;
	}
	.feedback__result-box {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
	.feedback__right-bottom {
		grid-template-columns: 1fr;
	}
	.feedback__right-bottom .btn-container {
		order: 1;
	}
	.feedback__right-bottom .custom-text-20 {
		text-align: center;
		margin-bottom: 0;
	}
	.banner__btn-container {
		flex-direction: column;
	}
	.picture-container {
		grid-template-columns: 1fr;
	}
	.picture-box__image {
		width: 100%;
		height: 500px;
	}
	.picture-box__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}
	.main-page__btn {
		font-size: 20px;
		padding: 16px;
	}
	.footer__container {
		gap: 40px;
	}
	.footer__col .btn-custom {
		font-size: 18px;
		white-space: nowrap;
	}
	.about-me__picture img {
		max-width: 100%;
	}
	.about-me__container {
		padding: 40px 20px;
	}
	.info-box__title {
		font-size: 24px;
	}
	.info-box__description {
		font-size: 20px;
	}
}

/* xs <= Small (sm) */
@media (max-width : 576px) {
	.header__mobile .header__cases {
		max-width: 100%;
		width: 100%;
	}
	.footer__container {
		gap: 30px;
	}
	.desktop-container {
		display: none;
	}
	.mobile-container {
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.mobile-container .main-page__btn {
		font-size: 20px;
		padding: 16px;
	}
	.main-page__center.mobile-image {
		display: block;
	}
	.main-page__center img {
		object-position: center -90px;
	}
	.blue-custom-btn {
		padding: 14px 20px;
	}
	.white-custom-btn {
		padding: 14px 10px;
	}
	.banner__picture {
		padding: 0;
		margin-top: 24px;
	}
	.footer__col:not(:last-child) {
		border-bottom: 1px solid rgba(255,255,255,0.2);
		padding-bottom: 30px;
	}
	.footer__col .btn-custom {
		max-width: 100% !important;
	}
	.footer__contacts .btn-max-width {
		max-width: 100% !important;
	}
	.feedback-form__picture {
		max-height: 500px;
		margin-bottom: 36px;
	}
}


/* === MOBILE FIRST === */

/* Custom (xs) */
@media (min-width : 0) {

}

/* Small (sm) */
@media (min-width : 576px) {

}

/* Medium (md) */
@media (min-width : 768px) {

}

/* Large (lg) */
@media (min-width : 992px) {

}

/* Extra large (xl) */
@media (min-width : 1200px) {
	.text {
		font-size: 18px;
	}
}

/* Extra extra large (xxl) */
@media (min-width : 1400px) {
	.text {
		font-size: 22px;
	}
}