:root {
    --c1: #052F26;
    --c2: #426A45;
  }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;	padding: 0;	border: 0; 	outline: 0; 	vertical-align: baseline;}
    :focus {	outline: 0; } ol, ul {list-style: none;} a {text-decoration:none} .clear{clear:both} *{box-sizing: border-box;}
.clearfix:after { content: ""; display: table; clear: both;} img {display: block;}
h1 {font-size: 3.7em; letter-spacing: -0.01em; color:var(--c2); font-weight: 600; line-height: 1.1em;}
h2 {font-size: 2.4em; font-weight: 600; margin-top: 0.2em; margin-bottom: 0.4em;}
h3 {font-size: 2em; font-weight: 600; margin-top: 0.2em; margin-bottom: 1.5em; line-height: 1.4em;}
h4 {font-size: 1em; font-weight: 700; margin-bottom: 0.4em; text-transform: uppercase; line-height: 1.4em;}
h5 {font-size: 1.5em; font-weight: 700; margin-bottom: 0.8em; line-height: 1.2em;}

body, html {height:100%;}
/*html{-webkit-text-size-adjust: none;}*/ /*stop font resizse ios - better to have in in media queries*/ 
/*::-webkit-scrollbar { display: none; }*/
html {height:100% }
section {overflow:auto}

img {color:transparent}

body {
  font-family: "Manrope", sans-serif;
  font-weight: 500; font-style: normal;
  font-size: 19px; font-size: 1vw;
  font-size: .8vw; 
  line-height: 1.7em;
  color:var(--c2);
  background:white;
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-repeat: repeat;
  height:100%;
  
   }
body.frontpage {background: #fff; color:black}
::-moz-selection { background: #e6e1b0; color:black }
::selection { background: #e6e1b0; color:black } 


p {margin-bottom: 2.2em;}
.container {margin:auto; width:80%; max-width: 1310px;}

main.home {background-color: #EEEEEE;}

/*nav*/
.topbar {height:auto; width:80%; max-width: 1310px; height: 6em; margin:0 auto; position: relative;}
.logo {font-size:1.2em; font-weight: normal; margin-top:1.4em; letter-spacing: -0.02em; width: 9.5em; position: relative; z-index: 2; animation: slideUp .8s .4s ease forwards; opacity: 0; display: inline-block;}
.nav-cont {    position: absolute; right: 0; top:0; margin-top: 2.5em; animation: slideUp .8s .6s ease forwards; opacity: 0;}
.nav-cont li {float:left;  margin: 0 1.2em;}
.nav-cont  a {font-weight: 500; color:var(--c1)}
.nav-cont  a:hover {color:var(--c2)}


/*menu mobile*/
#ham {display: none; transition:opacity 1s; }
.menu {width:100%; height:100%; background:#161719; position:fixed; top:0; left:0; text-align: center;  display: flex; justify-content: center; align-items: center; visibility: hidden;
  opacity: 0; transition: opacity 0.5s,  visibility 0s 0.5s; z-index:100;  }
.open-menu {   opacity: 1;  visibility: visible;  transition: opacity 0.5s;  }

nav {  font-size: 1.2em;
  color: #eff2f7;
  line-height: 1.6em; }
.nav-show {opacity:1; transform:translateY(0)}    
nav a{color:#eff2f7; transition:color 0.2s; cursor:pointer; font-weight:800}
nav a:hover{color:red}

.intro {overflow: hidden; position: relative; border-radius: 2em; height: calc(100vh - 6em); max-height: 65em; width: 97.4%; margin: auto;}
#nature {position:relative; overflow: hidden; margin-top: 0%; width:100%; height:100%; padding-top:50%; background-repeat: no-repeat;
     background:url("../img/bg1.jpg"); background-size:cover; background-position: center; background-repeat:no-repeat; 
     animation: najezd1 3s ease-out forwards;
    }
    @keyframes najezd1 {
     from { transform: scale(1.15); }
     to   { transform: scale(1); }
 }
.parallax {position:relative; margin-top:-21%;} 
.parallax img, .parallax2 img{width:100%}
.parallax2 {position:relative; margin-top:-16%;}
.bg-m {display: none;}

.cloud {position: absolute; animation: cloud 10s linear infinite; transform:translateX(0)}
.cloud1 {width: 23%;
    top: 6em; left: 3%;}
.cloud2 {    width: 15%;
    top: 6em;
    left: 73%;}
.cloud3 {width: 21%;
    top: 20em;
    left: 85%;}
.cloud4 {    width: 17%;
    top: 19em;
    left: 15%;}
@keyframes cloud {
    from {transform:translateX(70%)}
    to{transform:translateX(-30%)}
}

.intro-text {position: absolute; margin: auto; top:8em; left:0; right: 0; text-align: center; color: var(--c2);
    animation: slideUp .8s ease forwards;
    opacity: 0;
   }
 @keyframes slideUp {
    from { transform: translateY(1em); opacity: 0; }
    to   { transform: translateY(0); opacity: 1;}
}
.intro-text p {font-size: 1.5em; margin-top: 1.7em;}

.arr {margin: 0em auto 0; width: 5em;}

.cards {display: flex; gap:1em; width: 97.4%; margin: 1.2em auto;}
.card {width: 25%; height: 43em; overflow: hidden; border-radius: 2em; position: relative;}
.card .bg {width: 120%; transition: all .4s ease-out;}
.card:hover .bg {transform:translateX(-10%); filter: brightness(1.07); }

.card-logo {position: absolute; height: 4em; left: 7%; top: 2.2em;}
.card h2 {position: absolute; left: 7%; top: 4.4em; color: var(--c2); font-size: 1.9em;}

.section-text2 {padding:11em 0 0 }
.section-text2 .text {width: 50%; margin: auto; text-align:center; animation: slideUp .8s 1.6s ease forwards; opacity: 0;}
.section-text2 .text p {width: 78%; margin: 0 auto 6em;}
.bg3-cont {overflow: hidden;}
.bg3 {width: 100%;}