@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


 

  

.font-googleSans{
  font-family: 'Google Sans Code', sans-serif;
}


.font-inter{
  font-family: 'inter', sans-serif;
}

.font-jua{
  font-family: 'Jua';
}





@font-face {
  font-family: 'Jua';
  font-style: normal;
  font-weight: 400;
  src:
    url('/styles/Jua-Regular.woff2') format('woff2');
  font-display: swap;
}


  @font-face {
  font-family: 'Svf';
  font-style: normal;
  font-weight: 400;
  src: url('/styles/segoeVariableFont.woff2') format('woff2');
  font-display: swap;
}

  
  body {
    font-family: 'Nunito', sans-serif;
    font-weight: normal;
  }
  
/* footer list  */
  
.Nav-Items a {
  font-size: 1rem;
  display: inline-block;
  /* color: purple; */
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.2s, color 0.2s;
  width: 100%;
  position: relative;
}

.Nav-Items a svg {
  position: absolute;
  height: 0.25rem;
  left: -0.125rem;
  right: -0.125rem;
  bottom: -0.25rem;
  width: calc(100% + 0.25rem);
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 0.3s;
}


.Nav-Items a:hover svg {
  stroke-dashoffset: 0rem;
  
}



/* ai answer css  */

  /* AI Button Styles */
  .ai-button-wrapper {
  position: relative;
  width: 32px;           /* Define size so flexbox can center it */
  height: 32px;
}


  /* GEMINI LOADER ANIMATIONS */
  /* GEMINI LOADER ANIMATIONS */
  .ai-loading-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    pointer-events: none;
    opacity: 0;
    transition: opacity  ease;
  }

  .ai-button-wrapper.loading .ai-loading-ring {
    opacity: 1;
  }

  /* Rotating Arc Animation */
  .arc-svg {
    width: 100%;
    height: 100%;
    transform-origin: center;
  }

 .ai-button-wrapper.loading .arc-svg {
    animation: rotate-arc var(--ai-anim-speed, 0.6s) ease-in-out infinite;
}

.arc-stroke {
    fill: none;
    stroke: url(#arc-gradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 60 140;
    stroke-dashoffset: 0;
}


  .copy-icon {
            height: 28px;
            width: 28px;
            
        }
        


  /* Sparkle Logo in Center */
  .sparkle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .sparkle-path {
    fill: url(#sparkle-gradient);
    transform-origin: center;
  }

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

  @keyframes sparkle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }

    
  }

  

  /* 
    CRITICAL: Keep button visible during loading even on unhover
    Override the opacity-0 md:group-hover:opacity-100 when loading state is active
  */
  .loadingButton.loading-active {
    opacity: 1 !important;
  }



  /* AI Answer overlay box css code start here  */
  /* AI Answer overlay box css code start here  */
  /* AI Answer overlay box css code start here  */


    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        
      
     

        /* Scoped overlay theme — applies only to the AI overlay/card */
        
        #card-wrapper,
        #card-wrapper * {
          /* background-color: #020617; */
          /* color: #f1f5f9; */
        }

        /* Glassmorphism Effect for the Modal */
        .glass-card { 
            /* background: #b9c9e3;  */
            border: 1px solid rgba(255, 255, 255, 0.1); 
        }

       
 
        /* LAYOUT TRANSITIONS */
        .overlay-container {
            position: fixed; inset: 0;
            display: flex; justify-content: center;
            z-index: 50; 
            pointer-events: none;
             visibility: hidden;
        }

        #card-wrapper {
            transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s ease;
            opacity: 0; display: flex; flex-direction: column;
        }

        /* Mobile View Styles */
                @media (max-width: 639px) {
                  .overlay-container {
                    align-items: flex-end;
        
                    bottom: 0px;
                  }
        
                  #card-wrapper {
                    transform: translateY(100%);
                    width: 100%;
                    height: 85vh;
                    border-radius: 24px 24px 0 0;
                  }
        
                  .overlay-visible #card-wrapper {
                    transform: translateY(0);
                    opacity: 1;
                  }
                }


        /* Desktop View Styles */
                @media (min-width: 640px) {
                  .overlay-container {
                    align-items: center;
                    /* padding: 20px; */
                    /* margin-top: 35px; */
                  }
        
                  #card-wrapper {
                    transform: scale(0.95);
                    width: 100%;
                    max-width: 52rem;
                    height: 80vh;
                    border-radius: 24px;
                  }
        
                  .overlay-visible #card-wrapper {
                    transform: scale(1);
                    opacity: 1;
                  }
                }
        
                .overlay-visible {
                  visibility: visible;
                  pointer-events: auto;
                }

        /* Horizontal Slide Track */
                #slider-track {
                  display: flex;
                  width: 200%;
                  height: 100%;
                  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
                }
        
                .slide {
                  width: 50%;
                  flex-shrink: 0;
                  height: 100%;
                  /* overflow-y: auto; */
                  /* padding: 2rem; */
                }
        
        /* Custom Scrollbar */
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        .custom-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }


    
        
        /* --- SKELETON LOADER ANIMATION --- */

/* Gemini AI Skeleton Loader */
.skeleton-loader {
  display: flex;
  gap: 10px;
  padding: 8px;
  align-items: end;
  
}

/* Shimmer Bars */
.skeleton-bar {
  height: 14px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  background: #ececf1;
}

/* Animated Gradient Sweep */
.skeleton-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(167,139,250,0.25) 35%,
    rgba(99,102,241,0.45) 50%,
    rgba(167,139,250,0.25) 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  /* animation: gemini-sweep var(--skeleton-dur, 1.5s) linear infinite; */
  animation: gemini-sweep 1.8s linear infinite;
}

/* Width Variants */
.w-long  { width: 100%; }
.w-med   { width: 70%; }
.w-short { width: 45%; }

/* Sweep Animation */
@keyframes gemini-sweep {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}