/* Styling for the container holding both sections */
.contai {
  display: flex;
  gap: 55px; /* Adds spacing between sections */
  padding: 40px 20px; /* Add padding to avoid overlap with other sections */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  margin: 50px auto; /* Add vertical spacing from other sections */
  max-width: 1200px; /* Limit maximum width for better alignment */
  box-sizing: border-box; /* Include padding and border in width/height */
}

/* Facebook box styling */
.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 */
  background-color: white; /* White background */
  flex-shrink: 0; /* Prevent shrinking on smaller screens */
  margin: 0 auto; /* Center on small screens */
}

/* 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 styling */
.right-section {
  flex: 1; /* Occupy remaining space */
  min-width: 300px; /* Ensures usability on smaller screens */
  padding: 40px; /* Padding around the content */
  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: auto; /* Auto height to fit content */
  margin: 0 auto; /* Center on small screens */
  order: 1; /* Default order */
}

.right-section h2 {
  font-size: 28px;
  font-weight: bold;
  color: #007bff; /* Highlight 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 */
}

/* Responsive Design */
@media (max-width: 1024px) {
  .contai {
    flex-direction: column; /* Stack vertically on medium screens */
    padding: 60px 20px; /* Increase padding */
  }

  .facebook-box {
    width: 100%; /* Full width on smaller screens */
    max-width: 500px; /* Restrict to original width */
    height: auto; /* Adjust height for content */
    margin-bottom: 20px; /* Add spacing between sections */
    order: 2; /* Place below right-section */
  }

  .right-section {
    padding: 30px; /* Adjust padding */
    width: 100%; /* Full width for better layout */
    text-align: center; /* Ensure text is centered */
    order: 1; /* Place above facebook-box */
  }
}

@media (max-width: 768px) {
  .contai {
    padding: 0 15px; /* Add extra vertical padding on smaller screens */
    gap: 30px; /* Adjust gap between sections */
  }

  .facebook-box {
    margin: 0 auto 20px; /* Center and space below */
  }

  .right-section {
    padding: 20px; /* Adjust padding for smaller screens */
  }

  .right-section h2 {
    font-size: 24px; /* Slightly smaller font size for heading */
  }

  .right-section p {
    font-size: 16px; /* Adjust font size for smaller screens */
  }
}