#nav-menu a,
.nav a,
.nav-menu a,
.prod-card a {
  text-decoration: none;
}
.nav-menu,
.nav-toggle:checked + .nav-hamburger .nav-icon span:nth-child(2) {
  opacity: 0;
}
.dropdown-menu li,
.nav-list,
.nav-menu ul,
.submenu li,
.wrapper-social,
form > ul {
  list-style: none;
}
* {
  margin: 0;
  scroll-behavior: smooth;
}
body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
hr {
  border: 0;
  margin: 0 auto;
  height: 1.5px;
  width: 80vw;
  box-shadow: 2px 2px 2px 0 rgba(83, 83, 83, 0.25);
  background-image: linear-gradient(
    to right,
    rgba(203, 172, 136, 0),
    rgba(106, 90, 71, 0.75),
    rgba(0, 0, 0, 0)
  );
}
.dropdown-menu,
.submenu {
  padding-inline-start: 0;
  width: 11em;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
}
#preloader,
.nav-menu {
  height: 100vh;
  width: 100%;
}
#preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: #fff;
  flex-direction: column;
  position: fixed;
  z-index: 100;
}
#preloader img {
  height: 4.25rem;
  width: 4.25rem;
}
#preloader hr {
  width: 40vw;
}
#preloader p {
  font-family: Murecho, sans-serif;
  color: #202020;
  margin-top: 1rem;
  font-weight: 300;
  font-size: clamp(0.75rem, 0.5938rem + 0.5vw, 1rem);
}
.first-content-page,
.nav-list-item {
  position: relative;
}
.dropdown-menu,
.nav-menu,
.submenu {
  position: absolute;
  display: none;
}
.dropdown-menu {
  top: 2em;
  left: 0;
  z-index: 20;
}
.nav-list-item-sml:hover .dropdown-menu-sml,
.nav-list-item:hover .dropdown-menu,
.submenu-item:hover .submenu {
  display: block;
}
.nav-list-item .dropdown-menu a,
.submenu a {
  display: block;
  padding: 1em;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  color: #752775;
}
.nav a,
.nav-menu a {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.85em;
  font-weight: 300;
  text-transform: uppercase;
}
#nav-menu a:hover,
.dropdown-menu a.active,
.icon a,
.nav a,
.nav-menu a {
  color: #fff;
}
.nav-list-item-sml {
  margin-top: 1.7em;
  text-align: left;
  display: none;
}
.nav-list-item-sml a {
  padding: 0.25em;
}
.dropdown-menu a:hover,
.submenu a:hover {
  background: #752775;
  color: #fff;
}
.dropdown-menu-sml {
  display: none;
  margin-top: 1em;
}
.dropdown-menu-sml li {
  margin-top: 1em;
}
.fa-chevron-down {
  padding-left: 0.3em;
}
.submenu {
  top: 0;
  left: 100%;
  z-index: 30;
}
.nav-menu {
  top: 100%;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 1em 0;
  z-index: 10;
  transition: opacity 0.8s;
}
.nav-icon,
.wrapper-social .icon {
  position: relative;
  cursor: pointer;
}
.nav-menu ul {
  padding: 0;
}
.nav-list-item {
  margin: 10px 0;
}
#nav-menu a {
  color: #514646;
  font-size: clamp(1.5rem, 1.1667rem + 1.4815vw, 2rem);
}
.nav-hamburger,
.nav-toggle {
  display: none;
}
.nav-icon {
  display: block;
  padding: 1.2em;
  width: 2em;
}
.nav-icon span {
  background: #fff;
  display: block;
  height: 2px;
  margin: 5px auto;
  width: 30px;
  transition: 0.4s;
}
button,
button:hover {
  transition: 569ms;
  transform: translateY(0);
  background: linear-gradient(48deg, #cbac88 0, #4a4034 95%);
}
.nav-toggle:checked + .nav-hamburger .nav-icon span:first-child {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.nav-toggle:checked + .nav-hamburger .nav-icon span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}
.nav-toggle:checked ~ .nav-menu {
  display: block;
  opacity: 1;
}
.header-container {
  display: flex;
  justify-content: center;
}
.header {
  display: flex;
  width: 85%;
  z-index: 10;
  justify-content: space-between;
  background: linear-gradient(
    90deg,
    rgba(203, 172, 136, 0.5398125314578957) 32%,
    rgba(26, 10, 26, 0.6546584698332458) 100%
  );
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.25);
  align-items: flex-end;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  transition: top 0.5s;
  border-radius: 3px;
}
.active,
.nav a:hover,
.nav-menu a:hover {
  background-image: linear-gradient(
    to right top,
    #752775,
    #662366,
    #571e57,
    #481a48,
    #3a153a
  );
}
.best-image img,
.swiper,
input,
textarea,
select {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.25);
}
.page-head,
.welcome-text {
  transform: translate(-50%, -50%);
  text-align: center;
}
.active,
.best-image img,
.card img,
.nav a:hover,
.nav-menu a:hover {
  border-radius: 4px;
}
.card,
.form,
.swiper,
input,
textarea,
select {
  border-radius: 10px;
}
button,
input,
textarea,
select {
  border: none;
  font-size: clamp(0.8rem, 0.7769rem + 0.1026vw, 0.9rem);
}
.header-logo {
  background-color: rgba(255, 255, 255, 0.75);
}
.header-logo img {
  padding: 0.3em 0 0 0.3em;
  max-height: 3.5em;
}
.nav-list {
  display: flex;
  gap: 0.5em;
  padding: 0;
  margin: 0.5em 1em;
}
.nav a {
  padding: 1em;
}
.nav-menu a {
  padding: 0.2em;
}
.active {
  cursor: default;
}
.bg-img-full img {
  width: 100%;
  height: 100svh;
  box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.25);
  object-fit: cover;
}

.welcome-text {
  position: absolute;
  top: 40%;
  left: 50%;
  color: #3c3c3c;
}
.welcome-text h1 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 1.7813rem + 1.5vw, 3rem);
  width: 80vw;
}
.page-head p,
.welcome-text p {
  font-family: Murecho, sans-serif;
  font-size: clamp(0.75rem, 0.5938rem + 0.5vw, 1rem);
}
.second-content-bestbar {
  display: grid;
  margin: 50px;
  grid-template-columns: 0.85fr 1.075fr 1.075fr;
  gap: 1.5vw;
}
.best-image img {
  width: 100%;
  height: clamp(15rem, -7.5rem + 40vw, 25rem);
  object-fit: cover;
}
.spacebar-img img,
.third-content-spacebar {
  height: 12vw;
  max-height: 120px;
}
.bar-lhs {
  padding-right: 1vw;
}
.highlight-head {
  background: linear-gradient(90deg, #cbac88 13.24%, #8a765e 38.11%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bar-text h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 1.4375rem + 1vw, 2.25rem);
  font-weight: 500;
  color: #3e3e3e;
}
.bar-text p,
.spacebar-text {
  font-size: clamp(0.85rem, 0.5125rem + 0.6vw, 1rem);
  font-family: Murecho, sans-serif;
}
.bar-text p {
  padding-top: 1em;
}
.card h3,
.card p {
  font-weight: 100;
  font-size: 0.8em;
}
.third-content-spacebar {
  display: grid;
  grid-template-columns: 1fr 5fr;
  align-items: center;
  background-color: #f5f5f5;
}
.swiper,
.swiper-slide img {
  height: 80vh;
  max-width: 100%;
}
.spacebar-text {
  padding-left: 2em;
}
.spacebar-text-alt {
  display: none;
  margin-left: 1em;
}
.fourth-content-gallery {
  display: grid;
  max-width: 100%;
  grid-template-columns: 75% 20%;
  margin: 50px;
  justify-content: space-between;
}
.swiper {
  width: 90%;
  min-width: 580px;
  overflow: hidden;
}
.swiper-slide {
  height: auto;
  max-width: 100%;
  background: #000;
}
.swiper-slide-content {
  align-items: center;
}
.swiper-slide img {
  display: block;
  object-fit: cover;
}
.swiper-button-next,
.swiper-button-prev {
  --swiper-navigation-color: rgba(255, 255, 255, 0.9);
  --swiper-navigation-size: clamp(2.5rem, 1.9255rem + 2.5532vw, 4rem);
}
.text-overlay {
  position: absolute;
  top: 70%;
  left: 0;
  color: #fff;
  background: linear-gradient(
    90deg,
    rgba(203, 172, 136, 0.5398125314578957) 32%,
    rgba(26, 10, 26, 0.6546584698332458) 100%
  );
  padding: 0.6rem;
  font-family: Murecho, sans-serif;
  font-size: clamp(0.75rem, 0.6926rem + 0.2553vw, 0.9rem);
}
.footer,
.sixth-content-prod-cards,
input[id="mail"],
input[id="user_name"],
input[id="user_phone"] {
  background-repeat: no-repeat;
}
.fifth-content-spacebar {
  display: grid;
  grid-template-columns: 5fr 1fr;
  align-items: center;
  height: 12vw;
  max-height: 120px;
  overflow-y: hidden;
  background-color: #f5f5f5;
}
.sixth-content-prod-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 50px 0;
  padding: 3em 2em;
  gap: 4vw;
  justify-items: center;
  background-color: #e5e5e5;
  background-size: cover;
}
.card,
.form {
  flex-direction: column;
}
.card {
  display: flex;
  align-items: center;
  background-image: linear-gradient(
    to right bottom,
    rgba(203, 172, 136, 0.6),
    rgba(164, 139, 110, 0.6),
    rgba(127, 108, 84, 0.6),
    rgba(92, 78, 60, 0.6),
    rgba(59, 50, 38, 0.6)
  );
  padding: 4px 4px 12px;
  color: #fff;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  transition: 0.5s;
}
.card:hover {
  transform: scale(1.1);
}
.card img {
  width: 19vw;
  height: 25vw;
  object-fit: cover;
}
.card h3 {
  font-family: "Noto Sans", sans-serif;
  text-transform: uppercase;
  padding: 1.5em 0;
}
.card p,
.footer h2,
.footer h3,
.footer p,
.prod-card h3,
.prod-card p,
.wrapper-social .tooltip,
button,
input,
label,
textarea,
select {
  font-family: Murecho, sans-serif;
}
.card p {
  padding: 0.5em;
  text-align: justify;
}
.footer h3,
label {
  font-weight: 500;
}
input[id="mail"],
input[id="user_name"],
input[id="user_phone"],
select[id="user_city"] {
  background-position-y: center;
  color: #2b2b2b;
  background-position: 10px center;
  padding-left: 25px;
}
.eighth-content-customers {
  display: flex;
  width: 85svw;
  margin: 50px auto;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3em;
}
.eighth-content-customers img {
  height: 4.5em;
}
.ninth-content-premium {
  display: flex;
  margin: 0 auto;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.backcolor {
  background-image: linear-gradient(
    to right top,
    rgb(117, 39, 117),
    rgb(94, 33, 95),
    rgb(73, 26, 73),
    rgb(52, 19, 52),
    rgb(33, 12, 33)
  );
  color: white;
  margin-bottom: 2em;
}
.premium-text p {
  width: 25svw;
}

.form-grid {
  margin: 50px 25px 0px 25px;
  display: grid;
  grid-template-columns: 30% 70%;
  justify-items: end;
  justify-content: space-evenly;
}
.form {
  order: 1;
  background-image: linear-gradient(
    to right top,
    #752775,
    #5e215f,
    #491a49,
    #341334,
    #210c21
  );
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.25);
  width: 50vw;
  display: flex;
  align-items: center;
}
form > ul {
  padding: 25px;
  margin: 0;
}
form li + li {
  margin-top: 0.5em;
}
label {
  display: inline-block;
  width: 90px;
  text-align: left;
  color: #cbac88;
}
input,
label {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5em;
}
input,
textarea,
select {
  width: 40vw;
  box-sizing: border-box;
  text-indent: 1em;
  height: clamp(3rem, 2.6842rem + 1.4035vw, 4rem);
}
textarea {
  text-indent: 1em;
}

input:focus,
textarea:focus,
select:focus {
  outline: #8a765e solid 2px;
  box-shadow: 0 4px 10px #8a765e;
}
.form-error {
  padding-top: 0.5em;
  color: #cbac88;
  font-size: clamp(0.75rem, 0.6923rem + 0.2564vw, 1rem);
  font-family: Murecho, sans-serif;
  opacity: 0%;
}
select:required:invalid {
  color: rgb(97, 97, 97);
}
option[value=""][disabled] {
  display: none;
}
option {
  color: #2b2b2b;
}
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  outline: rgb(220, 87, 54) solid 3px;
  box-shadow: 0 4px 10px #dc5736;
}
form input[id="user_name"]:user-invalid ~ .form-error {
  opacity: 100%;
}
form input[id="user_phone"]:user-invalid ~ .form-error {
  opacity: 100%;
}
form input[id="mail"]:user-invalid ~ .form-error {
  opacity: 100%;
}
form select[id="user_city"]:user-invalid ~ .form-error {
  opacity: 100%;
}
input[id="user_name"]:user-invalid,
input[id="user_phone"]:user-invalid,
input[id="mail"]:user-invalid,
select[id="user_city"]:user-invalid {
  background-image: url(../images/icons/invalid.png);
  background-size: auto 45%;
}
textarea[id="user_message"]:user-invalid {
  background-image: url(../images/icons/invalid.png);
  background-size: auto 25%;
  background-repeat: no-repeat;
  background-position: center bottom;
}
input[id="user_name"]:user-valid,
input[id="user_phone"]:user-valid,
input[id="mail"]:user-valid,
select[id="user_city"]:user-valid {
  background-image: url(../images/icons/valid.png);
  background-size: auto 45%;
}
textarea[id="user_message"]:user-valid {
  background-image: url(../images/icons/valid.png);
  background-size: auto 25%;
  background-repeat: no-repeat;
  background-position: 10px 80%;
}
textarea {
  vertical-align: top;
  height: 10em;
  resize: none;
}
.button {
  width: 100px;
  margin: 2rem auto 0;
}
button {
  color: #fff;
  padding: 12px 30px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 12px 28px 0, rgba(0, 0, 0, 0.1) 0 2px 4px 0,
    rgba(255, 255, 255, 0.05) 0 0 0 1px inset;
  border-radius: 12px;
  transform: translateX(0);
  cursor: pointer;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1em;
}
button:hover {
  padding: 12px 40px;
  transform: translateX(-10px);
  color: #d1d1d1;
  border: none;
}
input[id="user_name"] {
  background-image: url(../images/icons/user.png);
}
input[id="mail"] {
  background-image: url(../images/icons/new-post.png);
}
input[id="user_phone"] {
  background-image: url(../images/icons/phone.png);
}
select[id="user_city"] {
  background-image: url(../images/icons/loca.png);
  background-repeat: no-repeat;
}
.footer {
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 1fr;
  margin-top: 50px;
  padding: 5em 1em 2em;
  background-image: url(../images/img-footer.webp);
  background-size: cover;
  align-items: center;
  box-shadow: 3px -10px 20px -14px rgba(29, 29, 29, 0.96);
}
.flex-social,
.footer-address {
  background-color: rgba(39, 39, 39, 0.5);
  border-radius: 0.3em;
  box-shadow: 2px 2px 2px 0 rgba(83, 83, 83, 0.544);
  height: 80%;
}
.footer h3,
.footer p {
  color: #fff;
  font-size: clamp(0.85rem, 0.5125rem + 0.6vw, 1rem);
  padding-left: 1.5em;
}
.footer h2 {
  color: #fff;
  font-size: clamp(1.5rem, 1.3243rem + 0.7207vw, 2rem);
  padding-left: 0.7em;
  font-weight: 400;
}
.flex-social h2 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
}
.footer-address {
  display: flex;
  flex-direction: column;
  padding: 1em 0;
}
.social-med {
  align-items: center;
  gap: 2em;
}
.icon-set {
  display: flex;
  flex-direction: row;
  gap: 2em;
}
.icon {
  font-size: 3em;
  color: #fff;
}
.wrapper-social {
  display: inline-flex;
  justify-self: center;
  padding-inline-start: 0;
}
.wrapper-social .icon {
  background: #d2d2d2aa;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: clamp(1.2rem, 0.9231rem + 1.2308vw, 2rem);
  height: clamp(1.2rem, 0.9231rem + 1.2308vw, 2rem);
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper-social .tooltip,
.wrapper-social .tooltip::before {
  background: #fff;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: absolute;
}
.wrapper-social .tooltip {
  top: 0;
  font-size: 14px;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
}
.wrapper-social .tooltip::before {
  content: "";
  height: 8px;
  width: 8px;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}
.wrapper-social .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wrapper-social .icon:hover .tooltip,
.wrapper-social .icon:hover span {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.wrapper-social .facebook:hover,
.wrapper-social .facebook:hover .tooltip,
.wrapper-social .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #fff;
}
.wrapper-social .twitter:hover,
.wrapper-social .twitter:hover .tooltip,
.wrapper-social .twitter:hover .tooltip::before {
  background: #1da1f2;
  color: #fff;
}
.wrapper-social .instagram:hover,
.wrapper-social .instagram:hover .tooltip,
.wrapper-social .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}
.wrapper-social .youtube:hover,
.wrapper-social .youtube:hover .tooltip,
.wrapper-social .youtube:hover .tooltip::before {
  background: #cd201f;
  color: #fff;
}
.flex-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em 0;
  gap: 1em;
}
.flex-social h2 {
  font-size: 1.5em;
  color: #fff;
}
@media only screen and (max-width: 900px) {
  .nav {
    display: none;
  }
  .nav-list-item-sml {
    display: block;
  }
  .nav-hamburger {
    display: block;
    border-radius: 0.5em;
    margin-right: 0.5em;
    background-image: linear-gradient(
      to right top,
      #752775,
      #662366,
      #571e57,
      #481a48,
      #3a153a
    );
  }
  .nav-list {
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-menu ul {
    padding-left: 2em;
  }
  .nav-list a {
    padding: 0;
  }
  .header {
    top: 0;
    width: 100%;
    align-items: center;
  }
  .fourth-content-gallery {
    margin: 50px 10px;
  }
  .eighth-content-customers {
    width: unset;
    gap: 1em;
  }
  .eighth-content-customers img {
    height: 4.1em;
  }
}
.page-head,
.prod-card {
  border-radius: 0.5rem;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 768px) {
  .second-content-bestbar {
    grid-template-columns: 90vw;
    gap: 2vw;
    margin: 1em 2em 2em;
    justify-content: center;
  }
  .best-image img {
    height: 50vw;
  }
  .spacebar-text {
    padding-bottom: 0.5em;
  }
  .fifth-content-spacebar,
  .third-content-spacebar {
    height: 100px;
    margin-bottom: 6vw;
  }
  .spacebar-img img {
    height: 100px;
  }
  .swiper,
  .swiper-slide img {
    height: 50vh;
    width: 100%;
  }
  .fourth-content-gallery {
    grid-template-columns: 100%;
    justify-content: center;
    margin: 0;
  }
  .swiper {
    min-width: unset;
  }
  .bar-gallery {
    order: 1;
    max-width: 100%;
    padding-top: 0.5em;
    padding-bottom: 2em;
  }
  .bar-text h2 {
    padding-top: 2vw;
    text-align: center;
  }
  .bar-text p {
    text-align: justify;
    width: 80svw;
    margin: 0.75em auto;
  }
  .sixth-content-prod-cards {
    grid-template-columns: 1fr 1fr;
    background-color: #eee;
  }
  .card img {
    width: 38vw;
    height: 40vw;
  }
  .form-grid {
    grid-template-columns: 90vw;
    margin-left: 0px;
    margin-right: 0px;
  }
  .form {
    width: 80vw;
    margin-top: 1em;
  }
  .contact-info,
  .tooltip {
    display: none;
  }
}
@media only screen and (max-width: 550px) {
  #preloader hr {
    width: 60vw;
  }
  .nav-icon {
    padding: 0.9em;
    width: 1.9em;
  }
  .header-logo img {
    max-height: 3em;
  }
  .spacebar-text {
    display: none;
    padding-left: 0.25em;
  }
  .card img {
    width: 100%;
    height: 45vw;
  }
  .card h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: #fff8dc;
  }
  .spacebar-img img {
    width: 240px;
  }
  .spacebar-text-alt {
    display: block;
  }
  .sixth-content-prod-cards {
    grid-template-columns: 1fr;
    gap: 8vw;
    background-color: #eee;
  }

  .form {
    width: 90vw;
    margin-top: 1em;
  }
  input,
  textarea,
  select {
    width: 70vw;
  }
  form > ul {
    padding: 18px;
  }
  textarea {
    height: 7em;
  }
  .button {
    margin-top: 1rem;
  }
  .footer {
    display: grid;
    grid-template-columns: 100%;
    margin-top: 50px;
    padding: 2em 1em 1em;
    background-image: url(../images/img-footer-sml.webp);
  }
  .footer-address-logo {
    align-items: center;
  }
}
.prod-card h3,
.prod-card p {
  color: #000;
  text-align: center;
}
@media only screen and (min-width: 900px) {
  .nav-toggle:checked ~ .nav-menu {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .ninth-content-premium {
    padding-top: 1.5em;
  }
}
.head-img-page img {
  width: 100%;
  height: 50vh;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.25);
  object-fit: cover;
}
.page-head {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  width: 100%;
  z-index: 1;
}
.mint {
  background-color: rgba(48, 116, 115, 0.5);
}
.brown {
  background-color: rgba(117, 39, 117, 0.5);
}
.brack {
  background-color: rgba(37, 33, 37, 0.5);
}
.page-head h1 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(2rem, 1.5813rem + 1.5vw, 2.5rem);
  padding-bottom: 0.5rem;
}
.page-summary {
  margin: 1em auto;
  padding-top: 2em;
  font-family: Murecho, sans-serif;
  font-size: clamp(0.75rem, 0.5938rem + 0.5vw, 1rem);
  background-color: rgb(227, 227, 227);
}

.page-summary-alt {
  margin: 4em auto;
  font-family: Murecho, sans-serif;
  font-size: clamp(0.75rem, 0.5938rem + 0.5vw, 1rem);
  background-color: white;
}
.page-summary p,
.page-summary-alt p {
  margin: 0 auto;
  width: 85%;
  padding-bottom: 1em;
}

.page-summary h2,
.page-summary-alt h2 {
  font-family: "Sacramento", cursive;
  font-size: 3.5rem;
  padding-left: 0.5em;
  font-weight: 600;
  background: -webkit-linear-gradient(#afafaf, #936161);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prodcard-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 5rem 6rem;
}
.prod-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 1rem;
  border: 3px solid rgba(255, 255, 255, 0);
  padding-top: 1rem;
  transition: 0.4s ease-in-out;
}
.prod-card:hover {
  border: 3px solid #752775;
  box-shadow: 2px 8px 12px 4px rgba(117, 39, 117, 0.25);
  transform: scale(1.05);
}
.prod-card img {
  width: 100%;
  margin-bottom: 3rem;
}
.prod-card h3 {
  font-weight: 500;
}
.prod-card p {
  font-weight: 300;
  font-size: clamp(0.7rem, 0.6308rem + 0.3077vw, 1rem);
}
.contact-form {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
.prod-prod-headpic img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  margin-bottom: 0.5em;
  box-shadow: 2px 2px 10px gray;
}
.isolated-headpic {
  height: clamp(4rem, 2.2632rem + 5.0526vw, 7rem);
  border-left: 1.5em solid #2e7473;
}
.prod-paver-head {
  margin: 1em 2em;
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 1.5fr;
}
.prod-paver-buy,
.prod-paver-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.prod-paver-buy h1,
.prod-paver-detail h1 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: #2f2f2f;
  font-size: clamp(1.8rem, 1.5319rem + 1.1915vw, 2.5rem);
  padding-bottom: 0.5rem;
}
.prod-paver-colors {
  display: flex;
  gap: 0.75em;
  margin-top: 1em;
  margin-bottom: 1em;
  justify-content: flex-start;
}
.prod-paver-colors img {
  height: clamp(3rem, 1.6538rem + 1.5385vw, 4.5rem);
  width: clamp(3rem, 1.6538rem + 1.5385vw, 4.5rem);
  border-radius: 0.5em 0;
}
.prod-paver-buy p,
.prod-paver-detail p {
  font-family: Murecho, sans-serif;
  font-size: clamp(0.75rem, 0.5938rem + 0.5vw, 1rem);
  width: 20em;
}
.prod-hrs {
  width: 100%;
  margin-bottom: 1em;
}
.prod-paver-detail h3 {
  font-family: Murecho, sans-serif;
  font-size: clamp(1rem, 0.5938rem + 0.5vw, 1.25rem);
  font-weight: 500;
}
.dimen-span {
  color: #670f67;
  font-weight: 600;
}
.prod-paver-colors p {
  width: unset;
  font-size: clamp(0.6rem, 0.5938rem + 0.5vw, 0.8rem);
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .prodcard-container {
    grid-template-columns: 1fr 1fr;
    margin: 2rem 0.75rem;
    gap: 0.75rem;
  }
  .prod-prod-headpic img {
    height: 50vh;
  }
  .prod-paver-head {
    grid-template-columns: 1fr;
  }
  .prod-paver-colors {
    flex-wrap: wrap;
  }
}
.vid-container {
  aspect-ratio: 16/9;
  width: 70%;
  margin: 0 auto;
  margin-top: 100px;
}
iframe {
  box-shadow: 2px 2px 10px rgb(68, 68, 68);
}
@media only screen and (max-width: 768px) {
  .vid-container {
    width: 100%;
  }
}