* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}
.header {
  min-height: 60vh;
  width: 100%;
  background-image:
    linear-gradient(rgba(4, 9, 30, 07), rgba(4, 9, 30, 0.7)),
    url(images/Bio/seamless-background-cleaning-service.png);
  background-position: center;
  background-size: cover;
  position: relative;
}
nav {
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: center;
}
nav img {
  width: 180px;
}
.nav-links {
  flex: 1;
  text-align: right;
}
.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 9px 12px;
  position: relative;
}
.nav-links ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}
.nav-links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background: aquamarine;
  display: block;
  margin: auto;
  transition: 0.5s;
}
.nav-links ul li:hover::after {
  width: 100%;
}
.text-box {
  width: 90%;
  color: whitesmoke;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.text-box h1 {
  font-size: 62px;
}
.text-box p {
  margin: 10px 0px 40px;
  font-size: 20px;
  color: whitesmoke;
}
.hero-btn {
  display: inline-block;
  text-decoration: none;
  color: rgb(214, 238, 230);       /* soft pale teal-white text */
  border: 1px solid rgb(45, 122, 98); /* mid teal border */
  padding: 12px 34px;
  font-size: 15px;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.hero-btn:hover {
  border: 1px solid rgb(214, 238, 230); /* border lightens to match text */
  background: rgb(15, 56, 42);          /* deep teal-green fill, same family */
  color: rgb(255, 255, 255);
  transition: 1s;
}


nav .fa {
  display: none;
}

@media (max-width: 700px) {
  .text-box h1 {
    font-size: 20px;
  }
  .nav-links ul li {
    display: block;
  }
  .nav-links {
    position: fixed;
    background: rgb(41, 121, 94);
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 1s;
  }
  nav .fa {
    display: block;
    color: white;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
  .nav-links ul {
    padding: 30px;
  }
}

/* Services */
.services {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 100px;
}
h1 {
  font-size: 36px;
  font-weight: 600;
}

p {
  color: black;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  padding: 10px;
}
.row {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}
.services-col {
  flex-basis: 31%;
  background: #fff3f3;
  border-radius: 10px;
  margin-bottom: 5%;
  padding: 20px 12px;
  box-sizing: border-box;
  transition: 0.5s;
}
h3 {
  text-align: center;
  font-weight: 600;
  margin: 10px;
}
.services-col:hover {
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
}
@media (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

/* location */

.location {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
}
.location-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.location-col img {
  width: 100%;
  display: block;
}

.layer {
  background: transparent;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}
.layer:hover {
  background: rgba(226, 0, 0, 0.7);
}
.layer h3 {
  width: 100%;
  font-weight: 500;
  color: whitesmoke;
  font-size: 26px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  opacity: 0;
  transition: 0.5s;
}
.layer:hover h3 {
  bottom: 49%;
  opacity: 1;
}
/* Facilities */

.Facilities {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 100px;
}
.fac-col {
  flex-basis: 31%;
  border-radius: 10px;
  margin-bottom: 5%;
  text-align: left;
}

.fac-col img {
  width: 100%;
  border-radius: 10px;
}

.fac-col p {
  padding: 0;
  text-align: center;
  font-size: 20px;
}

.fac-col h3 {
  margin-top: 16px;
  margin-bottom: 15px;
  text-align: center;
}

/* Testimonials */
.testimonials {
  width: 80%;
  margin: auto;
  padding-top: 100px;
  text-align: center;
}
.testimonial-col {
  flex-basis: 44%;
  border-radius: 10px;
  margin-bottom: 5%;
  text-align: left;
  background: #fff3f3;
  padding: 25px;
  cursor: pointer;
  display: flex;
}
.testimonial-col img {
  height: 50px;
  margin-left: 5px;
  margin-right: 30px;
  border-radius: 50%;
}
.testimonial-col p {
  padding: 0;
}
.testimonial-col h3 {
  margin-top: 15px;
}
.testimonial-col .fa {
  color: black;
}

@media (max-width: 700px) {
  .testimonial-col img {
    margin-left: 0px;
    margin-right: 15px;
  }
}

/* CTA */
.cta {
  margin: 100px auto;
  width: 80%;
  background-image: url(images/Bio/seamless-background-cleaning-service.1.png);
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  text-align: center;
  padding: 100px 0;
}
.cta h1 {
  color: rgb(18, 6, 6);
  margin-bottom: 40px;
  padding: 0;
}
@media (max-width: 700px) {
  .cta h1 {
    font-size: 24px;
  }
}
/* footer */
.footer {
  width: 100%;
  text-align: center;
  padding: 30px 0;
}
.footer h4 {
  margin-bottom: 25px;
  margin-top: 20px;
  font-weight: 600;
}
.icons .fa-brands {
  color: black;
  margin: 13px;
  cursor: pointer;
  padding: 18px 0;
  font-size: 30px;
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease;
}
.icons .fa-solid {
  color: black;
  margin: 13px;
  cursor: pointer;
  padding: 18px 0;
  font-size: 30px;
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease;
}
.icons .fa-brands:hover {
  color: rgb(61, 187, 143);
  transform: translateY(-4px) scale(1.15);
}
.icons .fa-solid:hover {
  color: rgb(61, 187, 143);
  transform: translateY(-4px) scale(1.15);
}

/* About Us page */
.header {
  height: 50vh;
  width: 100%;
  background-image:
    linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
    url(images/Bio/IMG-01.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  color: whitesmoke;
}
.header h1 {
  margin-top: 100px;
}
.about-us {
  width: 80%;
  margin: auto;
  padding-top: 80px;
  padding-bottom: 50px;
}
.about-us ul {
  list-style: none;
  margin: 20px 0 0;
  padding-left: 0;
}
.about-us li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 10px;
  line-height: 1.6;
  color: #222;
}
.about-us li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: rgb(12, 31, 24);
  font-size: 1.5rem;
}
.about-us .row {
  gap: 50px;
}
.about-col {
  flex-basis: 48%;
  padding: 30px 20px;
}
.about-col img {
  width: 100%;
}
.about-col h1 {
  padding-top: 0;
}
.about-col p {
  padding: 15px 0;
}
.green-btn {
  border: 1px black;
  background: transparent;
  color: rgb(19, 45, 37);
}
.green-btn:hover {
  color: whitesmoke;
}

/* Our Services */
.header {
  height: 50vh;
  width: 100%;
  background-image:
    linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
    url(images/Bio/IMG-02.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  color: whitesmoke;
}

/* Blog-Cont */
/* Blog Content */
.blog-content {
  width: 80%;
  margin: auto;
  padding: 60px 0;
}

.blog-content .row {
  display: flex;
  justify-content: space-between;
}

.blog-left {
  flex-basis: 65%;
}

.blog-left img {
  width: 100%;
  border-radius: 6px;
}

.blog-left h2 {
  color: black;
  font-weight: 600;
  margin: 30px 0;
}

.blog-left p {
  color: #666; /* Improved contrast for better readability */
  padding: 0;
  line-height: 1.6;
}

.blog-right {
  flex-basis: 32%;
}

.blog-right h3 {
  background: black;
  color: whitesmoke;
  padding: 10px 15px;
  font-size: 18px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.blog-right div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #555;
  padding: 10px 8px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

/* Giscus Comment Box */
.comment-box {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  margin: 50px 0;
  padding: 20px 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.comment-box h3 {
  text-align: left;
  font-size: 20px;
  color: #222;
  margin-bottom: 15px;
}

.comment-box iframe.giscus-frame {
  width: 100% !important;
  border: none !important;
  margin-top: 10px;
  background: transparent !important;
}

/* Responsive Fixes */
@media (max-width: 700px) {
  .blog-content {
    width: 90%;
    padding: 30px 0;
  }

  .blog-content .row {
    flex-direction: column;
  }

  .blog-left, 
  .blog-right {
    flex-basis: 100%;
  }

  .blog-right {
    margin-top: 40px;
  }

  .sub-header h1 {
    font-size: 24px;
  }
  
  .comment-box {
    padding: 15px;
    margin: 30px 0;
  }
}

/* contact us page */
.location {
  width: 80%;
  margin: auto;
  padding: 80px 0;
}
.location iframe {
  width: 100%;
}
.contact-us {
  width: 80%;
  margin: auto;
}
.contact-col {
  flex-basis: 48%;
  margin-bottom: 30px;
}
.contact-col div {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
.contact-col div a {
  display: contents; /* keeps the <i> as the true flex item so layout above is unaffected */
}
.contact-col div .fa-solid {
  font-size: 30px;
  color:  rgb(28, 38, 39);
  margin: 10px;
  margin-right: 30px;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}
.contact-col div .fa-solid:hover {
  color: rgb(59, 173, 122);
  transform: translateY(-4px) scale(1.15);
}
.contact-col div p {
  padding: 0;
}
.contact-col div h5 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #555;
  font-weight: 400;
}
.contact-col div h5 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.contact-col div h5 a:hover {
  color: orange;
}
.contact-col input,
.contact-col textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 17px;
  outline: none;
  border: 1px solid orange;
  box-sizing: border-box;
}
.form-success-message {
  display: none;
  color: #2e7d32;
  background: #eaf6ec;
  border: 1px solid #b7e1c1;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 12px;
  font-weight: 500;
}

/* Homepage header override
   (fixes: repeated .header rules further up this file were collapsing
   the homepage header's height to 50vh and swapping its background image,
   which pushed the centered hero text box up over the nav bar and
   silently blocked nav link clicks on desktop) */

.header.home-header {
  min-height: 60vh;
  background-image:
    linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
    url(images/Bio/IMG-02.jpg);
}

/* .header.home-header {
  min-height: 60vh;
  background-image:
    linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
    url(images/Bio/seamless-background-cleaning-service.1.png);
} */