/* Mobile Responsive CSS for dvyb Website */

/* ========================================
   DESKTOP STYLES (Apply to all sizes first)
   ======================================== */

/* Body background - match hero section */
body {
  background-color: #7466ff !important;
  background-image: url('../images/Home-banner-BG.jpg') !important;
  background-position: 0 0 !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Logo size - same across all devices (non-responsive) */
.navbar-area .image {
  width: 120px !important;
  height: auto !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* Hide Start 15 day trial button on all devices */
.primary-button {
  display: none !important;
}

/* Hide Test it button in How it works section */
.submit-button {
  display: none !important;
}

/* Social icons in How it works card */
.social-icons-wrap {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.social-icon-link {
  display: inline-block;
  cursor: default;
}

.social-icon {
  width: 32px;
  height: 32px;
}

/* White color for disabled/readonly input in How it works */
#name {
  background-color: white !important;
  color: #333 !important;
  cursor: default !important;
}

/* Lottie animation in How it works card 03 */
.how-it-works-lottie-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.how-it-works-lottie {
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: block !important;
}

/* Image in How it works card 02 */
.how-it-works-image-wrap {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.how-it-works-image {
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
  display: block !important;
  border-radius: 20px;
}

/* Schedule Demo CTA Section between How it works and FAQ */
.schedule-demo-cta-section {
  padding: 20px 0 !important;
  text-align: center;
  margin-bottom: 0 !important;
}

.banner-dashboard {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.voice-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.faq-section {
  padding-top: 20px !important;
}

.schedule-demo-cta-section .secondary-button {
  margin: 0 auto;
  display: inline-block;
  width: auto;
  min-width: auto;
  max-width: none;
}

/* Increase Schedule Demo button size across all devices */
.secondary-button {
  padding: 18px 45px !important;
  font-size: 18px !important;
  min-width: 200px !important;
  height: auto !important;
}

.secondary-button-content {
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Ensure Schedule Demo button is always on the right */
.navbar-area {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

.nav-menu-whole-wrap {
  margin-left: auto !important;
  display: flex;
  align-items: center;
}

.nav-login-area {
  display: flex !important;
  align-items: center;
  margin-left: auto;
}

/* ========================================
   HERO SECTION - ANIMATED WORDS FIX
   ======================================== */

/* Fix for desktop: Make all animated words appear in same position */
.hero-title-bottom-3,
.hero-title-bottom-4,
.hero-title-bottom-5 {
  font-size: 72px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin-top: -40px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
  display: block !important;
  white-space: nowrap !important;
  /* Allow Webflow width animation to work */
  max-width: none !important;
  /* Keep centered with transform - override any Webflow transforms */
  transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
}

/* Ensure gradient text also centers properly */
.hero-title-bottom-3.gradient-text,
.hero-title-bottom-4.gradient-text,
.hero-title-bottom-5.gradient-text {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Container for the animated word */
.banner-section .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 10px 20px 60px 20px;
}

/* Reduce space between header and hero section */
.banner-section {
  padding-top: 10px !important;
}

.header-main-section {
  margin-bottom: 0 !important;
}

/* Ensure proper spacing for the animated word area - EQUAL margins */
.banner-section .container .home-h1:first-child {
  margin-bottom: 100px !important;
}

.banner-section .container .home-h1:last-child {
  margin-top: 100px !important;
  margin-bottom: 0 !important;
}

/* Reduce gap between hero and splash section */
.splash-animation-section {
  margin-top: 60px !important;
}

/* ========================================
   MOBILE & TABLET STYLES
   ======================================== */

/* Mobile: up to 767px */
@media screen and (max-width: 767px) {
  
  /* ===== HEADER / NAVBAR ===== */
  
  /* Hide hamburger menu button */
  .nav-menu-button {
    display: none !important;
  }
  
  /* Ensure nav menu is always visible */
  .nav-menu-area {
    display: flex !important;
    position: static !important;
    background: transparent !important;
  }
  
  .nav-button-wrap {
    margin: 0 !important;
  }
  
  /* Schedule Demo buttons - Mobile */
  .secondary-button {
    padding: 16px 35px !important;
    font-size: 16px !important;
    min-width: 180px !important;
  }
  
  .secondary-button-content {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  
  .nav-login-area .secondary-button {
    padding: 16px 35px !important;
    font-size: 16px !important;
    min-width: 180px !important;
  }
  
  /* ===== HERO SECTION ===== */
  
  /* Container for hero text */
  .banner-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 15px 50px 15px;
    position: relative;
    min-height: 220px;
  }
  
  /* Main hero text sizing */
  .home-h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Animated gradient words (identity/vibe/language) - keep in same position */
  .hero-title-bottom-3,
  .hero-title-bottom-4,
  .hero-title-bottom-5 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    display: block !important;
    white-space: nowrap !important;
    /* Allow Webflow width animation to work on mobile */
    max-width: none !important;
    /* Keep centered with transform - override any Webflow transforms */
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
  }
  
  /* Ensure gradient text also centers properly on mobile */
  .hero-title-bottom-3.gradient-text,
  .hero-title-bottom-4.gradient-text,
  .hero-title-bottom-5.gradient-text {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Spacing for text blocks - Adjusted for text wrapping */
  .banner-section .container .home-h1:first-child {
    margin-bottom: 70px !important;
  }
  
  .banner-section .container .home-h1:last-child {
    margin-top: 50px !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }
  
  /* Reduce gap between hero and splash section on mobile */
  .splash-animation-section {
    margin-top: 30px !important;
  }
  
  /* Schedule Demo CTA Section - Mobile */
  .schedule-demo-cta-section {
    padding: 15px 0 !important;
  }
  
  .faq-section {
    padding-top: 15px !important;
  }
  
  /* How it works Lottie animation - Mobile */
  .how-it-works-lottie-wrap {
    margin-top: 15px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  
  .how-it-works-lottie {
    max-width: 320px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  
  /* How it works Image card 02 - Mobile */
  .how-it-works-image-wrap {
    margin-bottom: 15px !important;
  }
  
  .how-it-works-image {
    max-width: 320px !important;
  }
  
  /* CTA Button */
  .primary-button {
    margin-top: 30px !important;
    padding: 15px 30px !important;
    font-size: 16px !important;
  }
  
  /* ===== SPLASH ANIMATION SECTION ===== */
  
  /* Maintain animation speeds on mobile (same as desktop) */
  #lottie-row-1 {
    animation: scrollRight 20s linear infinite !important;
  }
  
  #lottie-row-3 {
    animation: scrollLeft 20s linear infinite !important;
  }
  
  /* Adjust item sizes for mobile while maintaining aspect ratio */
  .splash-animation-image-wrap {
    width: 180px !important;
    height: 320px !important;
    margin-right: 20px !important;
  }
  
  .splash-animation-image-wrap lottie-player {
    width: 180px !important;
    height: 320px !important;
  }
  
  /* Ensure splash section has proper overflow */
  .splash-animation-section {
    margin-top: 40px !important;
  }
  
  /* ===== HOW IT WORKS SECTION ===== */
  
  .how-it-works-section-title {
    font-size: 28px !important;
  }
  
  .how-it-works-title {
    font-size: 20px !important;
  }
  
  .how-it-works-content {
    font-size: 14px !important;
  }
  
  /* ===== FAQ SECTION ===== */
  
  .section-title {
    font-size: 28px !important;
  }
  
  .faq-content {
    font-size: 14px !important;
  }
}

/* Tablet: 768px to 991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
  
  /* ===== HEADER / NAVBAR ===== */
  
  /* Hide hamburger menu button on tablet */
  .nav-menu-button {
    display: none !important;
  }
  
  /* Ensure nav menu is always visible on tablet */
  .nav-menu-area {
    display: flex !important;
    position: static !important;
    background: transparent !important;
  }
  
  /* Ensure Schedule Demo button is visible and aligned right */
  .nav-login-area {
    display: flex !important;
    margin-left: auto !important;
  }
  
  /* ===== HERO SECTION ===== */
  
  /* Add proper padding to prevent text cutoff */
  .banner-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    min-height: 230px;
    padding: 10px 50px 55px 50px !important;
    max-width: 95% !important;
  }
  
  /* Hero text for tablets - allow text wrapping */
  .home-h1 {
    font-size: 42px !important;
    padding: 0 20px;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  
  /* Animated words stay in same position on tablets */
  .hero-title-bottom-3,
  .hero-title-bottom-4,
  .hero-title-bottom-5 {
    font-size: 56px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-top: -30px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    display: block !important;
    white-space: nowrap !important;
    max-width: none !important;
    /* Keep centered with transform - override any Webflow transforms */
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    -moz-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%) !important;
  }
  
  /* Ensure gradient text also centers properly on tablet */
  .hero-title-bottom-3.gradient-text,
  .hero-title-bottom-4.gradient-text,
  .hero-title-bottom-5.gradient-text {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* EQUAL margins for tablet */
  .banner-section .container .home-h1:first-child {
    margin-bottom: 85px !important;
  }
  
  .banner-section .container .home-h1:last-child {
    margin-top: 85px !important;
    margin-bottom: 0 !important;
  }
  
  /* Reduce gap between hero and splash section on tablet */
  .splash-animation-section {
    margin-top: 40px !important;
  }
  
  /* Schedule Demo buttons - Tablet */
  .secondary-button {
    padding: 17px 40px !important;
    font-size: 17px !important;
    min-width: 190px !important;
  }
  
  .secondary-button-content {
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  
  /* Schedule Demo CTA Section - Tablet */
  .schedule-demo-cta-section {
    padding: 20px 0 !important;
  }
  
  /* How it works Lottie animation - Tablet */
  .how-it-works-lottie-wrap {
    margin-top: 18px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  
  .how-it-works-lottie {
    max-width: 360px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  
  /* How it works Image card 02 - Tablet */
  .how-it-works-image-wrap {
    margin-bottom: 18px !important;
  }
  
  .how-it-works-image {
    max-width: 360px !important;
  }
  
  .faq-section {
    padding-top: 15px !important;
  }
  
  /* ===== HOW IT WORKS SECTION ===== */
  
  /* Stack cards vertically on tablet like mobile */
  .how-it-works-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 20px !important;
  }
  
  .how-it-works-card {
    font-size: 16px !important;
  }
  
  .how-it-works-title {
    font-size: 22px !important;
  }
  
  .how-it-works-content {
    font-size: 16px !important;
  }
  
  /* ===== SPLASH ANIMATIONS ===== */
  
  /* Splash animations for tablets */
  .splash-animation-image-wrap {
    width: 200px !important;
    height: 355px !important;
    margin-right: 30px !important;
  }
  
  .splash-animation-image-wrap lottie-player {
    width: 200px !important;
    height: 355px !important;
  }
}

/* Small mobile devices: up to 479px */
@media screen and (max-width: 479px) {
  
  /* Smaller hero text for very small screens */
  .home-h1 {
    font-size: 26px !important;
  }
  
  /* Animated words in same position */
  .hero-title-bottom-3,
  .hero-title-bottom-4,
  .hero-title-bottom-5 {
    font-size: 32px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-top: -20px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    display: block !important;
    white-space: nowrap !important;
    max-width: none !important;
    /* Keep centered with transform - override any Webflow transforms */
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    -moz-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%) !important;
  }
  
  /* Ensure gradient text also centers properly on small mobile */
  .hero-title-bottom-3.gradient-text,
  .hero-title-bottom-4.gradient-text,
  .hero-title-bottom-5.gradient-text {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .banner-section .container {
    min-height: 200px;
    padding: 10px 15px 45px 15px;
  }
  
  /* Adjusted margins for small devices to account for text wrapping */
  .banner-section .container .home-h1:first-child {
    margin-bottom: 60px !important;
  }
  
  .banner-section .container .home-h1:last-child {
    margin-top: 45px !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }
  
  /* Reduce gap between hero and splash section on small mobile */
  .splash-animation-section {
    margin-top: 25px !important;
  }
  
  /* Smaller button */
  .primary-button {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
  
  /* Schedule Demo buttons - Small Mobile */
  .secondary-button {
    padding: 14px 30px !important;
    font-size: 15px !important;
    min-width: 160px !important;
  }
  
  .secondary-button-content {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  
  .nav-login-area .secondary-button {
    padding: 14px 30px !important;
    font-size: 15px !important;
    min-width: 160px !important;
  }
  
  /* Smaller splash animations for very small screens */
  .splash-animation-image-wrap {
    width: 150px !important;
    height: 266px !important;
    margin-right: 15px !important;
  }
  
  .splash-animation-image-wrap lottie-player {
    width: 150px !important;
    height: 266px !important;
  }
}

/* Ensure navbar stays on top */
.navbar {
  position: relative !important;
  z-index: 1000;
}