/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', Arial, sans-serif !important;
  background: #7ca883;
  min-height: 790px;
  position: relative;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Baloo 2', sans-serif !important;
}

p {
  font-family: 'Nunito', Arial, sans-serif !important;
}

.background-shapes {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(101,146,100,.7), rgba(101,146,100,.7)),
    url("../assets/BackgroundBetter.png") repeat;
  animation: cloud-move 120s linear infinite;
  background-size: 2000px 100vh;
  background-repeat: repeat-x;
  will-change: background-position;
}

@keyframes cloud-move {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 2000px 0, 2000px 0;
  }
}

.main-wrapper {
  max-width: 1200px;
  margin: 40px auto;
  position: relative;
  min-height: 720px;
}

.main-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgb(248, 248, 245);
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(60, 80, 60, 0.10);
  min-height: 720px;
  transform: skewY(-2deg);
  z-index: 1;
}

.main-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
  z-index: 0;
  border-radius: 28px;
}

.main-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 48px 55px;
  height:80vh
}

.main-left, .main-right {
  flex: 1 1 350px;
  min-width: 0;
  max-width: 600px;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}

.main-left {
  align-items: flex-start;
  padding-right: 24px;
}

.main-right {
  align-items: flex-end;
  padding-left: 24px;
  min-width: 0;
}

.logo {
  font-size: 2.2rem;
  font-family: "Pally", sans-serif !important;
  font-weight: 700;
  color: #2e8b3c;
  margin-bottom: 12px;
  letter-spacing: -1px;
}

.coming-soon {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 24px;
  color: #292e2a;
}

.subtitle {
  font-size: 2.0rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 24px;
}

.notify-section {
  width: 100%;
  text-align: left;
  margin-top: 24px;
}

.notify-section span {
  font-size: 1.25rem;
  color: #222;
  display: block;
}

.notify-form {
  display: flex;
  gap: 0;
  margin-top: 8px;
  width: 100%;
}

.notify-form input[type="email"] {
  padding: 0.8rem 1.2rem;
  margin-right: 0;
  width: 300px;
  border: 1px solid #b7d7b7;
  border-radius: 8px 0 0 8px;
  font-size: 1rem;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: 'Nunito', Arial, sans-serif !important;
}

.notify-form button {
  padding: 12px 20px;
  background: #2e8b3c;
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.notify-form button:hover {
  background: #256c2a;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #e6e6e6;
  border-radius: 50%;
  color: #2e8b3c;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background 0.2s;
}

.socials a:hover {
  background: #b7d7b7;
}

.chat-window-embed {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(60, 80, 60, 0.10);
  padding: 0;
  min-width: 0;
  max-width: 400px;
  min-height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 1;
  /* transition: opacity 0.5s ease-out; */
}

.chat-window-embed.animate-chatbot {
  opacity: 1;
}

.svg-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  opacity: 1;
  /* transition: opacity 0.3s ease-out; */
}

.svg-container.fade-out {
  opacity: 0;
}

.moji-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: 16px;
}

.try-me-button {
  padding: 12px 20px;
  background: #2e8b3c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.try-me-button:hover {
  background: #256c2a;
}

#loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
}

#page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  height: 100%;
  max-height: 500px;
}

#phrase_box {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#phrase_box svg {
  width: 90%;
  max-width: 500px;
  height: 60vw;
  max-height: 500px;
  display: block;
}

.moji-image {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moji-group-img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.loader-title {
  color: #fff;
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: 2px;
  line-height: 1.1;
}

#loader.hide {
  animation: tv-shutdown 0.7s cubic-bezier(.4,0,.2,1) forwards;
  opacity: 1;
}

flowise-fullchatbot, flowise-fullchatbot::part(main-container) {
  border-radius: 10px !important;
  font-family: 'Nunito', sans-serif !important;
  overflow: hidden !important;
  padding: 0 !important;
}

flowise-fullchatbot::part(inner-div) {
  border-radius: 20px;
  --border-radius: 20px !important;
  --chat-border-radius: 20px !important;
  --widget-radius: 20px !important;
  --font-family: 'Nunito', sans-serif !important;
}

flowise-fullchatbot::part(inner-chatbot-container) {
  font-family: 'Nunito', sans-serif !important;
  border-radius: 20px;
  --border-radius: 20px !important;
  --chat-border-radius: 20px !important;
  --widget-radius: 20px !important;
}

@keyframes tv-shutdown {
  0% {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
    filter: brightness(1);
  }
  60% {
    opacity: 1;
    transform: scaleY(0.08) scaleX(1.02);
    filter: brightness(2);
  }
  80% {
    opacity: 1;
    transform: scaleY(0.04) scaleX(1.08);
    filter: brightness(3);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.01) scaleX(1.2);
    filter: brightness(5);
  }
}

#phrases {
  animation: slide-phrases-upward 20s;
}

@media (max-width: 900px) {
  .main-wrapper {
    flex-direction: column;
    gap: 24px;
  }
  .main-card {
    position: absolute;
    min-height: unset;
    border-radius:1
  }
  .main-content {
    flex-direction: column;
    padding: 24px 8px;
    gap: 24px;
  }
  .main-left, .main-right {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    padding: 0;
    align-items: center;
    margin: 0;
  }
  .main-left {
    align-items: center;
    padding-bottom: 16px;
  }
  .main-right {
    align-items: center;
    padding-top: 16px;
    min-width: 0;
  }
  .chat-window-embed {
    min-width: 0;
    max-width: 380px;
    width: 100%;
    min-height: 320px;
  }
  .logo {
    font-size: 1.5rem;
  }
  .coming-soon {
    font-size: 2rem;
    margin-bottom:10px
  }
  .subtitle {
    font-size: 1.5rem;
    text-align: center;
    padding: 0px 40px
  }
  .notify-section {
    width: 90%;
  }
  .notify-section span {
    width: 90%;
    font-size: 1.1rem;
  }
  .socials {
  gap: 15px;
}

.socials a {
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
}

.socials a:hover {
  background: #b7d7b7;
}
}

@media (max-width: 600px) {
  .main-wrapper {
    margin: 0;
  }
  .main-card {
    border-radius: 1;
    box-shadow: none;
    width: 100vw;
    top:50px;
    height:75%;
    transform: skewY(-2deg);
  }
  .main-content {
    padding: 0;
  }
  .main-left, .main-right {
    max-width: 100vw;
    width: 100vw;
    padding: 0;
  }
  .chat-window-embed {
    min-height: 220px;
    max-width: calc(100vw - 10px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .moji-svg {
    max-width: 250px;
  }
  #phrase_box {
    width: 100vw;
    max-width: 100vw;
  }
  #phrase_box svg {
    width: 98vw;
    max-width: 98vw;
    height: 60vw;
    max-height: 70vw;
    display: block;
  }
  .loader-title {
    font-size: 1.5rem;
    margin-bottom: 18px;
  }
  #page {
    flex-direction: column;
    max-width: 100vw;
    max-height: unset;
  }
  #phrase_box {
    width: 100%;
    height: auto;
  }
  .moji-image {
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
  .moji-group-img {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  #page {
    max-width: 98vw;
    max-height: 70vw;
  }
  #phrase_box svg {
    width: 98vw;
    max-width: 98vw;
    height: 60vw;
    max-height: 70vw;
  }
  .loader-title {
    font-size: 1.5rem;
    margin-bottom: 18px;
  }
}

.moji-container {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}


#lEye .moji-jump-squint-rect, #rEye .moji-jump-squint-rect {
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
  transform: scaleY(0.5);
  transform-origin: 50% 50%;
}
#eyesGroup.moji-jump-squint {
  transition: transform 0.15s cubic-bezier(0.4,0,0.2,1), scale 0.2s cubic-bezier(0.4,0,0.2,1);
  transform: scaleY(0.5);
}
/* Moji breathing and leg animation */
#moji {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.moji-container {
  width: 278px;
  height: 264px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
#moji {
  width: 100%;
  height: 100%;
  display: block;
}
#breathGroup {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: moji-breath 5s linear infinite;
}
@keyframes moji-breath {
  0% { transform: translateY(1px); }
  5% { transform: translateY(0px); }
  10% { transform: translateY(-1px); }
  15% { transform: translateY(-1.5px); }
  20% { transform: translateY(-1px); }
  25% { transform: translateY(0%); }
  30% { transform: translateY(0px); }
  100% { transform: translateY(1px); }
}
#glasses, #eyesGroup {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  /* animation: moji-breath 20s linear infinite; */
}
/* Eyes will follow the cursor via JS, but still breathe with the body */
/* Eyes only follow the cursor, no idle animation */
#eyesGroup {
  transition: transform 0.15s cubic-bezier(0.4,0,0.2,1);
}
/* When JS is controlling the eyes, this class is added for smoothness */
.eyes-following {
  will-change: transform;
}

#lLegGroup {
  transform-box: fill-box;
  transform-origin: 0px 0px;
  animation: leg-sequence 5s linear infinite;
}
/* Talking mouth animation */
#mouth {
  transform-box: fill-box;
  transform-origin: 62px 80px;
  animation: moji-breath 5s linear infinite mouth-talk 20s steps(6, end) infinite;
}

@keyframes mouth-talk {
  0% {
    d: path("M51.0215 77.0566C51.0609 77.0639 51.1086 77.0744 51.165 77.0908C51.5517 77.2037 52.1717 77.5375 52.9902 78.293C53.4129 78.683 53.9836 78.9931 54.5967 79.2441C55.2222 79.5002 55.9535 79.7196 56.7461 79.9023C58.3318 80.2678 60.2291 80.5008 62.1533 80.5615C64.0766 80.6222 66.0616 80.5121 67.8184 80.1758C69.5475 79.8447 71.1807 79.2709 72.2832 78.3125C72.6652 77.9804 73.0073 77.7218 73.3057 77.5234C73.301 77.5282 73.2967 77.5333 73.292 77.5381C73.047 77.7851 72.7367 78.0516 72.3564 78.3252C69.7623 80.1911 67.8394 81.5954 66.2158 82.5557C64.601 83.5108 63.3968 83.955 62.2568 83.9971C61.1283 84.0387 59.9231 83.6907 58.3018 82.7754C56.6673 81.8526 54.699 80.4058 52.0527 78.3477C51.468 77.8928 51.1744 77.4591 51.0596 77.1641C51.0436 77.1229 51.0303 77.0875 51.0215 77.0566Z");
  }
  20% {
    d: path("M51.0215 77.0566C51.0609 77.0639 51.1086 77.0744 51.165 77.0908C51.5517 77.2037 52.1717 77.5375 52.9902 78.293C53.4129 78.683 53.9836 78.9931 54.5967 79.2441C55.2222 79.5002 55.9535 79.7196 56.7461 79.9023C58.3318 80.2678 60.2291 80.5008 62.1533 80.5615C64.0766 80.6222 66.0616 80.5121 67.8184 80.1758C69.5475 79.8447 71.1807 79.2709 72.2832 78.3125C72.6652 77.9804 73.0073 77.7218 73.3057 77.5234C73.301 77.5282 73.2967 77.5333 73.292 77.5381C73.147 77.8851 72.9367 78.1516 72.6564 78.4252C70.2623 80.1911 68.6394 81.3954 67.2158 82.1557C65.801 82.9108 64.7968 83.255 63.8568 83.2971C62.9283 83.3387 61.9231 83.0907 60.4018 82.2754C58.9673 81.5026 57.299 80.3058 55.0527 78.7477C54.668 78.4928 54.4744 78.2591 54.4596 78.0641C54.4436 78.0229 54.4303 77.9875 54.4215 77.9566Z");
  }
  40% {
    d: path("M51.0215 77.0566C51.0609 77.0639 51.1086 77.0744 51.165 77.0908C51.5517 77.2037 52.1717 77.5375 52.9902 78.293C53.4129 78.683 53.9836 78.9931 54.5967 79.2441C55.2222 79.5002 55.9535 79.7196 56.7461 79.9023C58.3318 80.2678 60.2291 80.5008 62.1533 80.5615C64.0766 80.6222 66.0616 80.5121 67.8184 80.1758C69.5475 79.8447 71.1807 79.2709 72.2832 78.3125C72.6652 77.9804 73.0073 77.7218 73.3057 77.5234C73.301 77.5282 73.2967 77.5333 73.292 77.5381C73.047 77.7851 72.7367 78.0516 72.3564 78.3252C69.7623 80.1911 67.8394 81.5954 66.2158 82.5557C64.601 83.5108 63.3968 83.955 62.2568 83.9971C61.1283 84.0387 59.9231 83.6907 58.3018 82.7754C56.6673 81.8526 54.699 80.4058 52.0527 78.3477C51.468 77.8928 51.1744 77.4591 51.0596 77.1641C51.0436 77.1229 51.0303 77.0875 51.0215 77.0566Z");
  }
  60% {
    d: path("M51.0215 77.0566C51.0609 77.0639 51.1086 77.0744 51.165 77.0908C51.5517 77.2037 52.1717 77.5375 52.9902 78.293C53.4129 78.683 53.9836 78.9931 54.5967 79.2441C55.2222 79.5002 55.9535 79.7196 56.7461 79.9023C58.3318 80.2678 60.2291 80.5008 62.1533 80.5615C64.0766 80.6222 66.0616 80.5121 67.8184 80.1758C69.5475 79.8447 71.1807 79.2709 72.2832 78.3125C72.6652 77.9804 73.0073 77.7218 73.3057 77.5234C73.301 77.5282 73.2967 77.5333 73.292 77.5381C73.147 77.8851 72.9367 78.1516 72.6564 78.4252C70.2623 80.1911 68.6394 81.3954 67.2158 82.1557C65.801 82.9108 64.7968 83.255 63.8568 83.2971C62.9283 83.3387 61.9231 83.0907 60.4018 82.2754C58.9673 81.5026 57.299 80.3058 55.0527 78.7477C54.668 78.4928 54.4744 78.2591 54.4596 78.0641C54.4436 78.0229 54.4303 77.9875 54.4215 77.9566Z");
  }
  80% {
    d: path("M51.0215 77.0566C51.0609 77.0639 51.1086 77.0744 51.165 77.0908C51.5517 77.2037 52.1717 77.5375 52.9902 78.293C53.4129 78.683 53.9836 78.9931 54.5967 79.2441C55.2222 79.5002 55.9535 79.7196 56.7461 79.9023C58.3318 80.2678 60.2291 80.5008 62.1533 80.5615C64.0766 80.6222 66.0616 80.5121 67.8184 80.1758C69.5475 79.8447 71.1807 79.2709 72.2832 78.3125C72.6652 77.9804 73.0073 77.7218 73.3057 77.5234C73.301 77.5282 73.2967 77.5333 73.292 77.5381C73.047 77.7851 72.7367 78.0516 72.3564 78.3252C69.7623 80.1911 67.8394 81.5954 66.2158 82.5557C64.601 83.5108 63.3968 83.955 62.2568 83.9971C61.1283 84.0387 59.9231 83.6907 58.3018 82.7754C56.6673 81.8526 54.699 80.4058 52.0527 78.3477C51.468 77.8928 51.1744 77.4591 51.0596 77.1641C51.0436 77.1229 51.0303 77.0875 51.0215 77.0566Z");
  }
  100% {
    d: path("M51.0215 77.0566C51.0609 77.0639 51.1086 77.0744 51.165 77.0908C51.5517 77.2037 52.1717 77.5375 52.9902 78.293C53.4129 78.683 53.9836 78.9931 54.5967 79.2441C55.2222 79.5002 55.9535 79.7196 56.7461 79.9023C58.3318 80.2678 60.2291 80.5008 62.1533 80.5615C64.0766 80.6222 66.0616 80.5121 67.8184 80.1758C69.5475 79.8447 71.1807 79.2709 72.2832 78.3125C72.6652 77.9804 73.0073 77.7218 73.3057 77.5234C73.301 77.5282 73.2967 77.5333 73.292 77.5381C73.047 77.7851 72.7367 78.0516 72.3564 78.3252C69.7623 80.1911 67.8394 81.5954 66.2158 82.5557C64.601 83.5108 63.3968 83.955 62.2568 83.9971C61.1283 84.0387 59.9231 83.6907 58.3018 82.7754C56.6673 81.8526 54.699 80.4058 52.0527 78.3477C51.468 77.8928 51.1744 77.4591 51.0596 77.1641C51.0436 77.1229 51.0303 77.0875 51.0215 77.0566Z");
  }
}
@keyframes leg-sequence {
  0% { transform: rotate(0deg) translateY(0px); }
  60% { transform: rotate(0deg) translateY(0px); }
  62% { transform: rotate(-10deg) translateY(0px); }
  68% { transform: rotate(-18deg) translateY(0px); }
  74% { transform: rotate(-18deg) translateY(0px); }
  80% { transform: rotate(-10deg) translateY(0px); }
  86% { transform: rotate(-18deg) translateY(0px); }
  92% { transform: rotate(-10deg) translateY(0px); }
  96% { transform: rotate(0deg) translateY(0px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

#loader.fade-out {
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);
        pointer-events: none;
      }
      @media (max-width: 768px) {
        .main-right {
          display: none;
        }
        .main-left {
          justify-content: center;
          height: 100vh;
        }
      }

      .main-left .logo {
        display: none;
      }
      @media (max-width: 768px) {
        .main-left .logo {
          font-size: 1.8rem;
          position: absolute;
          top:10vh;
          display: block;
        }
      }

  .mainInput::placeholder, .mainInput:-ms-input-placeholder, .mainInput::-ms-input-placeholder  { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: 'Nunito', Arial, sans-serif !important;
  opacity: 1; /* Firefox */
}

flowise-fullchatbot, flowise-chatbot {
  opacity: 0;
  animation: chatbot-fade-in 0s ease-in forwards;
  z-index: 99999; /* Increased z-index to ensure it appears above other elements */
  position:relative;
}

@keyframes chatbot-fade-in {
  0% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 1;}
}

/* Add a class to override animation for instant visibility */
.flowise-chatbot-instant {
  opacity: 1 !important;
  animation: none !important;
}