/* ----------------------------------------------------- */
/* Global/Container Styles */
/* ----------------------------------------------------- */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  /* Adjust this line to remove left padding */
  padding-top: 20px;    /* Keep top padding */
  padding-right: 20px;   /* Keep right padding */
  padding-bottom: 20px; /* Keep bottom padding */
  padding-left: 0;      /* Set left padding to 0 */
  box-sizing: border-box;
}

.main-content-columns {
  display: flex; /* Makes the container a flex container */
  align-items: stretch; /* Key for equal column height: stretches items to fill container height */
  flex-wrap: wrap; /* Allows columns to wrap to the next line on smaller screens */
  gap: 30px; /* Adds space between columns. Adjust as needed. */
  margin-top: 20px; /* Example margin */
}

/* ----------------------------------------------------- */
/* Column Widths (1. Width of the columns) */
/* ----------------------------------------------------- */

.left-column {
  flex: 0 0 65%;
  min-width: 300px;
  padding: 20px; /* Keep padding for content spacing within the column */
  /* REMOVED: background-color: #f9f9f9; */
  /* REMOVED: border: 1px solid #ddd; */
  box-sizing: border-box;
}

.right-column {
  flex: 1;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* NEW: Add border-radius for rounding */
  border-radius: 8px; /* You can adjust this value (e.g., 5px, 10px) */
}

/* ----------------------------------------------------- */
/* 3. Centering of <h2> */
/* ----------------------------------------------------- */
.seperator h2 {
  text-align: center; /* Centers the text within the h2 */
  margin-bottom: 20px; /* Add some space below the heading */
  color: #333;
}

/* ----------------------------------------------------- */
/* 2. Accordion Style */
/* ----------------------------------------------------- */
.features-outer ul {
  list-style: none; /* Remove default list bullets */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

.accordion-item {
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
  border-radius: 8px; /* Slightly more rounded corners */
  overflow: hidden; /* Crucial for max-height transition to work */
  background-color: #ffffff; /* White background for each item */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
}

.accordion-header {
  background-color: #f5f5f5;
  /* UPDATED: Increased vertical padding (from 15px to 20px) and added horizontal padding (25px) */
  padding: 20px 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #555; /* Will be updated in the next step if needed */
  transition: background-color 0.2s ease;
  color: #555; /* Set header color to match #555 */
}

.accordion-header:hover {
  background-color: #e0e0e0; /* Darker on hover */
}

.accordion-icon {
  font-size: 1.5em; /* Larger icon */
  transition: transform 0.3s ease; /* Smooth rotation transition */
  line-height: 1; /* Ensures icon is properly aligned vertically */
  color: #007bff; /* A nice blue color for the icon */
}

/* Style for when the accordion is open (add 'active' class via JavaScript) */
.accordion-item.active .accordion-header {
  background-color: #e0e0e0; /* Keep header highlighted when open */
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg); /* Rotates the '+' icon to appear like an 'X' or 'close' */
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
  /* UPDATED: Added horizontal padding (25px) when closed */
  padding: 0 25px;
  color: #555; /* Matches the color used in .bbb p */
}

.accordion-content p {
    margin-top: 0; /* Adjust paragraph margin if needed */
    margin-bottom: 15px; /* Spacing for content */
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  /* UPDATED: Increased vertical padding (from 15px to 20px) and added horizontal padding (25px) when open */
  padding: 20px 25px;
}

/* Specific styling for the BBB section */
/* In your style.css file */

/* Existing .bbb styles (maintain these, as they correctly manage the overall alignment) */
.bbb {
  background-color: #e0f2f7;
  padding: 20px;
  border-radius: 8px;
  color: #333;
  font-size: 1.1em;
  font-weight: normal;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  width: 100%;
  max-width: 300px;
  margin: auto;
  display: flex;
  flex-direction: column; /* Stacks the three new wrapper divs vertically */
  align-items: center;   /* Centers the three new wrapper divs horizontally */
  justify-content: center; /* Centers the three new wrapper divs vertically within .bbb */
}

/* Styling for the new caption wrapper */

/* Applies to the wrapper */
.bbb-caption-wrapper {
  margin-bottom: 25px; /* Consistent spacing */
  width: 100%;
  padding: 10px 0; /* Vertical padding within the background area */
  background: linear-gradient(to right, #e0f2f7, #c1e7f3); /* Light blue gradient */
  border-radius: 5px; /* Slightly rounded corners for the background */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  text-align: center;
}

/* Applies to the text inside */
.bbb-caption {
  font-size: 1.4em;
  font-weight: 700;
  color: #333; /* Darker text for better contrast on the light background */
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: none; /* No text shadow for a cleaner look with the background */
}

.bbb-caption .first-letter-large {
    font-size: 1.5em; /* Make it 1.5 times larger than the parent .bbb-caption font-size */
    font-weight: bold; /* Make the larger letter bold for more emphasis */
    text-transform: uppercase;
    /* Adjust line-height and margin-right if needed for visual spacing */
    line-height: 1; /* Helps maintain vertical alignment */
    margin-right: 1px; /* Small space after the large letter for readability */
}

/* Styling for the new image wrapper */
.bbb-image-wrapper {
  margin-bottom: 25px; /* Adds space between the image and the paragraph below it */
  /* The image inside this wrapper will be centered horizontally by the parent .bbb's align-items: center */
}

/* Styling for the image itself (controlling its size) */
.bbb-image-wrapper img {
  width: 120px;   /* Set a specific width for the BBB logo */
  height: auto;   /* Maintains the image's aspect ratio */
  display: block; /* Ensures it behaves as a block element within its wrapper */
  /* No vertical margins needed here as spacing is handled by the wrapper's margins */
}

/* Styling for the new text paragraph wrapper */
.bbb-text-wrapper {
  /* No specific styles are critically needed here, as it just contains the paragraph */
  width: 100%; /* Ensures the wrapper takes full width to allow paragraph centering */
}

/* Styling for the paragraph text itself (update selector to be more specific) */
.bbb-text-wrapper p {
  margin-top: 0; /* Adjust if needed to remove default top margin */
  font-size: 0.9em;
  color: #555;
  font-weight: normal;
  text-align: center; /* Ensures the paragraph text is centered within its wrapper */
}
/* Media query for smaller screens: columns stack vertically */
@media (max-width: 768px) { /* Adjust this breakpoint as needed for your design */
  .main-content-columns {
    flex-direction: column; /* Forces columns to stack vertically */
    gap: 0; /* Remove gap between stacked columns (use margin-bottom on columns instead) */
  }

  .left-column,
  .right-column {
    flex: 1 1 100%; /* Each column takes up 100% width on small screens */
    width: auto; /* Override fixed width from desktop styles */
    min-width: auto; /* Remove min-width constraint for mobile */
    margin-bottom: 20px; /* Add vertical space between stacked columns */
    border-radius: 8px; /* Apply border-radius to stacked columns */
  }

  /* Remove margin from the last stacked column for cleaner layout */
  .main-content-columns > *:last-child {
    margin-bottom: 0;
  }

  /* Ensure BBB box does not constrain too much on small screens */
  .bbb {
    max-width: 100%;
  }
}