body, html {
  padding: 0;
}

/* --------------------------------------------- Colors */

.white {
  color: #fff;
}

.yellow {
  color: #fbc02d;
}

.blue {
 color: #4fc3f7;
}

.dark-blue {
  color: #005c86;
}

/* --------------------------------------------- Fonts */

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}


.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* --------------------------------------------- Navbar */

nav {
  height: 120px;
  border-bottom: 5px solid #fbc02d;
  transition: .3s ease-in-out;
}

.logo {
  height: 90px;
  padding-left: 12px;
}

.navbar-brand {
  padding-left: 12px;
  letter-spacing: 2px;
}

.navbar-brand:hover h1 {
  transition: .2s ease-in-out;
}

.navbar-brand:hover h1 {
  color: #fbc02d;
}

.nav-link {
  color: #005c86;
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition: .2s ease-in-out;
}

.nav-link:hover, .nav-active {
  color: #fbc02d;
}

.btn-blue, .btn-yellow {
  color: #005c86;
  text-decoration: none;
  border-radius: 100px;
  transition: .2s ease-in-out;
}

.btn-blue {
  background-color: #4fc3f7;
}

.btn-yellow {
  background-color: #fbc02d;
}

.btn-blue:hover {
  background-color: #fbc02d;
}

.btn-yellow:hover {
  background-color: #4fc3f7;
}

.navbar-toggler {
  border: none;
  color: #fbc02d;
}

.fa-bars:hover {
  color: #4fc3f7;
}

.navbar-collapse {
  text-align: right;
  padding-right: 12px;
}

/* --------------------------------------------- Padding / Margin */

.pt-first-row {
  padding-top: 95px;
}
.mt-rem {
  margin-top: 1.5rem;
}
.mb-rem {
  margin-bottom: 1.5rem;
}
.pb-rem {
  padding-bottom: 1.5rem;
}
.pt-rem {
  padding-top: 1.5rem;
}

/* --------------------------------------------------------------------------- Index */

.hero-bg {
  background: url("/media/our_services.jpg") center center;
  background-size: cover;
}

.hero-bg-wrapper {
  background: rgba(0, 92, 134, 0.3);
  padding: 8rem 0;
}

.sub-page-hero-bg {
  background: url("/media/domestic_cleaning.jpg") 0% 30%;
  background-size: cover;
}

.title {
  font-size: 3em;
  letter-spacing: 2px;
  margin-top: 1.5rem;
}

.tagline {
  font-size: 1.3em;
}

.header-img {
  margin: 30px 0px;
}

.img-shadow {
  box-shadow: 2px 2px 5px #a1a1a1;
  height: 50vh;
  object-fit: cover;
}

ul {
  display: inline-block;
}

/* --------------------------------------------- Sup Pages */

.sub-page-bg {
  background-color: #feecc0;
}

.card {
  background-color: #feecc0;
  border: none;
  border-radius: 44px;
}

/* --------------------------------------------- Contact */

.form-control {
  border-radius: 20px;
  padding: .5rem 1rem;
  border: none;
  background-color: #fff;
  transition: .2s ease-in-out;
}

.form-control:focus {
  background-color: #fbc02d;
  box-shadow: none;
}

textarea {
  width: 100%;
  padding: 5px;
}

button {
  border: none;
}

/* --------------------------------------------- Footer */

.footer {
  border-top: 5px solid #fbc02d;
}

.logo-footer {
  height: 65px;
}

.footer-logo {
  text-decoration: none;
  letter-spacing: 2px;
}

.footer-link {
  text-decoration: none;
  color: #005c86;
  transition: .2s ease-in-out;
}

.footer-link:hover {
  color: #fbc02d;
}

.footer-bottom-bg {
  background: #feecc0;
}

/* --------------------------------------------- Media Queries */

@media (max-width: 575px) {
  .hidden-small {
    display: none;
  }
}

@media (min-width: 576px) {
  .welcome-img-mobile {
    object-position: 50% 65%;
  }
  .mt-rem {
    margin-top: 2rem;
  }
  .mb-rem {
    margin-bottom: 3rem;
  }
  .pb-rem {
    padding-bottom: 3rem;
  }
  .pt-rem {
    padding-top: 2rem;
  }
}

@media (min-width: 768px) {
  .logo-footer {
    height: 80px;
  }
  .pt-first-row {
    padding-top: 120px;
  }
  .pt-rem {
    padding-top: 1.5rem;
  }
  .title {
    margin-top: 0px;
  }
  .footer-logo {
    top: -82px;
    left: 100px;
  }
}

@media (min-width: 1200px) {
  .logo {
    padding-left: 115px;
  }
  .navbar-nav {
    padding-right: 85px;
  }
  .mb-rem {
    margin-bottom: 5rem;
  }
  .pb-rem {
    padding-bottom: 5rem;
  }
  .pt-rem {
    padding-top: 4rem;
  }
}

@media (min-width: 1400px) {
  .ps-rem {
    padding-left: 9rem;
  }
  .logo {
    padding-left: 130px;
  }
  .navbar-nav {
    padding-right: 100px;
  }
  .img-shadow {
    height: 40vh;
  }
}

@media screen and (min-width: 1800px) {
  .padding-widescreen {
      padding-left: 5%;
      padding-right: 5%;
  }
  .img-shadow {
    height: 35vh;
  }
}

@media (min-width: 2000px) {
  .padding-widescreen {
    padding-left: 15%;
    padding-right: 15%;
  }
  .img-shadow {
    height: 30vh;
  }
}

@media (min-width: 768px) {
  .m-sm-hidden {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .p-sm-hidden {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

@media (min-width: 0px) and (max-width: 767px) {
  .m-lg-hidden {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .p-lg-hidden {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}