*,
*::before,
*::after {
	margin: 0;
	padding: 0;
}

:root {
	--sino: #23ADEC;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  	--temno-sina: #0E284F;
	--svetlo-sina: rgb(55, 148, 255);
	--crvena: #FF0000;
	--temno-crvena: #A60D12;
	--svetlo-crvena: #FF4D4D;
	--violetova: #8A2BE2;
	--svetlo-violetova: #B366FF;
	--temno-violetova: #5D0090;
	text-wrap: pretty;
}

.sinaPozadina {
	background-color: var(--sino);
}

.crvenaPozadina {
	background-color: var(--crvena);
}

.violetovaPozadina {
	background-color: var(--violetova);
}

h1 {
	font-size: 3rem;
}

h2 {
	text-align: center;
	color: var(--sino);
}

h3 {
	color: var(--sino);
	padding-bottom: 0.5rem;
}

footer {
	margin-top: 1rem;
}

/* Hero */

#website {
	width: 100%;
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/SpecijalnaPonudaMala.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #fff;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	text-align: left;
}

img {
	width: 100%;
}

.webSodrzina,
.container,
#kontakt {
	width: 95vw;
	max-width: 1200px;
	margin: 0 auto;
}

.webSodrzina h1,
.webSodrzina h2,
.webSodrzina p {
	text-align: left;
	color: #fff;
	text-shadow: 0 2px 2px #000;
	margin-bottom: 1rem;
}

.webSodrzina div {
	display: block;
	margin: 1rem 0;
}

.webSodrzina a {
	/* text-align: left; */
	display: inline-block;
	text-decoration: none;
	color: #fff;
	padding: 15px 30px;
	border-radius: 10px;
	border: solid 2px #fff;
}

.webSodrzina a:hover {
	animation: animacijaNaKopce 0.3s;
}

/* Doznaj poveke */

.cardWeb, .cardPrint, .cardFly {
	padding: 1rem;;
	margin: 2rem 0;

	h2{
		color: white;
		margin-bottom: 1rem;
	}
	p{
		color: white;
		margin-bottom: 1rem;
	}
}

.cardWeb {
	background-color: var(--temno-violetova);
}

.cardPrint {
	background-color: var(--temno-crvena);

	h3{
		color: white
	}
}

.cardPrint:nth-child(1) {
	flex-direction: row-reverse;
	background-color: var(--crvena);
}

.cardFly {
	background-color: var(--temno-sina);
}

.cardFly:nth-child(1) {
	flex-direction: row-reverse;
	background-color: var(--svetlo-sina);
}

.opis {
	margin-top: 1rem;
}

.sorabotka{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	color: white;
	text-align: center;
	font-size: 0.5rem;
	align-items: center;
	gap: 1rem;
}

hr{
	color: white;
}

/* Kontakt */

input,
textarea {
	width: 100%;
	margin-bottom: .5rem;
	padding: .5rem;
	font-size: 1rem;
}

.btn {
	text-align: center;
}

button {
	padding: 15px 30px;
	color: white;
	background-color: var(--sino);
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 1rem;
	cursor: pointer;
}

button:hover {
	animation: animacijaNaKopce 0.15s;
}

.kontaktSlika {
	width: 100%;
	margin: 0 0 1rem 0;
}

.kontaktForma {
	width: 95%;
}

.kontaktForma h2 {
	margin: 0 0 1rem 0;
}

/* Resposive */

@media only screen and (min-width: 600px) {
	#website {
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/SpecijalnaPonuda.webp");
		background-position: center;
		background-size: cover;
	}

	.webSodrzina div {
		display: inline-block;
	}

	.webSodrzina div {
		margin-right: 3rem;
	}

	.cardWeb, .cardPrint, .cardFly{
		padding: 1rem;
	}

	.card .slika,
	.card .opis {
		padding: 0 1.5rem;
	}

	.card .opis {
		padding-left: 3rem;
	}

	.card h3 {
		color: #555;
	}

	.sorabotka{
		font-size: 1rem;
		align-items: center;
		gap: 1rem;
		width: 40%;
	}

	.kontaktGrid {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding-block-end: 1rem;
	}

	.kontaktSlika {
		width: 48%;
	}

	.kontaktSlika img {
		width: 100%;
	}

	.kontaktForma {
		width: 48%;
	}
}

footer{
    margin-top: 1rem;
	padding: 1rem;
	text-align: center;
	background: var(--sino);
	color: white;
		a{
		color: white;
		text-decoration: none;
	}
}

/* Animacii */

@keyframes animacijaNaKopce {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	10% {
		-webkit-transform: rotate(2deg) scale(0.8);
		transform: rotate(2deg) scale(0.8);
	}
	40% {
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
	}
	60% {
		-webkit-transform: rotate(2deg);
		transform: rotate(2deg);
	}
	85% {
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
	}
	100% {
		-webkit-transform: rotate(5deg) scale(1);
		transform: rotate(5deg) scale(1);
	}
}
/*# sourceMappingURL=wm.css.map */