:root {
  --text-01: #45413e;
  --light-01: #f9f9f9;
  --light-02: #ffffff;
  --brand-01: #0c4ad5;
  --brand-02: #55C0D4;
  --card-hover: 0px 4px 24px rgba(0, 0, 0, 0.15);
  --card-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  --hover-timing: all 0.2s ease;
  --nav-card-size: 240px;

  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Trebuchet MS, sans-serif;
  font-weight: 500;
  transition: var(--hover-timing);

  background: var(--light-01);

  width: 100vw;
  overflow-x: hidden;
}

header {
  /*    width: 100%;*/
  height: auto;
  position: sticky;
  top: 0;
  /*    border: 1px solid red;*/
  z-index: 100;
}

.banner {
  background: #18B5C4;
  color: var(--light-01);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav {
  color: var(--text-01);
  font-weight: 600;
  height: 64px;
  background: #18B5C4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pg-margin);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 100;
}

nav ul.navigation-menu {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  position: relative;
  top: 0;
}

nav .navigation-menu a {
  font-size: 16px;
  text-decoration: none;
  color: var(--text-01);
}

nav .navigation-menu > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*    justify-items: center;*/
}

nav .navigation-menu > li > a {
  position: relative;
  /*    border: 1px solid purple;*/
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-items: center;
}

nav .navigation-menu > li:hover ul.subnav {
  visibility: visible;
  opacity: 1;
  top: 64px;
}

nav .navigation-menu > li > ul.subnav {
  /*    border: 1px solid green;*/
  visibility: hidden;
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 66px;
  background: #18B5C4;
  box-shadow: var(--card-hover);
  border-radius: 12px;
  opacity: 0;
  transition: var(--hover-timing);
}

nav > #logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-gap: 8px;
  line-height: 100%;
}

nav > #logo > span {
  font-size: 32px;
}

nav > #utility {
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-gap: 16px;
}

.card-large,
.card-med {
  /*    border: 1px solid orange;*/
  flex: 1;
  /*    width: var(--nav-card-size);*/

  position: relative;
  display: flex;
  flex-direction: column;
  /*    padding: 24px;*/
  transition: var(--hover-timing);
  cursor: pointer;
}

.card-large {
  box-shadow: var(--card-shadow);
  border-radius: 12px;
  overflow: hidden;
  /*    padding-bottom: 32px;*/
}

.card-large:hover {
  box-shadow: var(--card-hover);
  transform: scale(1.01);
}

.card-med:hover .card-image {
  transform: scale(1.01);
}

.card-image {
  width: 100%;
  /*    height: 90%;*/
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--hover-timing);
}
#hot {
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
}
#saman {
  /* padding-top: 100px; */
  height: 90%;
}

.card-large > .card-image {
  aspect-ratio: 3/2;
}

.card-image > img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
}

.card-large a {
  text-decoration: none;
  font-weight: 600;
}

.card-large > .card-image > a {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  font-size: 24px;
  line-height: 1.2;
}

.card-large > ul {
  /*    padding: 16px 0 24px;*/
  display: flex;
  flex-direction: column;
  grid-gap: 8px;
  flex: 1;
  /*    border: 1px solid blue;*/

  color: var(--text-01);

  padding: 0 40px 40px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
}

.card-large > ul > li a {
  line-height: 32px;
  font-size: 14px;
  /*    border: 1px solid red;*/
}

.card-large#sup-dog,
.card-med#sup-dog > .card-image {
  background: linear-gradient(45deg, #463631 0%, #976c5b 100%);
}

button.btn-outline {
  color: var(--light-01);
  border-color: var(--light-01);
}

.card-large#sup-cat,
.card-med#sup-cat > .card-image {
  background: linear-gradient(45deg, #f6ae6c 0%, #ecbd73 100%);
}

.card-large#sup-bird,
.card-med#sup-bird > .card-image {
  background: linear-gradient(45deg, #efefef 0%, #f2f2f2 100%);
}

.card-large#sup-fish,
.card-med#sup-fish > .card-image {
  background: linear-gradient(45deg, #1e4782 0%, #709ddf 100%);
}

.card-large.card-dark a,
.card-large.card-dark > ul {
  color: var(--text-01);
}

.card-large.card-light a,
.card-large.card-light > ul {
  color: var(--light-01);
}

button {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 24px;
  border-radius: 48px;
  display: flex;
  flex-direction: row;
  grid-gap: 8px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button.btn-outline-light {
  color: var(--light-01);
  background: none;
  color: var(--light-01);
  border: 2px solid var(--light-01);
}

button.btn-outline-dark {
  color: var(--text-01);
  background: none;
  color: var(--text-01);
  border: 2px solid var(--text-01);
}

button.btn-filled-dark {
  color: var(--light-01);
  background: var(--text-01);
  color: var(--light-01);
  border: 2px solid var(--text-01);
}

.btn-outline-dark:hover {
  background: var(--text-01);
  border: 2px solid var(--text-01);
}

.btn-outline-light:hover {
  background: var(--light-01);
  border: 2px solid var(--light-01);
  color: var(--text-01);
}

button:hover,
.btn-outline-dark.btn-hover-color:hover {
  color: var(--light-01);
  border: 2px solid var(--brand-01);
  background: var(--brand-01);
  transition: var(--hover-timing);
  box-shadow: var(--card-hover);
}

section.hero {
  width: 100%;
  height: auto;
  background: var(--brand-02) url("images/bpvc/pipe.png") no-repeat center right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  grid-gap: 48px;
  display: inline-flex;
  transition: background-size 0.5s ease;
  overflow: hidden;
}
section.hero:hover {
  background-size: 40%; /* Adjust the value to control the zoom level */
}
.wave:hover {
  background-size: 40%; /* Adjust the value to control the zoom level */
  animation: jumpAnimation 2s infinite; /* Adjust the animation duration and timing as needed */
}
.card-image:hover {
  background-size: 40%; /* Adjust the value to control the zoom level */
  animation: jumpAnimation 2s infinite; /* Adjust the animation duration and timing as needed */
}

@keyframes jumpAnimation {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10%);
  }
}
.btn-group {
  display: flex;
  flex-direction: row;
  grid-gap: 16px;
}

section.hero h1 {
  font-size: var(--hero-text);
  font-weight: 600;
  line-height: 1.2;
  width: 40%;
  color: var(--text-01);
}

.card-med {
  width: var(--nav-card-size);
  height: auto;
  /*    border: 1px solid green;*/
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.card-med > a {
  display: flex;
  flex-direction: column;
  grid-gap: 4px;
  padding: 12px 16px 0px;
}

.card-med > a > span {
  width: 100%;
  /*    border: 1px solid blue;*/
}

.card-med > a > span:nth-of-type(1) {
  width: 100%;
  /*    border: 1px solid blue;*/
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.card-med > a > span:nth-of-type(2) {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-gap: 6px;
}

.card-med > a > span:nth-of-type(2) > span {
  font-size: 18px;
}

#serv-groom > .card-image {
  background: linear-gradient(45deg, #45828c 0%, #a7d4d8 100%);
}

#serv-board > .card-image {
  background: linear-gradient(45deg, #eddaa9 0%, #b87d93 100%);
}

.card-med:hover .card-image {
  box-shadow: var(--card-hover);
}

.card-med > .card-image {
  box-shadow: var(--card-shadow);
}

.card-med > .card-image > img {
  width: 80%;
  height: 80%;
  /*    border: 1px solid red;*/
}

section:not(.hero) {
  padding: calc(var(--pg-margin) / 2) var(--pg-margin);
}

section h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--text-01);
  margin-bottom: 32px;
  /*    padding-bottom: 24px;*/
}

.card-wide {
  flex-direction: row;
  padding: 0;
}

.card-wide .card-image {
  width: 50%;
  border-radius: 0;
}

.card-image img {
  width: 80%;
  height: 80%;
}
.card-imagedo img {
  width: 90%;
  height: 90%;
}

.card-wide > ul {
  padding: 40px;
}

.card-wide > ul > li {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  grid-gap: 24px;
  margin-bottom: 16px;
}

.card-wide .subtitle {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  /*    margin-top: 8px;*/
  margin-bottom: 24px;
}

.card-wide > ul > li span {
  font-size: 16px;
}

.card-large > ul > li:last-of-type {
  margin-bottom: 40px;
}

.card-large button {
  margin-top: auto;
}

#locate > div {
  background: #e7c437;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  transition: var(--hover-timing);
  cursor: pointer;
}

#locate > div:hover {
  box-shadow: var(--card-hover);
}

#locate h2 {
  margin-top: 0;
}
.piping {
  display: none;
}
.moblogo {
  padding-right: 80px;
  height: 70%;
  width: 50%;
}
#locate p {
  line-height: 1.5;
  margin-bottom: 40px;
  width: 50%;
  text-align: center;
}

.btn-group {
  display: flex;
  flex-direction: row;
  grid-gap: 16px;
}

@media only screen and (max-width: 600px) {
  :root {
    --pg-margin: 16px;
  }

  section.hero {
    aspect-ratio: 1/1;
    padding-top: 50px;
  }

  section.hero h1 {
    --hero-text: 40px;
    width: 80%;
  }

  section.hero {
    background-size: 85%;
    background-position: 360% 60%;
  }

  nav {
    position: relative;
  }

  nav ul.navigation-menu {
    position: absolute;
    position: absolute;
    top: 64px;
    background: var(--light-01);
    left: 0;
    z-index: -1;
    width: 100vw;
  }

  nav ul.navigation-menu li a {
    font-size: 16px;
    padding: 0 12px;
    white-space: nowrap;
  }

  nav ul.navigation-menu .subnav {
    display: none;
  }

  nav ul.navigation-menu > li:hover .subnav {
    display: none;
  }

  .btn-group {
    flex-direction: column;
  }

  .shop-pets,
  .services {
    display: flex;
    flex-direction: column;
    grid-gap: 24px;
    width: 100%;
  }

  .services > li {
    display: flex;
    flex-direction: column;
  }

  .services > li > .card-image {
    width: 100%;
  }

  section:not(.hero) {
    padding: var(--pg-margin);
  }

  #locate p {
    width: 80%;
  }
}

@media only screen and (min-width: 600px) {
  :root {
    --pg-margin: 24px;
  }

  section.hero h1 {
    --hero-text: 40px;
    width: 60%;
  }

  section.hero {
    aspect-ratio: 3/2;
    background-size: 50%;
    background-position: 90% 70%;
    padding-top: 50px;
  }

  nav {
    position: relative;
  }

  nav ul.navigation-menu {
    position: absolute;
    top: 64px;
    background: var(--light-01);
    left: 0;
    z-index: -1;
    width: 100vw;
  }

  nav ul.navigation-menu li a {
    font-size: 16px;
    white-space: nowrap;
  }

  nav ul.navigation-menu .subnav {
    display: none;
  }

  nav ul.navigation-menu > li:hover .subnav {
    display: none;
  }

  .btn-group {
    display: flex;
    flex-direction: column;
  }

  .shop-pets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: auto auto;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .services {
    display: flex;
    flex-direction: column;
    grid-gap: 24px;
  }

  section:not(.hero) {
    padding: var(--pg-margin);
  }

  #locate p {
    width: 60%;
  }
}

@media only screen and (min-width: 1200px) {
  :root {
    --pg-margin: 48px;
  }

  section.hero h1 {
    --hero-text: 48px;
  }

  section.hero {
    aspect-ratio: 2/1;
  }

  .btn-group {
    flex-direction: row;
  }

  .shop-pets,
  .services {
    display: flex;
    flex-direction: row;
    grid-gap: 24px;
  }

  ul.subnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: auto auto;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 48px;
  }

  nav ul.navigation-menu {
    top: 0;
    z-index: 1;
    background: none;
    width: auto;
    position: relative;
  }

  nav ul.navigation-menu .subnav {
    display: flex;
  }

  nav ul.navigation-menu > li:hover .subnav {
    display: flex;
  }

  #locate p {
    width: 40%;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  :root {
    --pg-margin: 80px;
  }

  section.hero h1 {
    --hero-text: 56px;
  }

  nav .navigation-menu > li > ul.subnav {
    padding: 48px;
    grid-gap: 24px;
  }

  section.hero {
    aspect-ratio: 3/1;
    background-size: 30%;
    background-position: 90% 60%;
  }

  .shop-pets,
  .services {
    display: flex;
    flex-direction: row;
    grid-gap: 24px;
  }

  nav ul.navigation-menu {
    top: 0;
    z-index: 1;
    background: none;
    width: auto;
    position: relative;
  }

  ul.subnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: auto auto;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 48px;
  }

  nav ul.navigation-menu > li:hover .subnav {
    display: grid;
  }

  #locate p {
    width: 40%;
  }
}

/*   */
@import "compass/css3";
@import url("https://fonts.googleapis.com/css?family=Kreon:300,700");

.threed {
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  perspective: 600px; /* Assuming you're using Compass mixin `perspective` */
}

.render {
  align-self: center;
  transition: all 0.3s ease;
  /* transform: rotateX(10deg) rotateZ(0deg); */
  /* Assuming you're using Compass mixin `transform3d` */
  /* font-family: "Kreon", serif; */
  font-weight: 900;
  font-size: 5em;
  color: #d7d7d7;
  text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9d9d9d 1px 4px 1px,
    #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9d9d9d 1px 7px 1px,
    #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 18px 6px, rgba(16, 16, 16, 0.2) 1px 22px 10px,
    rgba(16, 16, 16, 0.2) 1px 26px 35px, rgba(16, 16, 16, 0.4) 1px 30px 65px,
    white -0.15em -0.1em 100px;
}

.render:hover {
  margin-top: -20px;
  text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px, rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px, rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}
@media only screen and (max-width: 767px) {
  .render {
    font-size: 4em;
    gap: 2px;
  }
}

/* welcome card css  */
.e-card {
  margin: 100px auto;
  background-color: #4A98F7;
  /* box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45); */
  position: relative;
  width: 940px;
  height: 430px;
  border-radius: 16px;
  overflow: hidden;
}

.wavee {
  position: absolute;
  width: 1240px;
  height: 750px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -10%;
  margin-top: -29%;
background: rgb(236,244,26);
background: linear-gradient(21deg, rgba(236,244,26,1) 0%, rgba(74,152,247,1) 100%);
}

.infotop {
  background: transparent;
  backdrop-filter: blur(3px);
  text-align: center;
  font-size: 40px;
  position: absolute;
  /* top: -2em;
   */
  left: 0;
  right: 0;
  color: rgb(48, 48, 48);
  font-weight: 600;
  text-shadow: 5px 5px 3px rgba(99, 99, 99, 0.471);
}

.name {
  font-size: 20px;
  font-weight: 150;
  position: relative;
  top: 3em;
  text-transform: lowercase;
  padding: 0 30px;
  background: transparent;
  backdrop-filter: blur(3px);
  text-shadow: 2px 2px 4px rgba(99, 99, 99, 0.471);
}

.wavee:nth-child(2),
.wavee:nth-child(3) {
  top: 210px;
}

.playing .wavee {
  border-radius: 40%;
  animation: wave 150s infinite linear;
}

.wavee {
  border-radius: 40%;
  animation: wave 80s infinite linear;
}

.playing .wavee:nth-child(2) {
  animation-duration: 120s;
}

.wavee:nth-child(2) {
  animation-duration: 120s;
}

.playing .wavee:nth-child(3) {
  animation-duration: 140s;
}

.wavee:nth-child(3) {
  animation-duration: 140s;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
@media only screen and (max-width: 767px) {
  .e-card {
    margin: 15px auto; /* Adjust margin for smaller screens */
    width: 340px;
    height: 430px;
  }

  .infotop {
    font-size: 25px; /* Adjust font size for smaller screens */
    background: transparent;
    backdrop-filter: blur(3px);
    font-weight: bold;
    text-shadow: 5px 5px 3px rgba(99, 99, 99, 0.471);
  }

  .name {
    font-size: 16px; /* Adjust font size for smaller screens */
    top: 3em; /* Adjust position for smaller screens */
    font-weight: bold;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
      "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    background: transparent;
    backdrop-filter: blur(3px);
    text-shadow: 2px 2px 4px rgba(99, 99, 99, 0.471);
  }
}