/* big screen */
@media only screen and (min-width: 2080px) {
    body {font-size: 20px;  }
    .container {max-width: 1600px;}


}

@media only screen and (max-width: 1500px) {
 
    .kdy .grid .item {padding-top: 1.7rem;}
    .kdy .grid .item {padding: 3rem 1.5rem 1.5rem 1.5rem;}
}

/***********  tabelet ************/

@media only screen and (max-width: 1100px) {
 body {font-size: 16px; font-size: 1.5vw; }
 .container {width: 90%;}
     #ham {display: block;}
      .topnav .nav-cont {display: none;} 
 .nav-cont li a { font-size: 0.85em;}
 .intro .bg {width: 195%; margin-left: -59%;}
 .intro-text {left: -38%; width: 54%;}
 .intro .arr-down {left: 53%;}
 .banner-soutez-left { font-size: 1.3em; padding: .8em 2em .8em 1em;}
 .banner-soutez-right { font-size: 1em;}
 section.training .container { padding-right: 5%;}
 .kurzy table { width: 100%;}
.kurzy td.reg {padding-right: 0;}
.more-stuff article {width: 100%;}
.faq .content {width: 100%;}

 .kdy .container {width: 86%;}
 .kdy .grid .item h3 {margin-bottom: .6em; font-size: 1.4em;}
 .kdy .grid .item {padding: 3rem 0.5rem 1.5rem 1.1rem;}
 h3.ui-accordion-header {font-size: 1.1em; padding-right: 3em;}
 .ui-accordion-header-icon {right: 0;}
 .kdy .grid .item p {font-size: .9em;}
 .kdy button {margin: 7em 0 0 2rem;}

}





@media only screen and (max-width: 767px) {
    .hide-on-mob {display: none;}
    body {font-size: 15px; font-size: 3.8vw; }
    .col {width: 100%;}
    h2 {font-size: 2em;}
    .container, .container-small {width: 88%; padding: 0;}
    .container-mini {width: 80%;}
    .logo {width: 10.6em; top:0; margin-left: 0.2rem; left: 0;     margin-top: 1.4em;}
   .menu .nav-cont {display: block;}
    .intro .bg {width: 315%; margin-left: -97%;}
    .intro-text { top: 38%;}
    .intro-text { left: 0; padding: 5%; width: 100%;}
    .intro-text h1 {font-size: 3.9em; margin-bottom: 0.2em;}
    .intro .arr-down {left: 1.3em; bottom: 0.1em; width: 3.8em;}
    
    .banner-soutez {display: block;}
    .banner-soutez-left {width: 100%; text-align: left;}
    h3.ui-accordion-header {font-size: 1.1em; padding-right: 3em;}

    /* --- Responsive table for Kurzy (CSS-only method) --- */
    .kurzy table {
        border: 0;
    }
    /* Hide the table header on mobile */
    .kurzy table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }
    /* Each table row becomes a card */
    .kurzy table tr {
        border-bottom: 2px solid var(--c2);
        display: block;
        margin-bottom: 2em;
        padding-bottom: 1em;
    }
    /* Style the table cells */
    .kurzy table td {
        border-bottom: 1px dotted var(--c4);
        display: block;
        font-size: 1em;
        text-align: right;
        padding: 0.4em 0.5em;
        position: relative;
    }
    /* Add the label before each cell's content */
    .kurzy table td::before {
        font-size: 0.6em;
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }
    /* Manually set the content for each column's label */
    .kurzy td.date::before   { content: 'TERMÍN'; }
    .kurzy td.price::before  { content: 'CENA KURZU'; }
    .kurzy td.spots::before  { content: 'VOLNÉ MÍSTA'; }
    .kurzy tr td:nth-child(5)::before { content: 'MÍSTO'; } /* Target location cell */

    /* Special styling for status and registration cells */
    .kurzy td.status, .kurzy td.reg { border-bottom: 0; }
    .kurzy td.reg { margin: 0 0 0 auto; padding: 1em 0 0 0; width: auto;}
    .kurzy td.status { display: none; } /* The status dot is hidden as it's less useful in this layout */

.kurzy td.spots {padding:0.8em 0.5em;}
section.kurzy { padding: 0.1em 0 1em;}


section.training {padding: 3em 0 3em;}
section.training .container {display: block;  width: 88%;       overflow: auto;}
.training-images {width: 100%; overflow: auto; margin-bottom: 2em;}
.training-content {width: 100%;}
.training-content h2 {width: 100%;}
.section.training { padding: 3em 0 4em;}

section.benefits { padding: 0 0 2em;}
.benefits .container { display: block;}
.benefits-grid {width: 100%; padding-right: 0; display: block;}
.icon-check {  margin-top: 0.4em;}
.benefit-text { width: 100%;}

section.course-info { padding: 4em 0;}
.course-info .container { display: block;}

.course-audience div { align-items: flex-start;}
.course-duration {margin-top: 3em;}

.schedule { padding: 3em 0 5em;}
.schedule .row {display: block;}
.schedule .col1 { width: 100%; padding-right: 0;}
.schedule .col2 {margin-top: 3em;}

.more-stuff article {display: block; float: left; padding: 1.7em 1.6em;}    
.more-stuff article .col1 {width: 100%;         margin-bottom: 1.2em;} 
    .more-stuff article h2 { margin-bottom: 0.6em;}
    .more-stuff .col3 {margin-top: 1em; display: block; width: 100%;}
    .more-stuff button {float: right;}


    .ui-accordion-content { height: auto;}
    
    section.kdy {background-size: 130%; padding: 6em 0; background-image: none; color:white; background-color: var(--c2);}
    .kdy .grid {display: block;}
    .kdy button {margin: 0 1.3rem 0.8em; color: var(--c1);} 
    .kdy .grid .item {padding: 1rem 0.5rem 0rem 1.1rem;    }
    
    /* blog */

    /*faq page */
    .faq-page .container { width: 80%;}

    }