/***** FONTS *****/

@import url('fonts.css');


*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;

}

body {
	margin: 0px;
	padding: 0px;


}

:root {

	/*** Theme font-family ***/
	--great_vibes: 'Great Vibes', cursive;
	--italianno: 'Italianno', cursive;
	--poppins:'Poppins', sans-serif;
	--lexend: 'Lexend Deca', sans-serif;
	--livvic: 'Livvic', sans-serif;



	/*** Theme Colors ***/

	--purple: #8e44ad;
	--white-a: #f5f6fa;
	--white: #fff;
	--purple-dark-a: #810BA8;
	--gray: #adb5bd;
	--gray--dark: #dfe4ea;
	--black: #0f0f0f;

	/* Gradient color */

	--nav-main: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%);
	--nav-dropdown: linear-gradient(to left, #cd9cf2 0%, #f6f3ff 100%);
	--nav-hover: linear-gradient(to top, #8821b8, #9131c0, #993fc8, #a24cd0, #aa58d8, #b060dd, #b769e3, #bd71e8, #c378ec, #ca7ef0, #d085f4, #d68cf8);



}

/***** Global Classes  *****/


a {
	text-decoration: none !important;
	cursor: pointer;
}

h1 {
	text-align: center;
	margin-top: 20px;
	font-family: var(--poppins);
}
h2 {
	color: var(--black);
	text-align: center;
	margin: 30px auto;
	font-family: var(--italianno);
	font-size: 52px;
	font-weight: 100;
}

h1, h2, h3, h4, p, table, ul {
	cursor: default;
}


.block-scroll {
    height: 100%;
	overflow: hidden;
    -webkit-overflow: hidden;
    position: relative;
    touch-action: none;
}


/******  HEADER  *******/

header {
	display: flex;
	justify-content: space-between;
	color: var(--purple);
	margin: 0;
	padding: 0 100px;

}

header .header-logo {
	text-align: center;
	margin: auto;
	
}

header .header-logo img {
	/*height: 150px;*/
}



header .call {
	display: flex;
	margin: auto;
	font-family: var(--poppins);
}

header .call p {
	font-size: 22px;
	padding-bottom: 7px;
	letter-spacing: 2px;
	
}

header .call a {

	text-decoration: none;
	color: var(--purple);
	letter-spacing: 1px;
	line-height: 27px; 

}

header .call a:hover {
	/*color: #B644DB !important;*/
	transition: 0.5s ease;
}
header .call  a:after {
  content: '';
  display: block;
  margin: auto;
  height: 2px;
  width: 0px;
  background: transparent;
  transition: width .5s ease-in-out, background-color .5s ease-in-out;
  
}
header .call  a:hover:after {
  width: 100%;
  background: var(--purple);
}


/******  HEADER END  *******/

/****** NAVIGATION ******/
nav {
	margin-top: -7px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	position: relative;
	background-image: var(--nav-main);
	font-family: var(--poppins);	
	min-height: 53px !important;
	outline: none;
	transition: all 1s ease-in ;

	/*text-transform: uppercase;*/

	

}

nav ul {
	list-style-type: none;
}

nav a {
	text-decoration: none;
}

.nav-sticky {

	width: 100%;
	position: sticky;
	display: block;
	top: 0;
	padding: 0px;
	margin: 0px;
	z-index: 99;

}

.nav-logo {
	letter-spacing: 3px;
	font-size: 32px;
	text-align: center;
	width: 20%;
	display: none;
	
}

.nav-logo a {
	font-family: var(--great_vibes);
	color: var(--purple);
	font-weight: bolder;
}


.nav-items {
    display: flex;
	justify-content: center;
	width: 100%;
	outline: none;

}

.nav-links {
	position: relative;
}
.nav-links a {
	z-index: 1;
}
.nav-links .animation {
	position: absolute;
	/*width: 160px;*/
	height: 53px;
	top: 0;
	z-index: 0;
	/*background-image: var(--nav-hover);*/
	/*border-radius: 8px;*/
	transition: all .5s ease 0s;
	display: flex;
	flex-wrap: wrap;
}


@media screen and (min-width: 961px) {
	.nav-links .topLinks a{
		text-align: center;
		justify-content: center;
		display: flex;
		align-items: center;
		/*width: 160px;*/
		height: 53px;
	}
}

@media screen and (max-width: 961px) {
	.animation {
		display: none !important;
	}
}


.nav-items .nav-links {
	display: flex;
	flex-wrap: wrap; 
	cursor: pointer;
	/*justify-content: center;*/
	font-family: var(--poppins);
}

.nav-items .nav-links li {
	display: flex;
	margin: 0px;
	font-family: var(--poppins);
	
}


.nav-items .nav-links li a {
	padding: 14px 20px;
	color: var(--purple-dark-a); 
	margin: 0px;
	font-family: var(--poppins);
}



.nav-items .nav-links li:hover  {
	/*transition: all 0.9s ease;*/
	/*background-image: var(--nav-hover);*/

}

.nav-items .nav-links li:hover > a {

	color: var(--white-a);
	transition: all 0.5s ease;

}


.nav-items .nav-links li .dropdown {
	
	position: absolute;
	visibility: hidden;
	opacity: 0;
	top: 60px;
	
}

.nav-items .nav-links li .dropdown li {
	border-bottom: 1px solid #f1f2f6;
	border-radius: 0px;
}

.nav-items .nav-links li .dropdown li:last-child {
	/*border-bottom: none;*/
}

.nav-items .nav-links li:hover .dropdown {
	position: absolute;
	visibility: visible;
	opacity: 0.9;
	display: flex;
	border-radius: 0px 0px 10px 10px;
	flex-direction: column;
	top: 53px;
	background-image: var(--nav-dropdown);
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	

}

.nav-items .nav-links li:hover .dropdown li a {
	width: 240px;
	transition: all 1s ease;
	margin: 0px;
	padding: 14px;
}
.dropdown li:hover {
	background-image: var(--nav-hover);
}

.dropdown li:hover a  {
	padding-left: 25px !important;
	

}

.burgerBtn {
	display: none;
	cursor: pointer;
}

.burgerBtn div {
	width: 25px;
	height: 3px;
	background-color:  var(--purple);
	margin: 5px 0px;
	transition: all 0.3s ease;
	border-radius: 5px;
	position: relative;
	right: 5px;
}


.rotate .line1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}
.rotate .line2 {
	opacity: 0;
}
.rotate .line3 {
	transform: rotate(45deg) translate(-5px, -6px);
}

.collapse {
	height: 63vh;
	width: 100%;
	z-index: 1;
	position: absolute;
	transition: height 1s ease-in-out;
	overflow-y: scroll !important; /*za sada neka ostane ovako dok ne smislom mozda nesto lepse*/

}

/****** NAVIGATION END******/


/******  ACTIVE NAVIGATION PAGE  *******/


/* Active link*/
.active {
	background-image: var(--nav-hover);
	color: var(--white-a) !important;
}

.dropdown .active {

	border-radius: 0px;
}

/******  ACTIVE NAVIGATION PAGE END *****/







/****** FRONT IMAGE ******/
.front-image {
	height: 80vh;
	margin-bottom: -5px; 
	

}

.front-message {
	position: absolute;
	width: 40%;
	top: 80%;
	left: 15%;
	font-family: var(--livvic); 
	font-size: 24px;

}

.front-message  p {
	width: 100%;
	margin-bottom: 20px;
	color: var(--black);

}

.front-message i {
	float: right;
}


.front-image img{

	float: right;
	justify-content: flex-end;
	height: 95%;
	margin: 0 !important;
	padding: 0 !important;

}



/**** FRONT IMAGE END ***/



/***** CONTENT  ****/

main {
	background: url(../images/background-main.jpg);
	background-size: cover;
}

.main-content {
	margin-left: 5%; 
	margin-right: 5%; 
	display: flex;
	flex-direction: column;
	text-align: center; 	
}


.main-content .cards-container {
	
		display: flex;	
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 5%;

		
}

.main-content .cards-container .img-container {
	display: flex;
	flex-direction: column;
	margin: 10px;	
	margin-bottom: 40px; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 
	0 6px 20px 0 rgba(0, 0, 0, 0.19); 

}

 .cards-container .img-container  img{
	width: 300px !important;
	height: 200px;
	transition: all 2s ease;
	overflow: hidden !important;

}

.cards-container .img-container p {
	width: 300px;
	height: auto;
	padding: 10px 0px;
	z-index: 1;
	font-size: 22px;
	margin: auto;
	font-family: var(--livvic);
	cursor: pointer;
}
.cards-container .img-container p  {
	color: var(--black);
}

 .cards-container .img-container .img {
 	overflow: hidden;
 }


 .cards-container .img-container a > .img img:hover {
 	overflow: hidden;
 	transform: scale(1.3);
 }



/**** COTENT END ***/

/****** FOOTER  *****/

footer {
	background-color: var(--black);
	width: 100%;
	color: var(--gray) !important;
	position: relative;
	font-family: var(--poppins);
	
}

footer a:hover {
	color: var(--white) !important;
	transition: 0.7s;
}

footer .footer-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 0px 50px ;

}

footer h3 {
	color: var(--gray--dark);
}

footer .footer-container > div {
	flex-grow: 1; /*The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.*/
	flex-basis: 0; /*e flex-basis property specifies the initial length of a flexible item*/
	padding-top: 20px ;
}

footer .footer-container .footer-logo {
	margin-top: 50px;
	text-align: center;
}

footer .footer-container .footer-logo img {
	width: 90%;
}

footer .footer-container .footer-logo a {
	text-decoration: none;
	font-family: var(--great_vibes);
	font-size: 60px;
	color: var(--gray--dark);
}

footer .footer-container  .footer-menu  {
	list-style-type: none;
	text-align: center;
}

footer .footer-container  .footer-menu h3 {
	padding-bottom: 10px !important ;
}

footer .footer-container  .footer-menu ul {
	list-style-type: none;
	
}

footer .footer-container  .footer-menu ul li{
	list-style-type: none;
	line-height: 25px;
	
}
footer .footer-container  .footer-menu ul a{
	
	text-decoration: none;
	color: var(--gray);
}

footer .footer-container .footer-contact {
	display: flex;
	justify-content: center;
	text-align: center;
	flex-direction: column;
}

footer .footer-container .footer-contact h3 {
	padding-bottom: 10px; 
}

footer .footer-container .footer-contact #footer-address {
	padding-top: 10px; 
}

footer .footer-container .footer-contact a {
	text-decoration: none;
	color: var(--gray);
	line-height: 25px;

}


footer .footer-container .footer-contact  a:after {
  content: '';
  display: block;
  margin: auto;
  height: 2px;
  width: 0px;
  background: transparent;
  transition: width .5s ease-in-out, background-color .5s ease-in-out;
  
}
footer .footer-container .footer-contact  a:hover:after {
  width: 55%;
  background: var(--gray);
}

footer .footer-container  .footer-menu ul li a:after {
  content: '';
  display: block;
  margin: auto;
  height: 2px;
  width: 0px;
  background: transparent;
  transition: width .5s ease-in-out, background-color .5s ease-in-out;
  
}

 footer .footer-container  .footer-menu ul a:hover:after {
  width: 20%;
  background: var(--gray);
}

footer .rights h4{
	text-align: center;
	padding: 20px 10px; 
}

footer .rights a {
	font-family: var(--great_vibes);
	font-size: 20px;
	color: var(--gray);
}



 body .move-up {
	display: none;
	position: fixed;
	right: 3%;
	bottom: 5%;
	cursor: pointer;
	z-index: 999;
}

 .move-up span {
	color: #B95BD8;
	
}

 .move-up span:hover {
	color: #7B2796;
	transition: 0.7s ease;
	cursor: pointer;
}

/**** FOOTER END ***/




/***    Viewport less then or equal to 1100px   ***/

@media screen and (max-width: 1100px) {
	header {
		padding: 0 20px;
	}



}

/***    Viewport less then or equal to 960px   ***/

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

	header {
		justify-content: space-around;
	}

	.header-address, .call {
		padding: 10px !important;
		
		font-size: 18px !important;
		text-align: center;
		
	}

	.header-address {
		margin-top: 10px;
	}



	.header-logo, .insta-icon {
		display: none;
	}

	nav {

		margin-top: -4px;
		height: 7vh;
		overflow: hidden;
	}

	.front-image {
		height: 60vh;
	}


	.front-message {
		position: absolute;
		width: 50%;
		top: 60%;
		left: 10%;
		font-size: 18px;

	}




	.nav-logo {
		width: 80%;
		align-items: flex-start;
		text-align: left;
		margin-top: 10px;
		display: inherit;


	}


	.nav-items {
		display: flex;
		width: 100%;


	}

	.nav-links{
		width: 100%; 
	}
	.nav-links li{
		width: 100%;
		display: block;
		float: left;

	}

	.burgerBtn {
		display: block;
		cursor: pointer;
		margin-top: 10px;
	}

	.nav-items .nav-links > li:first-child {
		margin-top: 13px;
	}

	.nav-items .nav-links li {
		align-items: center !important;
		text-align: center;
		justify-content: center;
		flex-direction: column !important;
	}

		.nav-items .nav-links li:hover {
			transition: 0s;
			background-color: none !important;
	}

	.nav-items .nav-links li:hover {
		background-image: none !important;	
	}

	.nav-items .nav-links li .dropdown {
		visibility: hidden;
		transition: all 0s !important;	
	}

	.nav-items .nav-links li:hover .dropdown {
		visibility: hidden !important;

	}

	.nav-items .nav-links li:hover .dropdown li {
		transition: all 0s !important;	

	}
	.nav-items .nav-links li:hover .dropdown li a {
		transition: all 0s !important;	
	}

	.dropdown_show {
		width: 100%;
		display: block !important;
		padding: 0px;
		position: inherit!important;
		visibility: visible !important;
		opacity: 1 !important;
		flex-direction: column;
		justify-content: flex-start;
		top: 25px;
		left: -85px;
		box-shadow: none;
		border-radius: 0px;
		z-index: 1!important;
	}


	.dropdown_show li:hover {
		width: 100%;
	}

	.dropdown_show li a{
		width: 100% !important;
		color: var(--purple) !important; 

	}


	.dropdown_show  li a:hover {
		width: 100%;
		color: var(--white) !important;

	}

	.dropdown_show li {
		visibility: visible !important;
		transition: all 0.1s ease; 
	}

	.dropdown_show li a {
		text-align: left !important;
	}

	.dropdown_show li a.active  {
		color: var(--white) !important;
	}

	.content_title {
		font-size: 60px !important;
	}


	footer .footer-container .footer-logo a {
		font-size: 30px;
	}


	footer .footer-container .footer-logo img {
		width: 100%;
	}







}


@media screen and (min-width: 961px) {

		nav {
			max-height: 53px !important ;
		}

	
}

/***    Viewport less then or equal to 590px   ***/

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

	header {
		padding: 0;
	}


	.front-message {
		
		top: 60%;
		left: 1%;
		font-size: 16px;


	}



}

/***    Viewport less then or equal to 520px   ***/

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

	/*html, body  main{*/
		/*overflow-x: hidden !important;*/
	/*}*/
	
	 main{
		overflow-x: hidden !important;
	}

	.header-address, .call {
		font-size: 16px !important;
		justify-content: center;
	}
	header {
		flex-direction: column;
		padding: 0px;
	}



	.cards-container .img-container {
		width: 80%;
	}
	.cards-container .img-container  img, .cards-container .img-container  p {
		width: 100% !important;
	}

	footer .footer-container {
		grid-template-columns: repeat(1, 1fr);
	}


	.front-message {
		display: none;


	}

	.content_title {
		font-size: 50px !important;
	}


	 body .move-up {
		right: 7%;
		bottom: 5%;
		cursor: pointer;
		z-index: 999;
	}




}

/***    Viewport less then or equal to 340px   ***/

@media screen and (max-width: 340px) {
	.nav-logo {
		font-size: 22px !important;
		
	}


	.front-image {
		height: 40vh;
	}

	footer .footer-container .footer-logo img {
		width: 80%;
	}

}