@import url('https://fonts.googleapis.com/css2?family=Libertinus+Math&display=swap');

:root{
  --eerih-sand: #b1ab91;
  --eerih-black: #000;
}

/* Keep your font, let Bootstrap handle the rest */
body{
  font-family: 'Libertinus Math', serif;
}

/* Hero keeps your background image + centered card */
.hero{
  min-height: calc(100vh - 90px);
  background-image: url('/pictures/clean office.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 0;
}

.hero-card{
  background: #fefef3;
  border: 2px solid #000;
  border-radius: .75rem;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.10);
  max-width: 850px;
}

/* Reviews band color matches your original */
.reviews-band{
  background: var(--eerih-sand);
  color: #fff;
}

/* Make service cards feel like your originals */
.service-card img{
  height: 180px;
  width: 100%;
  object-fit: cover;
  border-radius: .65rem;
  margin-bottom: .75rem;
}

/* More padding for text area */
.service-card .card-body{
  padding: .25rem .5rem .5rem;
}

/* Footer look */
.footer-dark{
  background: var(--eerih-black);
  color: #fff;
}

.footer-title{
  font-size: 2.25rem;
  font-weight: 700;
}

.footer-heading{
  font-size: 1.75rem;
  font-weight: 700;
}

.footer-link{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--eerih-sand);
  padding-bottom: 2px;
}

.footer-link:hover{
  color: var(--eerih-sand);
  border-bottom-color: #fff;
}

/* Help the navbar-toggler icon show (Bootstrap expects a navbar-light/dark class) */
.navbar .navbar-toggler{
  border-color: rgba(0,0,0,.2);
}
.navbar .navbar-toggler-icon{
  background-image: var(--bs-navbar-toggler-icon-bg);
}

.navbar-logo{
  height: 60px;          /* logo size */
  width: auto;
  transform: scale(2); /* visually larger without affecting layout */
  transform-origin: left center;
}

.navbar .nav-link{
  font-size: 1.2rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.navbar .btn{
  font-size: 1.2rem;
  padding: .5rem 1.25rem;
}

.navbar{
  min-height: 64px;
}

.navbar-brand{
  padding: 0;
}
.text-center .mx-auto{
  max-width: 1100px;
}

.service-card{
  padding: .75rem;
  border-radius: .85rem;

  transition: transform 0.18s ease-out,
              box-shadow 0.18s ease-out;
}

.service-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.16),
    0 3px 6px rgba(0,0,0,.10);
}

/* Mobile horizontal scroll for services */
.services-scroll{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}

.services-scroll > .col{
  min-width: 80%;
  scroll-snap-align: start;
}

/* Tablet */
@media (min-width: 768px){
  .services-scroll > .col{
    min-width: 50%;
  }
}

/* Desktop */
@media (min-width: 992px){
  .services-scroll > .col{
    min-width: 25%;
  }
}

/* Service page bands */
.band-sand{
  background: var(--eerih-sand);
  color: #fff;
}

.band-black{
  background: var(--eerih-black);
  color: #fff;
}

/* separator callout cards */
.separator-card{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .85rem;
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
  max-width: 950px;
}

/* readable muted text on dark band */
.text-muted-on-dark{
  color: rgba(255,255,255,.75);
}

/* service detail blocks on black band */
.service-detail{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .85rem;
}

.service_p{
  max-width: 900px;
}

/* Contact form boxed card (3D effect) */
.contact-form{
  background: #fff;
  padding: 2.5rem;
  border-radius: 1rem;

  /* 3D shadow */
  box-shadow:
    0 1rem 2.5rem rgba(0,0,0,.15),
    0 .4rem .8rem rgba(0,0,0,.10);

  border: 1px solid rgba(0,0,0,.06);
}

.contact-form{
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-form:hover{
  transform: translateY(-4px);
  box-shadow:
    0 1.4rem 3rem rgba(0,0,0,.18),
    0 .6rem 1rem rgba(0,0,0,.12);
}

/* Remove default <a> styling for clickable service cards */
.service-link{
  text-decoration: none;
  color: inherit;
  display: block;
}

.service-link:hover,
.service-link:focus,
.service-link:active{
  text-decoration: none;
  color: inherit;
}