/*=============  Hero  =============*/
#hero {
	height: 83.5%;
	gap: 2.5rem;
	color: #fff;
	background: url("../img/pocetna.png") no-repeat center center;
	background-color: #2625255c;
	background-blend-mode: color;
	background-size: cover;
	padding: 3rem 0;
}

#hero h4 {
	width: 55%;
	font-weight: normal;
	text-align: center;
}

/*=============  Cards  ============*/
#cards {
	width: 80%;
	gap: 3rem;
	margin: 0 auto -6rem;
	transform: translateY(calc(-26% - 3.25rem));
}

#cards > div:nth-child(1) {
	--card-color: #8d827b;
}

#cards > div:nth-child(2) {
	--card-color: #f3b6d5;
}

#cards > div:nth-child(3) {
	--card-color: #0eb6ac;
}

#cards > div {
	flex: 1;
	gap: 2rem;
	background: #fff;
	padding: 0 2rem 2rem;
	margin: 4.5rem 0 0;
	border: 1px solid var(--card-color);
	border-radius: 20px;
	text-align: center;
}

#cards > div > div {
	background: var(--card-color);
	width: 7rem;
	padding: 1rem;
	margin: 0 0 -5rem;
	border-radius: 100%;
	transform: translateY(-50%);
	aspect-ratio: 1;
}

#cards img {
	width: 5rem;
}

#cards h3 {
	margin: 0 0 -0.5rem;
}

#cards a.btn {
	color: #fff;
	background: var(--card-color);
	padding: 1rem 2.75rem;
	border-radius: 9px;
	font-size: 1.05rem;
}

/*============  About  =============*/
#about {
	width: 83%;
	gap: 3rem;
	color: #737373;
	margin: 0 auto 6rem;
}

#about > div {
	gap: 2rem;
}

#about img {
	width: 38%;
	border-radius: 20px;
}

/*===========  Reviews  ============*/
#reviews {
	gap: 2rem;
	color: #fff;
	background: #84c3fe;
	padding: 5.5rem 0;
	font-size: 1.05rem;
}

:is(#reviews, #contact) h3 {
	font-size: 2.1rem;
}

#reviews > p {
	width: 59%;
	margin: 0 0 0.5rem;
	text-align: center;
}

#reviews > div {
	width: 90%;
	gap: 1rem;
}

#reviews > div > div {
	flex: 1;
	gap: 1.66rem;
	align-items: center;
	color: #7a7a7a;
	background: #fff;
	padding: 1.75rem 1rem 2rem;
	border: 1px solid #757575;
	border-radius: 10px;
	font-size: 0.83rem;
	text-align: center;
}

#reviews img {
	width: 22%;
	border-radius: 100%;
}

#reviews > div > div > div:first-of-type {
	margin: 0 0 -0.3rem;
}

#reviews h4 {
	color: #4e4e4e;
	margin: 0 0 -0.25rem;
}

#reviews span {
	font-size: 0.66rem;
}

#reviews .stars {
	color: #ffd700;
	font-size: initial;
}

/*============  Contact  ===========*/
#contact {
	width: 52%;
	gap: 2.25rem;
	margin: 0 auto;
	padding: 5.5rem 0;
	font-size: 1.05rem;
}

#contact > input {
	width: -webkit-fill-available;
	padding: 1.5rem;
	border: 1px solid #757575;
	border-radius: 10px;
	font-size: 1.1rem;
	outline: none;
}

#contact > input::placeholder {
	color: #5b5b5b;
}

#contact label {
	width: 95%;
	font-size: 0.85rem;
}

/*==========  Responsive  ==========*/
@media screen and (min-width: 1100px) {

	/*==========  Cards  ===========*/
	div#cards {
		width: 70%;
	}
}

@media screen and (min-width: 760px) and (max-width: 950px) {

	/*==========  Cards  ===========*/
	div#cards {
		margin: 0 auto -20rem;
		transform: translateY(-19rem);
	}
}

@media screen and (max-width: 950px) {

	/*===========  Hero  ===========*/
	#hero {
		height: 100%;
		text-align: center;
	}

	#hero h4, #reviews > p, #contact {
		width: 90%;
	}

	/*==========  Cards  ===========*/
	#cards {
		width: 80%;
		flex-flow: column;
		gap: 1.5rem;
		margin: 2rem auto 2rem;
		transform: none;
	}

	/*==========  About  ===========*/
	#about {
		margin: 3rem auto 4rem;
	}

	#about img {
		display: none;
	}

	/*=========  Reviews  ==========*/
	#reviews, #contact {
		padding: 4rem 0;
	}

	#reviews > div {
		overflow: scroll;
	}

	#reviews > div > div {
		min-width: 77%;
	}
}