@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap');
body{
    font-family: 'Heebo', sans-serif;
}


.bridge:hover::after {
  content: "";  
  position: absolute;
  top: 100%; /* Just below the menu item */
  left: 0;
  width: 100%;
  height: 40px; /* Adjust as needed */
}

.flexed-1 {
    display: flex;
  }

.hidden-1 {
  display: none;
}

@media (min-width: 640px) {
  .hidden-1 {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .hidden-1 {
    display: flex !important;
  }
}

[v-cloak] {
  display: none;
}
/* brand slider */
.slider-new {
  overflow: hidden;
  white-space: nowrap;
}

.slider-track-new {
  display: inline-flex;
  gap: 30px;
  animation: slide1 20s linear infinite;
}
.slider-track-new1 {
  display: inline-flex;
  gap: 30px;
  animation: slide1 30s linear infinite;
}

@keyframes slide1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* home section */
.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  max-height: 0;
}

.expand-enter-to,
.expand-leave-from {
  opacity: 1;
  max-height: 200px; /* Adjust based on expected content size */
}

/* word animation */
#changingWord {
  display: inline-block;
  transition: all 0.5s ease-in-out;
}

.fade-up {
  animation: fadeUp 0.5s ease-in-out;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* AI section */

.ai-img {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* This moves the image up + fades in */
.ai-img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* This fades out but keeps the transform at 0 */
.ai-img.hidden-after {
  opacity: 0;
  transform: translateY(0);
}

/* mobile menu icon */

.menu {
  background-color: #FFF;
  border: none;
  cursor: pointer;
  padding: 0;
}
.line {
  fill: none;
  stroke: black;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}


/* features page */


    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }

    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .float {
      animation: float 5s ease-in-out infinite;
    }

    #img-1 {
      transform: rotate(2.68px)
    }

    #img-2 {
      transform: rotate(-2px)
    }

    #img-3 {
      transform: rotate(3px)
    }

    #img-4 {
      transform: rotate(-3px)
    }


    #img-1 {
      animation: float 5s ease-in-out infinite
    }

    #img-2 {
      animation: float 5s ease-in-out infinite
    }

    #img-3 {
      animation: float 5s ease-in-out infinite
    }

    #img-4 {
      animation: float 5s ease-in-out infinite
    }

    .scroll-container {
      display: flex;
      width: max-content;
      animation: scroll-left 60s linear infinite;
    }

    .scroll-track {
      display: flex;
      align-items: center;
      gap: 50px;
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    @keyframes scroll-slow {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .animate-scroll-slow {
      animation: scroll-slow 30s linear infinite;
    }


    /* Pricing Page */

    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }

    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* call icon */

.call-icon {
    position: fixed;
    bottom: 120px;
    right: 25px;
    height: 45px;
    width: 45px;
    transition: transform 0.3s ease;
    display: none; /* Hidden by default */
    opacity: 0; /* Start hidden */
    z-index: 1000;
}

.call-icon-img {
    max-width: none !important;
}


@media (max-width: 768px) {
    .call-icon {
        display: block !important;
        animation: popup 0.5s ease-out forwards; /* Run animation */
    }
}

@keyframes popup {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* logo animation */
/*  Top-Left → Center (default slant) */
@keyframes logoSlideIn {
  0% {
    transform: translate(-30px, -30px);
    opacity: 1;
    filter: blur(3px);
  }
  50% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Top*/
@keyframes logoSlideInTop {
  0% {
    transform: translateY(-30px);
    opacity: 1;
    filter: blur(3px);
  }
  50% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Bottom */
@keyframes logoSlideInBottom {
  0% {
    transform: translateY(30px);
    opacity: 1;
    filter: blur(3px);
  }
  50% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

/*  Bottom-Right → Center */
@keyframes logoSlideInRight {
  0% {
    transform: translate(30px, -30px);
    opacity: 1;
    filter: blur(3px);
  }
  50% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

/* ✨ Base animation style */
.logo-animate {
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  animation-fill-mode: forwards;
  will-change: transform, filter, opacity;
}

/* crm text animation */
/* FULL LOOP LENGTH = 4s (adjust if needed) */

/* First text: OUT → (wait) → IN → (wait) */
.text-animate #text2 {
  animation: 
    slantOut 0.5s ease-in 1s; /* start after 1s WITH text2 visible */
  animation-fill-mode: forwards;
}

.text-animate #text1 {
  opacity: 0; /* hidden initially */
  animation:
    slantIn 1s ease-out 2s; /* delay until text2 is gone */
  animation-fill-mode: forwards;
}

#text1 { opacity: 0; }

/* - Cross transition duration (tweak as needed) */
:root { --txt-duration: 0.9s; }
 
/* Text2: slant + fade OUT (starts immediately when .text-animate added) */
.text-animate #text2 {
  animation:
    slantOut var(--txt-duration) ease-in 1s forwards;
}

/* Text1: slant + fade IN — starts slightly after text2 begins for a smooth handoff */
/* Change the delay value (0s → start same time, 0.15s → small overlap, 0.35s → less overlap) */
.text-animate #text1 {
  animation:
    slantIn var(--txt-duration) ease-out 1.3s forwards;
}

/* Example slantIn/slantOut that include opacity so fade is smooth */
@keyframes slantIn {
  0% { transform: translate(-60px, -60px); opacity: 0; filter: blur(1px); }
  40% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes slantOut {
  0% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
  40% { transform: translate(60px, 60px); opacity: 1; filter: blur(1px); }
  100% { transform: translate(60px, 60px); opacity: 0; }
}