/* Snížení mezery mezi poli formuláře */
.form-group {
    margin-bottom: 0.75rem;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: #fdf5e5;
}

.container h2 {
  font-family: 'Roboto', Courier, monospace;
  color: #64460e;
  font-size: 2.5rem;
  font-weight: 700;
}

/* Zajištění, že textarea bude resizable */
textarea {
    overflow-y: hidden; /* Skrývá scroll */
    resize: none; /* Zakáže manuální změnu velikosti */
}

/* Úprava velikosti a barvy tlačítka */
.btn {
  background-color: #4C2719;
  color: #F3E3C4;
  font-size: 14px;
  padding: 8px 20px;
  text-decoration: none;
  transition: 0.3s 
}

/* Efekt při hover - tmavší hnědá */
.btn:hover {
  background-color: #946846;
}

/* Změna barvy slideru na hnědou */
.form-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #8b4513; /* Hnědá barva pro secondary část */
    border-radius: 5px;
}

/* Změna barvy pohyblivého prvku na hnědou */
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8b4513; /* Hnědá barva pro thumb */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Přechod pro efekt hover */
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8b4513; /* Hnědá barva pro thumb */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Přechod pro efekt hover */
}

.form-range::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8b4513; /* Hnědá barva pro thumb */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Přechod pro efekt hover */
}

/* Efekt hover pro thumb */
.form-range::-webkit-slider-thumb:hover,
.form-range::-moz-range-thumb:hover,
.form-range::-ms-thumb:hover {
    background: #6f4f28; /* Tmavší hnědá barva pro thumb při hover */
}

/* Změna barvy pro aktivní a fokusuji vstupy */
input:focus, textarea:focus, .form-range:focus {
    border-color: #6f4f28; /* Tmavší hnědá barva pro fokusané prvky */
    box-shadow: 0 0 5px rgba(111, 79, 40, 0.7); /* Tmavší hnědý stín při fokusování */
}

/* Barva rámečků pro všechny inputy a textarea */
input, textarea {
    border-color: #8b4513; /* Hnědá barva pro okraje */
}

/* Barva pro vybrané a aktivní tlačítka */
.form-control:focus {
    border-color: #6f4f28; /* Tmavší hnědá barva pro rámeček při fokusu */
    box-shadow: 0 0 5px rgba(111, 79, 40, 0.7); /* Tmavší hnědý stín při fokusování */
}

/* Změna barvy pro aktivní, vybrané a hover tlačítka */
.btn:focus, .btn:active {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(111, 79, 40, 0.25); /* Tmavší hnědý stín pro tlačítka */
}

/* Změna barvy pro zaměřený text v textech a textarea */
.form-control:focus {
    background-color: #fff7e1; /* Světle hnědá pozadí při fokusu */
}

/* ========================= */
/* NAVBAR                    */
/* ========================= */

.navbar {
  height: 8vh;
  background-color:#DDC9B4;
  padding: 0.5rem;
  }
  
  .navbar-brand img {
    width: 50px;
  }
  
  .navbar-toggler {
    border: none;
    font-size: 1.25rem;
  }
  
  .navbar-toggler:focus, 
  .btn-close:focus {
    box-shadow: none;
    outline: none;
  }
  
  .nav-link {
    color:#4C2719;
    font-weight: 700;
    position: relative;
    font-family: 'Roboto', Courier, monospace;
    font-size: 1.5rem;
  }
  
  .nav-link:hover, 
  .nav-link.active {
    color: #946846;
  }
  
  .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: brown;
    visibility: hidden;
    transition: 0.1s ease-in-out;
  }
  
  .nav-link:hover::before, 
  .nav-link.active::before {
    width: 100%;
    visibility: visible;
  }


  #kontakt .row:last-child {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
  }
  
  #kontakt .fab {
    margin: 0 15px; 
    transition: transform 0.3s ease-in-out; 
  }
  
  #kontakt .fab:hover {
    transform: scale(1.2); 
    color: #946846; 
  }
  
  h5{
    color: #64460e;
    font-size: 1.5rem;
  }