/* === MONTSERRAT FONT === */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/montserrat.woff2') format('woff2');
}

/* === APPLY FONT === */
body,
* {
  font-family: 'Montserrat', sans-serif !important;
}
.p-home__welcome-col .c-button.c-input {
  width: calc(100% - 32px); /* Subtract the left and right margins */
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 20px 32px !important;
  margin: 20px 16px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3) !important;
  text-align: center;
}
.p-home__welcome-col .c-button.c-input:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 107, 107, 0.4) !important;
}
.p-home__welcome-col .c-button.c-input:active {
  transform: translateY(0);
}
/* Add the sparkle icon before the text */
.p-home__welcome-col .c-button.c-input::before {
  content: '✨';
  font-size: 24px;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.p-home__welcome-col div.p-4 {
  padding: 0 !important;
}

    .feedback-container {
    /*  max-width: 600px; */
      width: 100%;
      background: #ffffff;
      border-radius: 6px;
      overflow: hidden;

      position: relative;
    }

    .header-banner {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #feca57 100%);
      padding: 50px 40px;
      position: relative;
      overflow: hidden;
    }

    .sparkle {
      position: absolute;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
      border-radius: 50%;
      animation: sparkle 3s ease-in-out infinite;
    }

    .sparkle-1 { top: -20px; left: 10%; animation-delay: 0s; }
    .sparkle-2 { top: 40%; right: 5%; animation-delay: 1s; width: 60px; height: 60px; }
    .sparkle-3 { bottom: 10px; left: 30%; animation-delay: 2s; width: 80px; height: 80px; }

    @keyframes sparkle {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.2); }
    }

    .header-content {
      position: relative;
      z-index: 1;
    }

    .emoji-icon {
      font-size: 64px;
      margin-bottom: 16px;
      display: block;
      animation: bounce 2s ease-in-out infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    h1 {
      font-size: 42px;
      font-weight: 800;
      color: #ffffff;
      text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      margin-bottom: 12px;
      line-height: 1.1;
    }

    .subtitle {
      font-size: 20px;
      color: rgba(255, 255, 255, 0.95);
      font-weight: 500;
    }

    .content-body {
      padding: 32px 16px;
    }

    .section {
      margin-bottom: 32px;
    }

    .section-title {
      font-size: 14px;
      font-weight: 700;
      color: #ff6b6b;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(135deg, #ff6b6b, #feca57);
      border-radius: 2px;
    }

    .info-box {
      background: linear-gradient(135deg, #fff5f5 0%, #ffe8cc 100%);
      border-left: 4px solid #ff8e53;
      border-radius: 12px;
      padding: 20px 24px;
      color: #5a4a42;
      font-size: 15px;
      line-height: 1.7;
    }

    .info-box strong {
      color: #ff6b6b;
      font-weight: 700;
    }

    .cta-button {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
      color: #ffffff;
      border: none;
      border-radius: 16px;
      padding: 20px 32px;
      font-size: 18px;
      font-weight: 700;
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.3s ease;
      box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
      margin-top: 8px;
    }

    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(255, 107, 107, 0.4);
    }

    .cta-button:active {
      transform: translateY(0);
    }

    .button-icon {
      font-size: 24px;
      animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @media (max-width: 600px) {
      .header-banner {
        padding: 40px 32px;
      }

      h1 {
        font-size: 34px;
      }

      .content-body {
        padding: 36px 32px;
      }
    }