@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');


*{
    font-family: 'Roboto', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
   
    transition: .3s linear;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;    
}
@font-face {
  font-display: swap;
}

/* ----------------------------- */

html::-webkit-scrollbar{
    width: .8rem;
}
html::-webkit-scrollbar-track{
    background: transparent;
}
html::-webkit-scrollbar-thumb{
    background: white;
    border-radius: 5rem;
}

/* ----------------------------- */

body{
    background: #000;
}
section{
    padding:2rem 7%;
    
}
.heading{
    text-align: center;
    color:#fff;
    text-transform: uppercase;
    padding-top: 60px;
    padding-bottom: 2rem;
    font-size: 30px;
}
.heading span{
    color: #cc9900;
    text-transform: uppercase;
}

/* -----------------------------*/

p, li {
    color: white;
    font-size: 16px;
    font-weight: lighter;
}


h2 {
color: #cc9900;
font-size: 27px;
font-weight: lighter;
}
h3 {
color: #cc9900;
font-size: 22px;
font-weight: lighter;
}

#pricing-container {
    margin-top: 50px;
    margin-bottom: 35px;
    padding-left: 5%;
}
/*------------------------------*/

.header{
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:1.5rem 7%;
    padding-bottom: 10px;
    padding-top: 10px;
    box-shadow: 1px 1px rgba(255, 255, 255, 0.1);
    position: fixed;
    height: 90px;
    top:0; left: 0; right: 0;
    z-index: 100;      
}
.header .logo {
    position: absolute;    
}
.header .logo img{
    height: 80px; 
    width: auto;   
}

/* ----------------- */

.header .navbar {    
    left: 0; right: 0; margin: auto;
}
.header .navbar .navbar-wrap div {
    display: inline-block;
}
.header .navbar .navbar-wrap a{
    margin: 0;
    font-size: 1.4rem;
    text-transform: uppercase;
    color:#fff;
}
.header .navbar .navbar-wrap a:hover{
    color: #ffcc00;
    border-bottom: .1rem solid #ffcc00;
    padding-bottom: .5rem;
}
.header .icons div{
    color: #fff;
    cursor: pointer;
    font-size: 2.5rem;
    margin-left: 2rem;
}
.header .icons div:hover{
    color: #ffcc00;
}
.cs:hover {
    cursor: pointer;
}
.cs img {
    width: 25px;
    height: auto;
    margin-left: 10px;
}
#menu-btn{    
    display: none;
}

/* --- HOME --- */

.home{
    height: 100vh;  
    width: 100vw;
    display: table;
    align-items: center;
    padding: 0;            
}
#home-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: absolute;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;   
}
.content-wrap {   
    width: 100%;
    height: 100vh;
    position: absolute;  
    padding: 10%;
    display: table;    
}
.home .content{
   
    height: fit-content;
    display: table-cell;   
    vertical-align: middle;        
}
.home .content h1{
    font-size: 7rem;
    text-shadow: 2px 2px 4px black;
    text-transform: uppercase;
    font-style: italic;
    color:#fff;
    margin-top: 90px;      
}
.home .content h1 span{
    color: #cc9900;
}
.home .content h2{
    font-size: 30px;
    text-shadow: 2px 2px 3px black;
    font-weight: lighter;
    line-height: 1.3;
    padding: 1rem;
    color:#fff;       
}



#cesky-obal {
    display: none;
    position: relative;
    z-index: 99;
}
    
#cesky {
    width: 750px;
    height: 330px;
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0; margin: auto;
    z-index: 100;
    background: blue;
    border-radius: 10px;
    border: 3px solid #fff;
    box-shadow: 5px 5px 9px #000;
    display: grid;
    grid-template-columns: 60% 40%;          
}
#cesky .text {
    grid-column: 1/2;
    padding: 30px 30px 0 30px;
    margin-top: 10px;        
}
#cesky .text p {
    font-weight: lighter;
    font-size: 18px;
}


/* ------------------- blog ------------------*/
#blog {
    min-height: 100vh;

    display: flex;
    justify-content: center; 
    align-items: center; 
    display: flex; /* Toto tam už asi máte */
    flex-direction: column;
}
#blog h2 {
    width: 100% !important;
    
    display: block !important;
    text-align: center;
    padding-bottom: 20px;
}


.posts-list-content {
    
    padding: 30px 0;
    width: 100%;    
    float: none;
    text-align: center;
    max-height: 600px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    
   
    scrollbar-width: none; 
    border-bottom: .1rem solid #ffcc00;
    display: block !important;
    
}
.posts-list-content::-webkit-scrollbar {
    display: none;
}

.article-index-list {
    /* 2. Odstranění odrážek (teček) */
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.posts-list-content li {
    padding-top: 30px;
    
}
.posts-list-content a {
    color: white;
    font-size: 1.3em;
    font-weight: 200; 

}
.posts-list-content a:hover {
    color: #666;
    
}
.list-date {
    font-size: 12px; 
}
ul.article-index-list li h4 a {
    font-size: 18px !important;
   
    display: block !important;
    white-space: normal !important;
}

.vlajka {
    grid-column: 2/3;
    background: url(pics/moravska-vlajka-pernstejn.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 8px 8px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 120;    
}
.zavrit p {
    width: 50px;
    float: right;
    text-align: right;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    padding: 5px 15px;
    text-shadow: 1px 1px 2px #000;
}
.zavrit p:hover {
    cursor: pointer;
    color: blue;
}

/* -------------- reviews ----------------- */

.review .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    grid-auto-rows: minmax(min-content, max-content);
    gap:1.5rem; 
    margin-top: 50px;   
}
.review .box-container .box {    
    text-align: center;
    padding:3rem 2rem;
    height: fit-content;    
}
.review .box-container .box .quote {
    width: 30px;    
}
.review .box-container .box p {    
    line-height: 1.8;
    color:#ccc;
    padding:2rem 0;
}
.review .box-container .box span {
    padding:1rem 0;
    font-size: 14px;
    font-style: italic; 
    color: #ffcc00;
}
.blast-quote { 
    width: 140px;
    height: auto;
}


/* -------------------- */


#linkstofriends {
    margin-top: 50px;
}

.friends {
    width: 100%;
    
    left: 0; right: 0; margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 10px;
    padding-top: 40px;     
}
.friends p {
    grid-column: 1/7;   
    color: #ffcc00;
    padding-bottom: 40px;
}
.friend {  
    position: relative;     
    text-align: center;     
    margin-bottom: 50px;
    height: 50px; 
    padding: 50px; 
}
.friend img {
    width: 110px; 
    height: auto;   
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0; right: 0; margin: auto;
}
.friends .one img {
    width: 80px;
    height: auto;
}

.friends .four img {
    width: 120px;
    height: auto;
}
.friends .six img {
    width: 80px;
    height: auto;
}



/* ----------------  kontakt -------------------- */

#contact-section {
    text-align: center;
    padding-top: 50px;
    min-height: 100vh;
}
#tel-whats {
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    align-items: center;
    padding-top: 10px;
}

#formular {
    margin-top: 70px;
}

.form-required-text-top {
    padding: 20px;
}


/* 1. Nastavení kontejneru (formuláře) */


#contactForm {    
    display: flex;     
    flex-direction: column;     
    align-items: center;  
    max-width: 500px;   
    margin: 0 auto;     
    padding: 20px; 
    border: 1px solid #ccc;     
}

/* 2. Nastavení vstupních prvků */

#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea {
    width: 100%; 
    box-sizing: border-box; 
    margin-bottom: 15px; 
    padding: 10px;
}

/* 3. Nastavení tlačítka (již vycentrováno pomocí align-items: center; na #contactForm) */
#contactForm button {
    padding: 10px 30px;
    margin-top: 10px;
}
#status-wrap {
    width: 100%; /* Přizpůsobí se šířce mobilu */
    max-width: 450px; /* Na počítači zůstane max 450px */
    height: auto;
    min-height: 30px;
    margin: auto;
}
#formStatus {
    padding: none;
    font-size: 1.5em;
}



/* 2. Nastavení celého formuláře */
#contactForm {
    background-color: #000; 
    color: #fff;   
    border: none;        
}



/* 4. Nastavení placeholderu (šedý text uvnitř prázdných polí) */
#contactForm input::placeholder,
#contactForm textarea::placeholder {
    color: #ccc; 
    opacity: 1;  
}

/* 5. Nastavení tlačítka (aby bylo také černo-bílé) */
#contactForm button[type="submit"] {
    background-color: #000; 
    color: #fff;            
    border: 1px solid #ffcc00; 
    cursor: pointer;
    border-radius: 5px;
}
.honeypot-field {
  
    position: absolute; 
    top: -9999px;      
    left: 0;        
    height: 1px;
    width: 1px;
    overflow: hidden;
    opacity: 0;
}
.tlacitka {
    display: inline-block; background-color: #000; color: white; padding: 10px 20px; border: 1px solid #cc9900; border-radius: 5px; text-decoration: none; cursor: pointer;
}

/* ------------- */

.dotek {
    width: 100%;
    height: auto;
    margin-top: 50px;
}

#obsah h3 {
    padding: 30px 0 20px 0;
}
/* ---------------------------------*/

.footer{
    background: #000;
    text-align: center;
}
.footer .share{           
    left: 0; right: 0; margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 250px;    
    position: absolute;     
}
.footer .share a img{   
    width: 40px;  
    height: auto;      
}  
.footer .share a img:hover {   
    width: 38px;  
    height: auto;
}
#brno {
    width: 60px;
    padding-left: 5px;
}
.footer .links{
    display: flex;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 0 20px 0; 
    margin-top: 50px;  
}
.footer .links a{
    padding: 0 10px;
    color:#fff;
    border-left: 1px solid #ffcc00;
    font-size: 16px;
    font-weight: lighter;
}
.footer .links a:first-child {
    border: unset;
}
.footer .links a:hover{    
    color: #ffcc00;
}
.footer .credit{
    font-size: 15px;
    color:#fff;
    font-weight: lighter;
    padding: 20px 0 20px 0;
    text-align: center; 
}
.footer .credit span{
    color: #ffcc00;
}
#credit a {
    color:#fff;    
}
#credit a:hover {
    color: #ffcc00;
}


a {
  font-size: 14px;  
  display: inline-block;
  min-width: 48px;
  min-height: 28px;
  padding: 5px;
  margin: 8px;
}


/* ---------------- resp ------------------ */


@media (max-width:991px){
    html {
        font-size: 55%;
    }
    .header{
        padding:1.5rem 2rem;
    }     
}    


@media (max-width:800px){
    #menu-btn{
        display: inline-block;       
        position: absolute;
        right: 30px;
    }
    .header {
        z-index: 20;
    }
    .header .navbar{
        position: absolute;       
        top: 75px; 
        left: unset; margin: unset;
        right: -140px;
        background: #000;
        width: 140px;
        height: 100vh; 
        box-shadow: -1px -1px rgba(255, 255, 255, 0.1);
        border-radius: 10px 0 0 0;
    }
    .header .navbar .navbar-wrap {    
        height: 200px;  
        padding: 20px 0 0 10px;  
        display: grid;        
        grid-template-rows: repeat(6, 1fr);
    }   
    .header .active{          
        right: 0;      
    }     
    
    .header .navbar .navbar-wrap div{
       height: 40px;
    }
    .header .navbar .navbar-wrap a{
        color: #fff;
        display: block;            
        font-size: 18px;
        position: absolute;
    }    
    
   /* --------------------- */

    #cesky {
        width: 430px;
        height: 300px; 
        background: white; 
        box-sizing: border-box;
        border: none;           
    }
     #cesky .text {        
        padding: 0 20px 0 20px;
        margin-top: 30px;        
    }
    #cesky .text p {
        text-align: left;        
        font-size: 14px;
        color: black;
        font-weight: unset;
    }
    .vlajka {
         border-left: 1px solid rgba(0, 0, 0, 0.6);
    }   

    .friends {
        display: block;        
    }
    .friends p {
       padding-bottom: 30px;
    } 
} 


@media (max-width:600px){

    .home .content h1 {
        font-size: 35px;
    }
    .home .content h2 {
        font-size: 16px;
    }
    
    .footer .links a{   
        font-size: 12px;    
    }
    .footer .credit{
        font-size: 10px;
    }
}


@media (max-width:450px){
    html{
        font-size: 50%;
    }
    .header .logo {
        position: relative; 
        display: block; 
        left: 0; right: 0; margin: auto;  
    }
    .header .logo img{
        height: 65px;    
    }   
    

     /* --------------------- */    


    #cesky {
        display: grid;        
        grid-template-rows: 60% 40%;
        width: 90%;
        height: 90%;   
        z-index: 150;          
    }      
    #cesky .text {
        grid-column: 1/3; 
        grid-row: 1/2;
        width: 100%;
        height: 100%; 
        margin-top: 10px;
        display: -webkit-flex;
        display: flex;
        align-items: center;      
    }
    #cesky .text p {        
        font-size: 15px;         
    }
    .vlajka {
        grid-column: 1/3;
        grid-row: 2/3;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: -100px; 
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0 0 10px 10px;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.6);
        z-index: 1;    
    }
    .zavrit {
        position: fixed;
        top: 35px; right: 15px;
        z-index: 125;      
    }
    .zavrit p {
        color: black;
        text-shadow: none;
    }    
}

/* -------------------- resp HOME -------------- */


@media (max-width:800px){
    .home{
        background-position: left;
        justify-content: center;
        text-align: center;
    }
    .home .content {
        padding: 0 3% 0 3%;
    }
    .home .content h1{
        font-size: 4rem;        
    }
    .home .content h2{
        font-size: 2.2rem;
    }    
    .home .content .get-wrap {
        position: relative;
        bottom: unset;
        top: 30px;
        display: flex;
    }    
   
}

/* -------------------- resp reviews -------------- */

@media (max-width:620px){  
    .review .box-container {    
        gap:1.5rem;
        margin-top: 0;          
    }
    .review .box-container .box .quote {    
        padding-top: 80px;
    }
    .review .box-container .box {      
        padding:0;   
    }
    .review .box-container .box h3 {
        padding:0;    
    }
    .review .box-container {   
         gap:0;    
    }
    
}    

/* -------------------- resp KONTAKT -------------- */



@media (max-width:768px){  
   

    .home .content-wrap {
        min-width: 100vw;
        padding: 0;
        display: table;        
    }
    .home .content {        
        min-width: 100%;
        padding: 0 1%;
        display: table-cell;
        vertical-align: middle;
    }
    .home h1 {
        margin-top: 0;
        padding: 0 5%;
        line-height: 1.2em;
    }
    .home .content h2 {
        font-size: 16px;        
    }
    
} 




/* --- HANDYMAN --- */

.about  {   
    position: relative;
    padding: 0;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-gap: 50px;
    box-sizing: border-box;
    padding-right: 5%;
    z-index: 0;
}
.about .handyman-brno {
    grid-column: 1/2;
    background: url(pics/handyman-brno.webp);
    background-size: cover;
    background-repeat: no-repeat;
    }
.about .handyman-brno img { 
    position: relative;     
}
.about .row{   
    grid-column: 2/3;       
    padding-right: 5%;  
    z-index: 0;     
} 
 .about .row .heading {
    grid-row: 1/2; 
    text-align: unset;
    margin-left: 80px;
    padding-bottom: 80px;   
}   
.about .row .content {  
    grid-row: 2/3;     
}
.about .row .content .faja {
    width: 40px;
    height: auto;
    float: left;
    padding-right: 10px;
    
}
.about .row .content .faja:hover {
    width: 38px;
    height: auto;
}



.about .row .content p {
    
}
.about .row .content div {
    padding: 20px 0 20px 0px;
}

.about .row .content .handyman-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 5%;
}



.about .row .content .handyman-list div p {
    padding-left: 0;
    line-height: 1.5em;
    font-weight: lighter;
}
.about .row .content .will {
    margin-bottom: 30px;

}
@font-face {
  font-display: swap;
}


/* -------------------- resp HANDYMAN -------------- */


@media (max-width:768px){

    .about {    
        grid-gap: 20px;
    }
    .about .row .heading {    
        text-align: unset;
        margin-left: 0;
        text-align: center;
        padding-bottom: 40px;
        margin-top: 50px;
    } 
    .about .row .content div {
        padding: 20px 0 20px 0;
    }
    .about .row .content .faja {
        width: 25px; 
        height: auto;   
    } 
   
    .about .row .content p {
        padding-left: 35px;    
    }
    .about .row .content .handyman-list {
        display: block;
        padding-right: 20px;
    }  
    .about .row .content .handyman-list div h4 {
        text-align: center;    
    }
    .about .row .content .handyman-list div p {
        text-align: center;
    }
}  



/* --- ELECTRICIAN --- */


    .dratovani, .dratovani1 {
        padding-top: 0;   
        background-image: url(../pics/background-electrician-handyman-brno.webp);
        background-attachment: fixed;  
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
                
        left: 0;
        right: 0; 
        bottom: 0;
        z-index: 99;
    }
    .dratovani .certified {
        text-align: center;    
    }
    .dratovani .offering {
        width: 45%;
        left: 0; right: 0; margin: auto;
        border: 3px solid #cc9900;
        border-radius: 10px;
        text-align: center;
        padding: 3%;
        margin-top: 70px;
        position: relative;
        z-index: 0;
    }
    .dratovani .offering .blesk {
        position: absolute;     
        right: -5px; bottom: -30px; margin: auto;
        margin-bottom: -20px;       
    }
    .dratovani .offering .blesk img {
        width: 50px;
        height: auto;
    }
    .dratovani .vycet {
        width: 80%;
        left: 0; right: 0; margin: auto;
        margin-top: 100px;
        margin-bottom: 50px;   
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 100px;
    }
    .dratovani .vycet div {
        border-top: 2px solid white;
        padding-top: 20px;
        border-radius: unset;
    }
    .dratovani .vycet p {
        line-height: 1.5em;
        font-size: 15px;
    }
    .konec {
        width: 100%;
        padding: 0; 
        position: relative;       
    }
    .konec img {
        width: 100%;
        max-height: 600px;
    }
     #get1 {
        width: 200px;
        height: auto;
        position: absolute;
        top: -50px;
        left: 100px; right: 500px; margin: auto;
        
        transform: rotate(5deg);
        z-index: 0;
    }
    #get1:hover {
        width: 198px;
        cursor: pointer;        
    }    
     .dratovani1 .looking {
        width: 80%;
        left: 0; right: 0; margin: auto;
        margin-bottom: 30px;
    }
    .dratovani1 .looking h2 {
        margin-left: 0;
        font-size: 30px;
        font-weight: lighter;
        padding-top: 60px;
        padding-bottom: 20px;
        color: #ffcc00;
    }

    .dratovani1 .elektro {        
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 50px;        
        padding: 20px;
        padding-top: 100px;
    }
    .dratovani1 .elektro div {        
        border-radius: 10px;
        padding: 10px;
        
        padding-bottom: 20px;   
        background: black;  
    }    
    .dratovani1 .elektro .symbols  {
        display: block;
        width: 100px;
        left: 0; right: 0; margin: auto;
    }
    .dratovani1 .elektro h3 {
        text-align: center;
        font-size: 20px;
        color:#cc9900;
        line-height: 1em;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .dratovani1 .elektro p {
        text-align: center;
    }
    .dratovani1 .elektro-prace {
        margin-top: 70px;
        padding: 20px; 
        display: grid;   
        grid-template-columns: 1fr 1fr 1fr 1fr;       
        grid-gap: 100px; 
        margin-bottom: 40px;
    }
    .dratovani1 .elektro-prace div {        
        padding-top: 30px;        
    }

    .dratovani1 .elektro-prace img {
        width: 100%;
        height: auto;
        margin-top: 20px;
        border: 3px solid #cc9900;
        border-radius: 10px;
        
    }
    .dratovani1 .elektro-prace div h3 {        
        font-size: 20px;
        font-weight: lighter;
        line-height: 2em;
        color: #ffcc00;       
    }   
    .dratovani1 .more {        
        font-size: 16px;
        font-weight: lighter;
        font-style: italic;
        text-align: right;
        padding-right: 40%;        
        margin-bottom: 170px;
    }

     .dratovani1 .discuss {
        margin-top: 200px;
        width: 60%;
        left: 0; right: 0; margin: auto;
    }
    .dratovani1 .discuss p {
        text-align: center;
    }
     .dratovani1 .blesk {
        display: block;
        width: 50px;
        height: auto;
        left: 0; right: 0; margin: auto;
        padding: 30px 0;
    }


    /* -------------------- resp ELECTRIC -------------- */

@media (max-width:1300px){  
    .dratovani1 .elektro-prace { 
        grid-template-columns: 1fr 1fr; 
    }    
}


@media (max-width: 991px){
    .dratovani1 .elektro {        
        grid-row-gap: 50px;
        grid-template-columns: 1fr 1fr;        
    }
    .dratovani1 .elektro-prace {          
        display: block;            
    }
}


@media (max-width:768px){
    .dratovani .vycet {
        display: block;
        width: 50%;
        margin-bottom: 60px;
    }
    .dratovani .vycet div {
        margin-top: 30px;
    }
    .dratovani .vycet p {
        text-align: center;
    }
    .dratovani1 .elektro {        
        display: block;      
    }
    .dratovani1 .elektro div {        
        margin-bottom: 30px;      
    }  
  
}


@media (max-width:450px){
    .dratovani .offering {
        width: 80%;        
    }
}

.feedback-separator {
    border-color: #555; 
    margin: 40px 0;
}


/* --- 1. STYLOVÁNÍ KARTY RECENZE (.box) --- */
.box-container {
    
    display: grid;
   
    width: 100%;
    
    gap: 20px;
    padding: 0;
    margin: 0;
}

.box {
  
    background: rgba(255, 255, 255, 0.05); 
    padding: 20px;
    border-radius: 10px;
   
    break-inside: avoid; 
}

.box .quote {
    width: 40px; 
    height: auto;
    margin-bottom: 15px;
    
}

.box .review-text {
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 15px;
}

.box .signature-line {
    font-weight: lighter;
    font-size: 0.9em;
    opacity: 0.8;
}

/* --- 2. RESPONSIVNÍ GRID PRAVIDLA (Mozaika) --- */

@media (max-width: 767px) {
    .box-container {
       
        grid-template-columns: 1fr;
    }
}

/* Tablety a menší desktopy */
@media (min-width: 768px) and (max-width: 1199px) {
    .box-container {
        /* 2 nebo 3 sloupce vedle sebe */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        /* Nebo pevné 3 sloupce: grid-template-columns: repeat(3, 1fr); */
    }
}

/* Větší desktopy a široké obrazovky */
@media (min-width: 1200px) {
    .box-container {
       
        grid-template-columns: repeat(4, 1fr);
        
    }
}




/* =======================================
   1. ZÁKLADNÍ STYLY FORMULÁŘE (pro mobilní zařízení)
   ======================================= */

#feedback-form-container {
    padding: 20px;
    margin-top: 30px;
   
    background-color: rgba(255, 255, 255, 0.05); 
    border-radius: 8px;
}
#feedback-form {
    gap: 10px 10px;
}

#feedback-form h3 {
    margin-bottom: 25px;
    font-size: 2em;
    font-weight: 500;
    padding-bottom: 30px;
    color: #cc9900;
}


#feedback-form input:not([type="submit"]), 
#feedback-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 1.4em;
    
   
    background-color: #222; 
    border: 1px solid #cc9900; 
    color: white; 
    border-radius: 4px;
    transition: border-color 0.3s;
}

#feedback-form input:focus, 
#feedback-form textarea:focus {
    border-color: #cc9900; 
    outline: none;
}

#feedback-form textarea {
    resize: vertical;
    min-height: 150px;
}

#feedback-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 300;
    font-size: 0.95em;
    color: white; 
}

/* Stylování tlačítka Odeslat */
#feedback-form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #222; 
    color: white;
    border: 1px solid #cc9900;; 
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.3em;
    font-weight: 200;
    transition: background-color 0.3s;
}

#feedback-form button[type="submit"]:hover {
    background-color: #000; 
}

#form-messages {
    margin-top: 5px;
    padding: 10px;
    text-align: center;
    font-weight: lighter;
    color: white; 
    font-size: 2em;
}


/* =======================================
   2. RESPONSIVNÍ GRID PRO DESKTOP
   (Zajistí, že vybrané vstupy budou vedle sebe)
   ======================================= */


@media (min-width: 768px) {
    
   
    #feedback-form {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px 10px; 
    }
   
    #feedback-form label[for="message"], 
    #feedback-form textarea, 
    #feedback-form button[type="submit"],
    #form-messages,
   
    #feedback-form > div[style="display:none;"] { 
        grid-column: 1 / span 2; 
    }
   
    #feedback-form label {        
        grid-column: auto / span 1;
    }

    
    #feedback-form input:not([type="submit"]), 
    #feedback-form textarea {
       
        margin-bottom: 0;
    }

   
    .grid-spacing {
        grid-column: 1 / span 2;
        height: 20px; 
    }
}

/* Speciální oprava pro kontakt na mobilech */
@media (max-width: 600px) {
    #contact-section {
        padding: 2rem 3% !important; /* Menší okraje sekce */
    }
    
    #status-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    #contactForm {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
    }

    /* Zajištění, aby tlačítka v kontaktu nepřetekla */
    .tlacitka {
        width: 100% !important;
        white-space: normal !important; /* Umožní zalomení textu v tlačítku */
        height: auto !important;
    }
}