/* Carousel container */
/*.ioscarousel-container {
  position: relative;
  width: 70%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}*/

/* Carousel container */
.ioscarousel-container {
  position: relative;
  width: 70%;
  max-width: 400px;
  min-width: 320px;
  margin: auto;
  overflow: hidden;
  
  /* Aspect ratio maintenance */
  padding-bottom: calc(56.25% + var(--aspect-ratio-flexibility));  /* 16:9 aspect ratio, plus flexibility */
}

/* Carousel items */
.ioscarousel {
  display: flex;
  transition: all 0.5s ease;
}

.ioscarousel-item {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Images in carousel */
.ioscarousel-item img {
  width: 100%;
  aspect-ratio: 9 / 16;  /* iPhone aspect ratio */
}

/* Carousel control buttons and text container */
.ioscarousel-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px; /* reduce from 15 to 10*/
}

/* Text styling */
.ioscarousel-text {
  text-align: center;
  padding: 0 10px; /* reduce from 20 to 10*/
  flex-grow: 1;
}

.ioscarousel-text h3 {
  margin: 10px 0;
}

/* Text styling changed from 4 - 7 to show more text */
.ioscarousel-text p {
  max-height: 7em;
  overflow: hidden;
font-size: 1.1em;
line-height: 1.0;
font-weight: 400;
}

/* iOS-like rounded corners and shadow for the carousel container */
.ioscarousel-container {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* iOS-like buttons */
.prev-btn, .next-btn {
  font-size: 2em;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #007aff;  /* iOS blue */
  transition: color 0.3s ease;
  
  margin-top: 0em;
padding: 0 0px;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}

.prev-btn:hover, .next-btn:hover {
  color: #005bb5;  /* darker blue */
}

/* iOS-like text */
.ioscarousel-text h3 {
  font-weight: 600;  /* Semi-bold */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: block;
font-size: 1.17em;
margin-block-start: 0.8em; /* reduce from 1 to 0.8*/
margin-block-end: 0.8em;/* reduce from 1 to 0.8*/
margin-inline-start: 0px;
margin-inline-end: 0px;
}

.ioscarousel-text p {
  color: #8e8e93;  /* iOS gray */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}





/* iOS-like title */
.ioscarousel-title {
  font-size: 1.5em;
  font-weight: 600;  /* Semi-bold */
  text-align: center;
  margin-bottom: 10px; /* from 20 ->10 */
  color: #000;
}

/* iOS-like fonts for specific elements only */
.generic-font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Specific Classes for Text Styles */
.carousel-subtitle-text {
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.carousel-body-text {
    color: #8e8e93;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Existing styles */
body, p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ioscarousel-item {
  min-width: 100%;
  
  flex-direction: column;
  align-items: center;
  justify-content: center;

}



.ioscarouselresponsive-wrapper {
  display: flex; /* or display: grid; depending on your layout needs */
  flex-direction: column; /* for flex container */
  width: 100%; /* or any maximum width you want to set */
  align-items: center; /* to align children in the center */
  justify-content: center; /* to center children along the main axis */
  /* Add any additional styling as required */
}