/* FOUNDER SECTION */
.founder-section{
  background: var(--c-deep);
  overflow: hidden;
  /* padding: clamp(20px, 30vw, 36px) 0; */
}

.wave-black-bg{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(90px, 12vw, 140px);
  background: url('../assets/images/waves/waves-black.png') repeat-x; 
  background-size: cover;
  z-index: 4; transition: transform .3s ease;
}

.founder-title{
    padding-bottom: 0;
    margin: 156px auto clamp(33px, 9vw, 53px);
    text-align: center;
    justify-content: center;
    display: flex;
}
.founder-title h1{
  color: hsl(47, 100%, 86%);
  position: absolute;
  font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.4s, transform 0.4s;
}

.silhouette{width: 100%;height: auto;display: block;}
.silhouette-wrap { width: min(260px, 38%) !important; max-width: 260px;}
/* change the porcenta of the silhouette from 38% to 56% */
.left-eye-founder  { top: 18%; left: 29% } */
.right-eye-founder { top: 18%; left: 36%; }


.dialog-wrap{
  position: relative;
  width: min(858px, 100%);
  max-width: 862px;
  transform: translate(0px, -48px) !important;
  margin: 4px;
  margin: 0 45px 0 65px; /*check*/
}

.dialog-text{
  background-color: #F8F8FF;
  inset: 0;
  display: grid;
  place-items: start;
  color:#000;
  font-weight:600;
  text-align:justify;
  line-height:1.42;
  font-size: clamp(.95rem, .8rem + .25vw, 1.05rem);
  
  pointer-events: none;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  padding: clamp(16px, 2.4vw, 28px) clamp(18px, 2.8vw, 36px);
}


.dialog-form, .dialog-form-mobile{
  position: absolute;
  pointer-events: none;
  user-select: none;
  display: block;
  z-index: -1;
  opacity: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
}


@media (min-width: 1536px){
  .container-xxl { max-width: 1440px; }
}

@media (min-width: 1440px) {
  .dialog-form {
    left: -149px;
    top: 17%;
  }
}

@media (max-width: 1270px) {
  .silhouette-wrap{ width: min(260px, 46%) !important};
}

@media (max-width: 1160px) {
  .silhouette-wrap{ width: min(260px, 56%) !important};
  .sil-eye { 
    width: clamp(18px, 1.1vw, 30px) !important; 
    height: clamp(18px, 1.1vw, 30px) !important;
  }
}


@media (max-width: 991.98px){
  .silhouette-wrap{
    width: min(318px, 0%) !important;
    min-width: 209px;
    transform: translateY(110px);
  }
  .dialog-text { padding: 2% 4%}
  .dialog-wrap { 
    transform: translate(0px, 0px) !important;
    width: min(700px, 100%);
    margin-top: 82px;
  }

  .sea-creatures-form .sil-eye {
    width: clamp(22px, 1.1vw, 30px) !important;
    height: clamp(22px, 1.1vw, 30px) !important;
  }

  /* .eye {
    width: clamp(18px, 1.4vw, 18px);
    height: clamp(18px, 1.4vw, 18px);
  } */
}

/* check the polygon to when screen is 992px instead of 768px */
@media (min-width: 992px){
  .dialog-form {
    width: min(14vw, 160px);
    left: calc(-1 * min(10vw, 157px));
    top: 19%;
    transform: rotate(8deg);
    display: block !important;
  }

  .dialog-form-mobile{ display: none !important; }
}

/* same here instead of 767.38 for 991.98px */
@media (max-width: 991.98px) {
  .dialog-form { display: none !important;}
  
  .dialog-form-mobile {
    width: min(36vw, 140px);
    right: clamp(8px, 5vw, 24px);
    bottom: clamp(-91px, -16.8vw, -19px);
    transform: rotate(-16deg);
    display: block !important;
  }

  .dialog-text {
    padding: calc(14px, 4vw, 22px) clamp(14px, 5vw, 24px);
    border-radius: 18px;
  }
}

@media (max-width: 375px) {
  .sil-eye{
    width: clamp(23px, 1.4vw, 30px) !important;
    height: clamp(23px, 1.4vw, 30px) !important;
  }
}