:root{
  --primary-blue: #3b82f6;
  --primary-purple: #8b5cf6;
  --primary-pink: #ec4899;
  --primary-pink-rgb: 236, 72, 153;
  --secondary-blue: 59, 130, 246;
  --secondary-purple: 139, 92, 246;
  --secondary-white: 255, 255, 255;
  --hero-gradient: 135deg, #0f172a 0%, #1e293b 50%, #334155 100%;
}
html, body {
  overflow-y: scroll;           
  scrollbar-width: none;        
  -ms-overflow-style: none;     
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;                
}


.gradient-text {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple), var(--primary-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-morphism {
  background: rgba(var(--secondary-white), 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--secondary-white), 0.1);
}

.hero-gradient {
  background: radial-gradient(
      ellipse at center,
      rgba(var(--secondary-blue), 0.15) 0%,
      transparent 70%
    ),
    linear-gradient(var(--hero-gradient));
}

.service-card {
  background: linear-gradient(
    135deg,
    rgba(var(--secondary-blue), 0.1) 0%,
    rgba(var(--secondary-purple), 0.1) 100%
  );
  border: 1px solid rgba(var(--secondary-blue), 0.2);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  border-color: rgba(var(--secondary-blue), 0.5);
  box-shadow: 0 20px 40px rgba(var(--secondary-blue), 0.2);
}

.floating-shapes::before,
.floating-shapes::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(var(--secondary-blue), 0.15),
    rgba(var(--secondary-purple), 0.15),
    rgba(var(--primary-pink-rgb), 0.1)
  );
  z-index: -1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  opacity: 0.85;
  background-size: 200% 200%;
  will-change: transform, filter, background-position, opacity;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.2));
}

/* BEFORE shape animations */
.floating-shapes::before {
  top: 10%;
  left: 10%;
  animation-name: floatScaleHueBefore;
  animation-duration: 10s;
  animation-delay: -2s;
}

/* AFTER shape animations */
.floating-shapes::after {
  bottom: 10%;
  right: 10%;
  animation-name: floatOpacityGradientAfter;
  animation-duration: 12s;
  animation-delay: -4s;
}

@keyframes floatScaleHueBefore {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    filter: hue-rotate(0deg) drop-shadow(0 0 12px rgba(139, 92, 246, 0.2));
    background-position: 0% 50%;
    opacity: 0.85;
  }
  50% {
    transform: translateY(-20px) translateX(15px) scale(1.05);
    filter: hue-rotate(25deg) drop-shadow(0 0 18px rgba(139, 92, 246, 0.35));
    background-position: 100% 50%;
    opacity: 0.95;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    filter: hue-rotate(0deg) drop-shadow(0 0 12px rgba(139, 92, 246, 0.2));
    background-position: 0% 50%;
    opacity: 0.85;
  }
}

@keyframes floatOpacityGradientAfter {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.8;
    background-position: 50% 0%;
  }
  50% {
    transform: translateY(25px) translateX(-20px);
    opacity: 0.65;
    background-position: 50% 100%;
  }
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.8;
    background-position: 50% 0%;
  }
}

.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple), var(--primary-pink));
  transform-origin: left;
  z-index: 1000;
}

.cta-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--secondary-white), 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--secondary-blue), 0.4);
}

.mobile-cta-button {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border: none;
  position: relative;
  overflow: hidden;
}

.mobile-cta-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(var(--secondary-white), 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.mobile-cta-button:active::after {
  width: 300px;
  height: 300px;
}

.unset-a-tag {
  border-width: unset;
  border-color: transparent;
}
.unset-a-tag.disabled{

  pointer-events: none;
  cursor: not-allowed;
}

/* Tailwind utility classes for loader border colors */
#loading-screen {
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fade-out {
  animation: fadeOut 0.6s forwards ease;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.page-content.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke: #fff;
  fill: transparent;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

:root {
  --draw-duration: 2s;
  --fill-duration: 2s;
  --delay-step: 0.2s;
}

/* Base styles for all letters */
.letter1,
.letter2,
.letter3,
.letter4,
.letter5,
.letter6 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  fill-opacity: 0; /* start fill hidden */
}

/* Stroke colors */
.letter1,
.letter2,
.letter3,
.letter4 {
  stroke: #fff;
  fill: #fff; /* solid white fill */
}

.letter5 {
  stroke: url(#linear-gradient-2);
  fill: url(#linear-gradient-2);
}

.letter6 {
  stroke: url(#linear-gradient);
  fill: url(#linear-gradient);
}

/* Animation sequences */

/* Letters 1-4 */
.letter1 {
  animation:
    draw var(--draw-duration) ease forwards 0s,
    fadeFill var(--fill-duration) ease forwards var(--draw-duration);
}

.letter2 {
  animation:
    draw var(--draw-duration) ease forwards calc(var(--delay-step) * 1),
    fadeFill var(--fill-duration) ease forwards calc(var(--delay-step) * 1 + var(--draw-duration));
}

.letter3 {
  animation:
    draw var(--draw-duration) ease forwards calc(var(--delay-step) * 2),
    fadeFill var(--fill-duration) ease forwards calc(var(--delay-step) * 2 + var(--draw-duration));
}

.letter4 {
  animation:
    draw var(--draw-duration) ease forwards calc(var(--delay-step) * 3),
    fadeFill var(--fill-duration) ease forwards calc(var(--delay-step) * 3 + var(--draw-duration));
}

/* Letters 5-6 */
.letter5 {
  animation:
    draw var(--draw-duration) ease forwards calc(var(--delay-step) * 4),
    fadeFill var(--fill-duration) ease forwards calc(var(--delay-step) * 4 + var(--draw-duration));
}

.letter6 {
  animation:
    draw var(--draw-duration) ease forwards calc(var(--delay-step) * 5),
    fadeFill var(--fill-duration) ease forwards calc(var(--delay-step) * 5 + var(--draw-duration));
}

.loading-bar {
  transition: opacity 0.5s ease;
  margin-top: 1.2rem;
  width: 16%;
  height: 8px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple), var(--primary-pink));
  background-size: 300% 100%;
  background-position: 0% 0%;
  animation: loadingAnim 4s ease-in-out infinite;
  z-index: 1000;
  border-radius: 4px;
}
/* Keyframes for animations */
@keyframes loadingAnim {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -300% 0%;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeFill {
  to {
    fill-opacity: 1;
  }
}

@keyframes erase {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}

@keyframes fadeOutFill {
  from {
    fill-opacity: 1;
  }
  to {
    fill-opacity: 0;
  }
}