* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.onboarding-container {

  display: flex;

  height: 100vh;

  max-height: 100vh;

  background: #ffffff;

  overflow: hidden;

}



/* Left Section */

.content-section {

  /* Increased left section from 40% to 50% for more breathing room */

  flex: 0 0 50%;

  max-width: 50%;

  padding: 50px 70px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);

  max-height: 100vh;

  overflow: hidden;

}



.logo-container {

  margin-bottom: 40px;

}



.logo {

  height: 40px;

  max-width: 180px;

  width: auto;

  object-fit: contain;

}



.main-heading {

  /* Increased heading size for better hierarchy */

  font-size: 48px;

  font-weight: 700;

  color: #1a1a1a;

  line-height: 1.15;

  margin-bottom: 16px;

  letter-spacing: -1px;

}



.subheading {

  /* Increased subheading size and spacing */

  font-size: 19px;

  color: #4a5568;

  line-height: 1.6;

  margin-bottom: 28px;

  font-weight: 400;

}



.info-box {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 18px 22px;

  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);

  border: 1px solid #bfdbfe;

  border-radius: 12px;

  color: #0066ff;

  font-size: 15px;

  margin-bottom: 24px;

  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.08);

  line-height: 1.5;

}



.info-icon {

  flex-shrink: 0;

  color: #0066ff;

  width: 20px;

  height: 20px;

}



.email-form {

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-bottom: 16px;

}



.email-input {

  width: 100%;

  padding: 16px 20px;

  font-size: 16px;

  border: 2px solid #e2e8f0;

  border-radius: 12px;

  outline: none;

  transition: all 0.2s ease;

  background: #ffffff;

}



.email-input:focus {

  border-color: #0066ff;

  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);

}



.continue-button {

  width: 100%;

  padding: 16px 24px;

  background: #0066ff;

  color: white;

  font-size: 17px;

  font-weight: 600;

  border: none;

  border-radius: 12px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition: all 0.2s ease;

  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);

}



.continue-button:hover {

  background: #0052cc;

  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.35);

  transform: translateY(-1px);

}



.form-footer {

  font-size: 15px;

  color: #64748b;

  text-align: center;

  margin-bottom: 20px;

  line-height: 1.5;

}



.legal-text {

  font-size: 13px;

  color: #94a3b8;

  text-align: center;

  line-height: 1.5;

  margin-bottom: 28px;

}



.legal-text a {

  color: #0066ff;

  text-decoration: none;

}



.legal-text a:hover {

  text-decoration: underline;

}



.security-badges {

  display: flex;

  gap: 28px;

  flex-wrap: wrap;

}



.badge {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 15px;

  color: #475569;

  font-weight: 500;

}



.badge-icon {

  flex-shrink: 0;

}



/* Security Badges on Right Side */

.security-badges-right {

  display: flex;

  gap: 28px;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 20px;

  position: relative;

  z-index: 1;

}



.badge-right {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 15px;

  color: #ffffff;

  font-weight: 500;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 10px 18px;

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.3);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  transition: all 0.3s ease;

}



.badge-right:hover {

  background: rgba(255, 255, 255, 0.25);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

}



.badge-icon-right {

  flex-shrink: 0;

}



/* Right Section */

.visual-section {

  /* Reduced right section from 60% to 50% to give left more space */

  flex: 0 0 50%;

  max-width: 50%;

  background: linear-gradient(135deg, #0066ff 0%, #0052cc 25%, #0066ff 50%, #0080ff 75%, #0066ff 100%);

  background-size: 400% 400%;

  animation: gradientShift 15s ease infinite;

  padding: 40px 40px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  position: relative;

  max-height: 100vh;

}



@keyframes gradientShift {

  0% {

    background-position: 0% 50%;

  }

  50% {

    background-position: 100% 50%;

  }

  100% {

    background-position: 0% 50%;

  }

}



.visual-section::before {

  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  background: radial-gradient(circle, rgba(0, 128, 255, 0.15) 0%, transparent 70%);

  border-radius: 50%;

  top: -200px;

  right: -200px;

  animation: float 20s ease-in-out infinite;

  pointer-events: none;

}



.visual-section::after {

  content: "";

  position: absolute;

  width: 400px;

  height: 400px;

  background: radial-gradient(circle, rgba(0, 102, 255, 0.12) 0%, transparent 70%);

  border-radius: 50%;

  bottom: -150px;

  left: -150px;

  animation: float 25s ease-in-out infinite reverse;

  pointer-events: none;

}



@keyframes float {

  0%,

  100% {

    transform: translate(0, 0) scale(1);

  }

  33% {

    transform: translate(30px, -30px) scale(1.1);

  }

  66% {

    transform: translate(-20px, 20px) scale(0.9);

  }

}



.trust-heading {

  /* Adjusted heading size for narrower space */

  font-size: 30px;

  font-weight: 700;

  background: linear-gradient(135deg, #ffffff 0%, #e0f2ff 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  text-align: center;

  margin-bottom: 24px;

  position: relative;

  z-index: 1;

  letter-spacing: -0.5px;

  text-shadow: 0 0 40px rgba(255, 255, 255, 0.3);

  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));

}



/* Hero Image - Modern Treatment */

.hero-image-wrapper {

  width: 100%;

  border-radius: 20px;

  overflow: hidden;

  margin-bottom: 24px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px

    rgba(255, 255, 255, 0.2);

  position: relative;

  z-index: 1;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(10px);

  padding: 12px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.hero-image-wrapper:hover {

  transform: translateY(-4px);

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 0 0 1px

    rgba(255, 255, 255, 0.25);

}



.hero-image-wrapper::before {

  content: "";

  position: absolute;

  top: 12px;

  left: 12px;

  right: 12px;

  bottom: 12px;

  background: linear-gradient(180deg, transparent 0%, rgba(0, 102, 255, 0.03) 100%);

  border-radius: 12px;

  pointer-events: none;

  z-index: 1;

}



.hero-image {

  width: 100%;

  /* Reduced height slightly to fit better in 50/50 layout */

  height: 280px;

  object-fit: cover;

  object-position: center 30%;

  display: block;

  border-radius: 12px;

  position: relative;

}



/* Testimonial Container - FIXED HEIGHT */

.testimonial-container {

  position: relative;

  /* Reduced height to ensure no scroll in 50/50 layout */

  height: 180px;

  z-index: 1;

}



.testimonial-slider {

  position: relative;

  width: 100%;

  height: 100%;

}



.testimonial-card {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 20px;

  padding: 20px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px) scale(0.98);

  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0

    rgba(255, 255, 255, 0.5);

}



.testimonial-card.active {

  opacity: 1;

  visibility: visible;

  transform: translateY(0) scale(1);

}



.rating {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;

}



.stars {

  background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  font-size: 20px;

  letter-spacing: 3px;

  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));

}



.rating-number {

  font-size: 18px;

  font-weight: 700;

  color: #1a1a1a;

  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);

  padding: 4px 12px;

  border-radius: 20px;

  border: 1px solid rgba(0, 102, 255, 0.1);

}



.testimonial-text {

  font-size: 15px;

  color: #1a1a1a;

  line-height: 1.6;

  margin-bottom: 12px;

  font-weight: 500;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);

}



.customer-info {

  display: flex;

  align-items: center;

  gap: 12px;

}



.customer-details {

  flex: 1;

}



.customer-name {

  font-size: 15px;

  font-weight: 700;

  color: #1a1a1a;

  margin-bottom: 4px;

  letter-spacing: -0.3px;

}



.customer-business {

  font-size: 12px;

  color: #64748b;

  font-weight: 500;

}



/* Slider Dots */

.slider-dots {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-top: 12px;

  position: relative;

  z-index: 1;

}



.dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.2);

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(4px);

}



.dot:hover {

  background: rgba(255, 255, 255, 0.6);

  transform: scale(1.2);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.dot.active {

  width: 28px;

  border-radius: 5px;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(255, 255, 255, 0.4);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  backdrop-filter: blur(10px);

}



/* Responsive Design */

@media (max-width: 1024px) {

  .content-section {

    flex: 0 0 48%;

    max-width: 48%;

    padding: 50px 60px;

  }



  .main-heading {

    font-size: 46px;

  }



  .visual-section {

    flex: 0 0 52%;

    max-width: 52%;

    padding: 40px 32px;

  }



  .hero-image {

    height: 300px;

  }



  .testimonial-container {

    height: 200px;

  }

}



@media (max-width: 768px) {

  .onboarding-container {

    flex-direction: column;

  }



  .content-section {

    flex: 1;

    max-width: 100%;

    padding: 48px 32px;

  }



  .main-heading {

    font-size: 40px;

  }



  .subheading {

    font-size: 18px;

  }



  .visual-section {

    flex: 1;

    max-width: 100%;

    padding: 40px 24px;

  }



  .trust-heading {

    font-size: 26px;

  }



  .hero-image {

    height: 300px;

  }



  .testimonial-container {

    height: 280px;

  }



  .testimonial-card {

    padding: 24px;

  }

}

