/*


new #0081ff


TemplateMo 569 Edu Meeting

https://templatemo.com/tm-569-edu-meeting

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #3CF;
}

a:hover {
	color: #FC3;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #f5a425;
  color: #fff;
}

::-moz-selection {
  background: #f5a425;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-red a {
  font-size: 13px;
  color: #fff;
  background-color: #0080ff;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-red a:hover {
  opacity: 0.9;
}

.main-button-yellow a {
  font-size: 13px;
  color: #fff;
  background-color: #f5a425;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.sub-header {
  background-color: #1f272b;
  position: relative;
  z-index: 1111;
}

.sub-header .left-content p {
  color: #fff;
  padding: 8px 0px;
  font-size: 13px;
}

.sub-header .right-icons {
  text-align: right;
  padding: 8px 0px;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header .right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .left-content p em {
   font-style: normal;
   color: #f5a425;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #0081ff!important;
}

.background-header .nav li a.active {
  color: #0081ff!important;
}

.header-area {
  background-color: rgba(250,250,250,0.15);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #0081ff!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #00b3ff!important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #0081ff!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #0081ff!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #0081ff!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(31,39,43,0.75);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #f5a425;
  font-weight: 900;
}

.main-banner .caption p {
  color: #fff;
  font-size: 14px;
  max-width: 570px;
}

.main-banner .caption .main-button-red {
  margin-top: 30px;
}

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

  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }

}


/*
---------------------------------------------
services
---------------------------------------------
*/

.services {
  margin-top: -135px;
  position: absolute;
  width: 100%;
}

.services .item {
  background-image: url(../images/service-item-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  padding: 40px;
}

.services .item .icon {
  max-width: 90px;
  margin: 0 auto;
}

.services .item h4 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.services .item p {
  color: #fff;
  font-size: 13px;
}

.services .owl-nav {
  display: inline-block !important;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-25px);
}
    
.services .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.services .owl-nav .owl-prev span,
.services .owl-nav .owl-next span {
  opacity: 0;
}

.services .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.services .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.services .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
upcoming meetings
---------------------------------------------
*/

section.upcoming-meetings {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
}

section.upcoming-meetings .section-heading {
  text-align: center;
}

section.upcoming-meetings .categories {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f272b;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
  display: inline-block;
  margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
  font-size: 15px;
  color: #1f272b;
  font-weight: 500;
  transition: all .3s;
}

section.upcoming-meetings .categories ul li a:hover {
  color: #0081ff;
}

section.upcoming-meetings .categories .main-button-red {
  border-top: 1px solid #eee;
  padding-top: 30px;
  margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
  width: 100%;
  text-align: center;
}

.meeting-item {
  margin-bottom: 30px;
}

.meeting-item .thumb {
  position: relative;
}

.meeting-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-item .down-content {
  background-color: #fff;
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

.meeting-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-item .down-content .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-item .down-content h4 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-item .down-content p {
  margin-left: 50px;
  color: #1f272b;
  font-size: 14px;
}



/*
---------------------------------------------
apply now
---------------------------------------------
*/

section.apply-now {
  background-image: url(../images/apply-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px;
}

section.apply-now .item {
  background-color: rgba(250,250,250,0.15);
  padding: 40px;
  margin-bottom: 30px;
}

section.apply-now .item h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

section.apply-now .item p {
  color: #fff;
  margin-bottom: 20px;
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: #fff;
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}
@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #f5a425;
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content {
  padding: 20px;
  padding-top: 0;
}


/* 
---------------------------------------------
courses
--------------------------------------------- 
*/

section.our-courses {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 130px;
}

.our-courses .item .down-content {
  background-color: #fff;
}

.our-courses .item .down-content h4 {
  padding: 25px;
  font-size: 18px;
  color: #1f272b;
  text-align: center; 
  border-bottom: 1px solid #eee;
}

.our-courses .item .down-content .info {
  padding: 25px;
}

.our-courses .item .down-content .info ul li {
  display: inline-block;
  margin-right: 1px;
}

.our-courses .item .down-content .info ul li i {
  color: #f5a425;
  font-size: 14px;
}

.our-courses .item .down-content .info span {
  color: #a12c2f;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  display: inline-block;
  width: 100%;
}

.our-courses .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-45px);
}

.our-courses .owl-dots {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.our-courses .owl-dots .owl-dot {
  transition: all .5s;
  width: 7px;
  height: 7px;
  background-color: #fff;
  margin: 0px 5px;
  border-radius: 50%;
  outline: none;
}

.our-courses .owl-dots .active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
}
    
.our-courses .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.our-courses .owl-nav .owl-prev span,
.our-courses .owl-nav .owl-next span {
  opacity: 0;
}

.our-courses .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.our-courses .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.our-courses .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
our facts
---------------------------------------------
*/

section.our-facts {
  background-image: url(../images/facts-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 125px 0px;
}

section.our-facts h2 {
  font-size: 38px;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 50px;
}

.count-area-content {
  text-align: center;
  background-color: rgba(250,250,250,0.15);
  border-radius: 20px;
  padding: 25px 30px 35px 30px;
  margin: 15px 0px;
}

.percentage .count-digit:after {
  content: '%';
  margin-left: 3px;
}

.count-digit {
    margin: 5px 0px;
    color: #f5a425;
    font-weight: 700;
    font-size: 36px;
}
.count-title {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
}

.new-students {
  margin-top: 45px;
}

section.our-facts .video {
  text-align: center;
  margin-left: 70px;
  background-image: url(../images/video-item-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
}

section.our-facts .video img {
  padding: 170px 0px;
  max-width: 56px;
}


/* 
---------------------------------------------
contact us
--------------------------------------------- 
*/

section.contact-us {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 0px 0px;
}

section.contact-us #contact {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us #contact h2 {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}





section.contact-us #contact select {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}






section.contact-us #contact textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
}

section.contact-us #contact button {
  font-size: 13px;
  color: #fff;
  background-color: #0081ff;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us .right-info {
  background-color: #0081ff;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  margin-bottom: 30px;
  padding-bottom: 30px;
}

section.contact-us .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.contact-us .right-info ul li h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

section.contact-us .right-info ul li span {
  display: block;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}

.footer {
  text-align: center;
  margin-top: 140px;
  border-top: 1px solid rgba(250,250,250,0.15);
  padding: 50px 0px;
}
.footer p {
  font-size: 14px;
  color: #fff;
}

.footer p a {
  color: #f5a425;
}


/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-image: url(../images/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}


/*
---------------------------------------------
upcoming meetings page
---------------------------------------------
*/

section.meetings-page {
  background-image: url(../images/meetings-page-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 0px;
}

section.meetings-page .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.meetings-page .filters li {
  font-size: 13px;
  color: #a12c2f;
  background-color: #fff;
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 0px 3px;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: #0081ff;
  color: #fff;
}

section.meetings-page .pagination {
  text-align: center;
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

section.meetings-page .pagination ul li {
  display: inline-block;
}

section.meetings-page .pagination ul li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  color: #1f272b;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 15px;
  transition: all .3s;
}

section.meetings-page .main-button-red {
  text-align: center;
}

section.meetings-page .main-button-red a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

section.meetings-page .pagination ul li.active a,
section.meetings-page .pagination ul li a:hover {
  background-color: #0081ff;
  color: #fff;
}

.meeting-single-item .thumb {
  position: relative;
}

.meeting-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-single-item .down-content {
  background-color: #fff;
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-single-item .thumb .date {
  position: absolute;
  background-color: rgba(250,250,250,0.9);
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.meeting-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content p {
  color: #1f272b;
  font-size: 14px;
}

.meeting-single-item .down-content p.description {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.meeting-single-item .down-content .share {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.meeting-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.meeting-single-item .down-content .share ul li {
  display: inline;
}

.meeting-single-item .down-content .share ul li a {
  font-size: 14px;
  color: #1f272b;
  transition: all .3s;
}

.meeting-single-item .down-content .share ul li a:hover {
  color: #f5a425;
}

/* Meeting item column */
.templatemo-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.templatemo-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.templatemo-item-col {
		width: 100%;
	}
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1300px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}

@media (max-width: 992px) {

  .main-banner .caption {
    top: 60%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .main-banner .caption .main-button-red {
    margin-top: 15px;
  }

  .services {
    margin-top: 60px;
  }

  section.upcoming-meetings {
    padding-top: 400px;
  }

  section.upcoming-meetings .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .accordions {
    margin-left: 0px;
  }

  .new-students {
    margin-top: 15px;
  }

  section.our-facts .video {
    margin-left: 0px;
    margin-top: 15px;
  }

  section.contact-us #contact {
    margin-bottom: 30px;
  }

}

@media (max-width: 767px) {

  .sub-header .left-content p {
    display: none;
  }

  .sub-header .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }

}

/* ===== MOBILE NAV REWRITE ===== */
@media (max-width: 768px) {

  /* Hlavička: logo vlevo (ořez), burger vpravo */
  .header-area .main-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    z-index: 1000; /* nad obsahem i videem */
  }

  .header-area .main-nav .logo {
    flex: 1 1 auto;
    margin-right: 12px;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... když je to dlouhé */
  }

  .header-area .main-nav .menu-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    margin: 0;
    z-index: 1002;  /* VŽDY nad logem */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .header-area .main-nav .menu-trigger span { font-size: 0; } /* pokud je ikona */

  /* MENU jako FIXED OVERLAY – začíná skryté */
  .header-area .main-nav .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 60px;                 /* výška hlavičky (uprav dle reálu) */
    bottom: 0;
    display: none;             /* ukážeme až v .is-open */
    flex-direction: column;
    padding: 12px 0 24px;
    background: #ffffff;
    overflow-y: auto;
    z-index: 1001;             /* pod burgerem, nad videem/obsahem */
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
  }

  .header-area .main-nav.is-open .nav {
    display: flex;
  }

  /* Položky menu – jedna pod druhou, bez vnořování */
  .header-area .main-nav .nav > li {
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .header-area .main-nav .nav > li > a {
    display: block;
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.2;
    color: #111;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .header-area .main-nav .nav > li > a.active {
    background: rgba(0,0,0,.04);
  }

  /* Zrušíme transformy, které většinou dělají bordel v šabloně */
  .header-area .main-nav,
  .header-area .main-nav .nav,
  .header-area .main-nav .logo,
  .header-area .main-nav .menu-trigger {
    transform: none !important;
  }

  /* Když je menu otevřené, zamez scrollu těla (neprolíná se s obsahem) */
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* Extra úzké telefony */
@media (max-width: 360px) {
  .header-area .main-nav .logo { font-size: 18px; }
}

/* === FINÁLNÍ FIX LOGA A BURGERU PŘI ZAVŘENÉM MENU (≤768px) === */
@media (max-width: 768px) {

  /* Kontejner: zajistí prostor pro absolutně umístěný burger */
  .header-area .main-nav {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    z-index: 1000;
  }

  /* Burger: absolutně vpravo, vždy nahoře, přesně svisle vycentrovaný */
  .header-area .main-nav .menu-trigger {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    z-index: 1002;            /* nad čímkoli v headeru */
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .header-area .main-nav .menu-trigger span { font-size: 0; }

  /* LOGO: nikdy nepřetéká do burgeru, žádné pseudo linky/podtržení */
  .header-area .main-nav .logo {
    display: block;
    margin-right: 12px;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Rezervuj místo pro burger (44px) + okraje (16px) + rezerva (8px) */
    max-width: calc(100% - (44px + 16px + 8px));
    padding: 0;                 /* někdy šablona přidává padding, vypneme */
    border: 0 !important;       /* vypnout border styl kvůli „podtržení“ */
    text-decoration: none !important;
  }

  /* Některé šablony kreslí linku pseudo-prvkem (odstřelíme ji) */
  .header-area .main-nav .logo::before,
  .header-area .main-nav .logo::after {
    content: none !important;
    display: none !important;
  }

  /* Pro jistotu vypneme hover/active efekty, které dělají linku */
  .header-area .main-nav .logo:hover,
  .header-area .main-nav .logo:active,
  .header-area .main-nav .logo:focus {
    text-decoration: none !important;
    border: 0 !important;
    outline: 0;
  }

  /* Když je menu otevřené, zkrať logo ještě o chlup (volitelné) */
  .header-area .main-nav.is-open .logo {
    max-width: calc(100% - (44px + 16px + 20px));
  }
}

/* Ultra úzké telefony: menší písmo loga */
@media (max-width: 360px) {
  .header-area .main-nav .logo { font-size: 18px; }
}

/* ===== LOGIN – pohodlné čtení bez zoomu (mobil) ===== */
@media (max-width: 768px) {

  /* Plátno s pozadím – karta doprostřed obrazovky */
  .login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;      /* zarovnání na střed svisle */
    justify-content: center;  /* zarovnání na střed vodorovně */
    padding: 20px;            /* bezpečné okraje na mobilu */
    box-sizing: border-box;
  }

  /* Karta – široká, čitelná bez zoomu */
  .login-card {
    width: 100%;
    max-width: 420px;         /* klidně změň na 440px, pokud chceš ještě větší */
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.08);
  }

  .login-card h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
  }

  /* Přepínače STUDENT / VP */
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
  .tab {
    min-height: 42px;
    font-size: 15px;
    border-radius: 14px;
  }

  /* Vstupy a tlačítka – větší tap-target, 16px kvůli iOS (nezoomuje) */
  .login-card input[type="email"],
  .login-card input[type="password"],
  .login-card input[type="text"] {
    width: 100%;
    min-height: 46px;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #f5f6f7;
    margin-bottom: 14px;
    box-sizing: border-box;
  }

  .login-card button[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
  }

  .panel h3 { 
    font-size: 20px; 
    margin: 10px 0 12px; 
  }

  .back-link { margin-top: 12px; font-size: 14px; }
}

/* Velmi úzké telefony */
@media (max-width: 360px) {
  .login-card { max-width: 95%; padding: 24px 18px; }
  .login-card h2 { font-size: 20px; }
}

/* --- FIX: mezera mezi "Jak schránka funguje" a formulářem --- */
section.upcoming-meetings {
  padding-bottom: 50px;    /* původně 110px */
}

section.contact-us {
  padding-top: 70px;       /* původně 140px */
}

/* Mobilní doladění (<= 992 px) */
@media (max-width: 992px) {
  section.upcoming-meetings { padding-bottom: 36px; }
  section.contact-us       { padding-top: 48px; }
}

/* Extra malé telefony */
@media (max-width: 576px) {
  section.upcoming-meetings { padding-bottom: 28px; }
  section.contact-us       { padding-top: 40px; }
}

/* --- FIX: mobilní nadpis v banneru (hlavní h2) --- */
@media (max-width: 767px) {
  .main-banner .caption h2 {
    font-size: 28px;         /* původně 36px na <=767px */
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 420px) {
  .main-banner .caption h2 {
    font-size: 24px;
  }
}
/* --- FIX: mobilní header – stabilní výška a logo na 1 řádek --- */
@media (max-width: 768px) {
  .header-area { height: 72px; }              /* místo 100px v šabloně */
  .header-area .main-nav { padding: 12px 16px; }
  .header-area .main-nav .logo {
    font-size: 20px;
    line-height: 1.2;
    display: inline-block;
    max-width: calc(100% - (44px + 16px + 8px)); /* místo pro burger */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
@media (max-width: 360px) {
  .header-area .main-nav .logo { font-size: 18px; }
}



/* ---Úprava posunů--- */
/* ===== HERO / MAIN BANNER – dorovnání doleva a menší nadpis ===== */

/* Přitlačíme caption blíž k levému okraji a zarovnáme text doleva */
.main-banner .caption {
  left: 0;                       /* pro jistotu – držíme levý okraj rodiče */
  right: auto;
  transform: translateY(-50%);   /* zachováme vertikální centrování */
  text-align: left;              /* původně center v šablonách TemplateMo */
  padding-left: 16px;            /* jemná vnitřní mezera, ať to „nedrhne“ o okraj */
}

/* Nadpis – menší velikosti a lepší zalamování dlouhých řetězců */
.main-banner .caption h2 {
  margin: 10px 0 12px;
  line-height: 1.22;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Tablet a menší – menší font a menší vnitřní mezera */
@media (max-width: 992px) {
  .main-banner .caption { padding-left: 14px; }
  .main-banner .caption h2 { font-size: 28px; }
}

/* Telefony */
@media (max-width: 767px) {
  .main-banner .caption { padding-left: 12px; }
  .main-banner .caption h2 { font-size: 24px; }
}

/* Úzké telefony */
@media (max-width: 420px) {
  .main-banner .caption { padding-left: 10px; }
  .main-banner .caption h2 { font-size: 22px; }
}
/* ===== FUNGUJE – dorovnání odstavce k podnadpisu ===== */

/* Původní šablona odsouvá odstavec o 50 px doprava – srovnáme to. */
.meeting-item .down-content p {
  margin-left: 0;            /* původně 50px */
}

/* Volitelné: přitlačí „kartu“ o chlup doleva v rámci sloupce */
.meeting-item .down-content {
  padding-left: 22px;        /* původně 30px; zmenšíme, ať to lícuje s h4 */
  padding-right: 30px;       /* necháme pravý prostor vzdušnější */
}

/* Na mobilu to sjednotíme úplně „na líc“ */
@media (max-width: 767px) {
  .meeting-item .down-content {
    padding-left: 18px;
    padding-right: 22px;
  }
}

/* ======= HLAVIČKA: pevný flex-řádek, logo vlevo „na hranu“, burger vpravo ======= */

/* Vše ≤ 768 px – mobilní režim natvrdo srovnáme */
@media (max-width: 768px) {
  /* 1) Kontejner hlavičky = jeden stabilní řádek */
  .header-area {
    background-color: #f7f7f7;  /* drž se tvé šablony */
    padding: 0 8px !important;  /* zmenšíme default 15px, ať je logo víc vlevo */
    height: 64px;               /* nižší a pevná výška (ne 100px) */
    box-shadow: none;
  }

  .header-area .main-nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;  /* logo vlevo, burger vpravo */
    min-height: 64px;                /* sladit s výškou parenta */
    padding: 0 !important;           /* zruš zbytečné vnitřní odsazení */
    position: relative;
    z-index: 1000;
  }

  /* 2) Logo – co nejvíc vlevo a menší */
  .header-area .main-nav .logo {
    font-size: 17px !important;  /* menší než 20/18, ať se vejde i dlouhý text */
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-left: 2px !important; /* skoro na hranu, ale ne úplně 0 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - (44px + 12px)); 
    /* 44px burger + 12px rezerva na mezeru vpravo */
    flex: 1 1 auto;               /* logo může zabrat zbytek řádku */
    border: 0 !important;         /* šablony někdy dělají pseudo underline */
    text-decoration: none !important;
  }

  /* 3) Burger – žádná absolutní pozice, ať se NIKDY „neodstřelí“ */
  .header-area .main-nav .menu-trigger {
    position: static !important;  /* zrušíme absolute/top/transform */
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    margin-left: 8px;             /* malá mezera od loga */
    flex: 0 0 44px;               /* pevná šířka, nehne se */
    z-index: 1002;                /* burger vždy kliknutelný */
    -webkit-tap-highlight-color: transparent;
  }
  .header-area .main-nav .menu-trigger span { font-size: 0; } /* žádný text uvnitř */

  /* 4) Rozbalené menu – začíná přesně pod hlavičkou */
  .header-area .main-nav .nav {
    position: fixed;
    left: 0; right: 0;
    top: 64px;          /* přesně výška headeru výše */
    bottom: 0;
    display: none;
    flex-direction: column;
    background: #fff;
    padding: 12px 0 24px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 1001;
  }
  .header-area .main-nav.is-open .nav { display: flex; }

  /* 5) Položky menu – čistě pod sebou */
  .header-area .main-nav .nav > li { border-bottom: 1px solid rgba(0,0,0,.06); }
  .header-area .main-nav .nav > li > a {
    display: block; padding: 16px 20px; font-size: 16px; color: #111;
    text-transform: uppercase; letter-spacing: .05em;
  }

  /* 6) Když je sticky stav, drž stejné proporce */
  .background-header .main-nav .logo { line-height: 1.2 !important; }
}

/* TABLET až DESKTOP: držíme logo menší a blíž k levému okraji, ale nebouráme layout */
@media (min-width: 769px) {
  .header-area .main-nav { min-height: 80px; }
  .header-area .main-nav .logo {
    font-size: 24px !important;   /* menší než původních 28px */
    line-height: 80px !important; /* zarovnání na výšku lišty */
    margin-left: 0 !important;
    padding-left: 8px !important; /* trochu „gumy“ od krajů */
  }
  .background-header .main-nav .logo {
    line-height: 75px !important; /* šablona používá 75px ve sticky stavu */
  }
}

/* ==== MOBILE HEADER HARD-FIX: logo vlevo, burger pevně vpravo, menu pod lištou ==== */
@media (max-width: 768px) {
  /* 1) Stabilní lišta */
  .header-area {
    height: 72px;                    /* menší a pevná výška (místo 100px) */
    padding: 0 12px !important;      /* víc doleva */
  }
  .header-area .main-nav {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 72px;
    padding: 0 !important;
  }

  /* 2) Burger připíchnout doprava */
  .header-area .main-nav a.menu-trigger {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    z-index: 1002;
    -webkit-tap-highlight-color: transparent;
  }
  .header-area .main-nav a.menu-trigger span { font-size: 0; } /* žádný text uvnitř */

  /* 3) Logo úplně vlevo + rezerva, aby se necpalo pod burger */
  .header-area .main-nav a.logo {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-left: 4px !important;      /* skoro na hranu */
    padding-right: 56px !important;    /* rezerva (44px burger + 12px mezera) */
    max-width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0 !important;
    text-decoration: none !important;
  }

  /* 4) Menu (ul.nav) – skryté, po otevření pod lištou */
  .header-area .main-nav ul.nav {
    display: none;
    position: fixed;
    left: 0; right: 0;
    top: 72px;               /* přesně výška lišty */
    bottom: 0;
    background: #fff;
    padding: 12px 0 24px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 1001;
    flex-direction: column;  /* pro případ, kdy to už někde přepínáš */
  }
  .header-area .main-nav.is-open ul.nav { display: flex; }  /* JS toggluje .is-open na .main-nav */
}

/* === MOBILE: místo videa statický obrázek === */
@media (max-width: 768px) {
  /* Video vůbec nezobrazujeme */
  #bg-video {
    display: none !important;
  }

  /* Banner musí držet výšku, když video zmizí */
  .main-banner {
    min-height: 100vh;  /* plná výška obrazovky */
    background: url("../images/stop_video.jpg") center center / cover no-repeat;
    position: relative;  /* kvůli overlayi */
  }

  /* Overlay pro ztmavení/čitelnost textu */
  .main-banner .video-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(31,39,43,0.75);
  }

  /* (volitelné) text v banneru trochu doleva */
  .main-banner .caption {
    text-align: left;
    padding-left: 12px;
  }
}

/* === SOLO SLOGAN – tmavé pozadí jako okolní sekce, bez svislých mezer === */
.between-solo {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  /* stejné pozadí jako upcoming-meetings / contact-us */
  background-image: url("../images/meetings-bg.jpg");
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Text bez default marginů nadpisu, dobře čitelný na tmavém pozadí */
.between-solo__title {
  margin: 0;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-align: center; /* klidně změň na left */
  letter-spacing: 0.3px;
  text-transform: none;
  /* volitelně jemný kontrast: */
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* Minimalistický mikro-odstup, aby to "nedrhlo" (nepoužij margin, ať nekolabuje) */
.between-solo .container {
  padding-top: 6px;
  padding-bottom: 6px;
}

@media (max-width: 767px) {
  .between-solo__title { font-size: 18px; }
  .between-solo .container { padding-top: 4px; padding-bottom: 4px; }
}

/* === HERO ALIGN FIX: dorovnej .caption na stejnou svislici jako logo === */
/* Základ: text vlevo, žádné centrování, přidáme jen mikropadding navíc k .container */
.main-banner .caption {
  text-align: left !important;
  right: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;  /* jen vertikální centrování jako v šabloně */
}

/* Desktop (>= 769px): logo má padding-left: 8px, přidejme tedy stejných 8px i hero */
@media (min-width: 769px) {
  .main-banner .caption { padding-left: 8px !important; }
}

/* Tablet/Mobil (<= 768px): v headeru používáš menší odsazení (2–4px), sjednotíme i hero */
@media (max-width: 768px) {
  .main-banner .caption { padding-left: 4px !important; }  /* případně změň na 2px, pokud chceš 1:1 s headerem */
}

/* Jistota: uvnitř hero nepřidávej další levé posuny na h2/p */
.main-banner .caption h2,
.main-banner .caption p {
  margin-left: 0 !important;
}

/* === MINI potvrzení u #contact (nezvětšovat, držet decentní) === */
#contact .form-check.mini-ack {
  margin: -6px 0 14px 2px;           /* o chlup blíž k tlačítku */
}
#contact .form-check.mini-ack .form-check-input {
  width: 16px; height: 16px;         /* menší “čtvereček” */
  margin-top: 2px;                   /* srovnání s prvním řádkem textu */
  cursor: pointer;
}
#contact .form-check.mini-ack .form-check-label {
  font-size: 12.5px;                 /* menší než default Poppins 14px */
  line-height: 1.25;
  color: #6c757d;                    /* jemně šedé, neruší */
  cursor: pointer;
}
#contact .form-check.mini-ack .form-check-label strong {
  font-weight: 700;
}

/* Když se to na malých mobilech zdá veliké, ještě o chloupek stáhneme */
@media (max-width: 576px) {
  #contact .form-check.mini-ack .form-check-label { font-size: 12px; }
  #contact .form-check.mini-ack .form-check-input { margin-top: 3px; }
}

/* === #contact – checkbox: černá fajfka (mini varianta) === */
#contact .form-check.mini-ack .form-check-input {
  /* Fallback pro prohlížeče s nativním checkboxem (Safari/moderní Chromium): */
  accent-color: #000;                /* ⬅️ černá fajfka u nativního prvku */
}

/* Bootstrap custom checkbox – přepíšeme SVG na pozadí na černou fajfku */
#contact .form-check.mini-ack .form-check-input:checked {
  background-color: #fff;            /* bílé pozadí, ať je fajfka kontrastní */
  border-color: #000;
  /* Vynutíme černou fajfku (stroke='%23000') přes vlastní SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5l3 3l10-10' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Když je zaškrtnutý i ve focus stavu – drž stejný vzhled */
#contact .form-check.mini-ack .form-check-input:checked:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5l3 3l10-10' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Mírně zmenšený „čtvereček“ a zarovnání s textem – jak jsme dělali u mini verze */
#contact .form-check.mini-ack .form-check-input {
  width: 16px; height: 16px;
  margin-top: 2px;
  cursor: pointer;
}
#contact .form-check.mini-ack .form-check-label {
  font-size: 12.5px;
  line-height: 1.25;
  color: #6c757d;
  cursor: pointer;
}

@media (max-width: 576px) {
  #contact .form-check.mini-ack .form-check-label { font-size: 12px; }
  #contact .form-check.mini-ack .form-check-input { margin-top: 3px; }
}

/* === #contact – MINI checkbox s malou černou fajfkou (jako původní bílá velikost) === */
#contact .form-check.mini-ack .form-check-input {
  width: 16px; height: 16px;         /* samotný “čtvereček” */
  margin-top: 2px;
  cursor: pointer;
  accent-color: #000;                 /* nativní vykreslení (Safari/Chromium) = černá fajfka */
}

/* Přepíšeme bootstrapí SVG + pevná velikost fajfky, ať není přerostlá */
#contact .form-check.mini-ack .form-check-input:checked {
  background-color: #fff;
  border-color: #000;

  /* menší SVG (12×9), tenčí tah (1.6), černý stroke */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 5l2.5 2.5L11 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  /* klíčové – nastavíme malou velikost ikony a středové zarovnání */
  background-size: 12px 9px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* drž stejné i při :focus */
#contact .form-check.mini-ack .form-check-input:checked:focus {
  background-size: 12px 9px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* text vedle checkboxu – kompaktní */
#contact .form-check.mini-ack .form-check-label {
  font-size: 12.5px;
  line-height: 1.25;
  color: #6c757d;
  cursor: pointer;
}
@media (max-width: 576px) {
  #contact .form-check.mini-ack .form-check-label { font-size: 12px; }
  #contact .form-check.mini-ack .form-check-input { margin-top: 3px; }
}

/* === LOGO jako obrázek – stabilní výška a zarovnání ================= */
.header-area .main-nav .logo {
  display: inline-flex;        /* hezké vertikální centrování */
  align-items: center;
  line-height: 1;              /* žádné nafukování linky */
  padding: 0 8px;              /* jemný vnitřní okraj vlevo/vpravo */
  border: 0 !important;
  text-decoration: none !important;
}

/* Výchozí výška loga na desktopu – sedí do 80px lišty šablony */
.header-area .main-nav .logo img {
  display: block;              /* žádná baseline mezera */
  height: 36px;                /* můžeš doladit na pixel podle oka */
  width: auto;
}

/* Sticky stav (šablona snižuje řádkování na ~75px) – malinko menší logo */
.background-header .main-nav .logo img {
  height: 32px;
}

/* Mobily – menší logo, aby nezabralo příliš horizontálního místa */
@media (max-width: 768px) {
  .header-area .main-nav .logo img {
    height: 28px;              /* odpovídá přepnutí na „znak“ */
  }
}

/* Přístupnost: skrytý text uvnitř loga */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 1px 1px);
  white-space: nowrap; border: 0;
}

/* === HEADER: větší a přesně svisle vycentrované logo ================ */

/* Lišta dostane trochu víc místa (desktop) */
.header-area .main-nav { min-height: 88px; }                 /* pův. 80px */

/* Sticky (po scrollu) – kompaktnější, ale bez "dropu" obsahu */
.background-header { height: 76px !important; }              /* pův. ~75–80px */
.background-header .main-nav { min-height: 76px; }

/* Odkaz s logem = flex box přes celou výšku lišty */
.header-area .main-nav .logo {
  display: inline-flex;
  align-items: center;                                       /* svislé centrování */
  height: 100%;
  line-height: 1 !important;                                 /* vypnout textové line-height */
  padding: 0 10px;                                           /* jemný vnitřní okraj */
  border: 0 !important;
  text-decoration: none !important;
}

/* Obrázek loga: rozumné výšky, šířka se dopočítá */
.header-area .main-nav .logo img {
  display: block;                                            /* žádná baseline mezera */
  height: 56px;                                              /* DESKTOP: plné logo s textem */
  width: auto;
}

/* Sticky stav: o chlup menší, působí uhlazeně */
.background-header .main-nav .logo img { height: 48px; }

/* Mobily: v <picture> se přepne na znak → může být menší */
@media (max-width: 768px) {
  .header-area { height: 72px; }                             /* drž konzistentní výšku */
  .header-area .main-nav { min-height: 72px; }
  .header-area .main-nav .logo img { height: 34px; }         /* symbol bez textu */
}

/* Přístupnost – skrytý text uvnitř loga */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 1px 1px);
  white-space: nowrap; border: 0;
}

/* === DESKTOP HEADER HARD-FIX: flex layout + centrování ================= */

/* 1) Udělej z .main-nav flex kontejneru i na desktopu */
@media (min-width: 769px) {
  .header-area .main-nav {
    display: flex;                 /* místo floatů */
    align-items: center;           /* VERTIKÁLNÍ CENTRUM pro logo i menu */
    justify-content: space-between;
  }
  /* 2) Zruš staré float/line-height u .logo (bylo pro text, ne pro <img>) */
  .header-area .main-nav .logo {
    float: none !important;
    line-height: 1 !important;     /* neprotahuj linku, flex to srovná */
    height: 100%;                  /* ať se opře o výšku lišty */
    display: inline-flex;
    align-items: center;
    padding-left: 10px;            /* jemný odskok vlevo */
  }
  /* 3) Menu nepodsazuj nahoru, jinak nikdy nebude na ose s logem */
  .header-area .main-nav .nav {
    margin-top: 0 !important;      /* přepis z původních 30px */
  }
}

/* 4) Obrázek loga: přepiš globální img{width:100%} → drž výšku, šířka auto */
.header-area .main-nav .logo img {
  display: block;
  height: 60px;                    /* >>> zvětšeno, klidně dej 64px ⇵ */
  width: auto !important;          /* přebije globální width:100% */
}

/* 5) Sticky stav: o chlup menší, ať je bar elegantně kompaktní */
.background-header .main-nav .logo img {
  height: 52px;
}

/* 6) Když by se na menších laptopech menu tlačilo, zjemni výšku mezi 992–1200 px */
@media (min-width: 992px) and (max-width: 1200px) {
  .header-area .main-nav .logo img { height: 56px; }
  .background-header .main-nav .logo img { height: 48px; }
}

/* === MINI ACK CHECKBOX – jemný vzhled bez posunu textu === */
#contact .form-check.mini-ack .form-check-input {
  /* zpět na drobný a kompaktní checkbox */
  width: 16px;
  height: 16px;
  /* jemnější obrys + optické zvýraznění bez změny layoutu */
  border: 1px solid #555 !important;         /* decentní, ne „křičící“ */
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);      /* tenká optická linka (mimo box model) */
  background-color: #fff;
  border-radius: 3px;
  outline: none;
  /* zarovnání k textu – nehne baseline */
  vertical-align: text-top;
  margin-top: 2px;        /* drž se tvého původního ladění */
  margin-right: 8px;      /* malá mezera před textem (neposouvá label dál než nutně) */
  display: inline-block;
  accent-color: #111;     /* nativní fajfka černě, kde to jde */
}

/* Hover – jen drobný kontrast */
#contact .form-check.mini-ack .form-check-input:hover {
  border-color: #444 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* Focus (klávesnice) – „ring“ bez změny rozměru */
#contact .form-check.mini-ack .form-check-input:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10),
    0 0 0 3px rgba(0,129,255,.18);  /* v barvách webu */
  border-color: #4a90ff !important;
}

/* Zaškrtnutý stav – malá černá fajfka, žádná „plná“ výplň */
#contact .form-check.mini-ack .form-check-input:checked {
  background-color: #fff !important;
  border-color: #444 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 5l2.5 2.5L11 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px 9px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Zaškrtnuto + focus – stejný ring */
#contact .form-check.mini-ack .form-check-input:checked:focus-visible {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10),
    0 0 0 3px rgba(0,129,255,.18);
}

/* Popisek – nechme lehce tmavší, ale ne tučný, ať není „odpálený“ */
#contact .form-check.mini-ack .form-check-label {
  font-size: 12.5px;      /* návrat ke stávajícímu mini stylu */
  color: #555;            /* kompromisní kontrast (ne tak těžký jako #4a4a4a) */
  font-weight: 500;       /* jistota, že nebude působit tučněji než okolí */
}

/* === MINI ACK – zruš bootstrapí odsazení, srovnej checkbox + text do jedné řádky === */
#contact .form-check.mini-ack {
  display: inline-flex;           /* vedle sebe */
  align-items: flex-start;        /* zarovnání k prvnímu řádku textu */
  gap: 8px;                       /* mezera mezi boxem a textem */
  padding-left: 0 !important;     /* zruší defaultní padding .form-check */
  margin: -2px 0 14px 2px;        /* zachová tvé původní „mini“ usazení */
}

#contact .form-check.mini-ack .form-check-input {
  position: static !important;    /* žádné absolute/posuny od Bootstrapu */
  float: none !important;         /* vypne float, ať flex řídí layout */
  margin: 2px 0 0 0 !important;   /* žádný záporný left-margin */
  width: 16px; height: 16px;      /* kompaktní velikost */
  border: 1px solid #555 !important;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08); /* optické zvýraznění bez „roztlačení“ labelu */
  accent-color: #111;                     /* nativní fajfka (Safari/Chromium) */
}

#contact .form-check.mini-ack .form-check-input:hover {
  border-color: #444 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

#contact .form-check.mini-ack .form-check-input:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10),
    0 0 0 3px rgba(0,129,255,.18);
  border-color: #4a90ff !important;
}

#contact .form-check.mini-ack .form-check-input:checked {
  background-color: #fff !important;
  border-color: #444 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 5l2.5 2.5L11 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px 9px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#contact .form-check.mini-ack .form-check-input:checked:focus-visible {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10),
    0 0 0 3px rgba(0,129,255,.18);
}

/* Label bez dodatečných marginů – ať lícuje přesně za checkboxem */
#contact .form-check.mini-ack .form-check-label {
  margin: 0 !important;
  font-size: 12.5px;     /* držíme „mini“ */
  color: #555;
  font-weight: 500;
  cursor: pointer;
}

/* =========================================================
   FORM (Schránka důvěry) – sjednocený jemný vzhled polí
   cílí jen na formulář v #contact (Předmět, Typ, Zpráva, Checkbox)
   ========================================================= */

/* 1) Pole: Předmět (input), Typ (select), Zpráva (textarea) */
section.contact-us #contact input[type="text"],
section.contact-us #contact select,
section.contact-us #contact textarea {
  /* přestaňme simulovat „bezrámečková“ pole a dejme jednotný jemný border */
  background: #fff !important;
  border: 1px solid #D6D6D6 !important;   /* jemný šedý */
  border-radius: 12px !important;         /* příjemné zaoblení, ne „pill“ */
  color: #2a2a2a;
  box-shadow: none !important;
}

/* Hover – drobné zvýšení kontrastu, ale nic agresivního */
section.contact-us #contact input[type="text"]:hover,
section.contact-us #contact select:hover,
section.contact-us #contact textarea:hover {
  border-color: #C8C8C8 !important;
}

/* Focus – jednotný modrý ring v barvách webu */
section.contact-us #contact input[type="text"]:focus,
section.contact-us #contact select:focus,
section.contact-us #contact textarea:focus {
  outline: 0;
  border-color: #0081ff !important;
  box-shadow: 0 0 0 3px rgba(0,129,255,.15) !important;
}

/* 2) MINI potvrzení – layout bez posunu + jemný vzhled checkboxu */
#contact .form-check.mini-ack {
  display: inline-flex;            /* input + label vedle sebe */
  align-items: flex-start;         /* zarovnání k prvnímu řádku textu */
  gap: 8px;                        /* mezera mezi boxem a textem */
  padding-left: 0 !important;      /* zruší bootstrap padding .form-check */
  margin: -2px 0 14px 2px;         /* držíme tvé původní usazení */
}

#contact .form-check.mini-ack .form-check-input {
  /* žádné bootstrap posuny – ať flex řídí layout a nic „neodstřelí“ */
  position: static !important;
  float: none !important;
  margin: 2px 0 0 0 !important;

  /* VZHLED: zpět na kompaktní, jemně zaoblený checkbox */
  width: 16px; height: 16px;
  border: 1px solid #BDBDBD !important; /* jemnější než #555 */
  border-radius: 4px !important;        /* decentní křivka, ne obdélník */
  background-color: #fff !important;
  box-shadow: none !important;          /* žádné optické „nafukování“ */
  accent-color: #111;                   /* nativní fajfka (Safari/Chromium) */
}

/* Hover – drobný kontrast */
#contact .form-check.mini-ack .form-check-input:hover {
  border-color: #AFAFAF !important;
}

/* Focus – stejný ring jako u ostatních polí */
#contact .form-check.mini-ack .form-check-input:focus-visible {
  outline: 0;
  border-color: #0081ff !important;
  box-shadow: 0 0 0 3px rgba(0,129,255,.15) !important;
}

/* Zaškrtnutý stav – čistá černá fajfka, žádná výplň */
#contact .form-check.mini-ack .form-check-input:checked {
  background-color: #fff !important;
  border-color: #AFAFAF !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 5l2.5 2.5L11 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px 9px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Zaškrtnuto + focus – jednotný ring */
#contact .form-check.mini-ack .form-check-input:checked:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,129,255,.15) !important;
}

/* Label – standardní „mini“ parametry bez zbytečných marginů */
#contact .form-check.mini-ack .form-check-label {
  margin: 0 !important;
  font-size: 12.5px;
  color: #555;
  font-weight: 500;
  cursor: pointer;
}

/* === MINI ACK – přesné svislé dorovnání checkboxu a textu === */
#contact .form-check.mini-ack {
  display: inline-flex;
  /* center je „matematicky“ uprostřed, ale opticky to u 16px boxu bývá o chlup níž,
     proto použijeme flex-start a malou korekci na inputu níže */
  align-items: flex-start;
  gap: 8px;
  padding-left: 0 !important;
  margin: -2px 0 14px 2px;
}

/* Checkbox – mikro posun dolů o 1px proti první řádce textu */
#contact .form-check.mini-ack .form-check-input {
  position: static !important;
  float: none !important;

  /* <<< KLÍČOVÉ >>> */
  margin: 1px 0 0 0 !important;   /* bylo 2px, stáhneme na 1px */
  /* alternativně lze použít translateY(1px), ale margin je čitelnější */

  width: 16px; height: 16px;
  border: 1px solid #BDBDBD !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  accent-color: #111;
}

/* Label – sjednoť line-height, ať sedí k 16px boxu */
#contact .form-check.mini-ack .form-check-label {
  margin: 0 !important;
  line-height: 1.3;        /* o chlup vyšší než 1.25 → pěkně lícuje s 16px boxem */
  font-size: 12.5px;
  color: #555;
  font-weight: 500;
  cursor: pointer;
}

/* Pokud by se na některých prohlížečích zdál box stále o pixel výše,
   zvětši margin-top na 2px, nebo přidej jemný mikroposun (1px) přes transform: */
/*
#contact .form-check.mini-ack .form-check-input { transform: translateY(1px); }
*/

/* =========================================================
   FORM – sjednocený vzhled: šedé pozadí + border + focus ring
   Platí jen pro formulář v sekci #contact.
   ========================================================= */

/* 1) Předmět, Typ problému, Zpráva – šedé pozadí zpět + hranice + ring */
section.contact-us #contact input[type="text"],
section.contact-us #contact select,
section.contact-us #contact textarea {
  background: #f7f7f7 !important;      /* šedé podbarvení (zpět) */
  border: 1px solid #D6D6D6 !important; /* jemný konzistentní border */
  border-radius: 12px !important;
  color: #2a2a2a;
  box-shadow: none !important;
}

/* Hover – o chlup výraznější, ale decentní */
section.contact-us #contact input[type="text"]:hover,
section.contact-us #contact select:hover,
section.contact-us #contact textarea:hover {
  border-color: #cfcfcf !important;
  background: #f5f5f5 !important;       /* drobné ztmavení na hover */
}

/* Focus – stejný modrý ring jako teď, ať je vše jednotné */
section.contact-us #contact input[type="text"]:focus,
section.contact-us #contact select:focus,
section.contact-us #contact textarea:focus {
  outline: 0;
  border-color: #0081ff !important;
  box-shadow: 0 0 0 3px rgba(0,129,255,.15) !important;
  background: #ffffff !important;       /* při psaní bílý podklad = lepší kontrast textu */
}

/* Placeholders – aby na šedém podkladu nepůsobily příliš temně/světle */
section.contact-us #contact ::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

/* 2) MINI potvrzení – vzhled checkboxu s šedým pozadím (jak chceš) + beze změny srovnání */
#contact .form-check.mini-ack {
  display: inline-flex;
  align-items: flex-start;       /* drž optické zarovnání s 16px boxem */
  gap: 8px;
  padding-left: 0 !important;    /* zruší bootstrap odsazení */
  margin: -2px 0 14px 2px;
}

#contact .form-check.mini-ack .form-check-input {
  position: static !important;
  float: none !important;
  margin: 1px 0 0 0 !important;  /* jemná vertikální korekce, která sedla */
  width: 16px; height: 16px;

  /* VZHLED: šedé podbarvení + jemný border + decentní radius */
  background-color: #f7f7f7 !important;
  border: 1px solid #BDBDBD !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  accent-color: #111;            /* nativní fajfka na moderních enginech */
}

/* Hover – stejně jako u polí */
#contact .form-check.mini-ack .form-check-input:hover {
  border-color: #AFAFAF !important;
  background-color: #f5f5f5 !important;
}

/* Focus – jednotný modrý ring */
#contact .form-check.mini-ack .form-check-input:focus-visible {
  outline: 0;
  border-color: #0081ff !important;
  box-shadow: 0 0 0 3px rgba(0,129,255,.15) !important;
  background-color: #ffffff !important;   /* při interakci bílé pozadí (kontrast fajfky) */
}

/* Zaškrtnuto – černá fajfka + jemný obrys, žádná plná modrá výplň */
#contact .form-check.mini-ack .form-check-input:checked {
  background-color: #ffffff !important;   /* bílý podklad pod fajfkou */
  border-color: #AFAFAF !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 5l2.5 2.5L11 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px 9px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Zaškrtnuto + focus – stále jednotný ring */
#contact .form-check.mini-ack .form-check-input:checked:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,129,255,.15) !important;
}

/* Label – beze změny, jen ať drží rytmus řádkování */
#contact .form-check.mini-ack .form-check-label {
  margin: 0 !important;
  line-height: 1.3;
  font-size: 12.5px;
  color: #555;
  font-weight: 500;
  cursor: pointer;
}

/* ===== Upload – sjednocený vzhled k šabloně ===== */
#contact .upload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  align-items: center;
  margin-bottom: 10px;
}

#contact .upload-label {
  font-size: 14px;
  color: #1f272b;
  font-weight: 600;
}

/* Vizuálně skryté, přesto přístupné a bez horizontálního přesahu */
#contact .upload-input--hidden {
  position: absolute !important;
  top: 0; left: 0;                 /* ukotvi do levého horního rohu */
  width: 1px; height: 1px;
  padding: 0; margin: 0; border: 0;
  overflow: hidden;                /* nic nevykresluj ven */
  clip: rect(0 0 0 0);             /* legacy pro starší UA */
  clip-path: inset(50%);           /* moderní náhrada */
  white-space: normal !important;  /* zruš nowrap → nehraje si s šířkou */
}

#contact .btn-upload {
  font-size: 13px;
  color: #fff;
  background-color: #0081ff; /* barva tlačítek v contact sekci */
  padding: 10px 16px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: opacity .25s ease;
}
#contact .btn-upload:hover { opacity: .9; }

#contact .upload-help {
  grid-column: 1 / -1; /* pod celé řadě */
  color: #7a7a7a;
  font-size: 12.5px;
}

#contact .upload-list {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}
#contact .upload-list li {
  background: #f7f7f7;
  border: 1px solid #D6D6D6;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 13px;
  color: #2a2a2a;
  margin-bottom: 6px;
}

#contact .upload-error {
  color: #c62828;
  font-weight: 600;
  margin-top: 6px;
}




/* === Schránka – vzhled seznamu příloh (jemné, světlé) === */
#contact .upload-list { list-style: none; margin: 6px 0 0; padding: 0; }
#contact .upload-item {
  display: flex;                 /* label vlevo, X vpravo */
  align-items: center;
  gap: 8px;
  background: #f7f7f7;
  border: 1px solid #D6D6D6;
  border-radius: 12px;
  padding: 6px 10px 6px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #2a2a2a;
  flex-wrap: nowrap;
}
#contact .upload-name {
  overflow: hidden;              /* dlouhé názvy nevyboulí řádek */
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* --- X vpravo: malé, bez „button“ vzhledu --- */
#contact .upload-remove {
  margin-left: auto;             /* úplně vpravo */
  background: transparent;
  border: 0;
  padding: 0;                    /* žádné nafukování */
  line-height: 1;                /* malé, úzké */
  font-size: 16px;               /* decentní velikost X */
  color: #c62828;                /* červené X */
  cursor: pointer;
}
#contact .upload-remove:focus { outline: none; }
#contact .upload-remove:hover { color: #a31818; } /* malý hover, jinak nic */


/* === FIX: zabránit přetékání upload-item === */
#contact .upload-item {
  flex-wrap: wrap !important;     /* povolí zalomení řádků */
  max-width: 100% !important;     /* nedovolí šířit se mimo viewport */
  overflow: hidden !important;    /* odřízne případné přečuhující pixely */
  box-sizing: border-box !important;
}

#contact .upload-name {
  max-width: 100% !important;
  min-width: 0 !important;        /* extrémně důležité pro flex layout */
}

#contact .upload-remove {
  flex-shrink: 0 !important;      /* X se nikdy nestáhne, ostatní ano */
}

#contact .upload-name {
  word-break: break-all !important;
}



/* ===== FOOTER – stacked & clean ===== */

.footer {
  text-align: center;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px; /* vzdálenost mezi copyrightem a logem */
}

.footer-copy {
  margin: 0;
}

.footer-logo img {
  height: 50px;
  width: auto;
}

.footer-logo:hover img {
  opacity: 0.7;
}

/* Mobil – ještě klidnější */
@media (max-width: 480px) {
  .footer {
    padding: 24px 0;
  }

  .footer-copy {
    font-size: 25px;
    line-height: 1.3;
  }

  .footer-logo img {
    height: 40px;
  }
}