@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* {
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
	background: whitesmoke;
	min-height: 100%;
	min-width: 100%;
	background-color: #e8e1fa;
}


header {
	position: absolute;
	top: -2.7%;
	width: 90%;
	margin: 0 5%;
	background: url(header.jpg);
	background-size: cover;
	background-position: center;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	-webkit-box-shadow: 0px 0px 53px -32px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 53px -32px rgba(0,0,0,0.75);
box-shadow: 0px 0px 53px -32px rgba(0,0,0,0.75);
z-index: 999;
}

header .hrline1 {
	top: 0;
	position: relative;
	border: 3px solid red;
	max-width: 99.6%;
}

header .hrline2 {
	bottom: 1.35rem;
	position: relative;
	border: 3px solid black;
	max-width: 99.6%;
}

header picture .logoja {
	position: relative;
	top: -2rem;
	max-height: 6rem;
	width: auto;
	display: block;
  margin-left: auto;
  margin-right: auto;
}

header .hrline3 {
	position: relative;
	max-width: 50%;
	margin: 0 25%;
	border: 1px solid #e6daff;
}

header ul {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	list-style-type: none;
	align-content: center;
	width: 100%;
	text-align: center;
	top: 0rem;
	position: relative;
	color: white;
}

header ul li {
	display: inline-block;
	justify-content: space-between;
	padding: 0.8rem;

}

header ul li a{
	text-decoration: none;
	text-align: left;
}

header ul li a:hover {
	color: #c7afff;
	transition: 0.5s;
}

header ul li a button {
	position: relative;
	background-color: #0952fa;
	padding: 0.35rem 0.5rem;
	border: 1px solid #0952fa;
	border-radius: 20px;
	cursor: pointer;
	color: white;
	z-index: 998;
	font-family: 'Helvetica Neue', sans-serif;
}


header ul li a button:hover {
	background-color: transparent;
	transition: 0.2s;
	border: 1px solid #0952fa;
	color: #0952fa;
	transition: 0.2s;
	cursor: pointer;
}


content {
	position: absolute;
	width: 95%;
	height: auto;
	margin: 0 2.5%;
	top: 30%;
}

content .sfond {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	width: 100%;
	height: auto;
	position: relative;
}

content .shpjegim {
	border-radius: 50px;
	width: 96%;
	height: auto;
	margin: 0 2%;
	display: flex;
	background: rgb(164,150,255);
    background: linear-gradient(180deg, rgba(164,150,255,1) 0%, rgba(62,59,255,1) 100%);
}

.qrcode {
	float: left;
	max-width: 40%;

}

.qrcode1 {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.shpjegim div {
	padding: 5%;
}

.container2 {
	margin: 4% 0;
	width: 60%;
	height: auto;
	text-align: right;
	font-family: "Inter", sans-serif;
	color: white;
}

.container2 .h1 {
	font-size: 3.5rem;
	font-weight: 700;
}

.container2 .p2 {
	font-size: 1.2rem;
}

content .buton {
	margin-top: 5%;
	text-align: center;
	font-family: "Inter", sans-serif;
}

.buton p {
	padding-bottom: 5%;
}

.vizito1 .vizito {
	width: 200px;
	height: 50px;
	position: relative;
	font-family: "Inter", sans-serif;
	font-size: 1.1em;
	font-weight: 500;
	background-color: #181818;
	border: none;
	cursor: pointer;
	color: white;
	border-radius: 20px;
}

.vizito1 .vizito:hover {
	background-color: transparent;
	color: #181818;
	border: 1.5px solid #181818;
	transition: 0.2s;
}

.footer {
	bottom: -200%;
	width: 90%;
	margin: 0 5%;
	position: absolute;
	font-family: "Inter", sans-serif;
	color: #9ea8b5;
}

.footer img, .footercont {
	grid-gap: none;
}

.footer .footercont {
	background: #000000;
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(10, 7, 18, 1) 50%, rgba(21, 21, 31, 1) 100%);
padding: 2%;
text-align: justify;
}

.footercont div{
	display: inline-grid;
	grid-gap: rem(1, 1);
}

.footercont .info {
	width: 33%;
	padding-right: 1rem;
}

.footercont .info2 {
	width: 33%;
	padding-right: 1rem;
}

.info2 img {
	width: 75%;
	filter: invert(90%);
	margin-left: auto;
	margin-right: auto;
	cursor: pointer;
}

.info2 img:hover {
	filter: invert(0.6);
	transition: 0.5s;
}

.info2 .partner {
	text-align: center;
	font-weight: 600;
}

.contact {
	width: 33%;
	padding-right: 1rem;
	text-align: center;
}

.contact ul {
	list-style-type: none;
	margin-bottom: 2%;
}

.contact ul li {
		display: inline;
		padding: 0 2%;
}

.contact ul li img {
	max-width: 10%;
	cursor: pointer;
	filter: invert(0.8);
}

.contact ul li img:hover {
	filter: invert(0.6);
	transition: 0.5s;
}

.contact a button {
	position: relative;
	background-color: #0952fa;
	padding: 0.35rem 0.5rem;
	border: 1px solid #0952fa;
	border-radius: 20px;
	cursor: pointer;
	color: white;
	z-index: 998;
	font-family: 'Helvetica Neue', sans-serif;
	margin-bottom: 2%;
}

.contact .logo {
	max-width: 80%;
	height: auto;
	cursor: pointer;
}

.contact .logo:hover {
	opacity: 0.8;
	transition: 0.5s ease;
}

.hrline4 {
	width: 85%;
	position: relative;
	margin: 1% 7.5% 3% 7.5%;
	border: 1px solid #2c3e50;
	opacity: 0.7;
	border-radius: 30%;
}


@media (max-width: 1280px) {

	content {
		top: 35%;
	}

	.footer {
		bottom: -230%;
	}
}

@media (max-width: 975px) {
		.footer {
		bottom: -250%;
	}

	.footer .footercont div {
		display: block;
		width: 90%;
		margin: 0 5%;
		text-align: center;
	}
}

@media (max-width: 769px) {

	.shpjegim div {
		float: none;
		flex-direction: row;
		display: grid;
	}

	.shpjegim .qrcode {
		display: none;
	}


	.shpjegim .container2 {
		width: 90%;
		margin: 0 5%;
	}

	.container2 .h1 {
		text-align: center;
	}

	.container2 .p2 {
		text-align: justify;
	}
}

@media (max-width: 425px) {

	content {
		top: 40%;
	}

	.footer {
		bottom: -300%;
	}
}

@media (max-width: 325px) {

	.footer {
		bottom: -350%;
	}
}