/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ensure the body takes up full height and has the background color */
body {
  min-height: 100vh; /* Ensure body stretches to full viewport height */
  background-color: #f2f2f2; /* Light grey background */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
}

/* Header section styling */
.header-section {
  position: relative;
  width: 100%;
}

/* Container for header image and text */
.header-container {
  position: relative;
}

/* Responsive image styling */
.header-image {
  width: 100%;
  max-width: 100%; /* Ensure header image remains at maximum width */
  height: auto;
  display: block;
}

/* Centered text styling */
.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Change to desired text color */
  font-size: 2rem; /* Change to desired font size */
  font-weight: bold; /* Change to desired font weight */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional text shadow for better visibility */
  text-align: center;
  z-index: 1; /* Ensure text is above the background */
}

/* Content section styling */
.content-section {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: center; /* Center align items horizontally */
  align-items: flex-start; /* Align items at the top */
  text-align: center;
  width: 100%;
}

h1 {
  margin-bottom: 15px;
}

.par {
  margin-bottom: 15px; /* Adjust as needed for spacing between paragraphs */
}

/* White box with curved borders */
.white-box {
  background-color: white;
  border-radius: 20px; /* Adjust border-radius as needed for curved corners */
  padding: 20px;
  max-width: 800px; /* Adjust maximum width as needed */
  width: 90%; /* Adjust width as needed */
  margin: 20px auto; /* Center the box horizontally */
  position: relative; /* Ensure relative positioning for absolute children */
}

/* Image buttons section */
.image-buttons-section {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: center; /* Center align items horizontally */
  align-items: flex-start; /* Align items at the top */
}

/* Second image styling */
.second-image {
  width: 90%; /* Set width to 90% of parent width */
  max-width: 800px; /* Limit maximum width */
  height: auto; /* Maintain aspect ratio */
  display: block;
  margin: 20px auto; /* Center horizontally with margin */
  border-radius: 20px; /* Fixed border radius */
}

/* Social media buttons styling */
.social-buttons {
  width: 100%; /* Full width for buttons container */
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  align-items: center; /* Center align items horizontally */
}

.social-button {
  width: 80%; /* Set width to 90% of the container */
  /* max-width: 300px; Optional: Limit maximum width */
  padding: 10px;
  margin: 10px 0; /* Adjust margins between buttons */
  text-decoration: none;
  color: white;
  text-align: center;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* Button colors */
.facebook {
  background-color: #1877f2;
}

.chat {
  background-color: #25d366;
}

.group {
  background-color: #128c7e;
}

.phone {
  background-color: lightgray;
}

/* Hover effects */
.facebook:hover {
  background-color: #0056b3; /* Darker shade of blue on hover */
}

.chat:hover {
  background-color: #075e54; /* Darker shade of green on hover */
}

.group:hover {
  background-color: #34b7f1; /* Darker shade of teal on hover */
}

.phone:hover {
  background-color: #b3b3b3; /* Darker shade of gray on hover */
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .second-image {
    width: 90%; /* Adjust width to 90% on smaller screens */
    max-width: 100%; /* Ensure image can stretch to full width */
    margin: 20px auto; /* Center horizontally with margin */
  }
}

/* Review section styling */
.review-section {
  width: 90%;
  max-width: 800px;
  margin: 20px auto;
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}

.review-section h2 {
  margin-bottom: 20px;
}

.reviews {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.review {
  width: 48%; /* Adjust the width to fit two reviews per row */
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stars {
  color: gold;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.review p {
  margin: 0;
}

/* Footer styling */
/* Ensure the footer is always at the bottom */
.footer {
  background-color: #333; /* Dark grey background color */
  color: white; /* White text color */
  padding: 20px 0; /* Padding top and bottom */
  width: 100%;
  text-align: center; /* Center the text */
  position: relative; /* Make the footer relative to the document */
  margin-top: 10px; /* Push the footer to the bottom */
}

.footer-content a {
  color: white; /* White color for links */
  text-decoration: none; /* Remove underline from links */
}

.footer-content a:hover {
  text-decoration: underline; /* Underline links on hover */
}

.footer-content p {
  margin: 5px 0; /* Margin for spacing between lines */
}