:root {
  --header-height:3.5rem;
  --first-color:hsl(45,30%,95%);
  --first-color-alt:hsl(25,40%,60%);
  --title-color:hsl(25,30%,25%);
  --text-color:hsl(25,20%,35%);
  --text-color-light:hsl(25,15%,50%);
  --body-color:hsl(45,25%,98%);
  --container-color:hsl(45,30%,95%);
  --accent-color:hsl(25,40%,60%);
  --accent-light:hsl(25,35%,70%);
  --body-font:'Open Sans',sans-serif;
  --title-font:'Playfair Display',serif;
  --biggest-font-size:2.25rem;
  --h1-font-size:1.5rem;
  --h2-font-size:1.25rem;
  --h3-font-size:1rem;
  --normal-font-size:.938rem;
  --small-font-size:.813rem;
  --smaller-font-size:.75rem;
  --font-regular:400;
  --font-medium:500;
  --font-semi-bold:600;
  --z-tooltip:10;
  --z-fixed:100
  }
  
  @media screen and (min-width: 1024px) {
  :root {
  --biggest-font-size:4rem;
  --h1-font-size:2.25rem;
  --h2-font-size:1.5rem;
  --h3-font-size:1.25rem;
  --normal-font-size:1rem;
  --small-font-size:.875rem;
  --smaller-font-size:.813rem
  }
  }
  
  * {
  box-sizing:border-box;
  padding:0;
  margin:0
  }
  
  html {
  scroll-behavior:smooth
  }
  
  body,button,input {
  font-family:var(--body-font);
  font-size:var(--normal-font-size)
  }
  
  body {
  background-color:var(--body-color);
  color:var(--text-color)
  }
  
  h1,h2,h3,h4 {
  color:var(--title-color);
  font-weight:var(--font-semi-bold);
  font-family:var(--title-font)
  }
  
  a {
  text-decoration:none
  }
  
  img {
  max-width:100%;
  height:auto
  }
  
  button {
  cursor:pointer;
  border:none;
  outline:none
  }
  
  .container {
  max-width:1024px;
  margin-left:1.5rem;
  margin-right:1.5rem
  }
  
  .grid {
  display:grid;
  gap:1.5rem
  }
  
  .section {
  padding:4.5rem 0 2rem
  }
  
  .section__data {
  text-align:center;
  margin-bottom:3rem
  }
  
  .section__title,.section__title-border {
  font-size:var(--biggest-font-size);
  font-weight:var(--font-regular);
  margin-bottom:2rem
  }
  
  .section__subtitle {
  font-size:var(--h2-font-size);
  color:var(--text-color);
  font-weight:var(--font-medium);
  margin-bottom:.25rem;
  position:relative;
  font-size:var(--h3-font-size);
  letter-spacing:2px;
  color:var(--text-color);
  margin-bottom:2rem
  }
  
  .section__titles {
  display:flex;
  justify-content:center;
  column-gap:.75rem;
  margin-bottom:2rem
  }
  
  .section__title-border {
  -webkit-text-stroke:1px var(--text-color);
  color:transparent
  }
  
  .section__subtitle::after {
  content:'';
  position:absolute;
  top:50%;
  left:-3rem;
  width:2rem;
  height:1px;
  background-color:var(--text-color)
  }
  
  .section__subtitle::before {
  content:'';
  position:absolute;
  top:50%;
  right:-3rem;
  width:2rem;
  height:1px;
  background-color:var(--text-color)
  }
  
  .header {
  width:100%;
  background-color:var(--body-color);
  position:fixed;
  top:0;
  left:0;
  z-index:var(--z-fixed);
  transition:background .3s;
  box-shadow:0 2px 10px #0000001a
  }
  
  .nav {
  height:var(--header-height);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 2rem
  }
  
  .nav__container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:1200px;
  margin:0 auto
  }
  
  .nav__logo {
  color:var(--title-color);
  font-weight:var(--font-semi-bold);
  font-family:var(--title-font);
  font-size:var(--h2-font-size);
  text-decoration:none;
  transition:color .3s ease
  }
  
  .nav__logo:hover {
  color:var(--accent-color)
  }
  
  .nav__menu {
  display:flex;
  list-style:none;
  margin:0;
  padding:0
  }
  
  .nav__list {
  display:flex;
  gap:2rem;
  margin:0;
  padding:0
  }
  
  .nav__link {
  color:var(--text-color);
  font-weight:var(--font-medium);
  text-decoration:none;
  transition:color .3s ease;
  padding:.5rem 1rem;
  border-radius:5px
  }
  
  .nav__link:hover {
  color:var(--accent-color);
  background-color:var(--container-color)
  }
  
  .nav__toggle {
  display:none;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--title-color);
  z-index:1001;
  background:none;
  border:none;
  padding:.5rem
  }
  
  ul,.nav__item {
  list-style:none
  }
  
  @media screen and (max-width: 1023px) {
  .nav__toggle {
  display:block!important;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--title-color);
  z-index:1001;
  visibility:visible;
  opacity:1
  }
  
  .nav__menu {
  position:fixed;
  top:0;
  right:-100%;
  width:100%;
  height:100vh;
  background-color:#000000f2;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:right .3s ease;
  z-index:1000
  }
  
  .nav__menu.show-menu {
  right:0
  }
  
  .nav__list {
  display:flex;
  flex-direction:column;
  gap:3rem;
  text-align:center
  }
  
  .nav__link {
  color:#fff;
  font-size:1.5rem;
  font-weight:600;
  padding:1rem 2rem;
  border-radius:10px;
  transition:all .3s ease
  }
  
  .nav__link:hover {
  color:var(--accent-color);
  background-color:#ffffff1a;
  transform:translateY(-2px)
  }
  
  .nav__close {
  position:absolute;
  top:2rem;
  right:2rem;
  font-size:2rem;
  cursor:pointer;
  color:#fff;
  z-index:1001
  }
  
  .nav__close:hover {
  color:var(--accent-color)
  }
  }
  
  .bg-header {
  background-color:var(--body-color);
  box-shadow:0 2px 16px hsla(0,0%,0%,0.1)
  }
  
  .home {
  background:linear-gradient(180deg,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,0.4) 100%),url(https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80);
  background-size:cover;
  background-position:center;
  padding:7rem 0 2rem;
  height:100vh;
  display:flex;
  align-items:center
  }
  
  .home__container {
  position:relative;
  row-gap:2rem
  }
  
  .home__subtitle {
  font-size:var(--h3-font-size);
  color:var(--first-color);
  margin-bottom:1rem;
  letter-spacing:2px
  }
  
  .home__title {
  font-size:var(--biggest-font-size);
  color:var(--first-color);
  font-weight:var(--font-regular);
  margin-bottom:1rem
  }
  
  .home__description {
  margin-bottom:2.5rem;
  color:var(--first-color)
  }
  
  .home__img {
  width:250px;
  position:absolute;
  top:3rem;
  right:-1.5rem
  }
  
  .button {
  display:inline-block;
  background-color:var(--accent-color);
  color:var(--first-color);
  padding:1rem 2rem;
  font-weight:var(--font-semi-bold);
  transition:all .3s ease;
  border-radius:.5rem;
  text-decoration:none;
  border:none;
  cursor:pointer
  }
  
  .button:hover {
  background-color:var(--accent-light);
  color:var(--first-color);
  transform:translateY(-2px);
  box-shadow:0 5px 15px #0003
  }
  
  .button--flex {
  justify-content:center;
  align-items:center;
  column-gap:.5rem
  }
  
  .btn-primary {
  background-color:var(--accent-color);
  color:var(--first-color);
  padding:1rem 2rem;
  border-radius:50px;
  font-weight:600;
  transition:all .3s ease;
  text-decoration:none;
  display:inline-block;
  border:none;
  cursor:pointer
  }
  
  .btn-primary:hover {
  background-color:var(--accent-light);
  color:var(--first-color);
  transform:translateY(-2px);
  box-shadow:0 10px 20px #0003
  }
  
  .btn-secondary {
  background:transparent;
  color:hsl(160,25%,45%);
  border:2px solid hsl(160,25%,45%);
  padding:1rem 2rem;
  border-radius:50px;
  font-weight:600;
  transition:all .3s ease;
  text-decoration:none;
  display:inline-block;
  cursor:pointer
  }
  
  .btn-secondary:hover {
  background:hsl(160,25%,45%);
  color:var(--first-color);
  transform:translateY(-2px);
  box-shadow:0 10px 20px #0003
  }
  
  .about__img {
  width:320px;
  border-radius:1rem;
  justify-self:center
  }
  
  .popular__container {
  padding-top:1rem
  }
  
  .popular__card {
  position:relative;
  width:200px;
  background-color:var(--container-color);
  padding:2rem 1.5rem 1.5rem;
  border-radius:1rem;
  margin:0 auto;
  transition:background .4s
  }
  
  .popular__img {
  width:150px;
  margin:0 auto 1.5rem
  }
  
  .popular__name {
  font-size:var(--h3-font-size);
  margin-bottom:.25rem
  }
  
  .popular__description {
  display:block;
  font-size:var(--smaller-font-size);
  margin-bottom:1rem
  }
  
  .popular__price {
  font-size:var(--h3-font-size);
  font-weight:var(--font-semi-bold)
  }
  
  .popular__button {
  position:absolute;
  bottom:1.5rem;
  right:1.5rem;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  outline:none;
  background-color:var(--first-color);
  color:var(--title-color);
  font-size:1.25rem;
  cursor:pointer;
  transition:background .3s
  }
  
  .popular__button:hover {
  background-color:var(--first-color-alt);
  color:var(--first-color)
  }
  
  .popular__card:hover {
  box-shadow:0 12px 16px hsla(0,0%,0%,0.1)
  }
  
  .swiper-button-prev:after,.swiper-button-next:after {
  content:''
  }
  
  .swiper-button-prev,.swiper-button-next {
  width:initial;
  height:initial;
  font-size:2rem;
  color:var(--title-color)
  }
  
  .swiper-button-prev {
  left:0
  }
  
  .swiper-button-next {
  right:0
  }
  
  .swiper-pagination-bullet {
  background-color:var(--text-color);
  opacity:1
  }
  
  .swiper-pagination-bullet-active {
  background-color:var(--title-color)
  }
  
  .recently__img {
  width:300px;
  border-radius:1rem;
  justify-self:center
  }
  
  .newsletter {
  padding:4rem 0
  }
  
  .newsletter__container {
  position:relative;
  border:none;
  outline:none;
  box-shadow:none
  }
  
  .newsletter__content {
  position:relative;
  background-color:var(--container-color);
  border-radius:2rem;
  padding:5rem 1rem 3rem;
  text-align:center;
  overflow:hidden;
  border:none;
  outline:none;
  box-shadow:none
  }
  
  .newsletter__img {
  width:250px;
  position:absolute;
  top:-4.5rem;
  left:-8rem
  }
  
  .newsletter__data .section__title {
  color:var(--title-color);
  margin-bottom:2rem
  }
  
  .newsletter__description {
  color:var(--text-color);
  margin-bottom:3rem
  }
  
  .newsletter__form {
  background-color:var(--body-color);
  padding:5px 5px 5px 16px;
  border-radius:4px;
  display:flex;
  column-gap:.5rem;
  font-family:var(--body-font)
  }
  
  .newsletter__input {
  font-family:var(--body-font);
  border:none;
  outline:none;
  width:90%;
  font-size:var(--normal-font-size);
  color:var(--text-color)
  }
  
  .newsletter__button {
  font-family:var(--body-font);
  cursor:pointer
  }
  
  .newsletter__spinach {
  width:30px;
  position:absolute;
  right:2rem;
  bottom:-2rem;
  rotate:15deg
  }
  
  .footer {
  position:relative;
  padding:3rem 2rem;
  background-color:hsl(0,0%,0%);
  color:var(--first-color)
  }
  
  .footer__container {
  max-width:1024px;
  margin:0 auto
  }
  
  .footer__content {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:2rem;
  margin-bottom:2rem
  }
  
  .footer__data h3 {
  margin-bottom:1rem;
  font-family:var(--title-font)
  }
  
  .footer__social {
  display:inline-flex;
  column-gap:.5rem;
  margin-right:1rem;
  font-size:1.25rem;
  color:var(--first-color);
  transition:color .3s
  }
  
  .footer__item {
  margin-bottom:.5rem
  }
  
  .footer__link {
  color:var(--first-color);
  transition:color .3s
  }
  
  .footer__rights {
  text-align:center;
  padding-top:2rem;
  border-top:1px solid hsl(0,0%,20%)
  }
  
  .footer__copy {
  font-size:var(--small-font-size)
  }
  
  .scrollup {
  position:fixed;
  right:1rem;
  bottom:-50%;
  background-color:var(--container-color);
  display:inline-flex;
  padding:8px;
  font-size:1.25rem;
  color:var(--title-color);
  border-radius:.25rem;
  z-index:var(--z-tooltip);
  transition:bottom 0.3s,transform .3s
  }
  
  .scrollup:hover {
  transform:translateY(-0.25rem)
  }
  
  .show-scroll {
  bottom:3rem
  }
  
  ::-webkit-scrollbar {
  width:.6rem;
  border-radius:.5rem;
  background-color:hsl(0,0%,65%)
  }
  
  ::-webkit-scrollbar-thumb {
  border-radius:.5rem;
  background-color:hsl(0,0%,55%)
  }
  
  ::-webkit-scrollbar-thumb:hover {
  background-color:hsl(0,0%,45%)
  }
  
  .active-link,.swiper-button-prev:hover,.swiper-button-next:hover,.footer__social:hover,.footer__link:hover {
  color:var(--first-color-alt)
  }
  
  .home__data,.about__data,.recently__data {
  text-align:center
  }
  
  .home__img img,.about__img-2 img,.popular__img img,.recently__img-2 img {
  width:100%;
  height:100%;
  object-fit:contain
  }
  
  .about,.recently {
  background-color:var(--container-color);
  transition:background .4s
  }
  
  .about__container,.recently__container {
  row-gap:2rem
  }
  
  .about__img img,.recently__img img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:1rem
  }
  
  .about__description,.recently__description {
  margin-bottom:2rem
  }
  
  .about__img-2,.recently__img-2 {
  width:100px;
  position:absolute;
  right:2rem;
  top:3rem
  }
  
  .footer__description,.footer__subtitle {
  margin-bottom:1rem
  }
  
  @media screen and (max-width: 340px) {
  .container {
  margin-left:1rem;
  margin-right:1rem
  }
  
  .home__img {
  width:200px;
  top:2rem
  }
  
  .about__img-2 {
  width:80px;
  top:2rem
  }
  
  .popular__card {
  width:180px;
  padding:1rem 1.5rem
  }
  
  .popular__img {
  width:120px
  }
  
  .popular__button {
  width:35px;
  height:35px;
  font-size:1rem
  }
  
  .recently__img-2 {
  width:80px
  }
  
  .newsletter__content {
  padding:3rem 1rem 2rem
  }
  
  .newsletter__img {
  width:200px;
  top:-3.5rem;
  left:-6rem
  }
  
  .footer__content {
  grid-template-columns:1fr;
  gap:1rem
  }
  
  .section,.home {
  padding:4rem 0 2rem
  }
  
  .about__img,.recently__img {
  width:200px
  }
  }
  
  @media screen and (min-width: 576px) {
  .newsletter__form {
  width:400px;
  padding:5px 5px 5px 16px;
  margin:0 auto
  }
  
  .about__container,.recently__container,.newsletter__container {
  grid-template-columns:0.8fr;
  justify-content:center
  }
  }
  
  @media screen and (min-width: 767px) {
  .nav {
  height:calc(var(--header-height) + 1.5rem)
  }
  
  .nav__close {
  display:none
  }
  
  .nav__list {
  flex-direction:row;
  column-gap:3.5rem
  }
  
  .nav__menu {
  margin-left:auto
  }
  
  .popular__container {
  padding-top:3rem
  }
  
  .popular__card {
  width:220px;
  padding:2rem 2rem 1.5rem
  }
  
  .popular__img {
  width:150px;
  margin-bottom:1.5rem
  }
  
  .newsletter__container {
  grid-template-columns:0.5fr;
  justify-content:center
  }
  
  .newsletter__content {
  padding:8rem 3rem 4rem;
  border-radius:3rem
  }
  
  .newsletter__img {
  width:300px;
  top:-6rem;
  left:-10rem
  }
  
  .newsletter__spinach {
  width:40px
  }
  
  .footer__content {
  grid-template-columns:repeat(3,1fr);
  gap:2rem
  }
  
  .home__container,.about__container,.recently__container {
  grid-template-columns:repeat(2,1fr);
  align-items:center
  }
  
  .home__data,.about__data,.about__title,.recently__data,.recently__title {
  text-align:initial
  }
  
  .home__img,.about__img,.recently__img {
  width:400px
  }
  }
  
  @media screen and (min-width: 1024px) {
  .section {
  padding:7rem 0 2rem
  }
  
  .section__data {
  margin-bottom:5rem
  }
  
  .nav {
  height:calc(var(--header-height) + 1.5rem)
  }
  
  .home__container {
  grid-template-columns:repeat(2,1fr);
  align-items:center;
  column-gap:2rem
  }
  
  .about__img-2,.recently__img-2 {
  width:200px
  }
  
  .popular__container {
  padding-top:5rem
  }
  
  .popular__card {
  width:250px;
  padding:2rem 2rem 1.5rem
  }
  
  .popular__img {
  width:180px;
  margin-bottom:1.5rem
  }
  
  .newsletter__content {
  padding:8rem 4rem 4rem
  }
  
  .newsletter__img {
  width:400px;
  top:-8rem;
  left:-15rem
  }
  
  .newsletter__spinach {
  width:50px;
  right:3rem;
  bottom:-2rem
  }
  
  .footer__content {
  grid-template-columns:repeat(3,1fr);
  gap:3rem
  }
  
  .home__img,.about__img,.recently__img {
  width:500px
  }
  }
  
  @media screen and (min-width: 1064px) {
  .container {
  margin-left:auto;
  margin-right:auto
  }
  }
  
  @media screen and (min-width: 1164px) {
  .container {
  margin-left:auto;
  margin-right:auto
  }
  
  .about__img-2,.recently__img-2 {
  width:300px
  }
  
  .home__img,.about__img,.recently__img {
  width:600px
  }
  }
  
  .hero {
  background:linear-gradient(135deg,#000000b3,#00000080);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff
  }
  
  .hero__content h1 {
  font-size:4rem;
  font-weight:700;
  margin-bottom:1rem;
  text-shadow:2px 2px 4px #00000080
  }
  
  .hero__content p {
  font-size:1.5rem;
  margin-bottom:2rem;
  text-shadow:1px 1px 2px #00000080
  }
  
  .hero__buttons {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap
  }
  
  .hero .btn-secondary {
  color:#fff!important;
  border:2px solid #fff!important;
  background:transparent!important
  }
  
  .hero .btn-secondary:hover {
  background:#fff!important;
  color:#333!important
  }
  
  .cta-section .btn-secondary {
  color:hsl(160,25%,45%)!important;
  border:2px solid hsl(160,25%,45%)!important;
  background:transparent!important
  }
  
  .cta-section .btn-secondary:hover {
  background:hsl(160,25%,45%)!important;
  color:var(--first-color)!important
  }
  
  .btn-primary {
  background:linear-gradient(45deg,#ff6b6b,#ff8e8e);
  color:#fff;
  padding:1rem 2rem;
  border-radius:50px;
  font-weight:600;
  transition:all .3s ease;
  text-decoration:none;
  display:inline-block
  }
  
  .btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 20px #ff6b6b4d
  }
  
  .services__grid {
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin-top:3rem;
  justify-content:center
  }
  
  .service__card {
  background:#fff;
  padding:2rem;
  border-radius:15px;
  text-align:center;
  box-shadow:0 5px 15px #0000001a;
  transition:transform .3s ease;
  flex:1 1 300px;
  max-width:400px;
  min-width:280px
  }
  
  .services__grid .service__card:last-child {
  flex-grow:2
  }
  
  
  .service__icon {
  font-size:3rem;
  margin-bottom:1rem;
  color:#ff6b6b
  }
  
  .service__card h3 {
  font-size:1.5rem;
  margin-bottom:1rem;
  color:#333
  }
  
  .service__card p {
  color:#666;
  line-height:1.6
  }
  
  .price-item {
  background:#f8f9fa;
  padding:2rem;
  margin-bottom:1.5rem;
  border-radius:15px;
  border-left:5px solid #ff6b6b;
  transition:all .3s ease
  }
  
  
  .price-item h2 {
  color:#333;
  margin-bottom:1rem;
  font-size:1.5rem
  }
  
  .price-item p {
  color:#666;
  margin-bottom:.5rem;
  line-height:1.6
  }
  
  .price-item .price {
  font-size:1.5rem;
  font-weight:700;
  color:#ff6b6b;
  margin-top:1rem
  }
  
  .reviews__empty {
  text-align:center;
  padding:4rem 2rem;
  color:var(--text-color)
  }
  
  .reviews__empty h3 {
  font-size:2rem;
  color:var(--title-color);
  margin-bottom:1rem;
  font-family:var(--title-font)
  }
  
  .reviews__empty p {
  font-size:1.1rem;
  color:var(--text-color-light)
  }
  
  .review-card {
  background:#fff;
  padding:2rem;
  border-radius:15px;
  margin-bottom:2rem;
  box-shadow:0 5px 15px #0000001a;
  position:relative
  }
  
  .review-card::before {
  content:'"';
  position:absolute;
  top:-10px;
  left:20px;
  font-size:4rem;
  color:#ff6b6b;
  font-family:serif
  }
  
  .review-card p {
  font-style:italic;
  margin-bottom:1rem;
  line-height:1.6
  }
  
  .review-author {
  font-weight:700;
  color:#333
  }
  
  .about-hero {
  background:linear-gradient(135deg,#000000b3,#00000080),url(https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80);
  background-size:cover;
  background-position:center;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff
  }
  
  .about-content h2 {
  text-align:center;
  margin-bottom:3rem;
  font-size:2.5rem;
  color:#333
  }
  
  .about-content p {
  font-size:1.1rem;
  line-height:1.8;
  color:#666;
  margin-bottom:2rem;
  max-width:800px;
  margin-left:auto;
  margin-right:auto
  }
  
  .contact-form {
  background:#f8f9fa;
  padding:3rem;
  border-radius:15px;
  margin-top:2rem
  }
  
  .form-group {
  margin-bottom:1.5rem
  }
  
  .form-group label {
  display:block;
  margin-bottom:.5rem;
  font-weight:600;
  color:#333
  }
  
  .form-group input,.form-group textarea {
  width:100%;
  padding:1rem;
  border:2px solid #ddd;
  border-radius:10px;
  font-size:1rem;
  transition:border-color .3s ease
  }
  
  .form-group input:focus,.form-group textarea:focus {
  outline:none;
  border-color:#ff6b6b
  }
  
  .services,.reviews {
  padding:5rem 0;
  background:#f8f9fa
  }
  
  .price-list,.about-content {
  padding:5rem 0;
  background:#fff
  }
  
  @media (max-width: 768px) {
  * {
  box-sizing:border-box
  }
  
  html,body {
  width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%
  }
  
  .container {
  padding:0 1rem;
  margin:0 auto;
  max-width:100%;
  width:100%
  }
  
  .hero {
  padding:2rem 0;
  text-align:center
  }
  
  .hero__content h1 {
  font-size:2.5rem;
  margin-bottom:1rem
  }
  
  .hero__content p {
  font-size:1.2rem;
  margin-bottom:2rem
  }
  
  .hero__buttons {
  flex-direction:column;
  align-items:center;
  gap:1rem
  }
  
  .services__grid {
  flex-direction:column;
  align-items:center;
  gap:1.5rem
  }
  
  .service__card {
  flex:none;
  width:100%;
  max-width:100%;
  min-width:auto
  }
  
  .reservation-form {
  max-width:100%;
  margin:0 auto;
  padding:1rem
  }
  
  .cta-section {
  padding:3rem 0;
  text-align:center
  }
  
  .footer__content {
  grid-template-columns:1fr;
  gap:2rem;
  text-align:center
  }
  
  .about-content {
  padding:2rem 1rem
  }
  
  .about-content h2 {
  font-size:2rem;
  text-align:center
  }
  
  .contact-form {
  padding:2rem
  }
  
  body {
  overflow-x:hidden
  }
  
  .main {
  width:100%;
  overflow-x:hidden
  }
  
  .services,.price-list,.reviews,.about-content,.reservation-section {
  width:100%;
  max-width:100%;
  margin:0 auto
  }
  
  .form-group {
  margin-bottom:1.5rem
  }
  
  .form-group input,.form-group textarea {
  width:100%;
  box-sizing:border-box
  }
  
  .hero__content,.cta-content {
  max-width:100%;
  padding:0 1rem
  }
  
  .price-list__grid,.reviews__grid {
  grid-template-columns:1fr
  }
  }
  
  @media (max-width: 480px) {
  .nav__toggle {
  display:block!important;
  font-size:1.8rem;
  padding:.75rem
  }
  
  .hero__content h1 {
  font-size:2rem
  }
  
  .hero__content p {
  font-size:1rem
  }
  
  .container {
  padding:0 .5rem
  }
  }
  
  html {
  scroll-behavior:smooth
  }
  
  .gallery__featured,.gallery__all {
  margin-bottom:4rem
  }
  
  .gallery__featured h3,.gallery__all h3 {
  font-size:2rem;
  color:var(--title-color);
  margin-bottom:2rem;
  text-align:center;
  font-family:var(--title-font)
  }
  
  .gallery__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  margin-bottom:2rem
  }
  
  .gallery__item {
  position:relative;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 5px 15px #0000001a;
  transition:transform .3s ease,box-shadow .3s ease
  }
  
  .gallery__item:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 30px #0003
  }
  
  .gallery__link {
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit
  }
  
  .gallery__image {
  width:100%;
  height:250px;
  object-fit:cover;
  transition:transform .3s ease
  }
  
  .gallery__item:hover .gallery__image {
  transform:scale(1.05)
  }
  
  .gallery__overlay {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,#000c);
  color:#fff;
  padding:2rem 1.5rem 1.5rem;
  transform:translateY(100%);
  transition:transform .3s ease
  }
  
  .gallery__item:hover .gallery__overlay {
  transform:translateY(0)
  }
  
  .gallery__title {
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.5rem;
  color:#fff
  }
  
  .gallery__description {
  font-size:.9rem;
  color:#ffffffe6;
  line-height:1.4
  }
  
  .gallery__empty {
  text-align:center;
  padding:4rem 2rem;
  color:var(--text-color)
  }
  
  .gallery__empty h3 {
  font-size:2rem;
  color:var(--title-color);
  margin-bottom:1rem;
  font-family:var(--title-font)
  }
  
  .gallery-detail__content {
  max-width:1000px;
  margin:0 auto
  }
  
  .gallery-detail__image {
  margin-bottom:3rem;
  text-align:center
  }
  
  .gallery-detail__img {
  max-width:100%;
  height:auto;
  border-radius:15px;
  box-shadow:0 10px 30px #0003
  }
  
  .gallery-detail__info {
  text-align:center;
  margin-bottom:3rem
  }
  
  .gallery-detail__info h2 {
  font-size:2.5rem;
  color:var(--title-color);
  margin-bottom:1rem;
  font-family:var(--title-font)
  }
  
  .gallery-detail__description {
  font-size:1.1rem;
  color:var(--text-color);
  line-height:1.6;
  margin-bottom:1rem;
  max-width:600px;
  margin-left:auto;
  margin-right:auto
  }
  
  .gallery-detail__meta {
  color:var(--text-color-light);
  font-size:.9rem
  }
  
  .gallery-detail__navigation {
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:3rem
  }
  
  .gallery-detail__navigation .btn-primary,.gallery-detail__navigation .btn-secondary {
  padding:.75rem 1.5rem;
  font-size:.9rem
  }
  
  .gallery,.gallery-detail {
  padding:5rem 0;
  background:var(--body-color)
  }
  
  @media (max-width: 768px) {
  .gallery__grid {
  grid-template-columns:1fr;
  gap:1.5rem
  }
  
  .gallery__image {
  height:200px
  }
  
  .gallery__overlay {
  position:static;
  background:var(--container-color);
  color:var(--text-color);
  padding:1rem;
  transform:none
  }
  
  .gallery__title {
  color:var(--title-color);
  font-size:1.1rem
  }
  
  .gallery__description {
  color:var(--text-color);
  font-size:.85rem
  }
  
  .gallery-detail__info h2 {
  font-size:2rem
  }
  
  .gallery-detail__navigation {
  flex-direction:column;
  align-items:center
  }
  
  .gallery-detail__navigation .btn-primary,.gallery-detail__navigation .btn-secondary {
  width:100%;
  max-width:300px
  }
  }
  
  .cta-section {
  background:linear-gradient(135deg,var(--container-color),var(--body-color));
  padding:4rem 0;
  text-align:center
  }
  
  .cta-content p {
  font-size:1.2rem;
  color:var(--text-color);
  margin-bottom:2rem;
  max-width:600px;
  margin-left:auto;
  margin-right:auto
  }
  
  .reservation-section {
  padding:5rem 0;
  background:var(--body-color)
  }
  
  .reservation-content {
  max-width:600px;
  margin:0 auto;
  text-align:center
  }
  
  .reservation-content p {
  font-size:1.2rem;
  color:var(--text-color);
  margin-bottom:3rem
  }
  
  .reservation-form {
  background:var(--container-color);
  padding:3rem;
  border-radius:15px;
  box-shadow:0 10px 30px #0000001a;
  text-align:left
  }
  
  .reservation-form .form-group {
  margin-bottom:2rem
  }
  
  .reservation-form label {
  display:block;
  margin-bottom:.5rem;
  font-weight:600;
  color:var(--title-color);
  font-size:1.1rem
  }
  
  .reservation-form input,.reservation-form textarea {
  width:100%;
  padding:1rem;
  border:2px solid #e0e0e0;
  border-radius:10px;
  font-size:1rem;
  transition:border-color .3s ease;
  background:var(--first-color);
  color:var(--text-color)
  }
  
  .reservation-form input:focus,.reservation-form textarea:focus {
  outline:none;
  border-color:var(--accent-color);
  box-shadow:0 0 0 3px #1966991a
  }
  
  .reservation-form textarea {
  resize:vertical;
  min-height:120px
  }
  
  .reservation-form button {
  width:100%;
  margin-top:1rem
  }
  
  .service__price {
  font-size:1.5rem;
  font-weight:700;
  color:var(--accent-color);
  text-align:center;
  margin-top:1rem;
  font-family:var(--title-font)
  }
  
  .nav__logo img {
  height:40px;
  width:auto;
  margin-right:.5rem
  }
  
  .nav__logo {
  display:flex;
  align-items:center
  }
  
  ::-webkit-scrollbar {
  width:8px
  }
  
  ::-webkit-scrollbar-track {
  background:var(--container-color)
  }
  
  ::-webkit-scrollbar-thumb {
  background:var(--accent-color);
  border-radius:4px
  }
  
  ::-webkit-scrollbar-thumb:hover {
  background:var(--accent-light)
  }
  
  .rating {
  display:flex;
  gap:.25rem;
  margin:1rem 0
  }
  
  .star {
  color:#ff6b6b;
  font-size:1.25rem
  }
  
  .star.empty {
  color:#ddd
  }
  
  .hero {
  position:relative;
  overflow:hidden
  }
  
  .hero::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg,#ff6b6b1a,#ff8e8e1a);
  z-index:1
  }
  
  .hero__content {
  position:relative;
  z-index:2
  }
  
  .service__card {
  transition:all .3s ease;
  border:1px solid #f0f0f0
  }
  
  
  .price-item {
  background:linear-gradient(135deg,#fff,#f8f9fa);
  border:2px solid #f0f0f0;
  transition:all .3s ease
  }
  
  
  .price {
  font-size:2rem;
  font-weight:700;
  color:#ff6b6b;
  text-align:center;
  margin-top:1rem;
  font-family:var(--title-font)
  }
  
  .review-card {
  background:linear-gradient(135deg,#fff,#f8f9fa);
  border:1px solid #f0f0f0;
  transition:all .3s ease
  }
  
  .review-card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 30px #0000001a;
  border-color:#ff6b6b
  }
  
  .btn-primary,.btn-secondary {
  transition:all .3s ease;
  position:relative;
  overflow:hidden
  }
  
  .btn-primary::before,.btn-secondary::before {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,#fff3,transparent);
  transition:left .5s
  }
  
  .btn-primary:hover::before,.btn-secondary:hover::before {
  left:100%
  }
  
  .cta-content h2,.reservation-content h2 {
  font-size:2.5rem;
  color:var(--title-color);
  margin-bottom:1rem;
  font-family:var(--title-font)
  }
  
  @keyframes fadeInUp {
  from {
  opacity:0;
  transform:translateY(30px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .service__card,.price-item,.review-card {
  animation:fadeInUp .6s ease-out
  }
  
  html {
  scroll-behavior:smooth
  }
  
  .error-message {
  color:#dc3545;
  font-size:.875rem;
  margin-top:.25rem;
  display:block
  }
  
  .success-message {
  background:#d4edda;
  color:#155724;
  padding:1rem;
  border-radius:5px;
  margin-bottom:2rem;
  border:1px solid #c3e6cb
  }
  
  .contact-info-section {
  margin:3rem 0;
  padding:2rem 0
  }
  
  .contact-info-section h2 {
  text-align:center;
  margin-bottom:2rem;
  color:var(--title-color);
  font-size:2rem
  }
  
  .contact-info-table {
  background:var(--container-color);
  border-radius:1rem;
  padding:2rem;
  box-shadow:0 4px 20px #0000001a;
  overflow:hidden
  }
  
  .info-table {
  width:100%;
  border-collapse:collapse;
  margin:0
  }
  
  .info-table tbody tr {
  border-bottom:1px solid var(--text-color-light);
  transition:background-color .3s ease
  }
  
  .info-table tbody tr:last-child {
  border-bottom:none
  }
  
  .info-table tbody tr:hover {
  background-color:#00000005
  }
  
  .info-label {
  padding:1rem 1.5rem;
  font-weight:600;
  color:var(--title-color);
  vertical-align:top;
  width:200px;
  border-right:1px solid var(--text-color-light)
  }
  
  .info-icon {
  margin-right:.5rem;
  font-size:1.2rem
  }
  
  .info-value {
  padding:1rem 1.5rem;
  color:var(--text-color);
  vertical-align:top
  }
  
  .info-value a {
  color:#000;
  text-decoration:none;
  transition:all .3s ease;
  font-weight:600;
  background:#0000000d;
  padding:.25rem .5rem;
  border-radius:.25rem;
  display:inline-block
  }
  
  .info-value a:hover {
  color:#fff;
  background:var(--first-color);
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 2px 8px #00000026
  }
  
  .social-links {
  display:flex;
  gap:1rem;
  flex-wrap:wrap
  }
  
  .social-link {
  display:inline-block;
  padding:.5rem 1rem;
  border-radius:.5rem;
  text-decoration:none;
  font-weight:500;
  transition:all .3s ease;
  color:#fff
  }
  
  .social-link.facebook {
  background-color:#1877f2
  }
  
  .social-link.instagram {
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)
  }
  
  .social-link.youtube {
  background-color:red
  }
  
  .social-link:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px #0003
  }
  
  button:focus,.btn-primary:focus,.btn-secondary:focus,input:focus,textarea:focus {
  outline:2px solid #ff6b6b;
  outline-offset:2px
  }
  
  @media (max-width: 1200px) {
  .service__card {
  flex:1 1 280px;
  max-width:350px
  }
  }
  
  @media (max-width: 768px) {
  .services__grid {
  flex-direction:column;
  align-items:center
  }
  
  .service__card {
  flex:none;
  width:100%;
  max-width:100%;
  min-width:auto
  }
  
  .contact-info-table {
  padding:1rem
  }
  
  .info-table {
  font-size:.9rem
  }
  
  .info-label {
  width:150px;
  padding:.75rem 1rem
  }
  
  .info-value {
  padding:.75rem 1rem
  }
  
  .social-links {
  flex-direction:column;
  gap:.5rem
  }
  
  .social-link {
  text-align:center
  }
  }
  
  .gallery__albums {
  margin-bottom:4rem
  }
  
  .gallery__albums h3 {
  font-size:2rem;
  color:var(--title-color);
  margin-bottom:2rem;
  text-align:center;
  font-family:var(--title-font)
  }
  
  .gallery__album {
  position:relative
  }
  
  .gallery__placeholder {
  width:100%;
  height:200px;
  background:var(--color-light);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:var(--color-gray);
  font-size:2rem
  }
  
  .gallery__count {
  display:block;
  font-size:.9rem;
  color:var(--color-white);
  background:#000000b3;
  padding:.25rem .5rem;
  border-radius:4px;
  margin-top:.5rem
  }
  
  .gallery__breadcrumb {
  margin-bottom:2rem
  }
  
  .gallery__breadcrumb a {
  color:var(--color-primary);
  text-decoration:none;
  font-weight:500
  }
  
  .gallery-detail__album {
  margin:.5rem 0;
  font-size:.9rem;
  color:var(--color-gray)
  }
  
  .gallery-detail__album a {
  color:var(--color-primary);
  text-decoration:none
  }
  
  .gallery-detail__pages {
  display:block;
  margin-top:.5rem;
  font-size:.8rem;
  color:var(--color-gray);
  background:var(--color-light);
  padding:.5rem;
  border-radius:4px
  }
  
  .hero,.about-hero {
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed
  }
  
  .hero::before,.about-hero::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#0006;
  z-index:1
  }
  
  .hero__content {
  position:relative;
  z-index:2
  }
  
  .gallery__breadcrumb a:hover,.gallery-detail__album a:hover {
  text-decoration:underline
  }