.elementor-kit-4307{--e-global-color-primary:#016A6D;--e-global-color-secondary:#F9A35E;--e-global-color-text:#000000;--e-global-color-accent:#F9A35E;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;background-color:transparent;font-family:"Montserrat", Sans-serif;background-image:linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 50%);}.elementor-kit-4307 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4307 a{font-family:"Montserrat", Sans-serif;}.elementor-kit-4307 h1{font-family:"Montserrat", Sans-serif;}.elementor-kit-4307 h3{font-family:"Montserrat", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@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 */"/* ========================================
   Lab1K Coming Soon Page - Custom CSS for Elementor
   Add this to: Elementor → Custom CSS or Appearance → Customize → Additional CSS
   ======================================== */

/* ========== BASE STYLES ========== */

#coming-soon-container {
  position: relative;
  overflow: hidden;
}

/* Background Animated Shapes */
#coming-soon-container::before,
#coming-soon-container::after {
  content: '';
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  opacity: 0.1;
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

#coming-soon-container::before {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #14b8a6, #06b6d4);
  top: 10%;
  left: 10%;
  animation: float 8s ease-in-out infinite;
}

#coming-soon-container::after {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  bottom: 15%;
  right: 10%;
  animation: float 10s ease-in-out infinite reverse;
}

/* ========== LOGO SECTION ========== */

.logo-container {
  display: inline-block;
  position: relative;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: logoFloat 4s ease-in-out infinite;
}

.logo-container:hover {
  transform: translateY(-8px) rotateX(5deg) rotateY(5deg) !important;
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.logo-container img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  display: block;
}

/* ========== HERO TEXT ========== */

.highlight-text {
  background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 50%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradientShift 3s ease-in-out infinite;
  display: inline-block;
}

/* Add this class to your heading element in Elementor */
.hero-title {
  text-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.3),
    0 4px 20px rgba(20, 184, 166, 0.2);
}

/* ========== FORM STYLING ========== */

.signup-form {
  max-width: 600px;
  margin: 0 auto;
}

/* Email Input with Icon */
.email-input-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.email-input-wrapper:hover {
  border-color: rgba(20, 184, 166, 0.3) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.email-input-wrapper:focus-within {
  border-color: #14b8a6 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 8px 24px rgba(20, 184, 166, 0.2),
    0 0 0 4px rgba(20, 184, 166, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
}

/* Elementor Form Field Overrides */
.elementor-field-type-email input {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.elementor-field-type-email input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}


/* ========== SOCIAL MEDIA ICONS ========== */

.social-section .elementor-icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-section a:hover .elementor-icon {
  transform: translateY(-4px) rotateZ(5deg);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.3) !important;
}

/* Individual social icon containers */
.elementor-social-icon {
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

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

@keyframes float {
  0%, 100% { 
    transform: translateY(0) rotate(0deg); 
  }
  50% { 
    transform: translateY(-30px) rotate(5deg); 
  }
}

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

@keyframes gradientShift {
  0%, 100% { 
    background-position: 0% 50%; 
  }
  50% { 
    background-position: 100% 50%; 
  }
}

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

/* Apply fade-in animation to sections */
.elementor-element {
  animation: fadeInUp 1s ease-out;
}

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

.glass-effect {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ========== GRADIENT ORBS (Additional Background) ========== */

/* Add these as pseudo-elements to specific sections if needed */
.gradient-orb-section::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #14b8a6 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  top: -10%;
  right: -10%;
  pointer-events: none;
  animation: pulse 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.15; 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.2; 
  }
}

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 1024px) {
  #coming-soon-container::before,
  #coming-soon-container::after {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 767px) {
  #coming-soon-container::before,
  #coming-soon-container::after {
    width: 250px;
    height: 250px;
  }
  
  .logo-container {
    padding: 1.5rem !important;
  }
  
  .signup-form {
    padding: 0 1rem;
  }
}

/* ========== SELECTION STYLING ========== */

::selection {
  background: rgba(20, 184, 166, 0.3);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(20, 184, 166, 0.3);
  color: #ffffff;
}

/* ========== SMOOTH SCROLLING ========== */

html {
  scroll-behavior: smooth;
}

/* ========== ELEMENTOR SPECIFIC OVERRIDES ========== */

/* Remove default Elementor margins that might interfere */
.coming-soon-page .elementor-section {
  margin: 0 !important;
}

/* Ensure full height section */
.coming-soon-page .elementor-section-height-full {
  min-height: 100vh !important;
}

/* Form success message styling */
.elementor-message-success {
  background: rgba(20, 184, 166, 0.1) !important;
  border-color: #14b8a6 !important;
  color: #14b8a6 !important;
  backdrop-filter: blur(12px);
}

/* Form error message styling */
.elementor-message-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  backdrop-filter: blur(12px);
}

/* ========== ADDITIONAL 3D ELEMENTS ========== */

/* Add this class to any element you want to have 3D depth */
.depth-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.depth-3d:hover {
  transform: translateZ(20px);
}

/* Layered shadow for depth perception */
.layered-shadow {
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.1) !important;
}

/* ========== END OF CUSTOM CSS ========== */

/* 
USAGE NOTES:
1. Copy entire file content
2. Paste in: Elementor → Custom CSS or Appearance → Customize → Additional CSS
3. Clear all caches after adding
4. Test on frontend (not in Elementor editor for best results)
5. Adjust values as needed for your design preferences

CUSTOMIZATION:
- Change #14b8a6 and #f97316 to match your brand colors
- Adjust animation durations (currently 3-8 seconds)
- Modify border-radius values for different corner styles
- Change opacity values for transparency levels
*/
"
"/* ========================================
   GLOWING ORB CURSOR FOLLOWER
   Add to Elementor Custom CSS
   ======================================== */

/* Hide default cursor and show custom follower */
#coming-soon-container {
  cursor: none !important;
}

/* Main cursor orb */
.cursor-follower {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #06b6d4);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: all 0.15s cubic-bezier(0.75, -0.5, 0.25, 1.5);
  mix-blend-mode: screen;
  opacity: 0.8;
}

/* Glowing aura effect */
.cursor-follower-glow {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.4) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9998;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: blur(10px);
  mix-blend-mode: screen;
}

/* Hover effect - changes to coral/orange on interactive elements */
#coming-soon-container a:hover,
#coming-soon-container button:hover,
#coming-soon-container input:hover {
  cursor: none !important;
}

/* Active state when hovering over interactive elements */
body.cursor-active .cursor-follower {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #f97316, #fb923c);
}

body.cursor-active .cursor-follower-glow {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.5) 0%, transparent 70%);
}

/* Disable on mobile/tablet (touch devices) */
@media (max-width: 1024px) {
  #coming-soon-container {
    cursor: auto !important;
  }
  
  .cursor-follower,
  .cursor-follower-glow {
    display: none !important;
  }
}

/* Smooth transitions */
#coming-soon-container * {
  cursor: none !important;
}

/* ========================================
   END OF CURSOR FOLLOWER CSS
   ======================================== */
"/* End custom CSS */