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

html, body {
   height: 100%;
   min-width: 320px;
}

.main {
   flex: 1 1 auto;
   font-family: 'Roboto', sans-serif;
   min-width: 0;
}

.wrapper {
   overflow: hidden;
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

body {
   font-family: 'Roboto', sans-serif;
   background: #162831;
}

.header {
   display: flex;
   justify-content: center;
   margin-top: 30px;
   margin-bottom: 50px;
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
}

.header__container {
   max-width: 1296px;
   height: 60px;
   flex: 1 1 100%;
   padding: 0 20px;
   display: flex;
}

.header__nav {
   width: 100%;
   display: flex;
   align-items: center;
   flex: 1 1 100%;
   justify-content: space-between;
}

.nav__logo {
   cursor: pointer;
}

.nav__buttons {
   display: flex;
   gap: 50px;
}

.nav__buttons > li > a, .nav__buttons > li {
   color: #FFFFFF;
   font-size: 0.875rem;
   letter-spacing: 0.8px;
   cursor: pointer;
   text-decoration: none;
}

.nav__buttons > li:hover {
   color: #018ABE;
}

.nav__buttons > li > a:hover {
   color: #018ABE;
}

.nav__buttons > .current {
   color: #018ABE;
}

.nav__button {
   border: none;
   border-radius: 3px;
   background: #018ABE;
   width: 159px;
   height: 40px;
   color: white;
   font-size: 0.813rem;
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
   letter-spacing: 0.5px;
}

.menu-hamburger {
   display: none;
}

.menu-mobile {
   display: none;
}

.main {
   min-width: 0;
   width: 100%;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.main__aquaterapia {
   background: url(img/aquaterapia.png);
   font-family: 'El Messiri', sans-serif;
   width: 100%;
   max-width: 1296px;
   height: 600px;
   border-radius: 10px;
   display: flex;
   justify-content: center;
   margin-bottom: 150px;
}

.aquaterapia__text {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   margin-top: 136px;
   padding: 0 20px;
}

.aquaterapia-text__heading {
   max-width: 429px;
   height: 34px;
   gap: 66px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 40px;
   padding: 0 20px;
}

.aquaterapia-text__heading > p {
   color: #FFFFFF;
   font-size: 1.5rem;
   text-align: center;
}

.aquaterapia-text-heading__left {
   width: 28px;
   height: 14px;
   background: white;
   border-radius: 0px 50px;
}

.aquaterapia-text-heading__right {
   width: 28px;
   height: 14px;
   background: white;
   border-radius: 0px 50px;
   transform: matrix(-1, 0, 0, 1, 0, 0);
}

.aquaterapia-text__main {
   padding: 0 20px;
   height: 180px;
   max-width: 587px;
   text-align: center;
}

.aquaterapia-text__main > p {
   font-size: 4rem;
   color: #FFFFFF;
   line-height: 140%;
}

.main__sessions {
   width: 100%;
   max-width: 1296px;
   padding: 0 20px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   font-family: 'El Messiri', sans-serif;
   margin-bottom: 150px;
}

.styled__heading {
   max-width: 482px;
   height: 59px;
   gap: 45px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 100px;
   padding: 0 20px;
}

.styled__heading > p {
   font-size: 2.625rem;
   color: #FFFFFF;
   line-height: 140%;
   text-align: center;
}

.styled__left {
   width: 28px;
   height: 14px;
   background: #018ABE;
   border-radius: 0px 50px;
}

.styled__right {
   width: 28px;
   height: 14px;
   background: #018ABE;
   border-radius: 0px 50px;
   transform: matrix(-1, 0, 0, 1, 0, 0);
}

.sessions__cards {
   display: flex;
   justify-content: center;
   gap: 24px;
}

.sessions-cards__row1 {
   display: flex;
   justify-content: center;
}

.sessions-cards-row1__card {
   width: 416px;
   height: 540px;
   background: url(img/session-card1.png);
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
}

.sessions-cards__hover {
   display: block;
   position: absolute;
   width: 416px;
   height: 7px;
   background: #018ABE;
   border-radius: 0px 0px 10px 10px;
   z-index: 9;
}

.sessions-cards-row1__card > p {
   margin-left: 50px;
   margin-bottom: 50px;
   color: #FFFFFF;
   font-size: 1.5rem;
}

.session-cards__row2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
}

.sessions-cards-row2__card {
   width: 416px;
   height: 258px;
   background: url(img/session-card2.png);
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
}

.sessions-cards-row2__card > p {
   width: 316px;
   margin-left: 50px;
   margin-bottom: 30px;
   color: #FFFFFF;
   font-size: 1.5rem;
   line-height: 140%;
}

.main__reviews {
   width: 100%;
   max-width: 2008px;
   padding: 0 20px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   font-family: 'El Messiri', sans-serif;
}

.reviews__cards {
   max-width: 2008px;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   gap: 50px;
   font-family: 'Roboto', sans-serif;
   margin-bottom: 60px;
}

.reviews-cards__card-center {
   background: #018ABE;
   width: 636px;
   height: 350px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   border-radius: 10px;
}

.reviews-cards-card-center__text {
   display: flex;
   flex-flow: column nowrap;
   align-items: start;
   justify-content: center;
   margin: 50px 60px 56px 60px;
   color: #FFFFFF;
}

.card-center-text__heading {
   font-weight: 700;
   font-size: 1.25rem;
   color: #FFFFFF;
   margin-bottom: 18px;
}

.card-center-text__paragraph {
   font-size: 0.875rem;
   line-height: 140%;
   color: #FFFFFF;
} 

.swiper {
   width: 2008px;
   height: 466px;
}

.swiper > .swiper-wrapper {
   height: 350px;
   display: flex;
   align-items: center;
   gap: 25px;
}

.swiper-slide.swiper-slide-prev {
   opacity: 0.4;
}

.swiper-slide.swiper-slide-next {
   opacity: 0.4;
}

.swiper-pagination-bullets > .swiper-pagination-bullet {
   opacity: 0.4;
   width: 16px;
   height: 16px;
   background: #ffffff;
   border-radius: 3px;
}

.swiper-pagination-bullets > .swiper-pagination-bullet-active {
   opacity: 1;
   width: 16px;
   height: 16px;
   background: #FFFFFF;
   border-radius: 3px;
}

.main__aboutritmstyle {
   width: 100%;
   max-width: 1296px;
   padding: 0 20px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   font-family: 'El Messiri', sans-serif;
   margin-bottom: 150px;
}

.aboutritmstyle__about {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 84px;
   font-family: 'Roboto', sans-serif;
}

.about-massage__text {
   margin-top: 85px;
}

.about-massage-text__header {
   font-size: 1.5rem;
   color: #FFFFFF;
   font-weight: 700;
   margin-bottom: 30px;
}

.about-massage-text__paragraph {
   width: 466px;
   line-height: 140%;
   font-weight: 300;
   color: #FFFFFF;
}

.about-massage-hydrotherapia__header {
   font-size: 1.5rem;
   color: #FFFFFF;
   font-weight: 700;
   margin-bottom: 30px;
}

.about-massage-hydrotherapia__paragraph {
   width: 485px;
   line-height: 140%;
   font-weight: 300;
   color: #FFFFFF;
}

.main__prices {
   width: 100%;
   max-width: 1296px;
   padding: 0 20px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   font-family: 'El Messiri', sans-serif;
   margin-bottom: 150px;
}

.prices__list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding: 0 20px;
}

.prices-list__price {
   display: flex;
   flex-flow: column nowrap;
   gap: 31px;
   margin-top: 100px;
   margin-bottom: 50px;
   margin-right: 134px;
}

.price__punkt {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
}

.price-punkt__name {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
}

.price-punkt__name > p {
   font-family: 'Roboto', sans-serif;
   font-size: 1.125rem;
   color: #FFFFFF;
   font-weight: 300;
}

.little-square {
   width: 18px;
   height: 9px;
   background: #018ABE;
   border-radius: 0px 50px;
   margin-right: 20px;
}

.price-punkt__price {
   color: #FFFFFF;
   font-size: 1.125rem;
}

.prices__serteficate {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.prices__serteficate > p {
   margin-top: 30px;
   font-size: 1.313rem;
   color: #FFFFFF;
}

.main__location {
   width: 100%;
   max-width: 1296px;
   padding: 0 20px;
   display: grid;
   gap: 48px;
   grid-template-columns: 1fr 1fr;
   font-family: 'El Messiri', sans-serif;
   margin-bottom: 90px;
}

.location__places {
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
}

.location-places__card {
   width: 392px;
   height: 290px;
   background: #018ABE;
   border-radius: 10px;
}

.places-card-text {
   margin-left: 45px;
   margin-bottom: 35px;
   margin-top: 35px;
   display: flex;
   flex-flow: column nowrap;
   align-items: start;
}

.places-card-text__header {
   font-size: 1.5rem;
   color: #FFFFFF;
   margin-bottom: 21px;
}

.places-card-text__main {
   display: flex;
   flex-flow: column nowrap;
   gap: 21px;
   margin-bottom: 30px;
}

.card-text-main__paragraph {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   gap: 23px;
}

.card-text-main__paragraph > p {
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   color: #FFFFFF;
}

.places-card-text__button {
   width: 155px;
   height: 36px;
   background: #FFFFFF;
   border-radius: 3px;
   border: none;
   outline: none;
   color: #018ABE;
   font-size: 0.875rem;
   cursor: pointer;
}

.footer {
   width: 100%;
   height: 50px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.footer__container {
   width: 100%;
   max-width: 1296px;
   padding: 0 20px;
   display: flex;
   justify-content: start;
}

.footer__text {
   padding: 0 20px;
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   color: #FFFFFF;
}

@media (max-width: 1296px) {
   .sessions__cards {
      flex-direction: column;
   }

   .session-cards__row2 {
      grid-template-columns: 1fr;
   }

   .main__location {
      grid-template-columns: 1fr;
      justify-items: center;
   }

   .location__places {
      flex-direction: row;
      gap: 70px;
   }
}

@media (max-width: 1200px) {
   .aboutritmstyle__about {
      grid-template-columns: 1fr;
      justify-items: center;
   }

   .about-massage-text__header, .about-massage-hydrotherapia__header {
      text-align: center;
   }

   .about-massage-text__paragraph, .about-massage-hydrotherapia__paragraph {
      text-align: center;
      width: 600px;
   }
}

@media (max-width: 1024px) {
   .nav__buttons, .nav__button {
      display: none;
   }

   .menu-hamburger {
      display: block;
      cursor: pointer;
   }

   .menu-mobile {
      display: none;
   }

   .menu-mobile.active {
      display: flex;
      position: absolute;
      width: 100%;
      height: 300px;
      background: #162831;
      z-index: 99;
      left: 0;
      top: 138px;
      flex-flow: column nowrap;
      align-items: center;
   }
   
   .menu-mobile__container {
      width: 100%;
      max-width: 1024px;
      display: flex;
      flex-flow: column nowrap;
      align-items: start;
   }

   .nav__buttons-mobile {
      display: flex;
      flex-flow: column nowrap;
      gap: 20px;
      padding: 0 20px;
      margin-bottom: 20px;
   }

   .nav__buttons-mobile > li > a, .nav__buttons-mobile > li {
      color: #FFFFFF;
      font-size: 0.875rem;
      letter-spacing: 0.8px;
      cursor: pointer;
      text-decoration: none;
   }
   
   .nav__buttons-mobile > li:hover {
      color: #018ABE;
   }
   
   .nav__buttons-mobile > li > a:hover {
      color: #018ABE;
   }
   
   .nav__buttons-mobile > .current {
      color: #018ABE;
   }
   

   .nav__button-mobile {
      border: none;
      border-radius: 3px;
      background: #018ABE;
      width: 159px;
      height: 40px;
      color: white;
      font-size: 0.813rem;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      letter-spacing: 0.5px;
      margin-left: 20px;
   }

   .prices__list {
      grid-template-columns: 1fr;
   }

   .prices-list__price {
      margin: 0;
      margin-bottom: 70px;
   }
}

@media (max-width: 900px) {
   .location__places {
      flex-direction: column;
      gap: 24px;
   }

   .location__map > img {
      width: 394px;
   }
}

@media (max-width: 768px) {
   .reviews-cards__card-center {
      width: 300px;
      height: 700px;
   }
   
   .swiper {
      width: 960px;
      height: 800px;
   }

   .swiper > .swiper-wrapper {
      display: flex;
      height: 700px;
      gap: 0;
      align-items: flex-end;
   }
}

@media (max-width: 620px) {
   .about-massage-text__paragraph, .about-massage-hydrotherapia__paragraph {
      text-align: center;
      width: 310px;
   }

   .aboutritmstyle__about > img {
      width: 320px;
      height: 170px;
   }

   .price__punkt {
      flex-direction: column;
      gap: 15px;
   }

   .prices__serteficate > img {
      width: 320px;
      height: 190px;
   }
}

@media (max-width: 425px) {
   .aquaterapia-text__main > p {
      font-size: 3rem;
   }

   .sessions-cards-row1__card, .sessions-cards-row2__card, .sessions-cards__hover {
      width: 320px;
      border-radius: 10px;
      justify-content: center;
      z-index: 1;
   }

   .sessions-cards-row1__card > p {
      margin-left: 0;
   } 

   .sessions-cards__hover {
      border-radius: 0 0px 10px 10px;
   }

   .sessions-cards-row2__card > p {
      margin-left: 40px;
   }

   .styled__heading > p {
      font-size: 2.5rem;
   }

   .location-places__card {
      width: 320px;
   }

   .location__map > img {
      width: 320px;
   }
}