@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
      font-family: "Quicksand", sans-serif;

}

body{
    background-color: white;
    width: 100%;
}

/* .img-wrapper img{
    width: 100%;
} */

.hero-section{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.hero-section-img {
  width: 100%;
  height: auto;
}
.img-wrapper img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center; 
  }

  .info-container{
    position: absolute;
    top: 5%;
    /* left: 25%; */
    text-align: center;
  }

   .info{
    color: white;
  }

  .pet-selector-container{
    position: absolute;
    top: 17%;
    /* left: 25%; */
    width: 80%;
    background-color: #f0f8ff63;
  }

  .services-selection-section {
            background-color: #f8f9fac4;
            padding: 40px 0;
        }

        .selection-section {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            padding: 20px;
            margin-bottom: 20px;
            height: 100%;
        }

        .form-label {
            font-weight: 500;
        }

        .search-btn-container {
            display: flex;
            align-items: end;
        }

        .bg-white {
    --bs-bg-opacity: 1;
    background-color: rgb(255 255 255 / 0%) !important;
}

/* About uss */
.about-services-for-you-section .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.services-section{
  display: flex;
  align-items: center;

}

.services-for-you-section{
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* .services-for-you-img-section{
  width: 100%;
} */

.services-for-you-img-section img{
  width: 100%;
  border-radius: 20px;

}

.walking-section , .Training-section{
  display: flex;
  flex-direction: row-reverse;
}

/* sitters-profile.html css */

.hosters-conditions-section{
  display: flex;
}

/* What-we-do section (clean, no paws) */
.wwd-wrap{
  background:#f6f6f7;            /* subtle light grey like the ref */
}

/* Image card */
.wwd-img-wrap{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  background:#fff;
}
.wwd-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  /* nice aspect ratio on mobile; taller on desktop */
  aspect-ratio: 4 / 3;
}
@media (min-width:992px){
  .wwd-img{ aspect-ratio: 16 / 11; }
}

/* Spacing scale like screenshot */
.py-lg-6{ padding-top:4.5rem!important; padding-bottom:4.5rem!important; }

/* --- Navbar layout polish --- */
#navbarMain {
  /* make the collapse a flex container on lg+ so we can center the middle ul */
}
@media (min-width: 992px) {
  #navbarMain {
    display: flex !important;
    align-items: center;
    width: 100%;
  }
  /* center the middle links row on lg+ */
  .navbar-nav.nav-links {
    margin-left: auto !important;
    margin-right: auto !important; /* centers the middle UL */
  }
}

/* Register button styles */
.btn-register {
  border-radius: 999px;
  font-weight: 600;
  padding: .6rem 1.2rem;
}
@media (max-width: 991.98px) {
  /* on tablet/mobile, make the Register CTA full-width and prominent inside the collapse */
  .btn-register {
    display: block;
    width: 100%;
    padding: .85rem 1.2rem;
    font-size: 1rem;
  }
  .nav-cta-wrap {
    padding-top: .5rem;
  }
}

/* Optional: slightly tighter nav-link spacing on lg+ */
@media (min-width: 992px) {
  .navbar .nav-link {
    padding: .5rem .9rem;
  }
}
nav.navbar.navbar-expand-lg.navbar-light.bg-white.px-5.border-bottom {
    padding: 1em !important;
}