/*------------------------------------------------*/
/*                     RESET                      */
/*------------------------------------------------*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  /* 10px div by def of 16px ==>> 62.5% */
  /* 100% is better for zoom consistence */
  font-size: 100%;
}

body {
  box-sizing: border-box;
}

/*------------------------------------------------*/
/*                     GENERAL STYLES             */
/*------------------------------------------------*/

:root {
  --color-page-bg: #f2f2f2;
  --color-text: #000000;
  --color-primary: #0065fc;
  --color-secondary: #deebff;
  --color-border: #d9d9d9;
  --color-primary-shadow: rgba(216, 216, 216, 0.3);
  --color-secondary-shadow: rgba(190, 190, 190, 0.3);
  --color-hover-shadow: rgba(0, 101, 252, 0.2);
}

html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  color: var(--color-text);
}

h1,
h2 {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 0.006em;
}

h3 {
  font-size: 22px;
  font-weight: 600;
}

p {
  font-size: 21px;
  letter-spacing: 0.008em;
}

a {
  font-size: 21px;
  text-decoration: none;
  color: var(--color-text);
}

ul {
  list-style: none;
}

.pageWrapper {
  margin: 0 3.5vw;
}

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

.siteHeader {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.siteLinkHome {
  padding: 62px 0 0 25px;
}

.siteLogo {
  height: 60px;
}

.siteNav__list {
  margin: 69px 0 4px 0;
}

.siteNav__item {
  margin: 0 20px 0 0;
  display: inline-block;
}

.siteNav__link {
  padding: 69px 28px 4px 37px;
  position: relative;
  letter-spacing: 0.014em;
}

.siteNav__link:hover {
  color: var(--color-primary);
}

.siteNav__link:hover::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  top: 0;
  left: 0;
}

.-active {
  color: var(--color-primary);
}

.-active::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  top: 0;
  left: 0;
}

/*------------------------------------------------*/
/*                     MAIN                       */
/*------------------------------------------------*/
/* Main Section Search */

.sectionSearch {
  margin-top: 44px;
}

.sectionSearch__pageTitle {
  margin: 16px 0 12px 0;
}

.form {
  margin-top: 26px;
}

.inputGroup {
  display: flex;
  align-items: center;
}

.inputGroup__iconMarker {
  padding: 22px 26px 21px 25px;
  font-size: 25px;
  background: var(--color-page-bg);
  border-radius: 22px 0 0 22px;
}

.inputGroup__text {
  flex-grow: 1;
  max-width: 320px;
  padding: 19px;
  font-size: 24px;
  font-weight: 600;
  border: none;
  border-top: 1px solid var(--color-page-bg);
  border-bottom: 1px solid var(--color-page-bg);
}

.inputGroup__btn {
  cursor: pointer;
  background: var(--color-primary);
  border-radius: 0 22px 22px 0;
  border: none;
  color: #fff;
}

.inputGroup__btn i {
  display: none;
}

.-btnText {
  font-size: 24px;
  font-weight: 600;
  padding: 19px;
}

.filterGroup {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-top: 28px;
}

.filterGroup__title {
  font-size: 24px;
  font-weight: 600;
  margin-right: 2%;
  padding: 0.9% 0.8% 0 0;
}

.filterGroup__list {
  display: flex;
  flex-flow: row wrap;
}

.filterGroup__item {
  font-size: 24px;
  font-weight: 600;
  position: relative;
  margin-top: 13px;
  transition: all 0.4s;
  cursor: pointer;
  border: 2px solid var(--color-border);
  border-radius: 34px 30px 30px 34px;
  padding: 18px 30px 18px 84px;
}

.filterGroup__item:not(:last-child) {
  margin-right: 32px;
}

.filterGroup__item::before {
  color: var(--color-primary);
  background-color: var(--color-secondary);
  width: 67px;
  height: 67px;
  border-radius: 50%;
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  font-weight: 900;
  position: absolute;
  top: -2px;
  left: -5px;
  padding-top: 20px;
  padding-left: 19px;
}

.filterGroup__item:nth-child(1)::before {
  content: "\f53a";
}
.filterGroup__item:nth-child(2)::before {
  content: "\f1ae";
  padding-left: 23px;
}
.filterGroup__item:nth-child(3)::before {
  content: "\f004";
  padding-left: 21px;
}
.filterGroup__item:nth-child(4)::before {
  content: "\f6d3";
}

.filterGroup__item:hover {
  background-color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  color: var(--color-primary);
}

.infoGroup {
  margin-top: 47px;
}

.infoGroup__hostNbr::before {
  content: "\f129";
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: "Font Awesome 5 Free";
  font-size: 17px;
  font-weight: 600;
  padding: 8px 13px;
  margin-right: 20px;
}
/* Main Section Results */
/* Hosts */
.sectionResult {
  margin-top: 50px;
  display: flex;
}

.searchResults {
  background-color: var(--color-page-bg);
  /* padding: 62px 52px; */
  border-radius: 26px;
  padding: 3.5% 2% 2.6% 2%;
  margin-right: 2%;
  flex: 1 1 66%;
}

.searchResults__title {
  text-indent: 3px;
}

.cardsContainer {
  margin-top: 25px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.searchResults__more {
  margin-top: 60px;
  text-indent: 4px;
}

.searchResults__moreLink {
  font-size: 24px;
  font-weight: 600;
}

.cardsContainer__link {
  display: inline-block;
  background-color: #fff;
  flex: 1 1 30%; /* grow shrink basis */
  margin: 1%;
  padding: 7px;
  border-radius: 26px;
  box-shadow: 0 10px 20px var(--color-primary-shadow),
    0 6px 6px var(--color-secondary-shadow);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cardsContainer__link:hover {
  box-shadow: 0 15px 25px var(--color-secondary-shadow),
    0 9px 9px var(--color-hover-shadow);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.cardsContainer__img {
  height: 152px;
  width: 100%;
  border-radius: 26px 26px 0 0;
  object-fit: cover;
  min-width: 200px;
}

.cardsContainer__info {
  padding: 1% 5%;
}

.cardsContainer__title {
  letter-spacing: -0.015em;
}

.cardsContainer__price {
  font-size: 19px;
  letter-spacing: -0.007em;
  margin-top: 1%;
}

.cardsContainer__lowCost {
  font-weight: 600;
}

.cardsContainer__hostRate {
  margin-top: 3%;
  font-size: 17px;
  color: var(--color-primary);
}

.-greyStar {
  color: var(--color-border);
}
/* Most Popular */
.mostPopular {
  background-color: var(--color-page-bg);
  border-radius: 26px;
  padding: 3.5% 3% 2.6% 2.7%;
  flex: 1 1 33%;
}

.mostPopular__title {
  display: flex;
  justify-content: space-between;
}

.mostPopular__titleIcon {
  font-size: 25px;
  padding-top: 5px;
}

.mostPopular__container {
  margin-top: 25px;
  display: flex;
  flex-flow: column wrap;
}

.mostPopular__link {
  background-color: #fff;
  flex: 1 1 auto;
  margin: 10px;
  padding: 7px;
  border-radius: 26px;
  box-shadow: 0 10px 20px var(--color-primary-shadow),
    0 6px 6px var(--color-secondary-shadow);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mostPopular__link:hover {
  box-shadow: 0 15px 25px var(--color-secondary-shadow),
    0 9px 9px var(--color-hover-shadow);
  transform: translateY(-2px);
}

.mostPopular__card:hover .mostPopular__title {
  color: var(--color-primary);
}

.mostPopular__card {
  display: flex;
  flex-flow: row nowrap;
}

.mostPopular__img {
  width: 170px;
  min-width: 170px;
  height: 179px;
  border-radius: 26px 0 0 26px;
  object-fit: cover;
}

.mostPopular__info {
  padding: 5% 6.6% 2.5% 5%;
  display: flex;
  flex-direction: column;
  min-width: 235px;
}

.mostPopular__title {
  letter-spacing: -0.015em;
}

.mostPopular__price {
  font-size: 19px;
  letter-spacing: -0.007em;
  margin-top: 4%;
}

.mostPopular__hostRate {
  margin-top: auto;
  font-size: 16px;
  color: var(--color-primary);
}
/* Main Section Activities */

.activities {
  margin: 80px 0;
}

.activities__container {
  margin-top: 30px;
  display: flex;
  column-gap: 3%;
}

.activities__containerCard:nth-child(even) {
  justify-content: space-between;
}

.activities__containerCard {
  flex: 0 1 25%;
  display: flex;
  flex-direction: column;
}

.activities__link {
  border-radius: 26px;
  box-shadow: 0 10px 20px var(--color-primary-shadow),
    0 6px 6px var(--color-secondary-shadow);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.activities__link:hover {
  box-shadow: 0 15px 25px var(--color-secondary-shadow),
    0 9px 9px var(--color-hover-shadow);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.activities__cardImg {
  border-radius: 26px 26px 0 0;
  width: 100%;
  height: 520px;
  object-fit: cover;
}

.-h240 {
  height: 240px;
}

.-h145 {
  height: 145px;
}

.-h180 {
  height: 186px;
}

.-h205 {
  height: 205px;
}
.activities__cardTitle {
  padding: 7% 7% 6% 7%;
}
/*------------------------------------------------*/
/*                     FOOTER                     */
/*------------------------------------------------*/

.siteFooter {
  display: flex;
  background-color: var(--color-page-bg);
  padding: 59px 3.5vw;
  gap: 10px;
}

.siteFooter__container {
  flex: 0 1 33%;
}

.siteFooter__title {
  font-size: 24px;
  padding-bottom: 5px;
}

.siteFooter__item {
  padding-top: 19px;
}

.siteFooter__link {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  letter-spacing: 0.007em;
}

.siteFooter__link:hover {
  color: var(--color-primary);
}