:root {
    --c1: #58FD26;  
    --c2: #1A4427;
    --c3: #F4F7F4;
    --c4: #89988C;
    --c5: #292A29;  /*dark gray*/
    
  }
.blu {color: var(--c1);}

  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}  
    ::-moz-selection { background: #e6e1b0; color:black }
    ::selection { background: #e6e1b0; color:black } 
.clearfix:after { content: ""; display: table; clear: both;} img {display: block;} *{box-sizing: border-box;}
h1 {font-family: "clash", Helvetica, sans-serif; font-size: 2.4em; font-weight: 500; margin-top: 0.2em; margin-bottom: 0.4em; line-height: 0.9em;}
h2 {font-family: "clash", Helvetica, sans-serif; font-size: 2.3em; letter-spacing: 0.03em; color: var(--c2); font-weight: 500; line-height: 1.1em; margin-top: 0.2em; margin-bottom: 1em; text-transform: uppercase;}
h3 {font-size: 1.4em; font-weight: 800; line-height: 1.3em; margin-top: 0.2em; margin-bottom: 0.9em;}
h4 {font-size: 1.1em; font-weight: 900; letter-spacing: 0; margin-bottom: 1.5em; text-transform: uppercase; line-height: 1.4em;}
h5 {font-size: 1.8em; font-weight: 300; 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}
section {overflow:hidden}
img {color:transparent} .img100 {width: 100%;}
body {font-family: "DM Sans", sans-serif; font-weight: normal; font-style: normal; font-size: 19px; font-size: 1vw; font-size: .95vw;  line-height: 1.7em; color:var(--c5); background:white; height:100%;}
p {margin-bottom: 2.2em;}
.container {margin:auto; width:73%; max-width:1800px}
.container-small {margin:auto; width:77%; max-width:1400px; min-height: 5px; padding-left: 8%;}
.container-mini {margin:auto; width:50%; max-width:1000px; }
.col {width: 50%; float: left;}

main.home {background-color: #fff}

/*nav*/
.topbar {height:auto; width:92%; max-width: 1800px; height: 6em; left: 0; right: 0; margin:0 auto; position: absolute;}
.logo {margin-top:1.6em; width: 14em; top: 0.8em; position: relative; z-index: 2;opacity: 0; animation: logo 0.8s .0s ease forwards;}
    @keyframes logo {
        0% {opacity:0; transform: translateY(-1em)}
        100% {opacity:1; transform: translateY(0)}
    }
.nav-cont { font-family: "clash", Helvetica, sans-serif; text-transform: uppercase; position: absolute; right: 1em; top:0; margin-top: 2.6em; z-index: 1; opacity:0; animation: nav-cont 0.5s 0.5s ease forwards;}
    @keyframes nav-cont {
        0%{transform: translateY(-1em); opacity:0}
        100%{transform: translateY(0); opacity:1}
    }
.nav-cont li {float:left;  margin: 0 1.3em;}
.nav-cont li a {    font-size: 0.95em; font-weight: 650; color: white; letter-spacing: 0.1em; transition: all 0.1s ease;}
.nav-cont li a:hover {color:var(--c1)}

/* client zone button */
.nav-cont .blue-hollow-but { padding: 0.5em 2.1em 0.4em; margin-top: -0.6em;}
.nav-cont .blue-hollow-but a {letter-spacing: 0.15em; font-size: 1em; color: var(--c1);}
.nav-cont .blue-hollow-but:hover {background-color: var(--c1);} 
.nav-cont .blue-hollow-but:hover a {color:white}

/*menu mobile*/
#ham {transition:opacity 1s; display: none;}
.menu {width:100%; height:100%; background:#161719; position:fixed; top:0; left:0;  opacity: 0; visibility: hidden; transition: opacity 0.5s,  visibility 0s 0.5s; z-index:100;
padding:0 5%}
.open-menu {  opacity: 1; visibility: visible; transition: opacity 0.5s; }
.menu .nav-cont li {float: none; float: none; font-weight: 300; font-size: 2.1em;
    margin: 0 1.3rem 1.1em; text-align: right;}
.menu .nav-cont li a {font-weight: 400;}
.menu .nav-cont {position: static;}
.menu .logo { margin-left: 1.3rem; left: 0;}


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}

.top-gradient { position: absolute; top: 0; left: 0; height: 10em; width: 100%; 
  background: linear-gradient(to bottom,     
  rgba(0, 0, 0, .4) 0%, 
  
  rgba(0, 0, 0, .15) 40%, 
  
  rgba(0, 0, 0, 0) 100%); }

.intro {position: relative; overflow: hidden;}
  .intro .bg{width: 100%;}
  .intro-text {top: 48%;     width: 73%;
    max-width: 1800px; margin: auto; left:0; right:0; position: absolute;  transform: translateY(-50%); color:white; opacity: 0; 
    animation: intro-text 1s .6s ease forwards;}
    @keyframes intro-text {
        0% {opacity:0; transform: translateY(-40%)}
        100% {opacity:1; transform: translateY(-50%)}
    }
  .intro-text h1 {font-size: 5.3em; margin-bottom: 0.2em;}
  .intro-text h1 span {color: var(--c1);}
  .intro-text p {width: 21em;}
  .intro-text button {margin-right: 0.7em;}
  .intro .arr-down {position: absolute; bottom: 2.1em; left:58%; width: 3.8em; opacity: 0;
    animation: arr-down 0.7s 1.3s ease forwards;}
    @keyframes arr-down {
        0% {opacity:0; transform: translateY(-40%)}
        100% {opacity:1; transform: translateY(-50%)}
    }
  #drone {position: absolute; top: 16em; left: 24%; width: 15em; animation: drone 1.5s ease infinite alternate ;}
@keyframes drone {
    0% {transform:translateY(-1em);}
    100% {transform:translateY(0em);}
}

.banner-soutez { display: flex; }
.banner-soutez-left { color:var(--c2); font-family: "clash-var", Helvetica, sans-serif; background-color: var(--c1); font-weight: bold; padding: .8em 2em; font-size: 1.8em; width: 31%; text-align: right; }
.banner-soutez-right { font-size: 1.6em; font-weight: 300; color: white; background-color: var(--c2); display: flex; align-items: center; gap: 1em; padding: .8em 2%; flex: 1; }

    .banner-soutez-right .arr {width: 1.1em;}    
        @keyframes arrow-right-left {
            0% {transform: translateX(0);} 50% {transform: translateX(0.2em);} 100% {transform: translateX(0);}
        }
    .banner-soutez-right .arr {
      animation: arrow-right-left 1.5s ease-in-out infinite;
    }

 section.kurzy {padding: 3.1em 0 6em; background-color: var(--c3);}
.kurzy table {width: 90%; border-collapse: collapse; margin-top: 2em; }
.kurzy table th {font-size: 12px; color: var(--c2); text-align: left;}
.kurzy thead, .kurzy tr {border-bottom: 1px solid black;}
.kurzy th, .kurzy td {padding: 1.1em 1em 1.1em 0;}
.kurzy td.status {padding-right: 0; width: 2em;}
.kurzy td.reg {text-align: right; width: 27%; padding-right: 0.9em}
.kurzy td.price {font-weight: bold;}
.kurzy td.price s {font-weight: normal; margin-right: .5em;}
.kurzy td.spots {padding-left: 2.5em;}
[data-status] { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; margin-right: 1px;}
[data-status="green"] { background-color: var(--c1);}
[data-status="red"] { background-color: #FF655A;}
/* [data-status="yellow"] { background-color: #ffe400} */

section.training {    padding: 11em 0 8em;}
section.training .container {display: flex; width: 100%; padding-right: 16%; max-width: none;}
.training-images {width: 57%; float: left;}
.training-images img {float: left; height: 20em; object-fit: cover;}
.training-images .left_image_1 { width: 42%; margin-right: 1.4%;}
.training-images .left_image_2 {width: 56%;}
.training-content {width: 40%; padding-left: 3.2%;}
.training-content h2 {width: 66%;}

section.benefits {padding: 0 0 7em;}
.benefits .container {display: flex; gap: 2.5%;}
.benefits h2 {width: 9.3em; margin-top: 0;}
.benefit-item {display: flex; align-items: flex-start; gap: 5%; }
.benefit-text {width: 74%;}
.benefits-grid { width: 86%; padding-right: 3%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px;}
.icon-check {width: 1.3em; margin-top: 0;}

section.course-info {background-color: var(--c2); color:white; padding: 6em 0;}
.course-info h2 {color: var(--c1);}
.course-info .container {display: flex; gap: 10%;}
.course-audience div {display: flex; gap: 1em; margin-bottom: 0.8em;}
.course-audience div p {margin-bottom: 0;}
.audience-title .icon-check {}
.course-audience .icon-check {width: 1.4em;}
.course-duration .duration {font-size: 2em; font-weight: 300; margin-bottom: 0.6em;}
.course-duration .duration strong {font-weight: 600;}

.img-drone {width: 100%;}

.schedule {padding: 7em 0 10em;}
.schedule .row {display: flex;}
.schedule .col1 {width: 86%; padding-right: 6%;}
.schedule ol {list-style: decimal; list-style-position: inside; padding-left: 0; margin-left: 0; }
.schedule li {border-bottom: 1px solid var(--c4); padding: 0.6em 0; }
.schedule li:first-child {border-top: 1px solid var(--c4);}


.more-stuff article {display: flex; background-color: var(--c3); padding: 2.4em 2em; width: 90%; margin-bottom: 1.5em;}
.more-stuff article .col1 {display: flex; flex-direction: column; justify-content: space-between; width: 39%;} 
.more-stuff article h2 {margin-top: 0;}
.more-stuff article .desc { margin-bottom: 0; font-size: 1.3em; font-weight: 900; color: var(--c5); }
.more-stuff article .col2 {padding-right: 13%;}
.more-stuff article .col2 span {line-height: 1.5em; color: var(--c5);}
.more-stuff li {display: flex; gap: 1em; margin-bottom: 0.8em; align-items: flex-start; gap: 8px;} 
.more-stuff .icon-check { width: 1.5em; margin-top: 0.1vw;}
 .more-stuff .col3 {display: flex; width: 26%; align-items: flex-end;}

.more-stuff article:hover {background-color: var(--c2); color: white;}
.more-stuff article:hover h2 {color: var(--c1);}
.more-stuff article:hover .desc {color: white;}
.more-stuff article:hover .col2 span {color: white;}
.more-stuff article:hover button {background-color: transparent; color: var(--c1); border-color: var(--c1);}
.more-stuff article:hover button:hover {background-color: var(--c1); color: black;}


.faq {padding: 5em 0 10em; position: relative;}
.faq .content {width: 90%;}

    #accordion {margin-top: 1em;}
    h3.ui-accordion-header {cursor: pointer; border-top: 1px #73737B solid; padding: 0.7em 3em 0.7em 0; margin:0em; font-weight: 500; position: relative;}
    h3.ui-accordion-header:last-of-type {border-bottom: 1px #73737B solid;}
    .ui-accordion-content {margin-bottom: 1em; margin: 1em 0 3em;}
    .ui-accordion-header-icon { width: 1.4em; height: 1.4em; display: block; position: absolute; right: 0.3em;}
    .ui-accordion-header-icon.icon-open {background-image: url(../img/icon-open.svg); background-size: cover;}
    .ui-accordion-header-icon.icon-close {background-image: url(../img/icon-close.svg); background-size: cover;}
    



/*contact form*/
.contact-form {padding: 5em 0 10em;}
.wpcf7 form {
  width: 100%;
  margin: 0 auto;
}

.wpcf7-form p {
  margin-bottom: 1.2em;
}

/* .wpcf7-form-control {
  width: 100% !important;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #fff;
  color: #000;
} */

.wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form-control.wpcf7-radio {
  width: auto !important;
}



.wpcf7-submit:hover {
  background-color: #333;
}

/* Fix checkbox alignment */
.wpcf7-list-item-label {
  display: inline-block;
  margin-left: 6px;
}

 .contact-form .col1 {padding-right: 5%;}




.thank-you-page .content {padding: 5em 0 7em; display: flex; justify-content: center; align-items: center;}
.thank-you-page .text {text-align: center;}