.elementor-kit-6{--e-global-color-primary:#0F172A;--e-global-color-secondary:#F8FAFC;--e-global-color-text:#0F172A;--e-global-color-accent:#6366F1;--e-global-color-dc7e2b2:#9CA3AF;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-3502180-font-size:1rem;--e-global-typography-f0795c3-font-size:1.125rem;--e-global-typography-6900766-font-size:1.25rem;--e-global-typography-8f98c9a-font-size:1.5rem;--e-global-typography-3d31181-font-size:1.875rem;--e-global-typography-2dc89af-font-size:2.25rem;--e-global-typography-5871d2c-font-size:3rem;--e-global-typography-d40990c-font-size:3.75rem;--e-global-typography-b9308ff-font-size:4.5rem;--e-global-typography-4752e90-font-size:6rem;--e-global-typography-664668a-font-size:8rem;font-family:"Inter", Sans-serif;}.elementor-kit-6 h1{font-family:"Inter", Sans-serif;font-size:clamp(2.25rem, 5vw + 1rem, 3.75rem);}.elementor-kit-6 h2{font-size:clamp(1.875rem, 4vw + 0.5rem, 3rem);}.elementor-kit-6 h3{font-size:clamp(1.5rem, 3vw + 0.5rem, 2.25rem);}.elementor-kit-6 h4{font-size:clamp(1.25rem, 2.5vw + 0.5rem, 1.875rem);}.elementor-kit-6 h5{font-size:clamp(1.125rem, 2vw + 0.5rem, 1.5rem);}.elementor-kit-6 h6{font-size:clamp(1rem, 1.5vw + 0.5rem, 1.25rem);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 32px;--widgets-spacing-row:20px;--widgets-spacing-column:32px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================
   WERKERA CUSTOM STYLES
   ============================================ */

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

.gradient-primary {
  background: linear-gradient(to right, #6366f1, #3b82f6);
}

.gradient-primary-br {
  background: linear-gradient(to bottom right, #6366f1, #3b82f6);
}

.gradient-success {
  background: linear-gradient(to right, #3b82f6, #10b981);
}

.gradient-success-br {
  background: linear-gradient(to bottom right, #3b82f6, #10b981);
}

.gradient-spectrum {
  background: linear-gradient(to right, #6366f1, #3b82f6, #10b981);
}

.gradient-spectrum-br {
  background: linear-gradient(to bottom right, #6366f1, #3b82f6, #10b981);
}

.gradient-reverse {
  background: linear-gradient(to right, #10b981, #6366f1);
}

.gradient-dark {
  background: linear-gradient(to bottom, #0f172a, #1e293b);
}

.gradient-light {
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

/* ============================================
   GRADIENT TEXT
   ============================================ */

.gradient-text-primary {
  background: linear-gradient(to right, #6366f1, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-success {
  background: linear-gradient(to right, #3b82f6, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-spectrum {
  background: linear-gradient(to right, #6366f1, #3b82f6, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-reverse {
  background: linear-gradient(to right, #10b981, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================
   GRADIENT TEXT WITH GLOW
   ============================================ */

.gradient-text-glow {
  position: relative;
  display: inline-block;
}

.gradient-text-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #6366f1, #3b82f6);
  filter: blur(40px);
  opacity: 0.5;
  z-index: -1;
}

.gradient-text-glow .text {
  background: linear-gradient(to right, #6366f1, #3b82f6, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  z-index: 1;
}

/* ============================================
   ANIMATED GRADIENTS
   ============================================ */

.gradient-animated {
  background: linear-gradient(
    45deg,
    #6366f1 0%,
    #3b82f6 25%,
    #10b981 50%,
    #6366f1 75%,
    #3b82f6 100%
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-mesh {
  position: relative;
  overflow: hidden;
}

.gradient-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    #6366f1 0%,
    #3b82f6 25%,
    #10b981 50%,
    #6366f1 75%,
    #3b82f6 100%
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
  opacity: 0.3;
  z-index: 0;
}

.gradient-mesh > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   GLASS MORPHISM
   ============================================ */

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

.glow-primary {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5),
              0 0 40px rgba(99, 102, 241, 0.3);
}

.glow-success {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5),
              0 0 40px rgba(16, 185, 129, 0.3);
}

.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5),
              0 0 40px rgba(59, 130, 246, 0.3);
}

.glow-gradient {
  position: relative;
}

.glow-gradient::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(to right, #6366f1, #3b82f6, #10b981);
  border-radius: inherit;
  filter: blur(20px);
  opacity: 0.5;
  z-index: -1;
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.4),
              0 0 60px rgba(99, 102, 241, 0.2);
}

.hover-gradient-shift {
  background-size: 200% 100%;
  transition: background-position 0.5s ease;
}

.hover-gradient-shift:hover {
  background-position: 100% 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.8);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.6s ease-out;
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-rotate-slow {
  animation: rotate-slow 20s linear infinite;
}

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */

.border-gradient-primary {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, #6366f1, #3b82f6);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.border-gradient-spectrum {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, #6366f1, #3b82f6, #10b981);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.border-gradient-dark {
  border: 2px solid transparent;
  background-image: linear-gradient(#0f172a, #0f172a),
                    linear-gradient(to right, #6366f1, #3b82f6, #10b981);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.divider-gradient {
  height: 2px;
  background: linear-gradient(to right, transparent, #6366f1, #3b82f6, transparent);
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #6366f1;
}

.card-gradient-border {
  position: relative;
  background: white;
  border-radius: 1rem;
}

.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(to right, #6366f1, #3b82f6, #10b981);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-gradient-primary {
  background: linear-gradient(to right, #6366f1, #3b82f6);
  color: white;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.btn-gradient-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn-gradient-success {
  background: linear-gradient(to right, #3b82f6, #10b981);
  color: white;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.btn-gradient-success:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn-outline-gradient {
  position: relative;
  background: transparent;
  color: #0f172a;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  border: 2px solid transparent;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, #6366f1, #3b82f6);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: all 0.3s ease;
}

.btn-outline-gradient:hover {
  background-image: linear-gradient(to right, #6366f1, #3b82f6),
                    linear-gradient(to right, #6366f1, #3b82f6);
  color: white;
}

/* ============================================
   SPECIAL EFFECTS
   ============================================ */

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.text-shadow-strong {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.text-shadow-glow {
  text-shadow: 0 0 20px rgba(99, 102, 241, 0.5),
               0 0 40px rgba(99, 102, 241, 0.3);
}

.backdrop-blur-strong {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}/* End custom CSS */