.contacts-page {
	.container-main {
		max-width: var(--size-mobile-max);
		margin: var(--size-48px) auto;
		@media screen and (min-width: 37.5rem){
			max-width: var(--size-500);
		}
		@media screen and (min-width: 48rem){
			max-width: var(--size-500-768);
			margin: var(--size-48px) auto var(--size-128px);

		}
	}
	.container-title {
		max-width: var(--size-mobile-max);
		margin: 0 auto;
		text-align: center;
		.main-title {
			color: var(--white);
		}
		.line {
			display: block;
			width: 6rem;
			height: 0.375rem;
			margin: 0 auto;
			background: var(--brand-green);
			border-radius: var(--size-04px);
		}
	}
	.description {
		text-align: center;
		margin: var(--size-16px) auto 0;
		width: 35ch;
		@media screen and (min-width: 37.5rem){
			width: 52ch;
		}
	}
	.contact-form {
		background: hsla(222, 14%, 14%, 0.5);
		border-radius: var(--size-08px);
		margin-top: var(--size-64px);
		padding: var(--size-24px) var(--size-20px);
		.input-group {
			margin-bottom: var(--size-20px);
			label {
				display: flex;
				margin-bottom: var(--size-12px);
				.icon {
					width: 1rem;
					height: 1rem;
					margin-right: var(--size-08px);
				}
				.text {
					color: var(--grey);	
				}
			}
			input {
				width: 100%;
				height: 3rem;
				background: hsla(222, 15%, 17%, 0.2);
				color: var(--grey);
				border: 0.0625rem solid hsla(222, 11%, 77%, 0.1);
				border-radius: var(--size-12px);
				text-indent: 1rem;
			}
			textarea {
				width: 100%;
				height: 8rem;
				padding: var(--size-12px);
				background: hsla(222, 15%, 17%, 0.2);
				color: var(--grey);
				border: 0.0625rem solid hsla(222, 11%, 77%, 0.1);
				border-radius: var(--size-12px);
				resize: none;
			}
		}
		.info-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 4rem;
			background: hsla(222, 15%, 17%, 0.2);
			color: var(--grey);
			border: 0.0625rem solid hsla(222, 11%, 77%, 0.1);
			border-radius: var(--size-12px);
			padding: var(--size-16px);
			.icon {
				width: 1.25rem;
				height: 1.25rem;
				margin-right: var(--size-16px);
			}
			.text {
				color: var(--grey);	
			}
		}
		.btn-submit {
			width: 100%;
			height: 3.5rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: var(--size-24px) auto;
			background: var(--brand-green);
			border-radius: var(--size-12px);
			.text {
				color: #1E1E1E;
				margin-right: var(--size-12px);
			}
			.icon {

			}
		}
		@media screen and (min-width: 48rem){
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-template-rows: repeat(3, min-content);
			column-gap: var(--size-24px);
			margin-top: var(--size-96px);
			padding: var(--size-40px) var(--size-40px);
			.input-group {
				margin-bottom: var(--size-32px);
				&:nth-of-type(1) {
					grid-column: 1;
					grid-row: 1;
				}
				&:nth-of-type(2) {
					grid-column: 2;
					grid-row: 1;
				}
				&:nth-of-type(3) {
					grid-column: 1 / -1;
					grid-row: 2;
				}
			}
			.info-box {
				grid-column: 1;
				grid-row: 3;
				height: 3.5rem;
			}
			.btn-submit {
				grid-column: 2;
				grid-row: 3;
				justify-self: end;
				width: 15rem;
				margin: 0;
			}
		}
	}

  .container-line {
	display: flex;
	width: 100%;
    .line {
		width: 45%;
		height: var(--size-04px);
		margin: 0 auto;		
		background: linear-gradient(90deg,rgba(34, 204, 178, 0.8) 47%, rgba(0, 0, 0, 1) 100%);
		&:nth-child(1){
			transform: scaleX(-1);
		}

	}
    .point {
		width: var(--size-04px);
		height: var(--size-04px);
		margin: 0 var(--size-08px);
		background: var(--brand-green);
		border-radius: 50%;
	}

  }


}