/* Styling for the container holding both sections */
.contai {
  display: flex;
  gap: 20px; /* Adds spacing between sections */
  padding: 20px;
  width: 100vw;
  height: 80vh;
  flex-wrap: wrap;
  margin: 100px auto;
}

/* Facebook box styling (reused provided CSS) */
.facebook-box {
  width: 500px; /* Fixed width */
  height: 710px; /* Fixed height */
  border: 1px solid #dcdcdc; /* Box border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Box shadow */
  overflow: hidden; /* Prevents overflow content */
  margin-left: 150px;
  background-color: white; /* White background */
}

/* Facebook box header styling */
.facebook-box-header {
  height: 60px; /* Fixed header height */
  background-color: #f7f7f7; /* Light gray header */
  display: flex;
  align-items: center;
  padding: 0 15px;

  font-size: 18px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #dcdcdc; /* Separator line */
}

/* Facebook content section */
.facebook-content {
  width: 100%;
  height: calc(100% - 60px); /* Remaining height */
}

.right-section {
  flex: 1; /* Occupy remaining space */
  min-width: 300px; /* Ensures usability on smaller screens */
  padding: 100px;

  display: flex; /* Enable flexbox for alignment */
  flex-direction: column; /* Arrange content vertically */
  align-items: center; /* Horizontally center content */
  justify-content: center; /* Vertically center content */
  text-align: center; /* Align text */
  height: 100%; /* Ensure full height of the box */
}

.right-section h2 {
  font-size: 28px;
  font-weight: bold;
  color: #333; /* Dark gray color for the heading */
  margin-bottom: 20px; /* Space below the heading */
}

.right-section p {
  font-size: 18px; /* Larger font size for readability */
  color: #555; /* Medium gray color for text */
  line-height: 1.6; /* Improve line spacing */
  margin: 0; /* Remove default margin */
  font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contai {
    flex-direction: column; /* Stack vertically on small screens */
  }
}
