@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
html, body {
	height: 100%;
}
* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
}
    body { font-family: 'Montserrat', sans-serif; font-size: 1.0rem; line-height: 1.6; color: #333; font-weight:: 100; }
    header h1 { font-size: 2.5em; margin-bottom: 10px; }
    header p { font-size: 1.1em; margin-bottom: 20px; }

.program h3 {  
	font-size: 3rem;
	font-family: 'Barlow Condensed', sans-serif; 
	text-align: center;
	color: #e91e63; 
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.1;
}
.program h3 span {
	font-size: 1.5rem;
}
    .programy { padding: 20px; max-width: 1000px; margin: auto; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
    
.program { 
	font-family: 'Barlow Condensed', sans-serif; 
	font-size: 1.3rem; 
	line-height: 1.1;
	text-align: left;
	font-weight: 200; 
	color: #fff; 
	padding: 15px 20px 60px 20px; 
	border-radius: 8px; 
	flex: 1 1 30%; 
	box-shadow: 0 4px 10px rgba(0,0,0,0.4); 
	position: relative;
	border: 2px solid #e91e63;
	  transform: scale(0.9);
	    cursor: pointer;
}
.program.middle {
  transform: scale(1);
}	
.program h2 { 
	font-size: 2.5rem;
	font-weight: 200;
	line-height: 1;
    margin: 0;
	color: #c8a97e;
	text-align: center;
}
    .program ul { list-style: none; padding-left: 0; }
    .program ul li {  }
    .hosting ul { list-style: disc; margin-left: 20px; }
    form { display: flex; flex-direction: column; gap: 15px; max-width: 500px; margin: auto; }
    input, textarea { padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
    // button { background: #e91e63; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; }
    footer a { color: #e91e63; margin: 0 10px; text-decoration: none; }
    @media ( max-width: 768px) {
      .programy, .home { flex-direction: column; }
      .program, .home { flex: 1 1 100%; }
	} 

header {
  text-align: left;

  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}



	
	
.top {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 auto;
  height: 100px;
  // background-color: #ffffff;
  z-index: 10;
  // border: 1px solid yellow;
}


.top img { 
  height: 100px;
}
.nav {
	width: 100%;
	max-width: 600px;
	position: fixed;
	top: 0;
	text-align: center;
	margin: 0 auto;
	z-index: 11;
	border: 1px solid yellow;
}


#contact { position: relative; }

header {
	// border: 1px solid yellow;

}
.home {
  width: 100%;
  max-width: 800px;
  display: flex; 
  flex-wrap: wrap; 
  gap: 20px; 
  justify-content: center;
  // padding: 325px 0 50px 0;
  // border: 1px solid yellow;

}
.home p {
	font-size: 2rem;
}






section {
	padding: 60px 0 35px 0;
	text-align: center;
	width: 100%;
	max-width: 600px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    // border: 1px solid yellow;	
}



#home-box-1,
#home-box-2 {
  line-height: 1.2;
  // background-color: #ffffff;
  color: #ffffff; 
  padding: 20px; 
  border-radius: 8px; 
  flex: 1 1 30%; 
  box-shadow: 0 0 10px rgba(0,0,0,0.4); 
  text-align: left;
  position: relative;
  z-index: 1;
}
#home-box-1,
#home-box-2 {
  // background: linear-gradient(to top left, #e91e63, #f06292, #ffffff 1%, #e91e63 98%);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 2s ease-out, opacity 0.5s ease-out;
}

#home-box-1.active,
#home-box-2.active {
  transform: translateY(0);
  opacity: 1;
  
}
.btn-container {
	position: fixed;
	top: 50px;
    text-align: center;
	// border: 1px solid yellow;
	width: 100%;
}

.salon-button {
  background-color: #c8a97e; 
  color: #1a1a1a; 
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  padding: 12px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  text-transform: uppercase;
	font-weight: 300;
}

.salon-nav {
  background-color: #333;
  color:  #c8a97e; 
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5rem;
  padding: 12px 12px 22px 12px;
  // border: 1px solid;
  border-color: #c8a97e;
  // border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  text-decoration: none;
  // text-transform: uppercase;
  font-weight: 400;
  border-bottom: none;
  margin: 0 1px 0 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


.salon-nav-home {
  background-color: #c8a97e;
  color:  #333; 
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5rem;
  padding: 12px 12px 22px 12px;
  // border: 1px solid;
  border-color: #333;
  // border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  text-decoration: none;
  // text-transform: uppercase;
  font-weight: 400;
  border-bottom: none;
  margin: 0 1px 0 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.icon-nav {
  background-color: #333;
  color:  #c8a97e; 
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  margin-top: 10px;
  border-color: #c8a97e;
  // border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  text-decoration: none;
  // text-transform: uppercase;
  font-weight: 400;
  border-bottom: none;
}


.salon-button:hover {
  background-color: #d4b48f; /* světlejší dřevo při hoveru */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}


#about,
#service,
#offer,
#contact,
#www,
#reference,
#img-section-1,
#img-section-2,
#img-section-3  {
	min-width: 100%;
	min-height: 100vh;	
}

header { background: url('_1.png') top/cover fixed; }
#service { background: url('_2.png') top/cover fixed; }
#img-section-1 { background: url('_3.png') center/cover fixed; }
#www { background: url('_6.png') top/cover fixed; }
#reference { background: url('_2.png') top/cover fixed; }
#img-section-2 { background: url('_5.png') center/cover fixed; }
#offer { background: url('_6.png') top/cover fixed; }
#img-section-3 { background: url('_7.png') center/cover fixed; }
#contact { background: url('_4.png') top/cover fixed; }


 
#service h3,
#service p,
#service ul,
#service li {
	text-align: left;
	color: #fff;
	text-transform: uppercase;
}
  
.service { width: 100%; max-width: 650px; margin: 0 auto; }

}
.about-box {
	text-align: left;
}

.button-area {
	margin-top: 25px;
	text-align: right;
}
.beauty-quote {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  color: #ffffff;
  // background: linear-gradient(to right, #f8f8f8, #ececec);
  padding: 10px 5px 10px 5px;
  text-align: center;
  // border-left: 6px solid #c8a97e;
  margin: 0 auto 0 auto;
  width: 100%;
  max-width: 800px;
  // box-shadow: 0 8px 12px rgba(0,0,0,0.6);
  // position: fixed;
  bottom: 0;
  line-height: 1;
  position: relative;
  // bottom: 20px;
  // left: 50%;
  //transform: translateX(-50%);
    text-align: center;
	text-transform: uppercase;
	font-weight: 300;
}
/*
.beauty-quote::before {
  content: "❝";
  font-weight: normal;
  font-size: 50px;
  color: #c8a97e;
  position: absolute;
  top: 0px;
  left: 10px;

}
.beauty-quote::after {
  content: "❝";
  font-size: 50px;
  color: #c8a97e;
  position: absolute;
  bottom: -10px;
  right: 10px;
}
*/

.about-box,
#home-box-1,
#home-box-2 {
	text-transform: uppercase;
	font-weight: 300;
	color: #fff;
	// letter-spacing: -1px;
	// position: absolute;
	bottom: 50px;
}

ul, li {
	margin: 0;
	padding: 0;
}
.top-shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 5, 0.5), transparent);
  z-index: 12;
}

.icon-list {
  list-style: none;
  padding: 0;
  text-align: center;
}

.circle {
  display: block;
  align-items: center;
  line-height: 1.1;
  text-align: center;

}

.icon-list .material-icons {
  font-size: 24px;
  color: #c8a97e; 
  transition: transform 0.3s ease;
  text-align: center;
}

.icon-list li:hover .material-icons {
  transform: scale(1.2);
} 



.section {

}

.footer {
	position: absolute;
    width: 100%;
	bottom: 0;
	padding: 25px 0 85px 0;
}
.footer a {
	color: #ccc;
}
.footer a i {
	font-size: 3rem;
	padding: 10px;
}
.footer .footer-content {
	color: #fff;
}


@media ( max-width: 400px) {	  
	.salon-nav { 
		padding: 12px 6px 22px 6px; 
	}  
	header { 
		background-image: url('2.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;
	}
}