/* Reset and box model setup */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body and base styles */
body {
  font-family: "Merriweather", serif;
  font-size: 16px;
  color: #333;
  background-color: #f8f9fa;
  line-height: 1.6;
}

/* Navbar */
.navbar-brand {
  font-size: 24px;
}

.navbar-brand img {
  width: 36px;
  aspect-ratio: 1;
}

/* Hero Section */
.hero-section {
  position: relative;
  background-color: #eeefe7;
}

.hero-section .bg-img,
.contact-us-section .bg-img {
  width: 100%;
  height: 65vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  filter: brightness(0.5);
}

.hero-section * {
  position: relative;
  z-index: 2;
}

.hero-section h1 {
  font-size: 28px;
  color: white;
  font-weight: bold;
}

.hero-section p {
  color: white;
}

.hero-img {
  width: 100%;
  max-width: 1000px;
}

/* Shared Section Background */
.aspiration-section,
.qualities-section {
  background-color: #eeefe7;
}

/* Padding Utility */
.padding-1 {
  height: 300px;
}

/* Typography for Sections */
.aspiration-section h2,
.our-services-section h2,
.about-us h2 {
  font-size: 24px;
  font-weight: bold;
}

.our-services-section h3 {
  font-size: 20px;
  font-weight: bold;
}

/* Service Numbers */
.our-services-section .sol-number {
  padding: 25px;
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  line-height: 1;
  text-align: center;
  font-size: 44px;
}

/* Qualities Section Icons and Titles */
.qualities-section i {
  font-size: 60px;
}

.qualities-section h2 {
  font-size: 24px;
  font-weight: bold;
}

/* Contact Us Section */
.contact-us-section {
  position: relative;
}

.contact-us-section * {
  position: relative;
  z-index: 2;
}

.contact-us-section .about-us-container {
  padding-top: 300px;
}

.contact-us-section .about-us {
  background-color: #ccff8b;
  max-width: 600px;
}

/* Responsive: Desktop-specific styles */
@media (min-width: 992px) {
  /* Add large-screen styles here if needed */
  .hero-section h1 {
    font-size: 56px;
  }

  /* Typography for Sections */
  .aspiration-section h2,
  .our-services-section h2,
  .about-us h2 {
    font-size: 44px;
    font-weight: bold;
  }

  .our-services-section h3 {
    font-size: 26px;
    font-weight: bold;
  }
}