header {
	height: 100px;
	border-bottom: 2px solid var(--creme);
}

nav{
    position: fixed !important;
    width: 100% !important;
    text-align: center !important;
    height: 95px !important;
    line-height: 0px;
    top: 0px;
    left: 0px;
    padding: 5px;
    overflow: hidden !important;
	background: var(--lightGreen) !important;
}
	nav:hover {
		background: rgb(255, 255, 255);
	}
	nav img {
		margin-top: -15px;
		opacity: 100;
	}
	
	nav ul {
		padding: 10px 0;
		display: flex;
		margin-left: 25%;
		justify-content: space-around;
	}
	
	nav li {
		display: inline !important;
		top: 0px !important;
		line-height: 10px;
		color: var(--darkGreen) !important;	
		line-height: 30px;
	}
		nav .menutext {
			padding: 0px;
			display: unset;
		}
	
	nav .top {
		padding: 0px !important;
		float: left;
	}

	nav ul .submenu {display: none;}
		nav .submenu a {display: table-row;}
		nav ul li:hover .submenu{
			position: fixed;
			padding: 10px;
			display: block;
			top: 80px;
			line-height: 50px;
			text-align: left !important;
			background: rgba(255, 255, 255, 1) !important;
			z-index: 950;
			width: 225px;
			margin: 0px;
			color: rgba(57, 76, 108, 1);
			border-radius: 10px;
			box-shadow: 0px 0px 50px rgba(57, 76, 108, 0.8);	
			-webkit-animation: splitBox 1s ease;
		}
	
	nav .button {color: var(--darkGreen); margin-top: -18px;}
	nav .button .material-icons {color: var(--darkGreen);}
	
	.h1box small:hover .material-icons ,li a:hover .material-icons, .splitScreen-2:hover .material-icons, .splitScreen-3:hover .material-icons {
		transform: scale(-1, 1);
		transition-duration: 0.5s;
		color: var(--orange) !important;
	}
		
section, .section, haeder {
	margin: 0 auto;
    width: -webkit-fill-available !important;
    max-width: 1200px !important;
    padding: 0px;
    background: transparent !important;
}
	main, .main {
		background: unset;
		padding: 0px;
		max-width: 1000px;
	}
	
	.mainheader {
		margin: 10% 0;
		text-align: left;
		display: flex;
		justify-content: space-between;
		border-radius: 0px !important;
	}
		.bigimg {
			margin: 100px 0px 150px 0px;
			padding: 10% 5%;
			color: #fff;
		}
		
		.mainheader .h1box {
			width: 50%;
		}
			.mainheader h1 {
				text-align: left;
				font-size: 2.5vw;
				font-weight: 800;
				font-family: Inter, ui-sans-serif, system-ui, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color emoji;
			}
			.mainheader p {
				padding: 0px 10px;
				font-size: 17px;
			}
			
			.mainheader .textshadow {text-shadow: 0px 0px 10px #333;}
		
		.mainheader .collagebox {
			width: 40%;
			display: inline-flex;
			flex-wrap: wrap;
		}
			.mainheader .collagebox img {
				width: -webkit-fill-available;
				height: fit-content;
			}
			
			.mainheader .collagesmall, .mainheader .collagebig{
				border-radius: 40px;
				overflow: hidden;
				height: 200px;
				text-align: center;
				margin: 2%;
			}
				.mainheader .collagesmall{width: 30%;}
				.mainheader .collagebig{
					width: -webkit-fill-available;
					height: 100%;
					padding-top: 75px;
				}
				.mainheader video {
					width: -webkit-fill-available;
					border-radius: 50px;
				}
	
	.footerBox {
		margin: 50px 0 0 0;
		border-radius: 0px;
		display: flex;
		flex-wrap: wrap;
		width: -webkit-fill-available;
		overflow: hidden;
		padding: 0 10%; 
		justify-content: space-between;
		background: url(/images/new/FooterBG@1x.svg) center center no-repeat;
		color: #fff;
		background-size: cover;
	}
		.footerBox h3 {font-size: 3vw;}
		.footerBox p {font-size: 2vw;}
		.footerBox .material-icons  {font-size: 5vh;}
		.footerBox .splitScreen-2 {
			padding: 0;
			margin: 0px;
			width: 48%;
		}
		
		.footerBox input[type="text"], .demoinput{
			padding: 2% 0;
			text-align: center;
			font-size: 20px;
			border-radius: 25px !important;
			background: #ccc !important;
			border: 1px solid #bbb !important;
		}
		
	.slideshow {
		overflow: hidden;
		height: 250px;
	}
		.slide-wrapper {
			-webkit-animation: slide 20s ease infinite;
		}
			.slide {
				float: right;
				margin: 10px;
				transition: transform .2s;
			}
	
	.listitem {
		position: relative;
		width: -webkit-fill-available;
		margin: 150px 0px;
		border-radius: 10px;
	}
		.item {
			position: absolute;
			width: 50%;
			height: -webkit-fill-available;
			top: 0px;
			left: 0px;
			color: #333;
			padding: 10px;
			line-height: normal;
			border-radius: 50px;
			text-align: center;
		}

	.text {
		margin: 10px 0 10px 55%;
		padding: 10px 25px;
		background: rgba(250, 250, 250, 0.75);
		border-radius: 25px;
		border: 0px;
		text-align: left;
		line-height: 20px;
	}
		.text .material-icons {text-align: center;}
		.text:hover {background: var(--orange);}
		.text .info {
			border-left: 3px solid var(--orange);
			padding-left: 10px;
			font-style: italic;
		}
			.text:hover .info {
				border-left: 3px solid #394c6c;
				color: rgba(255, 255, 255, 1);
			}

	.itembody1, .itembody2, .itembody3  {display: none; -webkit-animation: fade 2s ease;}
		.text:hover .itembody1 {display: block; -webkit-animation: fade 2s ease;}
		.text:hover .itembody3 {display: block; -webkit-animation: fade 2s ease;}
		.text:hover .itembody2 {display: block; -webkit-animation: fade 2s ease;}

footer {
	max-height: unset;
	text-align: center;
}
	footer .footerLeft, footer .footerRight{
		max-width: 250px;
	}
		footer .footerLeft{float: left;}
		footer .footerRight{float: right;}
		
		footer a {
			border-left: 3px solid var(--orange);
			padding-left: 5px;
			margin-left: 3px;
		}
		footer h2 {font-size: 25px;}
		footer .links a {
			text-transform: none;
			padding: 20px 10px;
		}
	
	.footerCenter {
		display: unset !important;
	}	
		
.float-right {float: right;}
.top-0 {margin-top: 0px;}

.button {
	font-size: 20px;
    border-radius: 10px !important;
	margin: 10px 0;
}
	.blue .button, footer .button {background: var(--orange); color: #333 !important;}
	.buttonwhite {background: #fff !important;}
	
.big {font-size: 50px !important;}

.img, .iframe, .foto {
    border: 2px solid #394c6c;
    margin-left: 10px;
    box-shadow: 5px 10px #394c6c;
    max-height: 400px;
    border-radius: 25px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  background: var(--main-bg);
  color: var(--text);
  text-align: center;
  padding: var(--space-lg);
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.cta a,
.cta button {
  background: var(--white);
  color: var(--primary-600);
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--fast);
}
.cta a:hover,
.cta button:hover {
  background: var(--primary-600);
  color: var(--white);
  transform: translateY(-2px);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  background: var(--gray-100);
}
.features .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-sm);
  color: var(--primary);
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  font-size: 32px;
}
.features h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--text);
}
.features p {
  color: var(--gray-700);
  font-size: 0.95rem;
}

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  background: var(--white);
}
.pricing .card {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-align: center;
  padding: var(--space-lg);
  transition: transform var(--fast), box-shadow var(--fast);
}
.pricing .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevate);
}
.pricing h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-sm);
}
.pricing .price {
  font-size: 2rem;
  color: var(--primary-600);
  font-weight: 700;
  margin: var(--space-md) 0;
}
.pricing ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--gray-700);
}
.pricing li {
  margin: var(--space-xs) 0;
}
.pricing .btn {
  margin-top: var(--space-md);
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background var(--fast);
}
.pricing .btn:hover {
  background: var(--primary-600);
}


@-webkit-keyframes slide {
  0% {margin-top: 0px;}
  15% {margin-top: 0px;}
  20% {margin-top: -250px;}
  35% {margin-top: -250px;}
  40% {margin-top: -500px;}
  55% {margin-top: -500px;}
  60% {margin-top: -750px;}
  75% {margin-top: -750px;}
  80% {margin-top: -250px;}
  95% {margin-top: -250px;}
}

@-webkit-keyframes submenu {
	0% {opacity: 0; margin-top: -50px;}
	100% {opacity: 1; margin-top: 0px;}
}

@-webkit-keyframes fade {
	0% {filter: blur(10px); filter: brightness(50%);}
	100% {filter: blur(0px); filter: brightness(100%);}
}

@media only screen and (min-width: 1200px) {
	.mainheader h1 {
		font-size: 30px;
	}
}

@media only screen and (max-width: 1200px) {
	.splitBox, .item, .text {border-radius: 0px;}
	.noTablet {display: none !important;}
}

@media only screen and (max-width: 800px) {
	header {
		height: 150px;
	}

	nav .menutext {
		padding: 0px;
		display: none !important;
	}
	
	.nav img {
		display: unset !important;
		left: 5%;
	}
	
	.mainheader {margin: 69px 0;}
		.mainheader .collagebox, .mainheader .h1box {
			width: 90% !important;
			margin-left: 5% !important;
			flex-wrap: nowrap !important;
		}
			.mainheader .collagebox {margin-left: 0px !important;}
		
		.nomob {display: none;}
		.mainheader {display: block !important;}
			.mainheader .collagesmall {width: -webkit-fill-available;}
			.mainheader .collagesmall video {border-radius: 25px;}
			.mainheader, .mainheader h1, .mainheader .h1box {text-align: center !important;}
			.slide {float: left;}
			
			.mainheader h1 {font-size: 25px; }
			.mainheader p {font-size: 15px;}
	
	nav ul {
		line-height: 0px !important;
        padding: 10px 0;
        margin-left: 10px !important;
	}
		nav .menutext {display: none !important;}
		nav:hover ul {display: inline;}
		nav:hover li a {padding-bottom: 50px;}
		nav:hover li .button {padding-bottom: 10px;}
		
		nav ul .submenu {display: none !important;}
}

@media only screen and (max-width: 600px) {
	main {
		margin: 0px !important;
		max-width: unset !important;
	}
	.footerBox h3 {font-size: 6vw;}
	.footerBox p {font-size: 4vw;}
	.noTablet {display: unset !important;}
}