/*  * ================ body & utility classes ================= */
body {
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  font-family: "Inter", serif;
  font-weight: 300;
  font-style: normal;
  background-color:rgb(240, 248, 255);
}

:root {
  --background: rgb(240, 248, 255); /*The background color of the page or elements.*/
  --header-BG: rgb(19, 22, 26);
  --section-BG: rgb(240, 248, 255);
  --sevice-titles-BG: rgb(234, 242, 249);
  --text-light-BG: rgb(51, 51, 51); /* Dark gray text for light backgrounds */
  --text-dark-BG: rgb(255, 255, 255); /* White text for dark backgrounds */
  --border: rgba(128, 128, 128, 0.3);
  --button-background: rgb(242, 181, 0);;
  --button-text: ;
  --footer-BG: rgb(0, 0, 0);
  --footer-text: rgb(112, 128, 144);
}

/** ================ grid & Flex ================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  justify-content: center;
  align-items: center;
 
}

.flex {
  display: flex;

}

/** ================ hero ================= */
.hero {
  background-color: var(--background),
  width: 100vw;
  height: 100vh;
}
.hero-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--header-BG);
  background-image: linear-gradient(rgba(1, 6, 30, 0.5), rgba(0, 0, 11, 0.5)),
    url("/images/AdobeStock_511533588.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(0, 0, 0, 0.5);
}

.logo-container {
  width: 15%;
}

@media (max-width: 767px) {
  .logo-container {
    width: 50%;
  }
}

/** ================ sections ================= */
.section {
  background-color: var(--background);

}
/** ================ services ================= */

.sevice-titles-container {
  padding: 1em 0.5em 5em;

}
.sevice-titles {
  padding: 6em 1.5em;
  margin: 1.5em;
  background-color: var(--sevice-titles-BG);
  
}
.services-titles h2,
h3 {
  padding: 1em;
}
.services-titles-text-container {
  margin: 0 auto;
  text-align: center;
  padding: 1em;
}
.text-underline {
  border-bottom: var(--border);
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  padding-bottom: 0.25em;
}
.services-titles > h4 {
  text-align: center;
  padding-bottom: 0.5em;
}
/** ================ meet us ================= */

.meet-us-section { 
  width: 100%;
  height: 50vh;
  background-image: linear-gradient(rgba(1, 6, 30, 0.5), rgba(0, 0, 11, 0.5)),
    url("/images/AdobeStock_47747648.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--text-dark-BG);
}

/** ================ about us section ================= */
.about-container {
  
  text-align: center;
  
  color: var(--text-light-bg)
}
.about-info-container {
  margin-top: 5em;
}
.about-info-container img {
  padding: 1em 3em;
  
}

/** ================ reviews ================= */
.reviews-section {
 text-align: center;
 padding: 5em 0;

}
.review-img-container {
  width: 40%;
}
.review-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 gap: 2em;
 padding: 2em;

}

.star-img-container {
  width: 50%;
  margin: 2em auto;
}
.review-container button {
  background-color: var(--button-background);
 
  padding: 0.5em;
  border-radius: 5px;
  cursor: pointer;
 
}

/** ================ contact ================= */

/** ================ footer ================= */
.footer{
  width: 100%;
  height: 30vh;
  background-color: var(--footer-BG);

  color: var(--footer-text);
}
.footer-container {
  /* justify-content: center;
  align-items: center; */
  width: 100%;
  height: 100%;
  gap: 10em;
  justify-content: center;
  align-items: center;
 
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}