/* Google fonts import */
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/* CSS Variables */
:root {
  --primary-font: "Open Sans", sans-serif;
  --secondary-font: "Nunito", sans-serif;
  --primary-color: #3a2620; /* dark brown */
  --secondary-color: #aa9581; /* light brown */
  --faded-grey-color: rgb(103 103 103);
  --secondary-color-tag-text: #90662c;
  --secondary-color-tag-background: #fbf0db;
}

/* Global styles */
body {
  font-family: var(--primary-font);
  color: #5d5d5d;
}
/* Sets styling for all links glaobally */
a {
  text-decoration: none;
  color: initial;
}
section {
  padding-bottom: 3rem;

}

/* Removed the default padding on the left and right of 
the containers to all the container spacing to look good */
.container {padding-left: 0;
  padding-right: 0;
}


h1,
h2,
h3,
h4,
h5,
.header-footer {
  font-family: var(--secondary-font);
  color: #333;
}


/* This is the H1 base */
h1 {
  font-weight: 700;
  line-height: 90px;
  margin-bottom: 30px;
}

/* This is the H1 for the homepage */
.h1-homepage {
  font-size: 5em;
}
/* This is the H1 for the interior pages */
.h1-interior {
  font-size: 4em;
}

h2 {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 1.3rem;
}

h2.h2-width-limit {
  max-width: 530px;
}

h3 {
  font-weight: 700;
  font-size: 22px;
}

.navbar-brand {
  font-weight: 900;
  font-size: 24px;
  font-family: "Nunito", "san-serif";
  display: flex;
  justify-content: center;
  color: initial;
}

.navbar-brand img {
  width: 25px;
  height: auto;
  margin-right: 10px;
}
/* Navbar */
#navbar {
  position: relative;
  top: 20px;
}
/* Navbar - Logo */
#navbar .logo {
  width: 30px;
}
/* Navbar - Sets tje styling for the menu text */
#navbar .navbar-nav {
  font-family: "Nunito";
  font-size: 18px;
  font-weight: 700;
}
/* Navbar - Non mobile view - Sets the color of the inactive items */
#navbar .navbar-nav li a {
  color: #333;
  margin-right: 15px;
}
/* Navbar - Non mobile view - Sets the color of the active and hover item */
#navbar .navbar-nav li .active,
#navbar .navbar-nav a:hover {
  color: #a88a1c;
}
/* Navbar - Sets thr background color  */
.navbar-toggler {
  background-color: #fff;
}

/* Navbar - Sets the color of the outline of the mobile hamberger menu when clicked on  */
.navbar-toggler:focus {
  color: #a88a1c;
}
/* Dog's background shape in the header */
header {
  margin-top: -60px; /* Moves the header up to remove the white empty space since the nav is position reletive  */
  padding-top: 100px;

  background-image: url(https://jtraveler.github.io/project-1/assets/images/background-paws.svg);
  background-repeat: no-repeat;
  background-size: 1849px;
  background-position: bottom -193px right -10px;
  overflow: hidden; /* Prevents lottie animation from overspilling causing scrollbars */
}
/* The size of the paragrph in the header */
header p {
  font-size: 20px;
}
/* Dog's background shape in the header */
header .lottie-dog1 {
  background-image: url(https://jtraveler.github.io/project-1/assets/images/homepage-shape-1-for-dog.svg);
  background-repeat: no-repeat;
  background-size: 100% 340px;
  background-position: bottom 50px center;
  overflow: hidden;
  display: flex;
  min-height: 419px;
}
/* The div with the dog in the header */
header .lottie-dog1 img {
  position: relative;
  bottom: 50px;
  width: 300px;
  height: auto;
}
/* Icon Styling */
.icon-shell {
  width: 100px;
  height: 100px;
  border-radius: 65% 35% 32% 68% / 62% 56% 44% 38%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.service-icon i {
  font-size: 35px;
}
/* Icon Background Styling */
.icon-service-bg1 {
  background: rgb(97 104 255 / 11%);
}
.icon-service-bg2 {
  background: rgb(255 79 129 / 12%);
}
.icon-service-bg3 {
  background: rgb(10 191 83 / 14%);
}
.icon-service-bg4 {
  background: rgb(255 153 51 / 16%);
}
.fa-circle-check {
  font-size: 18px;
  color: #2ebf52;
}
.icon-service-icon1 {
  width: 36px;
}
.icon-service-icon2 {
  width: 39px;
}
.icon-service-icon3 {
  width: 39px;
}
.icon-service-icon4 {
  width: 39px;
}

.icon-social-facebook {
  width: 22px;
}

.icon-checkmark {
  width: 18px;
}

.icon-speaker {
  width: 20px;
}
/* Thumbnail Sections  */
.service-thumbnail {
  margin-bottom: 1.5em;
}
/* Large featured image with people inside tof the egg shape */
.image-large-feature img {
  width: 100%;
  height: auto;
  position: relative;
  padding: 40px 40px 0 40px;
  object-fit: contain; /* This helps maintain aspect ratio */
  max-width: 100%;
}
/* Border radius for large images */
.img-br-lg {
  border-radius: 15px;
}
/* Skew Button Styling  */
/* Button - Base - Next add "Big" or or one of the "Small" types */
.button-container {
  display: inline-block;
  transform: skew(-6deg);
  border-radius: 6px;
  height: fit-content;
  transition: background-color 0.2s ease-in-out;
}
/* Button - Big - This requires the "Button - Base" paired in the same div */
.button-container-big {
  background-color: #ffda55; /* For yellow button */
  border: 2px solid #ffda55;
}

/* Hompage - We Make Your Pet Happy section */

#homepage-pet-happy {
  margin-top: -60px;
}

.pawcast-tag-base {
  font-size: 14px;
  padding: 3px 9px;
}

/* Pawcast Tag - This requires the "button-container" paired in the same div */
.button-container-small {
  background-color: var(--secondary-color-tag-background);
}

/* Paw Tag - Text - This requires the "skew-button" and "pawcast-tag-base" - Base paired in the same div */
.button-container-small .skew-small-text {
  color: var(--secondary-color-tag-text);
}

/* Button - Big Hover - This hover is only for the "Button - Big".
In addition, I made it so that if the user hovers over the parent "pawcast-listing", the clid button hover is triggered */
.button-container-big:hover,
.pawcast-listing:hover .button-container-big {
  background-color: white;
  border: 2px solid #e0e0e0;
}
/* Button - Base Details - Next add "Big" or one of the "Small" types */
.button-container .skew-button {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  transform: skew(5deg); /* Counter-transform to keep text straight */
}
/* Button - Details */
.button-container .skew-big {
  padding: 6px 18px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

/* Button - Play Icon */
.button-container .skew-button .play-icon {
  margin-right: 10px;
}

/* Pawcast Section */
#pawcast {
  background-color: #fefef1;
  padding: 70px 0;
}
#pawcast > div {
  gap: 30px;
}
#pawcast .pawcast-header {
  gap: 30px;
  margin-bottom: 10px;
}

#pawcast h2 {
  flex-basis: 398px;
  margin-bottom: 0;
}
/* This div within the "pawcast-listing" div */
.pawcast-listing {
  flex: 1 1 auto;
  margin-bottom: 30px;
}
/* The are below the image in the "pawcast-listing" div */
.pawcast-listing .below-image {
  margin: 1rem 0;
  padding: 0 5px;
  gap: 8px;
}
/* This is the date section in the "paw-listings" div */
.pawcast-listing .date {
  flex-basis: 58px;
  text-align: right;
  font-weight: 500;
  font-size: 14px;
}

/* This is H3 of the "paw-listings" div */
.pawcast-listing h3 {
  margin-bottom: 20px;
  min-height: 50px;
}

/* Voted Best Section  */
#voted-best {
  gap: 30px;
}

/* Voted Best - Lottie animation of the proud dog walking image */
#voted-best .lottie-player {
  margin-bottom: -40px;
}

#voted-best .lottie-player .dog-walk {
  width: 230px;
  height: auto;
}

/* Voted Best - Background of the proud dog walking image */
#voted-best .proud-dog {
  background-image: url(https://jtraveler.github.io/project-1/assets/images/homepage-shape-2-for-dog.svg);
  background-repeat: no-repeat;
  background-size: 100% 419px;
  background-position: center;
  height: 419px;
  padding-bottom: 70px;
  margin-top: 30px;
}
/* Voted Best - The wreath shell */
#voted-best .wreath-review {
  width: 100%;
  max-width: 300px;
}
/* Voted Best - The wreath image */
#voted-best .wreath-review img {
  width: 51px;
}
/* Voted Best - Flipping the wreath image horizontally for use ont he other side*/
#voted-best .wreath-review .wreath-flipped {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
/* Voted Best - The main text */
#voted-best .wreath-review .text {
  font-family: var(--secondary-font);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 200px;
}
/* Voted Best - The secondary text */
.wreath-review .text .who-said-it {
  margin-top: 10px;
  font-size: 14px;
}
#reviews .review-listings-shell {
  gap: 30px;
}
#reviews .review-listings {
  flex: 1 1 300px;
}
#reviews .review-listings .two-cents {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  padding: 20px;
}
#reviews .review-listings .two-cents-header .fa-facebook {
  color: blue;
  font-size: 22px;
}
#reviews .review-listings .two-cents-header .time-stamp {
  color: var(--faded-grey-color);
  font-size: 14px;
}
#reviews .review-listings .two-cents-body {
  margin: 20px 0;
}
#reviews .review-listings .two-cents .name {
  font-size: 14px;
  font-weight: 600;
}
#reviews .review-listings .two-cents .username {
  font-size: 14px;
  color: var(--faded-grey-color);
}
#reviews .review-listings .two-cents .stars {
  width: 15px;
  height: 15px;
  flex-basis: 100px;
}

/* Form styling on the Contact page */

#contact-container h2 {
  margin-bottom: 30px;
}
/* Form Label */
.form-label {
  font-weight: 500;
}
/* Form Fields and Select Fields */
.form-control,
.form-select {
  border-radius: 30px;
  padding: 10px;
  margin-bottom: 20px;
  color: inherit;
}
/* Set the min-height of the message box in the form */
textarea.form-control {
  min-height: 200px;
}

/* Contact Page - Left Side */
.contact-left-side {
  display: flex;
  flex-direction: column;
  padding-bottom: 25px;
}

/* Contact Page - Happy guy shell */
.contact-left-side .happy-guy-shell {
  height: 315px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  margin-top: auto;
}

/* Contact Page - Happy guy */
.contact-left-side .happy-guy {
  position: absolute;
}

/* Contact Page - Happy guy - image */
.contact-left-side .happy-guy img {
  height: 310px;
}

/* Contact Page - Happy guy background */
.contact-left-side .happy-guy-background {
  background-color: #fbefd0;
  border-radius: 30px;
  height: 88%;
  margin-top: auto;
  width: 100%;
  background-image: url(https://jtraveler.github.io/project-1/assets/images/background-paws-bright.svg);
  background-repeat: no-repeat;
  background-size: 570px;
  background-position: center;
}

/* Success Page - Evelope airplane lottie */
.mail-airplane-lottie {
  margin-top: -150px;
  background-image: url(https://jtraveler.github.io/project-1/assets/images/homepage-shape-2-for-dog.svg);
  background-repeat: no-repeat;
  background-size: 100% 339px;
  background-position: center;
  height: 519px;
  padding-top: 20px;
}

/* Pawcast page - Walkman lottie */
.pawcast-walk-lottie {
  margin-top: -100px;
  background-image: url(https://jtraveler.github.io/project-1/assets/images/homepage-shape-2-for-dog.svg);
  background-repeat: no-repeat;
  background-size: 100% 339px;
  background-position: center;
  height: 519px;
  padding-top: 30px;
  padding-bottom: 50px;
}

/* About page - Dog kiss lottie */
.dog-kiss-lottie {
  margin-top: -70px;
  background-image: url(https://jtraveler.github.io/project-1/assets/images/homepage-shape-2-for-dog.svg);
  background-repeat: no-repeat;
  background-size: 100% 339px;
  background-position: center;
  height: 419px;
  max-width: 419px;
  overflow: hidden;
}
/* About page - Dog kiss lottie player */
.dog-kiss-lottie dotlottie-player {
  -moz-transform: scaleX(-1); /* Flip horizotally */
  -webkit-transform: scaleX(-1); /* Flip horizotally */
  -o-transform: scaleX(-1); /* Flip horizotally */
  transform: scaleX(-1); /* Flip horizotally */
  -ms-filter: fliph; /*IE* -  Flip horizotally */
  filter: fliph; /*IE - Flip horizotally */
  width: 137%;
  height: 137%;
  margin-left: -106px;
  margin-top: -55px;
}

.staff-member-shell {
  flex-wrap: wrap;
  gap: 30px;
}

.staff-member {
  border-radius: 15px;

  min-height: 300px;
  margin-top: 30px;
  flex: 1 1 auto;
}

.staff-member .profile-photo img {
  border-radius: 10px;
  margin-bottom: 15px;
  width: 100%;
  border-radius: 65% 35% 32% 68% / 62% 56% 44% 38%;
}

.staff-footer {
  align-items: center;
  text-align: center;
}
.staff-name {
  font-weight: 600;
  font-size: 16px;
}

.staff-title {
  color: rgb(148, 148, 148);
  font-size: 14px;
}

/* About Page - About Our Services */

#about-our-services {
  margin-top: 80px;
}

#about-our-services .icon-shell {
  margin-bottom: 0;
}

#about-our-services h3 {
  font-size: 26px;
}


/* Pawcast Modal - Sets background color to white */
.ratio-16x9 {

  background-color: white !important;
}


/* Pawcast Modal - Sets border radius for whole container */
.carousel-inner {
  border-radius: 15px;
}

/* Pawcast Modal - close button background to be transparent */
.modal-body button {
  background: transparent!important;
}

/* Pawcast Modal - changes color of the svg close button */
.modal-body button svg {
  
  fill: rgb(42, 42, 42);
}


/* Pawcast Modal - Make close button to be full opacity */
.modal-body .btn-close {

  opacity: 1 !important;
}

footer {
  background-color: #e6e6e6;
  min-height: 200px;
}

footer .header-footer {
  font-family: var(--secondary-font);
  font-size: 18px;
  font-weight: 800;
  display: block;
}

footer .address {
  text-indent: -30px;
  padding-left: 30px;
}

footer .address img {
  margin-right: 6px;
}


/* Shell for the footer links so that the links are responsive */
footer .footer-nav-links {
display: flex;
gap: .2em;
flex-wrap: wrap;
}

/* Set width limitation of footer links */
footer .footer-nav-links p {
  flex-basis: 100px;
  }

/* Official Break Point - XXL devices (1400px and UP!) */
@media screen and (min-width: 1400px) {
  /* Sets max width for odd number of items in a column for this screensize to make
  sure they appear to be the same width as even numbered items within column */
  .odd-column-fix {
    max-width: 301px;
  }
}

/* Official Break Point - XL devices (1200px - 1400px) */
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  /* Sets max width for odd number of items in a column for this screensize to make
  sure they appear to be the same width as even numbered items within column */
  .odd-column-fix {
    max-width: 256px;
  }
}

/* XL Large devices (1200px XL screens only) */
@media screen and (min-width: 1200px) {
  /* Sets the width of the dog background shape for the mobile screens */
  header .lottie-dog1 {
    background-size: 100% 360px;
    /* The width and height is needed since the lottie is loading last, the layout won't shift */
    width: 570px;
    height: 570px;
  }
}

/* Official Break Point - L devices (992px - 1200px) */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  /* Sets max width for odd number of items in a column for this screensize to make
  sure they appear to be the same width as even numbered items within column */
  .odd-column-fix {
    max-width: 292px;
  }
}

/* Official Break Point - M devices (768px - 992px) */
@media screen and (min-width: 768px) and (max-width: 992px) {
  /* Sets max width for odd number of items in a column for this screensize to make
  sure they appear to be the same width as even numbered items within column */
  .odd-column-fix {
    max-width: 333px;
  }
}


/* Custom Break Point - For the dog lottie on the homepage for the tablet view (576px - 992px) */
@media screen and (min-width: 576px) and (max-width: 992px) {
  .lottie-dog1 {
    position:relative;
    top: -45px;
  }
}


/* Custom Break Point - For the homepage H1 at the tablet view (390px - 992px) */
@media screen and (min-width: 390px) and (max-width: 992px) {
  .h1-homepage {
    font-size: 4.5em;
    line-height: 80px;
  }
}


/* Large devices (small laptops, 992px and BELOW!) */
@media screen and (max-width: 992px) {
  .image-large-feature {
    order: 2;
  }

  .staff-member-shell {
    order: 3;
  }
  /* Homepage - Pets Happy Section - Styling the Image */
  .image-large-feature img {
    max-width: 400px;
    margin: 0 auto;
    display: block;
  }

  /* Making the dog walk reward look better for this view */
  #voted-best .proud-dog .container  {
    padding: 30px;
  }

  /* Making the dog walk wreath look better for this view */
  #voted-best .wreath-review img {
    width: 38px;
  }

  /* Making the dog walk rewarder look better for this view */
  #voted-best .wreath-review .text .who-said-it {
    font-size: 13px;
  }
}

/* For 770px screens only */
@media screen and (max-width: 770px) {
  /* Removing the min-height restriction of the H3 of the "paw-listings" div */
  .pawcast-listing h3 {
    min-height: auto;
  }

  /* Adding some spacing at the bottom of the "paw-listings" div */
  .pawcast-listing {
    margin-bottom: 30px;
  }

  /* Removing spacing at the bottom of the "paw-listings" div */
  .pawcast-listing:last-child {
    margin-bottom: 0;
  }
}

/* Custom break point*/
@media screen and (max-width: 576px) {


  /* hides the dog lottie on the homepage */
  .lottie-dog1 {
    display: none !important;
  }

  /* Adding extra padding ont he left and right to all of the containers for the mobile view */
  .side-spacing, header {

    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Official Breakpoint - For 390px screens only */
@media screen and (max-width: 390px) {

  

  /* This is for the proud dog Lottie only to move it upward on screen sizes 380 width and below */
  #voted-best .proud-dog {
    margin-top: -45px;
  }

  .h1-homepage {

    font-size: 4.0em;
    line-height: 80px;
  }
}