/* Container & background */
.iframe-container {
  width: 100%;
  height: 100vh;
  background: #FBFBFB
    url('img/bgbg.jpg')
    center/cover no-repeat;
  display: flex;                /* ← make this a flex container */
  justify-content: center;      /* ← center child horizontally */
  align-items: center;
  overflow: hidden;
}

/* Content wrapper */
.iframe-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px; 
  max-width: 1026px;            /* ← constrain its width */
  width: 100%;
  /* remove any align-self here */
}


/* Main image */
.main-image {
  height: auto;
  max-width: 1026px;
  max-height: 614px;
  min-width: 500px;
  margin: 2px 20px;
  align-self: stretch;
  border-radius: 8px;
  box-shadow: 0px 3px 30px rgba(0, 15, 112, 0.20);
}

.social-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  max-width: 1026px;
  margin: 0 40px;
}

/* Testimonial */
.testimonial {
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin: -40px 20px 0 20px;
  max-width: 650px;
  background: #F9FAFC;
  box-shadow: 0px 3px 30px rgba(0, 15, 112, 0.20);
  border-radius: 12px;
  gap: 16px;
}

.testimonial-quote {
  color: #3A405A;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 23.4px */
  max-width: 650px;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  gap: 12px;
}

.rating-bar {
  width: 112px;
  height: 19px;
  position: relative;
}

.rating-bar img {
  width: 100%;
  height: auto;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name,
.author-location {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #3A405A;
}

.author-name {
  font-weight: 700;
}

.author-location {
  font-weight: 400;
}

/* Badge row */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.badge-row img {
  height: 42px;
  width: auto;
  flex-shrink: 0;
}
		/* Re-use your existing .testimonial styles … then add: */
.testimonial {
  display: none;                 /* hide everything by default   */
  opacity: 0;                    
  transition: opacity .6s ease;  /* smooth fade-in/out           */
}

.testimonial.active {
  display: flex;                 /* ← or whatever layout you use */
  opacity: 1;
}