.svg-wrap svg {
    height:15px;
    width:auto;
    fill:#5d0025;
    margin-top:5px;
}

.icon-heading-wrap {
    display:flex;
    gap:8px;
    margin-top:1em;
}

p.ar-rates-price {
    margin:0;
}

/* CSS for ACF Rates Block with Layout 2 */

.ar-flex-container {
  display: flex;
  flex-wrap: wrap; /* Ensures responsive wrapping for smaller screens */
  gap: 20px; /* Adds some space between the columns */
  margin-bottom: 30px; /* Bottom margin for spacing between blocks */
}

.ar-flex-left {
  flex: 1; /* Take up 50% of space by default, will adjust for smaller screens */
  min-width: 300px; /* Prevents collapsing too much on smaller screens */
}

.ar-flex-right {
  flex: 1; /* Take up the remaining 50% */
  min-width: 300px;
}

/* Styling for Titles and Descriptions on the Left */
.ar-flex-left h3 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #333; /* Nice dark color for readability */
}

.ar-flex-left p {
  margin: 15px 0;
  line-height: 1.6;
  color: #555;
}

.ar-flex-left em {
  font-style: italic;
  color: #888;
  display: block;
  margin-top: 10px;
}

/* Styling for the Table on the Right */
.ar-flex-right table {
  width: 100%; /* Make table fill the right column */
  border-collapse: collapse; /* Collapse borders for cleaner styling */
  border: 1px solid #ddd; /* Light border for table */
  background: #f9f9f9; /* Slightly off-white background */
}

.ar-flex-right th,
.ar-flex-right td {
  padding: 10px 15px; /* Comfortable padding for cells */
  text-align: left; /* Align text to the left */
  border: 1px solid #ddd; /* Light borders between rows and columns */
}

.ar-flex-right th {
  background-color: #f4f4f4; /* Gray background for table headers */
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.ar-flex-right tbody tr:nth-child(even) {
  background-color: #fdfdfd; /* Alternate row colors for readability */
}

.ar-flex-right tbody tr:hover {
  background-color: #eee; /* Slight hover effect */
}

/* Responsiveness */
@media (max-width: 768px) {
  .ar-flex-container {
    flex-direction: column; /* Stack columns vertically on smaller screens */
  }

  .ar-flex-left,
  .ar-flex-right {
    flex: unset; /* Make columns auto-size based on content */
    width: 100%; /* Ensure columns take full width when stacked */
  }
}