* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --backgroundColor: #80dae5;
  --backgroundColorNavigation: linear-gradient(90deg, #00aaff, #00d9ff);
  --tableCaption: #37cac3;
  --tableRow1: #26d2e9;
  --tableRow2: #59dadf;
  --colorBlackLetters: #000000;
  --backgroundColorDark: #3d3b3b;
  --backgroundContact: #333333;
  --whiteNavigation: white;
  --sendButton: #4519e2;
  --validationOk: greenyellow;
  --validationNotOk: red;
  --upButton: #cf1d1d;
  --tableAround: lightblue;
  --contactNotes: #59dadf;
  --footerBack: #134172;
  --footerWritening: white;
}

body {
  overflow-x: hidden !important;
  width: 100%;
  position: relative;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html,
body {
  max-width: 100%;
}

section {
  scroll-margin-top: 10vh;
}

.color {
  background-color: var(
    --backgroundColor
  ); /* For browsers that do not support gradients */
  background: linear-gradient(
    to right,
    white,
    var(--backgroundColor),
    var(--backgroundColor),
    var(--backgroundColor),
    white
  );
}

/*-------------HEADER-NAVIGATION-----------------*/

header {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--backgroundColorNavigation);
  height: 70px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  transition: height 0.3s ease;
  will-change: height;
}

.mobileView {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  margin-left: auto;
}

.logo i {
  color: var(--whiteNavigation);
  font-size: 48px;
}

nav {
  margin-right: 30px;
}

ul {
  display: flex;
}
nav li {
  margin-right: 20px;
  list-style-type: none;
}

nav li a {
  text-decoration: none;
  color: var(--whiteNavigation);
}

.menu-icon {
  display: none;
  margin-right: 30px;
  cursor: pointer;
}

/*-----------Clinic-------*/
.clinicHeading {
  font-size: 2rem;
  color: white;
  margin-left: 25%;
  text-align: center;
  width: 50%;
}
.clinic {
  color: var(--colorBlackLetters);
  display: flex;
  justify-content: center;
}

.clinicContainer {
  width: 70%;
  display: flex;
  justify-content: space-around;
}

.employee {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: calc(50vh - 35px);
}

.text,
.text1 {
  font-size: 1.3rem;
  transition: font-size 0.3s ease-in-out;
  color: white;
}

.text2 {
  font-style: italic;
  text-align: center;
  margin-top: 10px;
  color: #666;
}

.equipment {
  width: 40%;
}

.toothPicture {
  transition: transform 0.3s ease-in-out;
}

.toothPicture:hover {
  transform: scale(1.2);
}
.motto2,
.motto {
  font-style: italic;
  text-align: center;
  margin-top: 10px;
  color: #666;
  margin-left: 25%;
  width: 50%;
}

/*----------- about doctor-------*/
.aboutDoctor {
  display: flex;
  flex-direction: column;
  width: 33.33%; /* obsah zabírá dvě třetiny stránky */
  margin-left: 23%;
}

ul {
  list-style: none;
}

ul.faq {
  padding: 0;
  color: white;
  font-family: sans-serif;
}

li.faq-item {
  width: 400px;
  margin-bottom: 2px;
  border-bottom: 1px solid #00bcd4;
  overflow: hidden;
}

.faq-question {
  padding: 10px;
  cursor: pointer;
  position: relative;
  cursor: pointer;
}

.faq-question:hover {
  background-color: #b3e5fc;
  transition: background-color 0.3s ease;
}

.faq-question::after {
  content: url("Images/arrow.png");
  position: absolute;
  right: 10px;
  top: 10px;
  transform: rotate(-90deg); /* míří doprava */
  transform-origin: center;
  transition: transform 0.5s ease;
}

.faq-question.open::after {
  transform: rotate(-180deg);
}

.faq-answer {
  padding: 10px 10px;
  overflow: hidden;
  display: none;
}

.faq-answer p::before {
  content: "• ";
  color: white;
  margin-right: 0.4em;
}

/*-----------Section2 - Opening time-------*/

.opening-hours {
  width: 30%;
  border-collapse: collapse;
  margin: 60px auto;
  font-size: 1.1rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.opening-hours th,
.opening-hours td {
  padding: 12px 16px;
  text-align: center;
}

.opening-hours thead {
  background: linear-gradient(90deg, #00aaff, #00d9ff);
  color: white;
  text-transform: uppercase;
}

.opening-hours tbody tr:nth-child(even) {
  background-color: #f0f9ff;
}

.opening-hours tbody tr:nth-child(odd) {
  background-color: #e0f7fa;
}

.opening-hours tbody tr:hover {
  background-color: #b3e5fc;
  transition: background-color 0.3s ease;
  cursor: default;
}
.opening-hours td:nth-child(1),
.opening-hours th:nth-child(1) {
  text-align: left;
}

caption {
  caption-side: bottom; /* Přesune popisek pod tabulku */
  font-style: italic;
  text-align: center;
  margin-top: 10px;
  color: #666;
}

/*-------------Maps---------------*/

.mapsGoogle {
  height: 400px;
  margin: 20px auto;
  border-radius: 1%;
  width: 50%;
}

/*-------------Contact---------------*/

.contactChange {
  width: 25%;
}

.opening-hours .contactHead th:nth-child(1) {
  text-align: center;
}

/*-------------Insurance---------------*/

.insuranceChange {
  width: 30%;
}

/*-----------Actualy-------*/

.actualChange {
  width: 25%;
  margin-top: 0px;
}

/*-------------FOOTER-----------------*/
footer {
  background: var(--backgroundColorNavigation);
  padding: 10px;
}

footer p {
  text-align: center;
  color: white;
}

/*-------------gsapImgAnimation-----------------

.actualChange,
.contactChange,
.aboutDoctor,
.motto,
.insuranceChange .firstPart,
.secondPart .motto2,
.opening,
.mapsGoogle {
  opacity: 0;
  will-change: opacity;
}
  */

/* helper visibility classes for desktop/mobile duplicates */
.mobile-only {
  display: none;
}
.desktop-only {
  display: block;
}