:root {

--animace: ease 0.4s;
--animace-2: ease 0.7s;
--gap: 1.25rem;
--gap-l: 1.5rem;
--gap-m: 1rem;

--white: white;
--black: black;
--dark-blue: #212F52;
--gold: #C9A36A;
--background: #F2EFE9;
--gold-light: #E3B878;

--box-shadow-1:  0 0 65px 0 rgba(0, 0, 0, 0.25);
--box-shadow-2:  0 0 24px 0 rgba(0, 0, 0, 0.10);
--border-radius-1: 1rem;
--border-radius-2: 2rem;

--py-160: 10rem;

--card-w: 180px;
--card-h: 252px; /* poměr 5:7 typický pro herní karty */

--margin-auto-max: 60px;
--margin-auto-content: 140px;


}


@font-face {
  font-family: 'Vastago Grotesk';
  src:
    url('../fonts/VastagoGrotesk-Bold.woff2') format('woff2'),
    url('../fonts/VastagoGrotesk-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;

  /* čeština + běžná latina */
  unicode-range:
    U+0000-00FF,
    U+0100-024F,
    U+1E00-1EFF;
}



img {max-width: 100%; height: auto; display: inline-block;}
p {margin: 0.5rem 0; line-height: 1.4; font-size: 1.125rem;}
a {text-decoration: underline; color: inherit;}
a:hover {color: inherit; text-decoration: none;}
hr {display: block; line-height: 0; height:0; font-size:0; border: none; border-top: 1px solid var(--gold); padding:0; margin: 65px 0 65px 0; _margin: 6px 0 7px 0; *margin:6px 0 7px 0; position: relative; overflow:  inherit;}
figure,
figcaption {padding: 0; margin: 0;}
.center {text-align: center; justify-content: center; align-items: center;}
.center p {margin: 0.5em auto;}
strong {font-weight: 700;}
iframe {width: 100% !important; display: block;}
.border-maps {overflow: hidden;}

.hlavni input, option, select {background: transparent; color: var(--background);}
::-webkit-input-placeholder {/* Chrome/Opera/Safari */ color:var(--gold);} ::-moz-placeholder {/* Firefox 19+ */ color:var(--gold);} :-ms-input-placeholder {/* IE 10+ */ color:var(--gold);} :-moz-placeholder {/* Firefox 18- */ color:var(--gold);}

html {margin: 0; padding: 0; background: var(--background); color: var(--dark-blue); scroll-behavior: smooth; overflow-x: hidden;}
body {font-family: 'Google Sans', sans-serif; font-size: 16px; margin: 0; padding: 0; width: 100%; box-sizing: border-box;}

/* zaklad */

h1, h2, h3, h4 {margin: 0; padding: 0; font-family: "Vastago Grotesk", sans-serif;}

h1 {font-size: 5rem;}
h2 {font-size: 5rem;}

.lang_de h1,
.lang_de h2 {font-size: 3.75rem;}

h3 {font-size: 1.5rem;}
h4 {font-size: 1.375rem;}

.perex {font-size: 1.25rem; margin: 2rem 0; max-width: 700px;}
.center .perex {margin-left: auto; margin-right: auto;}
.gold {color: var(--gold);}
h2 span {color: var(--gold);}

.page h1 {font-size: 2.5rem; margin: 0.7em 0;}
.page h2 {font-size: 2rem; margin: 0.7em 0;}

.heading_title {color: var(--gold); text-transform: uppercase; letter-spacing: 0.5ch; font-weight: bold; margin-bottom: 1.5rem;}
.heading_title--blue {color: var(--dark-blue);}

.h3_title {font-size: 2.5rem}

.white_box {background-color: var(--white); padding: 4rem; box-shadow: var(--box-shadow-2); border-radius: var(--border-radius-2); max-width: 1000px; margin: 0 auto;}

.pointer {pointer-events: all;}
.back-to-home a {display: inline-flex; align-items: center; gap: 0.5rem; transition: gap 0.3s;}
.back-to-home a span {display: inline-block; max-width: 20em; overflow: hidden; white-space: nowrap; opacity: 1; transition: max-width 0.3s, opacity 0.3s;}
.scroll-down .back-to-home a {gap: 0;}
.scroll-down .back-to-home a span {max-width: 0; opacity: 0;}
.back-to-home a::before {content: ""; display: block; width: 1.25em; height: 0.75em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 6H1M6 1L1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 6H1M6 1L1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat; flex-shrink: 0;}

.Main {background-color: var(--white); position: relative; padding: 1px 0; padding-bottom: 60px; z-index: 2;}
.page .Main {background-color: var(--background); padding: 4rem 0;} 

.width {margin: 0 auto; position: relative; z-index: 1; max-width: 1564px; padding: 0 var(--margin-auto-content);}
.width--max {max-width: unset; width: unset; margin: 0 var(--margin-auto-max); position: relative; z-index: 1; padding: 0;}
.width--fluid {max-width: unset; width: unset; margin: 0; padding: 0;}

.border-radius-1 {border-radius: var(--border-radius-1);}
.border-radius-2 {border-radius: var(--border-radius-2);}
.box-shadow-1 {box-shadow: var(--box-shadow-1);}
.box-shadow-2 {box-shadow: var(--box-shadow-2);}

.bg-blue {background-color: var(--dark-blue); color: var(--background);}
section {padding: var(--py-160) 0; position: relative; z-index: 1;}

.cols {display: flex; gap: var(--gap-l); align-items: center; justify-content: space-between;}
.cols--align-top {align-items: flex-start;}
.cols > * {flex: 1; max-width: 680px;}




/* KOMPONENTY */

/* component - Tlacitka */

.button {display: inline-flex; font-size: 1.125rem; text-decoration: none; padding: 1.25rem 1.725rem; transition: var(--animace); background-color: var(--dark-blue); color: var(--white); cursor: pointer;text-align: center; position: relative; z-index: 1; border-radius: 50px; align-items: center; font-weight: normal; font-weight: 700; min-height: 56px; box-sizing: border-box; vertical-align: middle; border: 2px solid var(--dark-blue); font-family: "Google Sans", sans-serif; font-weight: 400;}

.button--outline {background-color: transparent; border: 2px solid var(--gold); color: var(--dark-blue);}
.button--gold {background-color: var(--gold-light); color: var(--dark-blue); border-color: var(--gold-light);}

.button:hover {background-color: var(--gold); color: var(--dark-blue); border-color: var(--gold);}

.button_list {display: flex; gap: .25rem; flex-wrap: wrap; margin: 2rem 0;}

/* Socialni ikony */

.social_icons {display: flex; flex-direction: column; gap: .25rem; position: absolute; bottom: 60px; left: 60px; z-index: 1;}
.social_icons a {text-decoration: none; display: flex; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold); justify-content: center; align-items: center; transition: var(--animace); color: var(--gold);}
.social_icons a:hover {background-color: var(--gold);}
.social_icons a svg {fill: var(--dark-blue); transition: var(--animace);}
.social_icons a:hover svg {fill: white;}


/* Header */
header {position: relative; min-height: calc(100vh - 124px);}
.top_nav__logo {position: relative; overflow: hidden; transition: var(--animace); width: 268px; pointer-events: all; z-index: 1;}
.scroll-down .top_nav__logo {width: 50px; flex-shrink: 0;}
.top_nav__logo img {display: block; width: 268px; max-width: unset;}


.scroll-down header .social_icons {transform: translateX(-100%); opacity: 0; transition: var(--animace);}
.scroll-down .mouse_icon {transform: translateY(100%); opacity: 0; transition: var(--animace);}

/* MENU */
nav {position: relative; display: flex; justify-content: flex-end; align-items: center; pointer-events: all;}
.top_nav {display: flex; gap: var(--gap); align-items: center; justify-content: space-between; padding: 2rem 0;}

.top_menu_wrapper {position: sticky; top: 0; z-index: 1000; pointer-events: none;}
.top_menu {display: flex; align-items: center; margin: 0; pointer-events: all;}
.top_menu li {list-style: none;}
.top_menu li a {white-space: nowrap; text-decoration: none; display: block; padding: 0.5rem 1rem; font-size: 1.125rem;}
.top_menu li a:hover {color: var(--gold);}

.header_wrapper {display: flex; align-items: center; min-height: calc( 100vh - 124px);}
.header_body {width: 50%; max-width: 660px; z-index: 1182; padding: 2rem 0;}
.header_body p {margin: 2rem 0;}

/* Button vždy viditelný */
.menu-toggle {display: block; background: none; border: none; cursor: pointer; padding: 0; color: var(--dark-blue); width: 44px; height: 44px; margin-left: 1rem; z-index: 2;}

/* Hamburger základní styly */
.hamburger,
.hamburger::before,
.hamburger::after {display: block; width: 44px; height: 0px; background: currentColor; transition: transform 0.3s, top 0.3s, background 0.3s;}

.hamburger {position: relative;}
.hamburger::before,
.hamburger::after {content: ''; position: absolute; left: 0; height: 2px;}
.hamburger::before {top: -8px;}
.hamburger::after  {top: 8px;}

/* Křížek = menu otevřené */
nav.menu-open .hamburger {background: transparent;}
nav.menu-open .hamburger::before {transform: rotate(45deg); top: 0;}
nav.menu-open .hamburger::after  {transform: rotate(-45deg); top: 0;}

/* Výchozí = otevřené (nav má menu-open) */ 
nav.menu-open .top_menu { display: flex; transition: var(--animace); padding: 0 0.5rem; }
/* Zavřené = skryté (v obou stavech stránky) */
nav:not(.menu-open) .top_menu {width: 0; overflow: hidden;}

.menu-light .top_menu li a {color: var(--background);}
.menu-light .hamburger, 
.menu-light .hamburger::before, 
.menu-light .hamburger::after {background-color: var(--background);}

/* Mouse icon */

.mouse_icon {position: absolute; bottom: 60px; right: 60px; width: 28px; height: 48px; border-radius: 16px; border: 2px solid var(--dark-blue);}

.mouse_icon::after {content: ""; display: block; width: 2px; height: 10px; background-color: var(--dark-blue); border-radius: 5px; position: absolute; left: 50%; transform: translateX(-50%); top: -2px; animation-name: scroll; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(-0.35,.61,.40,.14);}

@keyframes scroll {
	0% {top: 6px; opacity: 1;}
	85% {top: 16px; opacity: 1;}
	100% {top: 24px; opacity: 0;}
}


/* O nas */

.sec_onas {position: relative; max-width: 100%; overflow-x: hidden ; overflow-x: clip;}
.cardsberg_pikto {display: block; position: absolute; top: 0; right: 0; transform: translateX(50%);}
.onas_bottom {margin-top: 5rem;}
.img_benefit {display: block;}
.benefits {display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 3rem 0;}
.benefit {display: flex; gap: var(--gap-l); font-size: 1.125rem;}

.info_points {position: relative;}

.info_point {position: absolute; width: 12px; height: 12px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; color: var(--dark-blue);}

.info_point::before {content: ""; position: absolute; width: 12px; height: 12px; background-color: var(--gold); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}

.info_point::after {content: ""; position: absolute; width: 24px; height: 24px; background-color: transparent; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid var(--gold); border-radius: 50%; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-out; display: block;}

@keyframes pulse {
  0% {transform: translate(-50%, -50%) scale(1); opacity: 1;}
  100% {transform: translate(-50%, -50%) scale(1.3); opacity: 0;}
}

.info_points span {position: absolute; top: 50%; left: 18px; display: block; width: max-content; max-width: min(240px, calc(100vw - 80px)); padding: 0.75rem 1rem; transform: translateY(-50%); border-radius: 100px; background-color: var(--white); box-shadow: var(--box-shadow-2); visibility: hidden;}
.info_point:hover span {visibility: visible;}

.info_point--1 {left: 28%; top: 72%;}
.info_point--2 {left: 50%; top: 28%;}
.info_point--3 {left: 40%; top: 50%;}

/* Vyuziti */

.sec_vyuziti {padding-top: 0; }
.vyuziti_list {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(508px,100%),1fr)); gap: var(--gap-m); justify-content: center; margin: 6rem 0;}
.vyuziti_item {max-width: 348px; text-align: center; margin: 0 auto;}
.vyuziti_item__icon {margin-bottom: 1.125rem;}

/* Jak pracujeme */

.work_layout {display: grid; grid-template-columns: 264px 1fr; gap: var(--gap-l);}
.work_heading {writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;}
.work_layout h3 {color: var(--gold); font-size: 2.5rem; margin-top: 0;}

.points {display: grid; grid-template-columns: 1fr 1fr 1fr;}

.point {max-width: 380px; margin: 1rem 0; position: relative; display: flex; gap: var(--gap);}
.point__number {display: flex; width: 36px; height: 36px; justify-content: center; align-items: center; border-radius: 42px; background-color: #151E35; flex-shrink: 0; margin-top: 6px; color: var(--gold-light);}


.point-2 {grid-column: 3; grid-row: 2;}
.point-3 {grid-column: 2; grid-row: 3;}
.point-4 {grid-column: 1; grid-row: 4;}
.point-5 {grid-column: 2; grid-row: 5;}




/* component - FAQ */

.faq {margin: 2rem auto; /* container-type: inline-size; */}
.faq-item {overflow: hidden; border-bottom: 1px solid var(--background); border-bottom: 1px solid var(--background);}
.faq-item:first-child {border-top: 1px solid var(--background);}
.faq-question {display: flex; align-items: center; justify-content: space-between; font-size: 1.5rem; color: var(--blue-primary); background: none; border: none; padding: 1.5rem 0; width: 100%; cursor: pointer; outline: none; text-align: left; gap: 1rem;}
.faq-question::after {content: ""; display: block; width: 20px; height: 20px; background: url(../images/ico_close_blue.svg) center no-repeat; background-size: cover; transition: var(--animace); flex-shrink: 0;}
.faq-answer {height: 0; overflow: hidden; transition: var(--animace); font-size: 1.125rem;}
.faq-item.open .faq-question::after {transform: rotate(45deg);}
.faq-answer p {margin: 0 0 1rem ;}

.cols.cols--faq {text-align: left;}

@media screen and (max-width: 767px) {
  .faq {padding: 1rem 0;}
  .faq-question {font-size: 1.25rem; padding: 1rem 0;}
}


/* Setion Claim */

.sec_claim {background-color: var(--background);}
canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.diamonds {display: flex; flex-direction: column; gap: 320px; text-align: center; align-items: center;}


/* Kontakt */

.sec_kontakt {position: relative; padding-bottom: 2rem;}


/* Formulare */

.formularek {margin: 3rem auto; background-color: var(--white); box-sizing: border-box; position: relative; max-width: 960px; padding: 4rem 3rem; border: 1px solid var(--blue-light); font-size: 18px; margin-top: 6rem;}
.formularek > .form_wrap {display: flex; gap: 0 var(--gap);}
.formularek > .form_wrap > * {width: 50%;}
.formularek input,
.formularek textarea {background-color: var(--white); width: 100%; box-sizing: border-box; border: 1px solid var(--gold); font-family: 'Google Sans', sans-serif; font-size: 1.125rem; padding: 1rem 1.25rem; outline: none; line-height: 24px; margin: 0; border-radius: var(--border-radius-2); color: var(--dark-blue);}
.formularek textarea {min-height: 120px;}
.formularek input:focus {border-color: var(--dark-blue);}
.formularek--dark-input input,
.formularek--dark-input textarea {background-color: var(--background); border-color: var(--background)}
.formularek .f_formItem {margin-bottom: 1.5rem;}
.formularek .f_formItem_label {margin-bottom: 0.75rem; text-align: left;}
.formularek .f_formItem_label span {color: var(--gold);}
.formularek .f_formItem_input {position: relative;}
.formularek .f_formItem_input--radio {display: flex; gap: 1rem; align-items: center; margin-bottom: 2px; flex-wrap: wrap;}
.formularek .f_formItem_input--radio > div {display: flex; align-items: center; gap: 0.5rem; flex-grow: 1;}
.formularek .f_formItem_input--radio > div input {max-width: 20px; width: 20px; height: 20px;}
.formularek .f_formItem_input--radio input[type="radio"] {accent-color: var(--dark-blue);}
.formularek .souhlas_wrap {display: flex; flex-grow: 1; margin: 1rem 0;}
.formularek .souhlas_wrap input {padding: 0; width: unset; height: 1rem;}
.formularek label {cursor: pointer;}
.formularek input[type="checkbox"] {display: inline-block; width: 1.25rem; height: 1.25rem; border: none; cursor: pointer; background-color: #DFE2E4; appearance: none; margin: 0 0.5rem 0 0; position: relative; flex-shrink: 0; border-radius: .25rem; padding: 0 !important;}
.formularek input[type="checkbox"]:checked {background-color: var(--dark-blue); border-color: var(--blue-primary);}
.formularek input[type="checkbox"]:checked::after {content: ""; background-image: url(../images/input_check.svg); width: 20px; height: 20px; color: white; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif;}

.formularek select {background-color: var(--white); border: 1px solid var(--gold); padding: 1rem 1.25rem; font-size: 1.125rem; font-family: 'Google Sans', sans-serif; color: var(--dark-blue); border-radius: var(--border-radius-2); width: 100%; box-sizing: border-box; outline: none; appearance: none; position: relative;}
.formularek option {background-color: var(--white); color: var(--dark-blue);}

.formularek .f_formItem_input--select::after {content: ""; position: absolute; width: 0px; height: 0px; background-size: cover; background-repeat: no-repeat; right: 1.25rem; top: 50%; transform: translateY(-50%); pointer-events: none; border-left: 6px solid transparent; border-right: 6px solid transparent;border-top: 8px solid var(--dark-blue);}


.form_footer {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.form_footer--horizontal {flex-direction: row; flex-wrap: wrap; gap: 1rem; justify-content: space-between;}

.formularek p {margin: 2rem 0;}
.formularek--transparent {background-color: transparent; border: none; padding: 0;}


.form_termin__boxes {display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(auto-fit, minmax(min(120px,100%),1fr));}
.form_termin input[type="radio"] {display: none;} 
.form_termin label {display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--border-radius-2); background-color: var(--background); color: var(--blue-primary); font-weight: 700; cursor: pointer; transition: var(--animace);}

.form_termin input:checked + label {background-color: var(--green-secondary);}
.form_termin label{height: 60px; box-sizing: border-box; justify-content: center; width: 100%;}

.form_termin .form_termin__boxes label:hover {background-color: var(--blue-light);}

.form_termin input:disabled + label {opacity: 0.3; cursor: not-allowed;}

.cikcak .form_termin__boxes {grid-template-columns: repeat(auto-fit, minmax(min(70px,100%),1fr));}
.formularek--small {font-size: 1rem; padding: 3rem 2rem;}
.formularek--small.formularek input,
.formularek--small.formularek textarea {padding: 0.75rem 1.5rem; font-size: 1rem;}
.formularek--small .form_termin input {height: 50px; line-height: 50px;}
.formularek--small .form_termin label{height: 50px;}

.formularek input::file-selector-button {padding: .5rem 1rem; margin-right: 1rem; border: none; background-color: var(--blue-primary); color: var(--white); border-radius: var(--border-radius-2); font-size: 1rem; cursor: pointer; font-family: "Google Sans", sans-serif;}

.f_formItem_input--file input {padding: 0.75rem;}
.formularek--small .f_formItem_input--file input {padding: 0.75rem;}

.formularek input::file-selector-button:hover {background-color: var(--gold); color: var(--dark-blue);}

/* Predpis pokud je formular v 1/2 sloucpe */

.form_termin_wrap {container-type: inline-size;}
@container (max-width: 545px) {
  .form_termin {grid-template-columns: 1fr;}
}

.formularek {container-type: inline-size;}
@container (max-width: 545px) {
  .formularek > .form_wrap {flex-direction: column;}
  .formularek > .form_wrap > * {width: 100%;}
}

@media only screen and (max-width: 575px) {
  .formularek {padding: 2rem 1.5rem;}
  .form_wrap {flex-direction: column; gap: 1.5rem;}
  .formularek > .form_wrap > * {width: 100%;}
  .formularek .f_formItem {margin-bottom: 1rem;}
  .formularek .button {margin-top: 1rem; width: 100%; justify-content: center;}
  .form_termin {grid-template-columns: 1fr;}
  .form_termin__boxes {grid-template-columns: repeat(auto-fit, minmax(min(80px,100%),1fr));}
}


/* Footer */

footer {padding: 4rem 0;}
footer p {max-width: 650px;}
footer .width {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 2rem auto;}
footer .social_icons {position: relative; flex-direction: row; gap: .5rem; bottom: unset; left: unset;}
.footer_bottom {border-top: 1px solid #E6D8C3; margin: 0 var(--margin-auto-content);}
.footer_bottom .width {padding: 0;}


/* ── Wrapper karty ── */

.card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;

  transform:
  translateX(-50%)
  translateY(-50%)
  perspective(var(--perspective, 600px))   /* ← vlastní perspektiva každé karty */
  rotateX(calc(var(--rx) + var(--scroll-rx, 0deg)))
  rotateY(calc(var(--ry) + var(--scroll-ry, 0deg)))
  rotateZ(var(--rz));

  will-change: transform;
}


/* ── Přední a zadní strana ── */
.card__front,
.card__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  backface-visibility: hidden; /* skryje stranu otočenou od uživatele */
  overflow: hidden;
  box-shadow: 0 0px 155px rgba(0, 0, 0, 0.15);
}

.card__front img,
.card__back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Rub je otočený o 180° kolem Y – standardní CSS flip */
.card__back {
  transform: rotateY(180deg);
}


/* ── Responzivita ── */
@media (max-width: 991px) {
  :root {
    --card-w: 80px;
    --card-h: 112px;
}

}


/* Slider */

.slider-section{
    width:100%;
    overflow:hidden;
    padding:40px 0 60px;
}

.mySlider{
    width:100%;
    overflow:visible;
    padding-left: 140px;
}

.mySlider .swiper-wrapper{
    align-items:flex-start;
}

.mySlider .swiper-slide{
    opacity:.45;
    transform:scale(.9);
    transition:.35s ease;
}

.mySlider .swiper-slide-active{
    opacity:1;
    transform:scale(1);
}

.card_slide img{
    width: 100%;
    display:block;
    aspect-ratio: 1036/614;
    object-fit:cover;
    border-radius:20px;
}

.card_slide h3{
    margin:22px 0 10px;
    text-align:center;
    font-size:32px;
    color:#243250;
}

.card_slide p{
    margin:0;
    text-align:center;
    color:#666;
    line-height:1.6;
}


.swiper-pagination-bullet {background-color: var(--gold); border-radius: 4px; transition: var(--animace);}
.swiper-pagination-bullet-active {background-color: var(--gold); width: 3rem; border-radius: 4px; }


/* tablet */
@media (max-width: 992px){
    .mySlider .swiper-slide{
        width:72vw;
    }
}

/* mobil */
@media (max-width: 576px){
    .mySlider .swiper-slide{
        width: 96vw;
    }
}


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

  :root {
    --margin-auto-max: 20px;
    --margin-auto-content: 100px;
  }

  .social_icons {left: 20px;}
  .mouse_icon {right: 20px;}

  h1,
  h2 {font-size: 4rem;}
  .work_layout {grid-template-columns: 164px 1fr;}


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

  h1,
  h2,
  .lang_de h1,
  .lang_de h2 {font-size: 3.125rem;}
}


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

    
}


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

	.cols {flex-direction: column; gap: 48px; flex-direction: column-reverse; text-align: center;}
  .cols > * {max-width: unset;}
  .sec_onas .perex {margin-left: auto; margin-right: auto;}
  .social_icons--horizontal {margin-top: 1rem;}

}

/* Large devices (desktops, less than 1040px) */
@media only screen and (max-width: 1040px) {
	
  .top_menu_wrapper {margin: 0; padding: 0 !important;}
  .width {padding: 0 20px;}
  .footer_bottom {margin: 0;}
  .footer_bottom .width { padding: 0 20px; }
  

}


/* Medium devices (tablets, less than 992px) */

@media only screen and (max-width: 991px) {
  :root {
   --py-160: 4rem;
  }
  .benefits {grid-template-columns: 1fr;}
  .top_nav {padding: 0.75rem 20px;}
  .top_nav__logo {max-width: 200px;}
  .top_nav__logo img {width: 200px;}
  .scroll-down .top_nav__logo {width: unset;}

  .work_layout {grid-template-columns: 1fr;}
  .work_heading {writing-mode: horizontal-tb; transform: rotate(0);}

  .header_body {flex-direction: column;}
  .header_body {max-width: unset; width: 100%; min-height: 560px;}

  .social_icons {flex-direction: row;}
  .top_menu_wrapper {background-color: rgba(255, 255, 255, 0.85);} 

}

/* Small devices (landscape phones, less than 768px) */

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

  h1, h2, .lang_de h1, .lang_de h2 {font-size: 2.5rem;}
  p {font-size: 1rem;}
  .perex {font-size: 1.125rem;}
  .top_menu {display: none; position: fixed; right: 0; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.85); color: var(--dark-blue); padding-top: 88px; box-sizing: border-box;}
  nav.menu-open .top_menu {display: block; padding: 0; padding-top: 72px;}
  
  .top_menu li {display: block;}
  .top_menu li a {padding: 1rem 0; text-align: center;}

  .mySlider {padding-left: 60px;}
  .card_slide h3 {font-size: 1.5rem;}
  .card_slide p {line-height: 1.35;}

  .points {grid-template-columns: 1fr 1fr;}
  .point-2 {grid-column: 2;grid-row: 2;}
  .point-3 {grid-column: 1;grid-row: 3;}
  .point-4 {grid-column: 2;grid-row: 4;}
  .point-5 {grid-column: 1;grid-row: 5;}

  .white_box {padding: 2rem;}

}


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


}


/* phones */

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

  h1, h2, .lang_de h1, .lang_de h2 {font-size: 2rem;}
  h3 {font-size: 1.25rem;}
  .button {padding: 0.75rem 1.5rem; font-size: 1rem;}
  .work_layout h3,
  .h3_title {font-size: 1.5rem;}
  .perex {font-size: 1rem;}
  .points {grid-template-columns: 1fr;}
  .point-2 {grid-column: 1;grid-row: 2;}
  .point-3 {grid-column: 1;grid-row: 3;}
  .point-4 {grid-column: 1;grid-row: 4;}
  .point-5 {grid-column: 1;grid-row: 5;}
  .mySlider {padding-left: 0px;}
  .card_slide h3 {font-size: 1.25rem;}
  footer {padding: 0; text-align: center;}
  footer .social_icons {justify-content: center; margin: 1rem auto;}
  .footer_bottom .width {justify-content: center; gap: 1rem;}

}


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


}


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

}

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

}