@page {
  direction: rtl;
}

body {
  font-family: Arial, sans-serif;
  font-size: 12pt;
  direction: rtl;
  text-align: right;
}

main {
  padding: 10px;
  max-width: 80%;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Container styles */
#content-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

/* Header styles */
.custom-declar-header {
  font-size: 26pt;
  text-align: center;
  margin: 15px 0 35px 0;
  text-decoration: underline;
  color: #31456C;
  font-weight: bold;
}

/* Heading styles */
.custom-declar-heading {
  font-weight: bold;
  text-decoration: underline;
  font-size: 18pt;
  text-align: right;
  color: #31456C;
  margin: 0 auto;
  max-width: 80%;
  margin-bottom: 20px;
}

/* Paragraph styles */
.custom-declar-parah {
  line-height: 1.5;
  font-size: 14pt;
  text-align: justify;
}

.button-wrapper {
  text-align: left;  /* Align the button to the left */
}

/* Button styles */
.custom-button {
    background-color: #31456C; 
    color: white;              /* White text */
    border: none;              /* Remove border */
    padding: 10px 20px;        /* Add padding for size */
    font-size: 16px;           /* Adjust font size */
    cursor: pointer;           /* Pointer cursor on hover */
    border-radius: 8px;        /* Rounded corners */
    text-align: center;        /* Center text in the button */
    display: inline-block;     /* Make it an inline block */
    margin: 10px 0;            /* Add margin */
    transition: background-color 0.3s ease; /* Smooth background change on hover */
}

/* Hover effect */
.custom-button:hover {
    background-color: #4C6596; /* Darker purple on hover */
}


/* FAQ Styles */

/* FAQ heading */
.custom-declar-faq-heading {
  font-weight: bold;
  text-decoration: underline;
  font-size: 20pt;
  text-align: right;
  color: #31456C;
  margin: 0 auto;
  max-width: 80%;
  margin-bottom: 20px;
}

.faq-item {
  border: 1px solid #ccc; /* Border to create a frame */
  max-width: 84%;
  padding: 10px; /* Padding inside the frame */
  margin: 0 auto; /* Space between FAQ items */
  margin-bottom: 5px;
  border-radius: 8px; /* Rounded corners for the frame */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.faq-question {
  font-weight: bold;
  font-size: 16pt;
  text-align: right;
  color: #31456C;
  margin: 0 auto;
  max-width: 97%;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* FAQ answer */
.faq-answer {
  line-height: 1.5;
  font-size: 14pt;
  text-align: justify;
  margin: 0 auto;
  max-width: 97%;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  body {
    font-size: 11pt; /* Slightly reduce the body font size */
  }

  main {
    padding: 10px; /* Reduce padding for smaller screens */
  }

  .custom-declar-header {
    font-size: 20pt; /* Adjust the header font size */
    margin: 15px 0;
  }

  .custom-declar-heading {
    font-size: 14pt; /* Reduce heading font size */
    margin-bottom: 15px; /* Adjust margin for better spacing on mobile */
  }

  .custom-declar-parah {
    font-size: 12pt; /* Adjust paragraph font size for readability on mobile */
  }

  .custom-button {
    font-size: 14px; /* Reduce button font size */
    padding: 8px 16px; /* Adjust padding */
    width: 100%; /* Make buttons full-width on mobile */
    left: auto; /* Reset the left alignment */
  }

  .faq-item {
    max-width: 100%; /* Allow FAQ items to take full width on mobile */
    padding: 15px; /* Increase padding for better readability */
  }

  .faq-question {
    font-size: 14pt; /* Reduce FAQ question font size */
    margin-bottom: 15px;
  }

  .faq-answer {
    font-size: 12pt; /* Reduce FAQ answer font size */
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 10pt; /* Further reduce body font size on very small screens */
  }

  .custom-declar-header {
    font-size: 18pt; /* Adjust the header font size for small screens */
  }

  .custom-declar-heading {
    font-size: 12pt; /* Reduce heading size even further */
  }

  .custom-declar-parah {
    font-size: 11pt; /* Adjust paragraph font size */
  }

  .custom-button {
    font-size: 13px; /* Reduce button font size for very small screens */
    padding: 6px 12px;
  }
}