/*
=============================================================
== HEADER ===================================================
=============================================================
*/
.header {
  width: 100%;
  height: 90vh;
  height: 90dvh;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 0;
}

.header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header .section-head {
  max-width: 80rem;
  z-index: 1;
  text-align: center;
}

.header h1 {
  margin-bottom: 1.6rem;
  color: var(--light);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
}

.header h1 span {
  display: block;
}

.header p {
  margin-bottom: 3.6rem;
  color: var(--light);
  opacity: 1 !important;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
}

.header .btns {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
}

.header .mouse {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  z-index: 10;
  transform: translateX(-50%);
}

.mouse-body {
  width: 2.4rem;
  height: 4rem;
  padding: 0.4rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.5);
  border-radius: 360px;
  display: flex;
  justify-content: center;
  align-items: start;
}

.mouse-eye {
  width: 0.4rem;
  height: 0.8rem;
  border-radius: 360px;
  background-color: rgba(255, 255, 255, 0.8);
  animation: mouse 1s infinite;
}

@keyframes mouse {
  0%,
  100% {
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    transform: translateY(-25%);
  }
  50% {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transform: none;
  }
}

.header .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  opacity: 0.6;
}

.header .video-bg::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* background-image: linear-gradient(
    transparent,
    color-mix(in oklab, var(--primary) 100%, transparent)
  ); */
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  mask-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) 50%);
}

section .container {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/*
=============================================================
== SHOPVIEW =================================================
=============================================================
*/

.shopview {
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
  display: flex;
  flex-direction: column;
}

.shopview .box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.shopview article {
  width: 100%;
  height: 100%;
  min-height: 48rem;
  padding: 3rem;
  /* border-radius: 2rem; */
  /* background-color: var(--dark); */
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
  overflow: hidden;
  position: relative;
  z-index: 0;
  color: var(--dark-foreground);
  transition: 0.4s ease-in-out;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  transform: translate(-50%, -50%) scale(1.01);
  transform-origin: center;
  transition: 0.4s ease-in-out;
}

.shopview article:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.shopview article:hover .image {
  transform: translate(-50%, -50%) scale(1.06);
}

.shopview article::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    transparent,
    color-mix(in oklab, var(--primary) 55%, transparent)
  );
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.shopview article .circle {
  aspect-ratio: 1;
  width: 4rem;
  height: 4rem;
  border-radius: 360px;
  background-color: var(--primary);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.shopview article .circle .icon {
  width: 2rem;
  height: 2rem;
}

.shopview article h3 {
  display: flex;
  align-items: center;
}

.shopview article h3,
.shopview article p {
  filter: drop-shadow(
    0px 0px 10px color-mix(in oklab, var(--primary) 50%, transparent)
  );
}

.shopview article p {
  margin-bottom: 2rem;
}

/*
=============================================================
== WORKSHOPVIEW =============================================
=============================================================
*/

.workshopsview {
  background-color: var(--muted-dark);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}

.workshopsview .box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.workshopsview .btn {
  white-space: nowrap;
}

.workshopsview .cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}

.workshopsview .card {
  width: 100%;
  padding: 5rem 3rem;
  background-color: var(--white);
  box-shadow: 0rem 0.4rem 0.4rem -0.2rem rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease-in-out;
}

.workshopsview .spots-left {
  margin-bottom: 2rem;
  padding: 0.6rem 1rem;
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  display: inline-block;
}

.workshopsview h3 {
  margin-bottom: 0.6rem;
  transition: color 0.2s;
}

.workshopsview .card:hover {
  box-shadow: 0rem 0.7rem 0.7rem -0.2rem rgba(0, 0, 0, 0.2);
}
.workshopsview .card:hover h3 {
  color: var(--primary);
}

.workshopsview .details {
  margin-top: 2rem;
  margin-bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font: var(--f-text-s);
}

.workshopsview .details .icon {
  margin-right: 0.4rem;
  color: var(--primary);
}

.workshopsview .cards .btn {
  width: 100%;
}

/*
=============================================================
== REVIEWS ==================================================
=============================================================
*/

.reviews {
  --bg: color-mix(in oklab, var(--primary) 5%, transparent);
  --bg--dark: color-mix(in oklab, var(--primary) 10%, transparent);
  background-color: var(--bg);
  background: repeating-linear-gradient(
    -45deg,
    var(--bg--dark),
    var(--bg--dark) 0.4rem,
    var(--bg) 0.4rem,
    var(--bg) 4rem
  );
}

.reviews .container {
  padding: 0;
  padding-top: 6rem;
  padding-bottom: 8rem;
}

.reviews .marquee {
  width: 100vw;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}

.reviews .cards {
  display: flex;
  gap: 4rem;
  animation: move 60s linear infinite;
}

.reviews .marquee:nth-child(2) .cards {
  animation: move 60s linear infinite;
  animation-direction: reverse;
}

.reviews .cards:hover {
  animation-play-state: paused !important;
}

.reviews .cards-block {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}

@keyframes move {
  0% {
    transform: translateX(calc(25%));
  }
  100% {
    transform: translateX(calc(-25% - 2rem));
  }
}

.reviews .card {
  width: 100%;
  min-width: 30rem;
  max-width: 40rem;
  padding: 4rem 3rem;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  box-shadow: 0rem 0.2rem 0.5rem -0.1rem rgba(0, 0, 0, 0.2);
}

.reviews .card-img {
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  object-fit: cover;
  overflow: hidden;
}

.reviews .card-name {
  position: relative;
  font: var(--f-overline);
}

.reviews .card-name::before {
  content: "";
  width: 2rem;
  height: 0.1rem;
  background-color: var(--primary);
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translateX(-50%);
}

.reviews .card-message {
  font: var(--f-text);
}

/*
=============================================================
== NEWSLETTERS ==============================================
=============================================================
*/

.newslettersview {
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  text-align: center;
}

.newslettersview form {
  display: flex;
  gap: 0.6rem;
}

.newslettersview .box {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.newslettersview small {
  margin-top: 2rem;
  display: inline-block;
  font: var(--f-text-s);
}

/*
=============================================================
== MEDIA QUERIES ============================================
=============================================================
*/

@media (min-width: 768px) {
  .shopview .box {
    flex-direction: row;
  }

  .workshopsview .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1023px) {
  /*  .header h1 {
    font-size: 6.7rem;
    line-height: 6.7rem;
  }

  .header h3 {
    font-size: 2rem;
  } */

  .workshopsview .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}