/*
Theme Name: Emergency Home Alone Pet Card 2025
Author: Les Sturgeon
Version: 1.0 
*/
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
  font-family: "Cabin", sans-serif;
  color: black;
  font-size: 18px;
}
a {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: #00aacc;
}
.boxShadow {
  -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}
.textShadow {
  text-shadow: 4px 3px 0 #000;
}
.textShadowGrey {
  text-shadow: 4px 3px 0 grey;
}
.whiteText {
  color: white;
}
.center {
  text-align: center;
}
.alignRight {
  text-align: right;
}
.redText {
  color: darkred;
}
.wave-container {
  background-color: #b3f5bd;
  position: relative;
}
.wave-container::before {
  content: "";
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 20vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%233cafb5'/></svg>");
}
@media (max-width: 850px) {
  .wave-container::before {
    height: 30px;
  }
}
.wave-container2 {
  background-color: #b3caf5;
  position: relative;
}
.wave-container2::before {
  content: "";
  width: 100%;
  height: 29px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 16vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 0C22.4434 -1 28.9842 2 55 24C94.1849 54 121.997 57 158.5 58C198.5 60 200 44 240 52C280 59 320 89 360 89C400 89 440 59 480 54C520 49 560 69 600 84C640 99 680 109 720 114C760 119 800 119 840 104C880 89 920 59 960 62C1000 64 1040 99 1080 94C1120 89 1127.5 59 1147.5 37C1171.48 11 1185.65 0 1200 0V134H1180C1160 134 1120 134 1080 134C1040 134 1000 134 960 134C920 134 880 134 840 134C800 134 760 134 720 134C680 134 640 134 600 134C560 134 520 134 480 134C440 134 400 134 360 134C320 134 280 134 240 134C200 134 160 134 120 134C80 134 40 134 20 134H0V0.0103865Z' fill='%23e5cdf6'/></svg>");
}
@media (max-width: 850px) {
  .wave-container2::before {
    height: 14.5px;
  }
}
.wave-container3 {
  background-color: #e5cdf6;
  position: relative;
}
.wave-container3::before {
  content: "";
  width: 100%;
  height: 29px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 16vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 0C22.4434 -1 28.9842 2 55 24C94.1849 54 121.997 57 158.5 58C198.5 60 200 44 240 52C280 59 320 89 360 89C400 89 440 59 480 54C520 49 560 69 600 84C640 99 680 109 720 114C760 119 800 119 840 104C880 89 920 59 960 62C1000 64 1040 99 1080 94C1120 89 1127.5 59 1147.5 37C1171.48 11 1185.65 0 1200 0V134H1180C1160 134 1120 134 1080 134C1040 134 1000 134 960 134C920 134 880 134 840 134C800 134 760 134 720 134C680 134 640 134 600 134C560 134 520 134 480 134C440 134 400 134 360 134C320 134 280 134 240 134C200 134 160 134 120 134C80 134 40 134 20 134H0V0.0103865Z' fill='%2392bda5'/></svg>");
}
@media (max-width: 850px) {
  .wave-container3::before {
    height: 14.5px;
  }
}
.wave-container4 {
  background-color: #92bda5;
  position: relative;
}
.wave-container4::before {
  content: "";
  width: 100%;
  height: 29px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 16vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 0C22.4434 -1 28.9842 2 55 24C94.1849 54 121.997 57 158.5 58C198.5 60 200 44 240 52C280 59 320 89 360 89C400 89 440 59 480 54C520 49 560 69 600 84C640 99 680 109 720 114C760 119 800 119 840 104C880 89 920 59 960 62C1000 64 1040 99 1080 94C1120 89 1127.5 59 1147.5 37C1171.48 11 1185.65 0 1200 0V134H1180C1160 134 1120 134 1080 134C1040 134 1000 134 960 134C920 134 880 134 840 134C800 134 760 134 720 134C680 134 640 134 600 134C560 134 520 134 480 134C440 134 400 134 360 134C320 134 280 134 240 134C200 134 160 134 120 134C80 134 40 134 20 134H0V0.0103865Z' fill='%23ffffff'/></svg>");
}
@media (max-width: 850px) {
  .wave-container4::before {
    height: 14.5px;
  }
}
form {
  margin: 5%;
}
fieldset {
  border: 2px dashed grey;
  padding: 20px;
  border-radius: 20px;
}
label {
  font-size: clamp(1rem, 1.6vw, 2rem);
  margin: 10px 0;
}
legend {
  border: 2px dashed grey;
  padding: 20px;
  border-radius: 20px;
  margin-left: 5%;
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.formInput {
  outline: 0;
  border: 2px solid rgba(0, 0, 0, 0.7);
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  width: 95%;
  border-radius: 10px;
  padding-left: 10px;
  margin: 3px 0;
}
.formInputSmall {
  outline: 0;
  border: 2px solid rgba(0, 0, 0, 0.7);
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  width: 70%;
  border-radius: 10px;
  padding-left: 10px;
  margin: 3px 0;
}
.formInput:focus,
.formInputSmall:focus {
  border: 2px solid rgba(0, 0, 0, 0.7);
  background-color: #B3F5BD;
}
.button {
  background-color: #B3F5BD;
  border: 2px solid rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 5px 20px;
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.button:hover {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}
.buttonGreen {
  background-color: #12563F;
  color: white;
  border: 2px solid rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 5px 20px;
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
}
.buttonGreen:hover {
  background-color: rgba(0, 0, 0, 0.7);
  background-color: white;
  color: #12563F;
}
.heroArea {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background-color: #B3F5BD;
  padding-bottom: 40px;
}
.heroArea .dog {
  width: 80%;
  margin: 20px auto;
}
.heroArea .dog img {
  width: 100%;
  border-radius: 50%;
  border: 5px solid white;
}
.heroArea .flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.heroArea .heroHeading {
  font-size: clamp(2rem, 3.1vw, 3rem);
  text-align: center;
  padding: 20px;
}
.heroArea .heroSubHeading {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
  padding: 0 20px;
}
@media screen and (max-width: 900px) {
  .heroArea {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #B3F5BD;
    padding-bottom: 40px;
  }
}
.creditCard {
  background-color: #3CAFB5;
}
.creditCard .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.creditCard .grid2 div {
  text-align: center;
  font-size: clamp(1rem, 1.6vw, 2rem);
  margin: 1%;
}
.creditCard .grid2 div img {
  width: 80%;
}
.creditCard .title {
  text-align: center;
  font-size: clamp(2rem, 3.1vw, 3rem);
}
.creditCard .subTitle {
  text-align: center;
  font-size: clamp(1rem, 1.6vw, 2rem);
  color: white;
}
@media screen and (max-width: 900px) {
  .creditCard .grid2 {
    grid-template-columns: 1fr;
  }
}
.enquiryForm {
  background-color: #92bda5;
  padding-top: 50px;
}
.enquiryForm .dice {
  width: 5ch;
  text-align: center;
}
.enquiryForm .diceColor {
  font-size: clamp(1rem, 1.6vw, 2rem);
  color: red;
  font-size: clamp(2rem, 3.1vw, 3rem);
}
.enquiryForm h1 {
  font-size: clamp(2rem, 3.1vw, 3rem);
}
.enquiryForm .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.enquiryForm .grid2 div:nth-child(1) {
  margin: 0 auto;
  width: 60%;
  text-align: center;
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
}
.enquiryForm .grid2 div:nth-child(1) img {
  width: 100%;
  border: 10px solid white;
  border-radius: 50%;
}
@media screen and (max-width: 900px) {
  .enquiryForm .grid2 {
    grid-template-columns: 1fr;
  }
}
.cookiesDescription {
  margin: 5%;
  background-color: #E5CDF6;
  border-radius: 20px;
}
.cookiesDescription .heading {
  margin: 2%;
  padding: 5px 0;
  border-radius: 10px;
  font-size: clamp(2rem, 3.1vw, 3rem);
  text-align: center;
}
.cookieFixed {
  position: fixed;
  bottom: 5px;
  left: 5px;
  background-color: #E5CDF6;
  border-radius: 20px;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  z-index: 2;
}
.cookieForm {
  margin: 0;
  padding: 20px;
}
.cookieButton {
  float: right;
  width: 150px;
  margin-bottom: 20px;
  text-align: center;
  border: 0;
  outline: 0;
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  padding: 3px;
  background-color: white;
  color: black;
  border-radius: 20px;
  border: 4px solid rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}
.cookieButton a {
  color: black !important;
}
.cookieButton:hover {
  background-color: #B3F5BD;
}
.cookiesText {
  font-size: clamp(1rem, 2.1vw, 3rem);
  width: 90%;
  margin: 0 auto;
}
.cookiesBold {
  font-weight: bold;
}
.how {
  background-color: #E5CDF6;
  padding-top: 20px;
}
.how h1 {
  font-size: clamp(2rem, 3.1vw, 3rem);
  text-align: center;
}
.how .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.how .grid2 div:nth-child(1) {
  font-size: clamp(1rem, 1.6vw, 2rem);
  padding: 20px;
}
.how .grid2 div:nth-child(1) ul {
  list-style: none;
  text-align: center;
  margin: 20px 0;
}
.how .grid2 div:nth-child(1) .wallet {
  text-align: center;
}
.how .grid2 div:nth-child(2) {
  font-size: clamp(1rem, 1.6vw, 2rem);
  padding: 20px;
}
.how .grid2 div:nth-child(2) .smallText {
  padding: 10px;
  text-align: left;
}
.how .grid2 div:nth-child(2) ul {
  list-style: decimal;
  padding: 0 20px;
}
.how .grid2 div:nth-child(2) li {
  padding: 10px;
}
@media screen and (max-width: 900px) {
  .how .grid2 {
    grid-template-columns: 1fr;
  }
}
.white {
  background-color: white;
  color: black;
  padding: 10px 20px;
  border: 2px solid grey;
  border-radius: 10px;
}
.yellow {
  background-color: #fdfbc1;
  color: black;
  padding: 10px 20px;
  border: 2px solid grey;
  border-radius: 10px;
}
.green {
  background-color: #d1fccf;
  color: black;
  padding: 10px 20px;
  border: 2px solid grey;
  border-radius: 10px;
}
.chooseColours {
  background-color: #E5CDF6;
  margin: 2%;
  border-radius: 20px !important;
  padding: 20px;
}
.chooseColours .leftSide {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
}
.chooseColours .leftSide .formInput {
  width: 15ch;
}
.chooseColours .rightSide {
  padding: 0 20px;
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chooseColours .rightSide ul {
  list-style: none;
}
@media screen and (max-width: 900px) {
  .chooseColours {
    border-radius: 0;
    padding: 10px 0;
  }
}
.smallCreditCard img {
  width: 50%;
}
#responsive-menu-button {
  border-radius: 10px;
}
.WPMenu {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
  border-top: 4px solid grey;
  border-bottom: 4px solid grey;
  padding: 5px;
  position: sticky;
  top: 0;
  background-color: pink;
  z-index: 9999;
}
.WPMenu ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style-type: none;
}
.WPMenu1 {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
  border-top: 4px solid grey;
  border-bottom: 4px solid grey;
  padding: 5px;
  position: sticky;
  top: 0;
  background-color: pink;
  z-index: 9999;
}
.gridHeader {
  display: grid;
  grid-template-columns: 150px auto;
}
.gridHeader img {
  width: 100%;
  border-radius: 50%;
  padding: 10px;
  width: 0 auto;
}
.gridHeader .title {
  font-size: clamp(2rem, 3.1vw, 3rem);
  color: #92bda5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-shadow: 2px 2px 0px #000000;
  padding: 0 20px;
}
.line {
  border-bottom: 4px solid grey;
}
.lineDotted {
  border-bottom: 4px dashed grey;
}
.smallText {
  font-size: clamp(1rem, 1.6vw, 2rem);
  text-align: center;
}
.largeText {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
}
.boxShadow {
  -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  border-radius: 20px;
}
.boxPrivacy {
  margin: 5%;
}
.messageSent {
  background-color: #B3F5BD;
  margin: 1%;
  border-radius: 20px;
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
}
.grid2,
.grid2-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 900px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 1400px) {
  .container {
    width: 1400px;
    margin: 0 auto;
  }
}
footer {
  text-align: center;
}
.buyNow {
  background-color: #B3F5BD;
  margin: 2%;
  border-radius: 20px !important;
  padding: 20px;
}
.buyNow .leftSide {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
}
.buyNow .leftSide .formInput {
  width: 15ch;
}
.buyNow .rightSide {
  padding: 0 20px;
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buyNow .rightSide ul {
  list-style: none;
}
@media screen and (max-width: 900px) {
  .buyNow {
    border-radius: 0;
    padding: 10px 0;
  }
}
.creditCardDisplay {
  width: 90%;
  margin: 0 auto;
  border: 10px solid grey;
  border-radius: 20px;
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  padding: 0 20px;
}
.creditCardDisplay .grid2 {
  font-size: clamp(1rem, 1.6vw, 2rem);
  text-align: left;
}
.creditCardDisplay .grid2-1 {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: left;
}
.creditCardDisplay .vetGrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px;
  font-size: clamp(1rem, 1.6vw, 2rem);
}
@media screen and (max-width: 600px) {
  .creditCardDisplay .grid2-1 {
    font-size: clamp(1rem, 1.6vw, 2rem);
    text-align: left;
  }
}
.rightSideC2 {
  font-size: clamp(1rem, 1.6vw, 2rem);
  text-align: center;
  padding: 0 20px;
}
.rightSideC2 h1 {
  font-size: clamp(2rem, 3.1vw, 3rem);
  text-align: center;
  padding-top: 10px;
}
.rightSideC2 h2 {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  text-align: center;
  padding: 10px 20px 0 20px;
}
.sumUp img {
  border: 4px solid black;
  border-radius: 10px;
}
.whiteBG {
  background-color: white;
  padding: 0px 1ch;
  border-radius: 10px;
}
footer {
  text-align: center;
}
.checkDetails {
  background-color: #B3F5BD;
  margin: 2%;
  border-radius: 20px !important;
  padding: 20px;
  text-align: center;
}
.checkDetails h1 {
  font-size: clamp(2rem, 3.1vw, 3rem);
  text-align: center;
}
.checkDetails .leftSide,
.checkDetails .rightSide {
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.checkAndFinish {
  background-color: #3CAFB5;
  margin: 2%;
  border-radius: 20px !important;
  padding: 20px;
  text-align: center;
}
.checkAndFinish h1 {
  font-size: clamp(2rem, 3.1vw, 3rem);
}
.checkAndFinish h2 {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  color: wheat;
}
.checkAndFinish .leftSide,
.checkAndFinish .rightSide {
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.cardDetails {
  background-color: #E5CDF6;
  margin: 2%;
  border-radius: 20px !important;
  padding: 20px;
  text-align: center;
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.cardDetails h1 {
  font-size: clamp(2rem, 3.1vw, 3rem);
}
.cardDetails .creditCardDisplay div {
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.creditCardDisplay1 {
  margin: 2%;
  border: 4px solid grey;
  border-radius: 20px;
}
.creditCardDisplay1 div {
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.creditCardDisplay1 .formInputSmall {
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.grid7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}