/* --- Outer Section (Max Width and Centering the Whole Component) --- */

.swiper-showcase-section {
  /* Set the overall width of the component to max 1000px and center it */
  max-width: 1000px; /* Limits the overall size of the black box */
  width: 90%; /* Ensures responsiveness */
  margin: 50px auto; /* Centers the component on the page and adds vertical margin */

  /* Theme colors and font for the entire component */
  background-color: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 0;
}

/* --- Quote Container (Border and Full Width) --- */

.quote-container {
  /* Fills the 1000px max width of its parent (.swiper-showcase-section) */
  width: 100%; 
  
  /* Border and positioning context */
  border: 1px solid #313131;
  position: relative;
  
  /* Apply padding inside the container for visual space around the centered quote */
  padding: 60px 80px; 
}

/* --- Swiper Quote (Narrow Text Block Centering) --- */

.swiper-quote {
  /* Creates the narrow column for the text and centers it within the padding */
  max-width: 650px; /* Adjust this value to control the width of the text */
  margin: 0 auto; 
  text-align: left;
}

.quote-text {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 30px; /* Space between the two paragraphs */
}

.quote-details {
  font-size: 1rem;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 0;
}

/* --- Quote Mark Styling (Positioned Relative to Blockquote) --- */

.quote-mark-open,
.quote-mark-close {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  color: #fff;
  z-index: 10;
}

/* Positioned relative to the .swiper-quote blockquote */
/* Use absolute positioning based on the padding of the .quote-container for edge alignment */
.quote-mark-open {
  top: 40px;
  left: 30px;
}

.quote-mark-close {
  bottom: 40px;
  right: 30px;
}


/* Media query for smaller screens */
@media (max-width: 768px) {
  .quote-container {
    padding: 30px 20px; /* Reduce padding on small screens */
  }
  
  .swiper-quote {
    max-width: 100%;
  }

  /* Adjust quote mark positions on mobile */
  .quote-mark-open {
    font-size: 3rem;
    top: 5px;
    left: 10px;
  }
  
  .quote-mark-close {
    font-size: 3rem;
    bottom: 5px;
    right: 10px;
    top: auto;
    left: auto;
  }
}