/* culori ușor de schimbat */
	:root {
		--btn-fg: #474544;
		--btn-bg-hover: #474544;
		--btn-fg-hover: #f2f3eb;
		--ta-fg: #474544;
		--ta-border: #474544;
		--ta-focus: #80bdff;
	}

	::-webkit-input-placeholder {
		color: #474544;
	}

	:-moz-placeholder {
		color: #474544;
		opacity: 1;
	}

	::-moz-placeholder {
		color: #474544;
		opacity: 1;
	}

	:-ms-input-placeholder {
		color: #474544;
	}

	@media all {
		.harta-resize {
			width: 100%;
		}

		.contact {
			display: grid;
			gap: 5em;
			grid-template-columns: repeat(2, 1fr);
			align-self: center;
		}

		.div-contact {
			border: solid 3px #474544;
			max-width: 90vw;
			position: relative;
		}

		.titlu-contact {
			color: #474544;
			margin-top: 20px;
			font-size: 32px;
			font-weight: 700;
			letter-spacing: 7px;
			text-align: center;
			text-transform: uppercase;
		}

		.linie-orizontala-contact {
			border-bottom: solid 2px #474544;
			margin: 1em auto;
			width: 80px;
		}

		.input-contact {
			-webkit-appearance: none;
			appearance: none;
			border-color: #474544;
			background: none;
			border: none;
			border-bottom: solid 2px #474544;
			color: #474544;
			font-size: 1em;
			font-weight: 400;
			letter-spacing: 1px;
			margin: 0em 0 1.875em 0;
			padding: 0 0 0.875em 0;
			width: 100%;
			box-sizing: border-box;
			transition: all 0.3s;
			border-radius: 5px;
			position: relative;
			z-index: 2;
			pointer-events: auto;
			display: block;
		}

		.input-contact:focus {
			outline: none;
			padding: 0 0 0.875em 0;
			box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
			border-top-color: #80bdff;
			border-left-color: #80bdff;
			border-right-color: #80bdff;
		}

		.input-underline::before,
		.input-underline::after {
			pointer-events: none;
		}

		.submit-contact {
			border: 2px solid var(--btn-fg);
			background: transparent;
			color: var(--btn-fg);
			cursor: pointer;
			display: inline-block;
			font-family: 'Helvetica', Arial, sans-serif;
			font-size: 0.875em;
			font-weight: 700;
			padding: 20px 35px;
			text-transform: uppercase;
			transition: background .3s, color .3s, box-shadow .3s, border-color .3s;
			width: 100%;
		}

		/* hover + focus vizibil pentru accesibilitate */
		.submit-contact:hover,
		.submit-contact:focus-visible {
			background: var(--btn-bg-hover);
			color: var(--btn-fg-hover);
			outline: none;
			box-shadow: 0 0 0 3px rgba(71, 69, 68, .25);
		}

		/* feedback la click */
		.submit-contact:active {
			transform: translateY(1px);
		}

		.textarea-contact {
			background: none;
			color: var(--ta-fg);
			font: inherit;
			font-size: 1em;
			font-weight: 400;
			letter-spacing: 1px;
			line-height: 1.5;
			/* 150% */
			width: 100%;
			box-sizing: border-box;

			/* border & radius */
			border: 2px solid transparent;
			/* prevenim “saltul” */
			border-bottom-color: var(--ta-border);
			border-radius: 5px;

			/* spațiere */
			margin: 0 0 1.875em 0;
			padding: 0 0 0.875em 0;

			/* diverse */
			height: auto;
			resize: none;
			overflow: auto;
			transition: box-shadow .3s, border-color .3s;
		}

		.textarea-contact:focus-visible {
			outline: none;
			box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
			border-color: var(--ta-focus);
			/* devin vizibile sus/st/dr + bottom */
		}
	}

	/* TABLETA SI CALCULATOR */
	@media (min-width: 641px) {
		.harta-resize {
			height: 25em;
		}
	}

	@media (max-width: 980px) {
		.contact {
			grid-template-columns: none;
			grid-template-rows: auto auto;

		}
	}

	/* CALCULATOR */
	@media (min-width: 981px) {}

	/* TABLETA */
	@media (min-width: 641px) and (max-width:980px) {}

	/* TELEFON */
	@media (max-height: 640px) {
		/* numele si prenumele se pun unele sub altele, le fac cu grid */
	}