/* topstrip */

.topstrip__link-list {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.topstrip__link,
.navbar__link,
.header__link {
  color: var(--gray-50);
  background-color: unset;
  border: none;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  display: inline-block;
}
.topstrip {
  background-color: var(--color-pd);
  padding: 0 1.6rem;
  border-bottom: 1px solid var(--gray-50);
}
.topstrip__box {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.topstrip__link {
  padding: 0.2rem 1.6rem;
  background-color: var(--color-pr);
  border-radius: 4px;
}
.topstrip__link:hover {
  background-color: var(--color-pl);
}
.logo-box {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--white);
}
.logo-box__top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
}
.logo-box__bottom {
  font-size: 1.2rem;
  transform: translateY(-10px);
}
.logo-box__text {
  font-size: 3rem;
  font-weight: bold;
}
.logo-box__logo {
  max-height: 2.4rem;
  display: inline-block;
}
@media only screen and (max-width: 37.5em) {
  .topstrip__link-list {
    flex-wrap: wrap;
    justify-content: end;
    display: flex;
  }
  .topstrip__link {
    align-self: flex-end;
    margin: 0.2rem;
    padding: 0.4rem 0.8rem;
    font-size: 1.2rem;
  }
  .logo-box__text {
    font-size: 2.4rem;
  }
  .logo-box__logo {
    max-height: 2rem;
  }
  .logo-box__bottom {
    font-size: 1.2rem;
  }
}
.navbar {
  /* background-color: var(--color-pr); */
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-300);
  padding: 0 1.6rem;
}
.navbar .navbar__box {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
}
.navbar__link {
  color: var(--gray-900);
  border: none;
}
.navbar__link:not(:last-child) {
  border-right: 1px solid var(--gray-500);
}
.navbar__link:hover {
  background-color: var(--gray-100);
}
.navbar__link i {
  margin-right: 0.4rem;
}
.navbar__aside,
.navbar__menu {
  display: none;
}
@media only screen and (max-width: 62.5em) {
  .navbar__aside,
  .navbar__menu {
    color: var(--gray-50);
    background-color: var(--gray-900);
    border: none;
    border-radius: 4px;
    padding: 0.8rem;
    margin: 0.8rem 0;
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
  }
  .navbar__menu {
    font-size: 2rem;
    padding: 0.8rem 1.2rem;
  }
  .navbar__aside:hover,
  .navbar__menu:hover {
    background-color: var(--gray-700);
  }
  .navbar__box {
    position: relative;
  }
  .navbar__nav {
    text-align: center;
    transform-origin: top;
    z-index: 89;
    background-color: var(--gray-100);
    flex-direction: column;
    width: 50%;
    margin-top: 0.8rem;
    transition: all 0.3s ease-in-out;
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    transform: scaleY(0);
    box-shadow: var(--shadow-s);
  }
  .navbar__nav.open {
    margin-left: auto;
    transform: scaleY(1);
  }
}
@media only screen and (max-width: 50em) {
  .navbar__nav {
    width: 100%;
  }
}
.cat-menu {
  background-color: var(--white);
  box-shadow: var(--shadow-s);
  /* margin-bottom: 2.4rem; */
}
.cat-menu__list {
  display: flex;
  justify-content: center;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-menu__list::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}
.cat-menu__item {
  width: 12.8rem;
}
.cat-menu__item:hover {
  background-color: var(--color-pl);
  color: var(--gray-50);
}
.cat-menu__item:hover .cat-menu__title {
  color: var(--gray-50);
}
.cat-menu__item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
}
.cat-menu__img-box {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gray-500);
  box-shadow: var(--shadow-s);
  margin-bottom: 0.8rem;
}
.cat-menu__img {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-menu__title {
  font-size: 1.6rem;
}
.header {
  background-color: var(--white);
  padding: 0.4rem 1.6rem;
  box-shadow: var(--shadow-s);
}
.header__box {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  display: flex;
}
@media only screen and (max-width: 45em) {
  .header__box {
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
}
.header__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 1.6rem;
  padding: 0.8rem 0;
}
.header__form input {
  width: initial;
  font-size: inherit;
  border: none;
  border-radius: 0.4rem;
  margin-left: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-s);
}
.header__btn-search {
  border: none;
  border-radius: 0.4rem;
  padding: 0.8rem 1.6rem;
  background-color: var(--color-pr);
  color: var(--gray-50);
  cursor: pointer;
}
.header__link {
  color: var(--gray-900);
}
.header__btn-search:hover {
  background-color: var(--color-pd);
}
.header__link:hover {
  text-decoration: underline;
}

.side-menu__list {
  margin: 1.6rem 0;
  list-style-type: none;
  list-style-position: inside;
}
.side-menu__item {
  word-wrap: break-word;
}
.side-menu__list .side-menu__list,
.side-menu__list .side-menu__list .side-menu__list,
.side-menu__list .side-menu__list .side-menu__list .side-menu__list,
.side-menu__list
  .side-menu__list
  .side-menu__list
  .side-menu__list
  .side-menu__list {
  margin-top: 0;
  margin-bottom: 0;
}
.side-menu__list .side-menu__list {
  margin-left: 0.6rem;
}
.side-menu__list .side-menu__list .side-menu__list {
  margin-left: 0.8rem;
}
.side-menu__list .side-menu__list .side-menu__list .side-menu__list {
  margin-left: 1.2rem;
}
.side-menu__list
  .side-menu__list
  .side-menu__list
  .side-menu__list
  .side-menu__list {
  margin-left: 2rem;
}
.side-menu__link {
  display: inline-block;
  color: var(--gray-900);
  border-radius: 4px;
  width: 100%;
  padding: 0.4rem 0 0.4rem 8px;
  text-decoration: none;
}
.side-menu__link:hover {
  color: var(--gray-50);
  background-color: var(--color-pr);
}
.side-menu__img-box {
  justify-content: center;
  align-items: center;
  margin: 2.4rem 0;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
}
.side-menu__img-box > * {
  margin-bottom: 0.8rem;
}
.side-menu__img {
  width: 12.8rem;
  height: 12.8rem;
  object-fit: cover;
  border-radius: 50%;
  display: inline-block;
}
.side-menu__list-icon {
  margin-bottom: 1.6rem;
  list-style-type: none;
  list-style-position: inside;
}
.side-menu__list-icon .side-menu__item {
  margin-bottom: 0.4rem;
}
.side-menu__list-icon .side-menu__link,
.side-menu__list-icon .side-menu__link:link,
.side-menu__list-icon .side-menu__link:visited {
  background-color: var(--white);
  align-items: center;
  width: 100%;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  display: flex;
}
.side-menu__list-icon .side-menu__link:hover {
  color: var(--gray-50);
  background-color: var(--color-pl);
}
.side-menu__list-icon .side-menu__link i {
  margin-right: 8px;
}
.side-menu__last-cat:before {
  content: "\2756";
  font-size: inherit;
  margin-right: 0.8rem;
  display: inline-block;
}

/* homepage */
.header {
}
.header--homepage {
  padding: 12rem 0;
  background-color: var(--gray-50);
  background-image: linear-gradient(
      rgba(128, 128, 128, 0.5),
      rgba(128, 128, 128, 0.5)
    ),
    url("/themes/default/hero-social.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.header--homepage .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.header__title,
.header__about {
  color: var(--gray-50);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.header__title {
  font-size: 5.2rem;
  text-align: center;
  line-height: 1.6;
}
.header__about {
  margin-bottom: 3.6rem;
  max-width: 60ch;
  text-align: center;
}
.header__bottom {
  padding: 6rem 0;
  background-color: var(--gray-100);
}
.hero {
  background-color: var(--white);
  margin: 0 auto;
  padding: 4.8rem;
  border-radius: 1.6rem;
  position: absolute;
  top: 100%;
}
.hero__form {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  margin-bottom: 4.4rem;
}
.hero__form-group {
  display: flex;
  gap: 1.6rem;
  width: 100%;
}
.hero__select {
  border-radius: 4px;
  border: none;
  padding: 0 1.6rem;
  border: 2px solid transparent;
  font-weight: bold;
  font-size: 2rem;
  color: var(--gray-900);
  font-family: inherit;
  box-shadow: var(--shadow-s);
  background-color: var(--gray-50);
}
.hero__input {
  padding: 0.4rem 1.2rem;
  font-size: 2rem;
  color: var(--gray-900);
  font-family: inherit;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: transform 0.3s ease-in-out;
  box-shadow: var(--shadow-s);
  background-color: var(--gray-50);
  width: 100%;
}
.hero__input:focus,
.hero__select:focus {
  outline: none;
  border: 2px solid var(--color-pr);
  transform: scale(1.01);
}
.hero__btn {
  padding: 0 2rem;
  color: var(--gray-50);
  background-color: var(--color-pr);
  border-radius: 4px;
  font-size: 2rem;
  white-space: nowrap;
}
.hero__btn:hover {
  background-color: var(--color-pd);
}
.hero__list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.hero__item {
  width: calc(33.33% - 1.6rem);
}
@media only screen and (max-width: 62.5em) {
  .hero {
    margin: 0 1.6rem;
  }
  .hero__form {
    flex-wrap: wrap;
  }
  .hero__btn {
    padding: 0.8rem 1.6rem;
  }
  .header__bottom {
    padding: 10rem 0;
  }
}
@media only screen and (max-width: 40em) {
  .hero__item {
    width: calc(50% - 1.6rem);
  }
  .hero__select,
  .hero__input,
  .hero__btn {
    font-size: 1.6rem;
  }
}

.section-features {
  background-color: var(--white);
}
.features {
  padding: 8rem 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}
.feature {
  width: calc(20% - 1.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.6rem;
  border: 2px solid var(--gray-900);
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  background-color: var(--white);
}
.feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-s);
}
.feature__icon {
  font-size: 3.2rem;
  color: var(--gray-50);
  background-color: var(--gray-900);
  padding: 0.8rem 1.6rem;
  border-radius: 50%;
  margin-bottom: 2rem;
}
.feature__icon .fa-solid {
}
.feature__title {
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.feature__details {
  color: var(--gray-700);
}
@media only screen and (max-width: 80em) {
  .feature {
    width: calc(33.33% - 1.6rem);
  }
}
@media only screen and (max-width: 42.5em) {
  .feature {
    width: calc(50% - 1.6rem);
  }
}
@media only screen and (max-width: 25em) {
  .feature {
    width: calc(100% - 1.6rem);
  }
}
.section-details {
  display: flex;
  padding: 8rem 0;
  position: relative;
}
.guide__left {
  width: calc(33.33% - 1.6rem);
  align-self: flex-start;
  position: sticky;
  top: 2.4rem;
  left: 0;
  padding-left: 1.6rem;
}
.guide__right {
  width: calc(33.33% - 1.6rem);
  background-color: var(--gray-50);
  padding: 2.4rem 1.6rem;
  margin-right: 1.6rem;
  text-align: center;
  border-radius: 8px;
  max-height: 100vh;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-self: flex-start;
  position: sticky;
  top: 2.4rem;
  right: 0;
}
.guide__right::-webkit-scrollbar {
  display: none;
}
.guide__main {
  width: 100%;
  padding: 0 2.4rem;
}
@media only screen and (max-width: 82.5em) {
  .guide__left {
    width: calc(40% - 1.6rem);
  }
  .guide__right {
    width: calc(40% - 1.6rem);
  }
  .guide__main {
    width: 100%;
  }
}
@media only screen and (max-width: 67.5em) {
  .section-details {
    flex-direction: column;
  }
  .guide__left {
    width: 100%;
    order: 2;
    position: initial;
    padding: 0 2.4rem;
    text-align: center;
  }
  .guide__right {
    width: 80%;
    order: 3;
    position: initial;
    max-height: initial;
    margin: 3.2rem auto;
  }
  .guide__main {
    width: 100%;
    order: 1;
  }
}
.steps {
  /* background-color: var(--gray-50); */
  margin-bottom: 1.6rem;
  /* padding: 1.6rem 2.6rem; */
  /* box-shadow: var(--shadow-s); */
  border-radius: 8px;
}
.steps__title {
  font-size: 2rem;
  margin-bottom: 1.2rem;
}
.steps__actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
@media only screen and (max-width: 67.5em) {
  .steps__actions {
    justify-content: center;
  }
}
.steps__list {
  margin-bottom: 1.6rem;
  list-style-type: none;
}
.steps__item {
  margin-bottom: 0.8rem;
}
.steps__item .fa-solid {
  color: var(--color-pr);
  margin-right: 0.8rem;
  background-color: var(--gray-100);
}
.help {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* background-color: var(--gray-50); */
  /* padding: 1.6rem; */
  /* box-shadow: var(--shadow-s); */
  border-radius: 8px;
}
.guide-post {
  display: flex;
  background-color: var(--white);
  box-shadow: var(--shadow-s);
  margin-bottom: 2rem;
  border-radius: 8px;
}
.guide-post__left {
  width: 40%;
  max-height: 100%;
}
.guide-post__right {
  width: 60%;
  padding: 2.4rem 1.6rem;
}
.guide-post__img {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.guide-post__title a,
.guide-post__title a:link,
.guide-post__title a:visited {
  text-decoration: none;
  font-size: 2.4rem;
  color: var(--gray-900);
}
.guide-post__details {
  margin: 1.6rem 0 0.8rem;
  color: var(--gray-700);
}
.guide-post__list {
  list-style-position: inside;
  margin-left: 0.8rem;
  margin-bottom: 2.4rem;
}
@media only screen and (max-width: 67.5em) {
  .guide__main {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
  }
  .guide-post {
    flex-direction: column;
    width: calc(50% - 1.6rem);
  }
  .guide-post__left {
    width: 100%;
    height: 40vh;
  }
  .guide-post__right {
    width: 100%;
    text-align: center;
  }
  .guide-post__list {
    list-style-type: none;
  }
  .guide-post__right .btn-box {
    justify-content: center;
  }
}
@media only screen and (max-width: 30em) {
  .guide-post {
    width: 100%;
  }
}

.section-sites {
  padding: 8rem 0;
  background-color: var(--gray-100);
}
.section-posts {
  padding: 8rem 0;
}
.section-products {
  background-color: var(--gray-100);
  padding: 8rem 0;
}
.section-freelancers {
  padding: 8rem 0;
}

.section__title {
  width: max-content;
  text-align: center;
  border-bottom: 1px solid var(--gray-500);
  padding: 0 7.2rem 1.6rem;
  margin: 0 auto 4.8rem;
}

/* classified */

.classified {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3.2rem;
}
.classified__text {
}
.classified__location {
  font-weight: bold;
  color: var(--color-pr);
}
.classified__price {
  align-self: end;
  font-size: 2.4rem;
  font-weight: bold;
}

.classified__cta {
  display: flex;
}
.classified__btn,
.classified__btn:link,
.classified__btn:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  background-color: var(--color-pr);
  color: var(--gray-50);
  text-align: center;
  text-decoration: none;
  font-size: 1.8rem;
  padding: 0.8rem 1.2rem;
  transition: all 0.2s ease-in-out;
}

.classified__btn:not(:last-child),
.classified__btn:link:not(:last-child),
.classified__btn:visited:not(:last-child) {
  border-right: 2px solid var(--gray-50);
}

.classified__btn:hover {
  background-color: var(--color-pd);
}

.classified__tab {
  display: flex;
  gap: 0.8rem;
}
.classified__tab-btn {
  border: none;
  background-color: var(--white);
  font-size: 1.6rem;
  padding: 1.6rem;
  border-top-right-radius: 0.8rem;
  border-top-left-radius: 0.8rem;
  transition: all 0.2s ease-in-out;
}
.classified__tab-btn:hover {
  background-color: var(--color-pr);
  color: var(--gray-50);
}
.classified-search {
  padding: 2.4rem;
  background-color: var(--gray-200);
  border-radius: 0.8rem;
}

.auction-detail__table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 0.8rem;
}
.auction-detail__table td {
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--gray-900);
}

.auction-detail__info p {
}

.site-form-theme-container {
  height: 60vh;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.site-form-theme {
  width: calc(33% - 3.2rem);
  margin: 8px;
}
.site-form-theme img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  object-position: top;
}
@media only screen and (max-width: 37.5em) {
  .site-form-theme {
    width: calc(50% - 3.2rem);
    margin: 8px;
  }
}

/* notification */

.notifications {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.notifications__item {
  display: flex;
  background-color: var(--white);
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2.4rem;
  border-radius: 1.2rem;
  box-shadow: var(--shadow-s);
}
.notifications__body {
}
.notifications__title {
  margin-bottom: 0.4rem;
}
.notifications__text {
  padding-right: 3.2rem;
  margin-bottom: 1.6rem;
  color: var(--gray-700);
}
.notifications__btn,
.notifications__btn:link,
.notifications__btn:visited {
  border-radius: 32px;
  margin-right: 1.6rem;
}
.notifications__btn-box {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 12rem;
}

/* Academy - chapters */
.chapters {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.chapters__item {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 3fr;
  grid-gap: 1.2rem;
  padding: 2.4rem;
  background-color: var(--white);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-s);
}
.chapters__title {
  grid-column: 1 / -1;
}
.chapters__title a {
  color: inherit;
  text-decoration: none;
  font-size: 2.4rem;
  font-weight: normal;
}
.chapters__img-box {
  grid-column: 1 / 2;
}
.chapters__img {
  width: 100%;
  border-radius: 0.8rem;
}
.chapters__details {
  grid-column: 2 / -1;
}
.chapters .btn-box {
  grid-column: 1 / -1;
}