@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&family=Poppins:wght@400;600&display=swap');
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
  box-sizing: inherit;
}
/* GLOBAL FONT RESET */
* {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section:not(.allow-scroll-x) {
  overflow-x: hidden !important;
}
:root {
  --primary-color: #007bff; 
  --secondary-color: #6c757d; 
  --text-color-dark: #333; 
  --text-color-light: #f8f9fa; 
  --accent-color-1: #ff6b6b; 
  --accent-color-2: #4dabf7; 
  --gradient-start: #1a1a1a; 
  --gradient-end: #000;    
  --border-color: rgba(255, 255, 255, 0.1); 
  --overlay-bg: rgba(0, 0, 0, 0.7); 
  --font-size-base: 1rem;      
  --font-size-h1: 3.5rem;      
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.8rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  /* Spacing */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-xxl: 4rem;    /* 64px */

  /* Borders & Shadows */
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;
  --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.4);
  --inner-shadow-subtle: inset 0 0 10px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 0.2s ease-out;
  --transition-medium: 0.4s ease-in-out;
  --transition-slow: 0.8s cubic-bezier(0.77, 0, 0.175, 1); /* Custom smooth transition */
  --transition-extra-slow: 1.2s cubic-bezier(0.19, 1, 0.22, 1); /* For cinematic effects */
}
.top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Mulish', sans-serif;
  background: linear-gradient(to right, #88e7ff, #f5df86); /* royal purple to dark cyan-blue */
  padding: 6px 12px;
  position: fixed;
  top: 0;
  z-index: 9999;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.marquee-left {
  width: 75%;
  overflow: hidden;
}

.marquee-left marquee {
  font-size: 1.4rem;
  font-weight: 400;
  color: #4385ff; /* light yellowish lime */
  text-shadow: 0 0 8px #f8ffae88;
}

.marquee-right {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
}

.marquee-highlight {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(to right, #9b5de5, #4a00e0); /* Deep violet glow */
  padding: 8px 18px;
  border-radius: 24px;
  white-space: nowrap;
  box-shadow: 0 0 18px #8e2de2aa, 0 0 25px #8e2de288;
  animation: glowLoop 4s ease-in-out infinite, fadeSlide 2s ease-out 1;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ✨ Glowing loop */
@keyframes glowLoop {
  0%, 100% {
    box-shadow: 0 0 8px #9b5de588, 0 0 12px #9b5de544;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 24px #9b5de5cc, 0 0 40px #c77dff88;
    transform: scale(1.05);
  }
}

/* 👋 Entrance animation */
@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Header styles (Updated for better centering with Grid) */
header {
  position: fixed;
  top: 30px;
  left: 0; /* Added left:0 for consistency */
  width: 100%;
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 70px;
  z-index: 998;

  display: grid; /* ✅ Use Grid for precise layout */
  /* Define 3 columns: Brand, Nav, Login */
  /* 1fr for brand, auto for nav (it will center itself), 1fr for login */
  /* Or, for simpler centering, a 3-column setup where the middle column takes main space */
  grid-template-columns: auto 1fr auto; /* ✅ Brand | Nav Center | Login Button */
  align-items: center; /* Vertically center items in the grid row */
  padding: 0 20px;
}

.brand {
  /* Existing properties */
  display: flex;
  padding: 16px 20px; /* ↑ This increases height */
  align-items: center;
  gap: 10px;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 400;
  font-family: 'Lato', 'Poppins', sans-serif;
  color: #111111;
  z-index: 1002;
  /* Removed flex-shrink: 0; as grid handles sizing better */
  grid-column: 1; /* ✅ Place brand in the first column */
}
.ttd-icon {
  height: 50px;
  filter: none;
  mix-blend-mode: normal;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.ttd-brand-name {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
}

/* Navbar styles (Updated for centering within grid) */
.nav-center {
  height: 100px !important;;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* ✅ Center items within this flex container */
  grid-column: 2; /* ✅ Place nav-center in the second (middle) column */
  height: 100%; /* Ensure it fills the grid cell height */
}

nav ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: center; /* Keep this to center list items within ul */
align-items: center;
height: 100%; /* Ensure ul takes full height of nav-center */
}

.login-btn {
  /* Existing properties */
  background-color: #0077cc;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 20px; /* Keep this margin as it creates space between login button and nav items */
  z-index: 1002;
  /* Removed flex-shrink: 0; as grid handles sizing better */
  grid-column: 3; /* ✅ Place login-btn in the third column */
  justify-self: end; /* ✅ Push to the end of its grid cell */
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-weight: 500;
  font-size: 1.2rem;
  transition: color 0.3s ease, border-bottom 0.3s ease;
  padding-bottom: 3px;
}

nav ul li a:hover {
  color: #0077cc;
  border-bottom: 3px solid #0077cc;
}



.login-btn:hover {
  background-color: #000000;
}

/* Hide overlay menu by default */
#overlay-menu {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.95);
  color: #ffffff;
  text-align: center;
  transition: top 0.5s ease;
  z-index: 999;
}



#overlay-menu ul {
  list-style: none;
  padding: 0;
  margin-top: 120px;
}

#overlay-menu ul li {
  margin: 25px 0;
}

#overlay-menu ul li a {
  color: #ffffff;
  font-size: 24px;
  text-decoration: none;
}
.marquee-container {
width: 100%;
}

/* Responsive navbar */




.overlay-dropdown {
  display: block;
}
/* Hide by default */
#overlay-menu {
  background: #111;
  color: white;
  padding: 20px;
  min-height: 100vh;
}





/* Hero layout */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    min-height: auto;
    position: relative;
    /* REMOVE background-color */
}

.hero-left, .hero-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-logo-wrapper {
    position: relative;
    margin-bottom: 2rem;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    box-shadow: 10px 10px 20px #c5c5c5, -10px -10px 20px #ffffff;
    overflow: hidden;
    display: block;
    animation: slideInLeft 1s ease forwards;
}

.hero-logo {
    width: 650px;
    height: 650px;
    background-image: url("/assets/theteachingdesklogo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;    /* ✅ ADD THIS IF NOT PRESENT */
    box-shadow: none !important;                 /* ✅ ADD THIS */
    border: none !important;                     /* ✅ ADD THIS */
    animation: fadeIn 1s ease;
}
.hero-tagline {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 600px;
    color: black;
    opacity: 0;
    transform: translateY(20px);
    overflow: hidden;
    display: inline-block;
    position: relative;
    animation: textReveal 1s ease-out 1.4s forwards;
}

.hero-tagline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    transform: translateX(0);
    animation: slideCurtain 1s ease-out 1.2s forwards;
}


/* Hero animations */
@keyframes slideInLeft {
    from { transform: translateX(-300px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideCurtain {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

/* Lottie wrapper */
.lottie-wrapper {
    position: relative;
    display: inline-block;
}


.lottie-wrapper lottie-player {
    position: relative;
    height: 1050px;
    width: 1050px;

    z-index: 1;
}


.social-space h2, .social-space h2 * {
    color: #111111;
}
/* ⭐ Font Awesome Social Icons Styles ⭐ */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

.social-icons a {
    text-decoration: none;
    color: #000000;         /* normal black icons */
    font-size: 20px;
    margin: 0 8px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    color: #0077cc;         /* blue hover effect like your friend’s site */
    transform: scale(1.3) rotate(5deg);
}

/* Footer text white */
footer {
    color: #ffffff;
}

/* ✅ Main content white wrapper */
.main-content {
    background-color: #ffffff;
    color: #111111;
}

/* ✅ Light section text settings */
.main-content h2,
.main-content h4,
.main-content a,
.main-content p {
    color: #111111 !important;
}

.main-content a.learn-more {
    color: #0077cc !important;
    text-decoration: none;
}

.main-content a.learn-more:hover {
    text-decoration: underline !important;
}
/* ⭐ UPGRADED SUPER PROFESSIONAL SERVICES SECTION ⭐ */

/* ⭐ FINAL SUPER PROFESSIONAL SERVICES SECTION WITH COLOR CHANGING GRADIENT ⭐ */
.services {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f7f8fa, #fbfcfc, #e4e6e8, #c3c4c4);
    animation: gradientShift 2s ease infinite;
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

/* Gradient animation keyframes */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.service-row {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 25px;
    padding: 4rem 2rem;
    width: 80%;
    max-width: 1200px;
    margin-bottom: 4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

.service-row:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Alternate row flip for alternating layout */
.service-row:nth-child(even) {
    flex-direction: row-reverse;
}

.service-text {
    flex: 1;
    text-align: left;
    padding: 0 2rem;
}

.service-text h2 {
    font-size: 2.2rem;
    text-align: center;
    color: #222;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.service-text p {
    font-size: 1.2rem;
    text-align: center;
    color: #555;
    line-height: 1.8;
}

.service-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.service-image img {
    width: 450px;
    max-width: 100%;
    height: auto;
    transition: transform 0.4s ease, filter 0.4s ease;
    animation: floatImage 6s ease-in-out infinite;
}

.service-image img:hover {
    transform: scale(1.08);
}

/* Floating gentle bounce for svg images */
@keyframes floatImage {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.lottie-services-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.lottie-services-wrapper lottie-player {
    width: 1000px !important;
    height: 1000px !important;
    max-width: 100%;
}
/* 🌟 Step 3: Micro-interactions on buttons & icons */
nav ul li a {
    transition: color 0.3s ease, border-bottom 0.3s ease, transform 0.3s ease;
}

nav ul li a:hover {
    transform: scale(1.05);
}

.login-btn {
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.login-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.social-icons img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icons img:hover {
    transform: scale(1.2) rotate(5deg);
    filter: brightness(1.2);
}
/* ⭐ Step 4: Scroll fade-in effect for service blocks */
.service-row {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.service-row.reveal {
    opacity: 1;
    transform: translateY(0);
}
/* Why Choose Us Section */
.why-choose {
    text-align: center;
    padding: 4rem 2rem;
    background-color: #fff;
    color: #333;
}

.why-choose h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.why-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 3rem;
}

.why-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.why-card {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.why-card img {
    width: 80px;
    margin-bottom: 1rem;
}

.why-card h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.why-card p {
    font-size: 1.5rem;
    color: #555;
}
.why-card lottie-player {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
/* ✅ Apple-style Infinite Marquee Slider */
.photo-slider {
    width: 100%;
    overflow-x: hidden;
    position: relative;
    background-color: #f8f9fb;
    
}


.photo-slider-container {
    display: flex;
    transition: transform 0.6s ease-in-out;   /* ✅ smooth movement */
}

.photo-slide {
    flex: 0 0 auto;
    width: 1000px;
    max-width: 1200px;
    height: 600px;
    position: relative;
    margin-right: 25px;
}

/* ⭐ Continuous scrolling effect */
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(-25%); }
    45%  { transform: translateX(-25%); }   /* pause for 2s at -25% */
    80%  { transform: translateX(-50%); }
    100% { transform: translateX(-50%); }   /* pause for 2s at -50% if looped */
}

/* ✅ Lightbox popup styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    animation: fadeIn 0.3s ease;
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    border-radius: 8px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply zoom to lightbox image */
.lightbox-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 1000px;
    height: auto;
    animation: zoomIn 0.4s ease;
    border-radius: 10px;
}
.photo-overlay {
    position: relative;
    overflow: hidden;
}

.view-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    color: #000000;
    font-size: 25px;
    padding: 8px 16px;
    border-radius: 6px;
    display: none;
    cursor: pointer;
    z-index: 9999;
}

.photo-overlay:hover .view-btn {
    display: block;
}
.photo-slide {
    position: relative;          /* ✅ anchor point for absolute label */
    overflow: hidden;
}

.slider-label {
    position: relative;
    bottom: 150px;
    left: 20px;
    background-color: transparent;
    color: white;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    pointer-events: none;
    padding: 4px 8px;                      /* restore padding */
    border-radius: 4px;  
    z-index: 9999;                  /* restore border radius */
}
.photo-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
    z-index: 0;
}
.photo-overlay img {
    transition: transform 0.4s ease;  /* ✅ smooth zoom transition */
}

.photo-overlay:hover img {
    transform: scale(1.1);            /* ✅ zoom in by 10% */
}
.why-choose {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #e6f7ff, #d8f3dc, #fdfdfd, #e6e6fa);
    background-size: 400% 400%;
    animation: whyChooseGradientShift 2s ease infinite;
    color: #333;
}

/* ✔️ Keep your existing animation (already present) */
@keyframes whyChooseGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes testimonialGradientShift {
    0% {
        background: linear-gradient(135deg, #a8e6ff, #0077cc);
    }
    50% {
        background: linear-gradient(135deg, #d0f0ff, #005fa3);
    }
    100% {
        background: linear-gradient(135deg, #a8e6ff, #0077cc);
    }
}
/* 🌟 Animated Horizontal Journey with Arrows */
.process-journey-animated {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #fdfdfd, #e6f7ff, #fdfdfd);
    background-size: 600% 600%;
    animation: whyChooseGradientShift 4s ease infinite;
}

.process-journey-animated h2 {
    font-size: 2.5rem;
    margin-bottom: 5rem;
    color: #333;
}

.process-journey-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 2rem;
}

.process-step,
.arrow-step {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease, transform 1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.process-step.active,
.arrow-step.active {
    opacity: 1;
    transform: scale(1);
}

.process-step {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.process-step h3 {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #333;
}

.process-step p {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.5rem;
}

.icon-animate {
    color: #007bff;
    animation: pulse 1.5s infinite;
}

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

/* ✅ Slide-in animation for submenu */
#servicePanel {
  /* These styles hide the panel by default, which is correct */
  display: none;
  position: fixed; /* Make it a full overlay like the main menu */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.98);
  z-index: 10001; /* Make sure it appears above the background content */
  opacity: 0;
  transition: opacity 0.4s ease;

  /* Centering the content */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#servicePanel.is-active { /* <--- CORRECTED CLASS NAME */
  display: flex !important; /* Use flex to make it visible */
  opacity: 1; /* Fade it in */
}

#servicePanel .back-btn { /* Ensure back button is styled and clickable */
color: white;
font-size: 20px;
cursor: pointer;
position: absolute;
top: 80px; /* Position it below the close button */
left: 50%;
transform: translateX(-50%);
}

#servicePanel ul {
list-style: none;
padding: 0;
text-align: center;
}

/* 🌟 Call to Action Section */
.cta-section {
    background: linear-gradient(135deg, #e68e3c, #686ce6); 
    color: #fff;
    text-align: center;
    padding: 4rem 2rem;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.cta-btn {
    background-color: #fff;
    color: #007bff;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.cta-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}
/* 🌟 Footer Styles */
.site-footer {
    background-color: #ffffff;
    color: #000000;
    padding: 4rem 2rem 2rem 2rem;
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 2;
    opacity: 1 !important;
    transition: none !important;
    will-change: unset !important;
      
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-logo h2 {
    font-size: 2rem;
    color: #00c6ff;
}

.footer-logo p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #000000;
}

.footer-contact h3,
.footer-links h3,
.footer-social h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;

}

.footer-contact p,
.footer-links ul li a {
    font-size: 1.5rem;
    color: #000000;
    text-decoration: none;
    list-style: none;

}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin-bottom: 8px;
}

.footer-links ul li {
    margin-bottom: 0.5rem;
}

.footer-links ul li a:hover {
    color: #00c6ff;
}

.footer-social a {
    display: inline-block;
    margin-right: 0.8rem;
    font-size: 1.2rem;
    color: #000000;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: #00c6ff;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #000000;
}

/* Responsive */

/* 🌟 Glass effect for footer logo */
.logo-glass {
    display:flex;
    height: 300px;
    width: 300px;
    border-radius: 12px;
    padding: 12px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-left: 100px;
}

.logo-glass img {
    display: flex;
    justify-content: center;
    max-width: 350px;   /* 👉 THIS is limiting your image size */
    height: auto;
}

/* === Divider Line Animation === */
.section-divider {
    width: 0;
    height: 2px;
    background-color: black;
    margin: 0 auto;
    animation: expandLine 2s forwards ease-out;
}

@keyframes expandLine {
    from {
        width: 0;
    }
    to {
        width: 80%;
    }
}

/* === Headings Font Size === */
.section-heading {
    font-size: 2.5rem; /* Increase as per your liking */
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    font-family: 'Poppins', sans-serif;
}
#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 99;
  width: 50px;
  height: 50px;
  background-color: rgb(45, 152, 239);
  color: white;
  border: none;
  outline: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scrollTopBtn:hover {
  background-color: #cc0000; /* Darker red on hover */
  transform: scale(1.05);
}
html {
    scroll-behavior: smooth;
}
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

 .loader {
    border: 10px solid #f3f3f3;
    border-top: 10px solid #333;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

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

@media (max-width: 480px) {
    .social-icons a {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}
/* ---------------- About Page ---------------- */

/* Hero Section */
.about-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6rem 2rem 4rem;
    background: linear-gradient(to right, #6282e4, #000000);
    color: white;
}

.about-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.about-hero p {
    font-size: 1.25rem;
    max-width: 700px;
}

/* Our Story Section */
.about-story {
    padding: 5rem 2rem;
    background-color: #ffffff;
    text-align: center;
}

.about-story h2 {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.about-story p {
    font-size: 1.5rem;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Our Values Section */
.about-values {
    padding: 5rem 2rem;
    background-color: #f9f9f9;
    text-align: center;
}

.about-values h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    justify-items: center;
}

.value-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 3rem 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    text-align: center;
    max-width: 350px;
}

.value-card:hover {
    transform: translateY(-8px);
}

.value-card i {
    font-size: 4rem;
    color: #0072ff;
    margin-bottom: 1.5rem;
}

.value-card h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.value-card p {
    font-size: 1.1rem;
    color: #555555;
}
/*.big-lottie {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

/*.big-lottie lottie-player {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Mobile responsive: stack into 1 column */
@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}
/* ---------------- About Page - Enhanced Values ---------------- */

/* =================== Values Layout Animation =================== */
.values-layout {
    display: grid;
    grid-template-areas:
        "top-left top-right"
        "center center"
        "bottom-left bottom-right";
    gap: 3rem;
    justify-items: center;
    align-items: center;
    margin-top: 3rem;
}

/* Animation for values-layout */
.brand-core {
    opacity: 0;
    transform: scale(0.5);
    animation: coreFadeIn 1s ease forwards;
    animation-delay: 0.3s;
}

.value-card {
    opacity: 0;
    position: relative;
}

.values-layout.animate .value-card:nth-child(1) {
    animation: moveOutTopLeft 1s ease forwards;
    animation-delay: 1.2s;
}

.values-layout.animate .value-card:nth-child(2) {
    animation: moveOutTopRight 1s ease forwards;
    animation-delay: 1.4s;
}

.values-layout.animate .value-card:nth-child(4) {
    animation: moveOutBottomLeft 1s ease forwards;
    animation-delay: 1.6s;
}

.values-layout.animate .value-card:nth-child(5) {
    animation: moveOutBottomRight 1s ease forwards;
    animation-delay: 1.8s;
}

@keyframes coreFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes moveOutTopLeft {
    to {
        opacity: 1;
        transform: translate(-30px, -30px);
    }
}

@keyframes moveOutTopRight {
    to {
        opacity: 1;
        transform: translate(30px, -30px);
    }
}

@keyframes moveOutBottomLeft {
    to {
        opacity: 1;
        transform: translate(-30px, 30px);
    }
}

@keyframes moveOutBottomRight {
    to {
        opacity: 1;
        transform: translate(30px, 30px);
    }
}

.values-layout > :nth-child(1) { grid-area: top-left; }
.values-layout > :nth-child(2) { grid-area: top-right; }
.values-layout > :nth-child(3) { grid-area: center; }
.values-layout > :nth-child(4) { grid-area: bottom-left; }
.values-layout > :nth-child(5) { grid-area: bottom-right; }

.value-card, .brand-core {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 3rem 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    text-align: center;
    max-width: 350px;
}

.value-card:hover {
    transform: translateY(-8px);
}

.value-card i,
.brand-core i {
    font-size: 4rem;
    color: #0072ff;
    margin-bottom: 1.5rem;
}

.value-card h3,
.brand-core h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.value-card p {
    font-size: 1.1rem;
    color: #555555;
}

/* Unique center element style */
.brand-core {
    background: linear-gradient(to right, #00c6ff, #0072ff);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.brand-core i {
    color: #ffffff;
}

/* Responsive for mobile: stack to 1 column */
@media (max-width: 768px) {
    .values-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}
/* Call to Action Section */
.about-cta {
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(to right, #6282e4, #000000);
    color: white;
}

.about-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.about-cta .btn {
    display: inline-block;
    background-color: #ffffff;
    color: #0072ff;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.about-cta .btn:hover {
    background-color: #0072ff;
    color: white;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .about-hero h1 {
        font-size: 2.2rem;
    }

    .about-hero p {
        font-size: 1rem;
    }

    .about-story h2,
    .about-values h2,
    .about-cta h2 {
        font-size: 2rem;
    }
}
/* ---------------- About Page - Our Story Split ---------------- */

.about-story-split {
    padding: 5rem 2rem;
    background-color: #ffffff;
}

.story-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1600px;
    margin: 0 auto;
}

.story-text {
    flex: 1 1 50%;
    max-width: 50%;
    overflow-wrap: break-word;
}

.story-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.story-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 1.5rem;
}

.story-image {
    flex: 0 0 1000px;
    max-width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-image img,
.story-image svg,
.story-image object {
    width: 100%;
    max-width: 1000px;
    height: auto;
}
 


/* 🌟 Testimonials Section */

    .testimonials {
        padding: 4rem 2rem;
        text-align: center;
        animation: testimonialGradientShift 4s ease infinite;
        color: #111111;
    }

.testimonials h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-family: 'Playfair Display', serif;
    color: #333;
}

.testimonial-cards {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 2rem 1.5rem;
    width: min(300px, 90%);   /* ✅ updated for responsive design */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.avatar-placeholder {
    background-color: #007bff;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.testimonial-text {
    font-style: italic;
    color: #555;
    margin-bottom: 1rem;
}

.testimonial-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
}

.testimonial-card h4 span {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: #555;
}

/* ✅ Responsive improvements for smaller screens */
@media (max-width: 600px) {
    .testimonial-cards {
        gap: 1rem;
    }
}
/* ✅ Spotlight Testimonial Slider Styles */
.testimonial-spotlight {
    padding: 4rem 2rem;
    text-align: center;
    color: #111111;
    background: linear-gradient(270deg, #a8e6ff, #0077cc);
    background-size: 400% 400%;
    animation: testimonialGradientMotion 8s ease infinite;
}

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

.testimonial-spotlight h2.section-heading {
    font-size: 2.5rem;     /* ✅ match upper section */
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    font-family: 'Poppins', sans-serif;
    color: white;
}

.testimonial-spotlight .section-divider {
    margin: 1rem auto 2rem auto;  /* ✅ added top margin */
    display: block;
}
.testimonial-slider {

    position: relative;
    max-width: 600px;
    margin: 0 auto;
    height: 400px;
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    opacity: 0;
    width: 100%;
    background: white;
    border-radius: 25px;
    padding: 2.5rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: all 1s ease;
}

.testimonial-slide.active {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: glow 3s linear infinite;
    z-index: 2;
}

.testimonial-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
    margin-bottom: 1rem;
}

.testimonial-slide h4 {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.4rem;
    font-weight: bold;
}

.testimonial-role {
    font-size: 1rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.stars {
    color: #FFD700;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    font-size: 1.05rem;
    color: #333;
}

@keyframes glow {
    0% { box-shadow: 0 0 10px rgba(255,255,255,0.6); }
    50% { box-shadow: 0 0 35px rgba(255,255,255,0.9); }
    100% { box-shadow: 0 0 10px rgba(255,255,255,0.6); }
}
/* Contact Modal Styles */
.modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999 !important;
}

/* Contact Modal Content - Vertically Centered */
  .modal-content {
    background: linear-gradient(135deg, #ffffff, #e6f2ff);
    padding: 40px 30px;
    border-radius: 16px;
    max-height: 95vh;
    overflow-y: auto;
    width: 100%;
    max-width: 550px;
    border: none;
    box-shadow: 0 30px 60px rgba(0, 123, 255, 0.2), 0 0 80px rgba(0, 198, 255, 0.2);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: modalGlowFadeIn 0.6s ease-out forwards;
    z-index: 10000;
  }

@keyframes modalGlowFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.9);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.1);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 123, 255, 0.2), 0 0 80px rgba(0, 198, 255, 0.2);
  }
}

@keyframes slideDown {
    from { transform: translateY(-200px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    color: #fff;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 20px;
    margin: 10px 0;
    border: 2px solid #000000;
    border-radius: 12px;
    font-size: 16px;
   font-family: 'Segoe UI', sans-serif;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     outline: none;
}

.modal-header img{
  display:block;
  margin: 0 auto;
  height: 300px;
  width: 300px; 
  align-self: center;
}

.contact-form button {
    background-color: #0077cc;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 10px;
    width: 100%;
}

.contact-form button:hover {
    background-color: #005fa3;
}
/* (Removed duplicate .modal-content block; merged above for consistency) */

/* Modal logo container remains unchanged */
.modal-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.modal-logo img {
  max-width: 250px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}

.modal-subtext {
    text-align: center;
    font-size: 1rem;
    color: #000000;
    margin-bottom: 20px;
}
/* Live character count style */
.char-count {
    font-size: 0.85rem;
    color: #bbb;
    text-align: right;
    margin-top: 5px;
}
.modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ======================== */
/* Our Impact - New Styling */
/* ======================== */

.our-impact {
    position: relative;
    background: linear-gradient(135deg, #f9f9f9, #ffffff);
    padding: 120px 20px;
    text-align: center;
    overflow: hidden;
}

.our-impact h2 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
}

.impact-subtext {
    font-size: 1.4rem;
    color: #555;
    margin-bottom: 70px;
}

.impact-counters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 50px, 20px;
}


.impact-item {
    position: relative;
    width: 240px;
    height: 480px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 30px;          /* ⭐ Har block ke andar zyada space */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    animation: floatPulse 4s ease-in-out infinite;
    cursor: pointer;
}

.impact-number {
    font-size: 58px;
    font-weight: bold;
    color: #0072ff;
    margin-bottom: 30px;          /* ⭐ Number aur label ke beech space */
}

.impact-item p {
    font-size: 24px;
    font-weight: 600;
    color: #444;
    line-height: 1.5;
    text-align: center;
}
.impact-item:hover {
    transform: perspective(1000px) rotateX(12deg) rotateY(12deg) scale(1.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* NEW Rectangle behind counters */
.impact-item::before {
    content: "";
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 400px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 50px rgba(0, 114, 255, 0.4);
    z-index: -1;
    animation: pulseGlow 4s infinite alternate;
}

/* NEW Number Color */
.impact-number {
    font-size: 52px;
    font-weight: bold;
    color: #060607; /* Premium royal blue */
}

.impact-item p {
    margin-top: 10px;
    font-size: 18px;
    color: #555;
}
/* Floating background shapes */
.floating-shapes::before,
.floating-shapes::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 20s linear infinite alternate;
}

.floating-shapes::before {
    width: 400px;
    height: 400px;
    background: #a8e6ff;
    top: -100px;
    left: -100px;
}

.floating-shapes::after {
    width: 500px;
    height: 500px;
    background: #0077cc;
    bottom: -150px;
    right: -150px;
}

@keyframes float {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(30px) translateX(30px); }
}
.impact-item {
    position: relative;
}

@keyframes floatPulse {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-12px) scale(1.05);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* ===================== Cinematic Two-Line Flow ===================== */
.animated-process-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #fdfdfd, #e6f7ff);
  background-size: 400% 400%;
  animation: animateBG 12s ease infinite;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.process-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1400px;
}

.process-line.reverse {
  flex-direction: row-reverse;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0,123,255,0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(0,123,255,0.8);
  }
}

@keyframes pulseArrow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}

@media (max-width: 768px) {
  .process-line,
  .process-line.reverse {
    flex-direction: column !important;
    align-items: center;
    gap: 1.5rem;
  }
}

/* 💠 Section Heading Styling */
.animated-process-flow .section-heading {
  text-align: center;
  margin-bottom: 2rem;
  font-family: 'Poppins', sans-serif;
}

.animated-process-flow .section-heading h2 {
  font-size: 3rem;
  font-weight: 800;
  color: #002244;
}

.animated-process-flow .section-heading p {
  font-size: 1.2rem;
  color: #444;
  max-width: 700px;
  margin: 1rem auto 0 auto;
  line-height: 1.6;
}

/* 🔥 Upgrade Section Background with Glowing Blobs */
.animated-process-flow {
  position: relative;
  overflow: hidden;
}

.animated-process-flow::before,
.animated-process-flow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  opacity: 0.3;
  filter: blur(120px);
  animation: floatBlob 20s ease-in-out infinite;
}

.animated-process-flow::before {
  width: 400px;
  height: 400px;
  background: #a8e6ff;
  top: -100px;
  left: -100px;
}

.animated-process-flow::after {
  width: 500px;
  height: 500px;
  background: #0077cc;
  bottom: -150px;
  right: -150px;
}

@keyframes floatBlob {
  0% { transform: translate(0, 0); }
  50% { transform: translate(30px, 20px); }
  100% { transform: translate(0, 0); }
}

/* ==================== Video Editing Section - Process Flow ==================== */
/* (No .video-flow-step background, padding, or shadow rules here) */

/* Mega Dropdown Layout */
nav ul li.mega-dropdown {
  position: relative;
}

nav ul li .mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 20px);
  width: 1100px;
  background-color: rgba(254, 249, 249, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  padding: 50px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
  z-index: 999;
}

nav ul li.mega-dropdown:hover .mega-menu {
  transform: translate(-50%, 0);
  opacity: 2;
  visibility: visible;
}

/* Left Section: Logo, Title & Description */
.container {
  max-width: 100%;
  padding: 0;
}
.mega-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: 30px;
}

.mega-left img {
  width: 280px;
  height: auto;
  margin-bottom: 16px;
}

.mega-left h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.mega-left p {
  font-size: 1.2rem;
  color: #000000;
  margin-top: 10px;
  line-height: 1.6;
  max-width: 240px;
  font-weight: bold;
}

/* Right Section: Submenu Links */
.mega-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mega-right a {
  text-decoration: none;
  color: #222;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 6px 0;
  display: inline-flex;
  width: fit-content;
  border-bottom: 2px solid transparent;
}

.mega-right a:hover {
  color: #0070f3;
  border-bottom: 2px solid #0070f3;
}

/* ===================== Cinematic Web Process Flow ===================== */
/* ===== Web Process Flow Section Heading Styles ===== */
.web-process-heading {
  text-align: center;
  margin-bottom: 40px;
}

.web-process-heading .section-heading {
  font-size: 3.2rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  color: #002244;
  margin-bottom: 1rem;
}

.web-process-heading .section-divider {
  width: 80%;
  height: 4px;
  background-color: #0077cc;
  margin: 0 auto;
  animation: expandLine 2s forwards ease-out;
}

@keyframes expandLine {
  from { width: 0; }
  to { width: 80%; }
}

.web-process-flow {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  padding: 80px 20px;
  background-size: 400% 400%;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  animation: gradientShiftBackground 8s ease infinite;
}

.web-process-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 125px;
}
.web-process-row.row-3 {
    gap: 180px; /* or whatever spacing you like */
  }

/* 🌟 Web Process Animation Flow Preparation 🌟 */
.web-process-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0;
    margin: 0;
    transform: scale(1);
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

.web-process-step img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.web-process-step h4 {
  font-size: 1rem;
  color: #002244;
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
}

/* Center database styling */
.db-step {
  background-color: #eef7ff;
  box-shadow: 0 10px 40px rgba(0, 123, 255, 0.3);
}

/* Launch step - hidden by default */
/* === Cinematic Launch Step Glow === */
.web-process-step.launch-step {
  display: flex;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 1s ease, transform 1s ease;
}

.web-process-step.launch-step.visible {
  opacity: 1;
  transform: scale(1.2);
  box-shadow: 0 0 30px rgba(0, 200, 255, 0.4);
}

/* Animation keyframes for flow */
@keyframes moveToCenter {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) translateY(100px);
    opacity: 0;
  }
}

@keyframes emergeFromCenter {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes gradientShiftBackground {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
  }
/* ===== Wrapper for Web Process Flow Section to Fix Background Alignment ===== */
.web-process-section {
  background: linear-gradient(-45deg, #ffffff, #ffffff, #ffffff, #deeaff);
  background-size: 400% 400%;
  animation: gradientShiftBackground 10s ease infinite;
  padding: 60px 0;
}
  .why-us-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #e2d896, #83f1ed, #eb8e89);
    background-size: 600% 600%;
    animation: cinematicGradientShift 12s ease infinite;
  }
  
  .why-us-heading {
    text-align: center;
    margin-bottom: 40px;
    color:rgb(59, 59, 58);
  }
  
  .why-us-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
  }

  
  .why-card {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    flex: 1 1 calc(33.333% - 30px);
    transition: transform 0.3s ease;
  }
  
  .why-card:hover {
    transform: translateY(-10px);
  }
  
  .why-card .icon-glass {
    width: 450px;
    height: 450px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow:
      inset -6px -6px 12px rgba(255, 255, 255, 0.5),
      inset 6px 6px 12px rgba(0, 0, 0, 0.05),
      8px 8px 20px rgba(0, 0, 0, 0.1),
      -8px -8px 20px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zoomPulse 3s ease forwards;
    position: relative;
    overflow: hidden;
    z-index: 1;
    animation: smoothGlow 6s ease-in-out infinite;
  }

  .why-card .icon-glass img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    z-index: 2;
  }

  .why-card .icon-glass .why-text {
    font-size: 0.95rem;
    color: #111111;
    margin-top: 8px;
    text-align: center;
    line-height: 1.2;
    padding: 0 8px;
    z-index: 2;
    animation: floatText 6s ease-in-out infinite;
  }

  /* Style for h4 headings below each circle */
  .why-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000000;
    margin-top: 16px;
    text-align: center;
  }
  
  @media screen and (max-width: 768px) {
    .why-card {
      flex: 1 1 calc(50% - 20px);
    }
  }
  
  @media screen and (max-width: 480px) {
    .why-card {
      flex: 1 1 100%;
    }
  }

@keyframes zoomPulse {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rippleLight {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes glowingCircle {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}
@keyframes cinematicGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 🌐 Tablet Screens */
@media screen and (max-width: 768px) {
  .why-card {
    flex: 1 1 100%;
  }

  .why-card .icon-glass {
    width: 300px;
    height: 300px;
  }

  .why-card .icon-glass img {
    width: 90px;
    height: 90px;
  }

  .why-card .icon-glass .why-text {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .why-card h4 {
    font-size: 1.2rem;
  }
}

/* 📱 Mobile Screens */
@media screen and (max-width: 480px) {
  .why-card {
    flex: 1 1 100%;
  }

  .why-card .icon-glass {
    width: 240px;
    height: 240px;
  }

  .why-card .icon-glass img {
    width: 70px;
    height: 70px;
  }

  .why-card .icon-glass .why-text {
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0 6px;
  }

  .why-card h4 {
    font-size: 1rem;
  }
}
@keyframes smoothGlow {
  0% {
    transform: scale(1);
    box-shadow:
      inset -6px -6px 12px rgba(255, 255, 255, 0.5),
      inset 6px 6px 12px rgba(0, 0, 0, 0.05),
      8px 8px 20px rgba(0, 0, 0, 0.1),
      -8px -8px 20px rgba(255, 255, 255, 0.8);
  }
  50% {
    transform: scale(1.025);
    box-shadow:
      inset -8px -8px 14px rgba(255, 255, 255, 0.6),
      inset 8px 8px 14px rgba(0, 0, 0, 0.08),
      10px 10px 30px rgba(0, 0, 0, 0.15),
      -10px -10px 30px rgba(255, 255, 255, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow:
      inset -6px -6px 12px rgba(255, 255, 255, 0.5),
      inset 6px 6px 12px rgba(0, 0, 0, 0.05),
      8px 8px 20px rgba(0, 0, 0, 0.1),
      -8px -8px 20px rgba(255, 255, 255, 0.8);
  }
}
@keyframes floatText {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-6px);
    opacity: 0.85;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes emergesmooth {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

[data-aos="emerge-smooth"] {
  opacity: 0;
  transform: scale(0.7);
  transition-property: transform, opacity;
}

[data-aos="emerge-smooth"].aos-animate {
    animation: emergesmooth 1s ease-out forwards;
  }
  .dream-canvas-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom right, #f4f4ff, #f0f7ff);
  }
  
  .dream-canvas-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  
  .dream-text {
    flex: 1 1 50%;
    max-width: 600px;
  }
  
  .dream-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
  }
  
  .dream-text .section-subtext {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
  }
  
  /* Enhance CTA Button */
  .cta-btn-glow {
    padding: 18px 32px;
    font-size: 1.6rem;
    border-radius: 12px;
    background: linear-gradient(to right, #007bff, #00c6ff);
    color: white;
    font-weight: bold;
    border: none;
    text-decoration: none;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: inline-block;
    animation: glowPulse 2s ease-in-out infinite;
    box-shadow: 0 0 16px rgba(0, 198, 255, 0.3);
    cursor: pointer;
  }

  .cta-btn-glow:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.7);
  }
  
  .dream-image {
    flex: 1 1 45%;
    text-align: center;
  }
  
  .dream-image img {
    max-width: 100%;
    height: auto;
  }
  .website-benefits-section {
    padding: 100px 20px;
    background: linear-gradient(to right, #ffffff, #f9fcff);
  }

  /* Animation keyframes for benefit cards */
  @keyframes benefitFadeIn {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .benefits-heading {
    text-align: center;
    margin-bottom: 60px;
  }
  
  .benefits-heading h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #002244;
    font-family: 'Poppins', sans-serif;
  }
  
  .benefits-heading p {
    font-size: 1.2rem;
    color: #555;
    margin-top: 10px;
  }
  
  .benefits-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  /* spreads items evenly */
    gap: 60px;                       /* increased spacing between cards */
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .benefit-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    width: 300px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: benefitFadeIn 0.8s ease forwards;
    opacity: 0;
  }
  
  .benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  }
  
  .benefit-card img {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
  }
  
  .benefit-card h4 {
    font-size: 1.4rem;
    color: #002244;
    margin-bottom: 10px;
    font-weight: 600;
  }
  
  .benefit-card p {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
  }
  
  /* Responsive for smaller screens */
  @media (max-width: 768px) {
    .benefits-grid {
      flex-direction: column;
      align-items: center;
    }
  
    .benefit-card {
      width: 90%;
    }
  }
.dream-canvas-text-upgrade h2 {
  font-size: 48px;
  font-weight: 800;
}

.dream-canvas-text-upgrade .section-subtext {
  font-size: 22px;
  line-height: 1.8;
}

.dream-canvas-image-upgrade img {
  max-width: 700px;
  height: auto;
}
.website-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Cinematic upgraded modal entrance */
/* Ensure modal is centered properly when active */
.website-modal.active {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: launchPopIn 0.7s ease-out forwards;
}


@keyframes launchPopIn {
  0% {
    transform: scale(0.5) rotate(-15deg);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    transform: scale(1.05) rotate(3deg);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}


.modal-content h3 {
  font-size: 2rem;
  color: #002244;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'Poppins', sans-serif;
}

#websiteQueryForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#websiteQueryForm input,
#websiteQueryForm select,
#websiteQueryForm textarea {
  padding: 14px 18px;
  font-size: 1rem;
  border: 2px solid #000000;
  border-radius: 10px;
  background-color: #f9f9f9;
  font-family: 'Poppins', sans-serif;
  transition: border-color 0.3s ease;
}

#websiteQueryForm input:focus,
#websiteQueryForm select:focus,
#websiteQueryForm textarea:focus {
  border-color: #0077cc;
  outline: none;
}

#websiteQueryForm textarea {
  min-height: 120px;
  resize: vertical;
  width: 100%;
}

.textarea-wrapper {
  width: 100%;
}

#websiteQueryForm button {
  padding: 14px;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

#websiteQueryForm button:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
  transform: scale(1.03);
}

.close-modal {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 30px;
  font-weight: bold;
  color: #000000;
  cursor: pointer;
  z-index: 20;
  transition: color 0.3s ease;
}

.close-modal:hover {
  color: #ff3333;
}

@media (max-width: 768px) {
  .modal-content {
    padding: 30px 20px;
  }

  .modal-content h3 {
    font-size: 1.6rem;
  }
}
.benefit-card img {
    width: 128px;
    height: 128px;
    margin-bottom: 20px;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  
  .benefit-card img:hover {
    transform: scale(1.05);
  }
  .cta-connect-section {
    background: linear-gradient(to right, #e0f7ff, #f0faff);
    padding: 80px 20px;
    text-align: center;
  }
  
  .cta-connect-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .cta-connect-section .section-heading {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #002244;
  }
  
  .cta-connect-section .section-subtext {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
  }
  
  .cta-connect-section .cta-btn-glow {
    padding: 14px 28px;
    font-size: 1.1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(to right, #ff4b2b, #ff416c);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    animation: zoomBounce 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 65, 108, 0.6), 0 0 40px rgba(255, 75, 43, 0.4);
  }
  

  .cta-connect-section {
    background: linear-gradient(to right, #ffe6e6, #e9a5a5);
  }
@keyframes zoomBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
/* Blur background behind modal when active */
.modal-blur {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

/* Glow Pulse Animation */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(0, 198, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 198, 255, 0.7);
  }
}

/* 🌟 Website Form Modal Styling */
#websiteFormModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  animation: fadeInPopup 0.4s ease-out forwards;
}

.form-modal-content {
  position: relative;
  background: rgb(255, 255, 255);
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  z-index: 10000;
  animation: emergeSmooth 0.5s ease forwards;
}




/* 🌈 TRUST + BELIEVE Animated Section - REFACTORED (trust-float-wrapper) */
.trust-float-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  animation: fadeInWrapper 1s ease forwards;
  min-height: 300px;
}

.trust-float-text {
  font-size: 10rem;
  font-weight: 900;
  color: #111;
  letter-spacing: 14px;
  font-family: 'Poppins', sans-serif;
  animation: fadeInUp 1.2s ease forwards;
}

.believe-float-text {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 48px;
  animation: loopFloat 6s ease-in-out infinite;
}

.believe-float-text span {
  font-size: 6rem;
  font-weight: 800;
  opacity: 0;
  animation: loopFade 6s ease-in-out infinite;
  font-family: 'Poppins', sans-serif;
  transform: translateY(20px);
  letter-spacing: 60px;
}

.believe-float-text span:nth-child(1) { color: #d50000; animation-delay: 0s; }
.believe-float-text span:nth-child(2) { color: #ef6c00; animation-delay: 0.3s; }
.believe-float-text span:nth-child(3) { color: #fdd835; animation-delay: 0.6s; }
.believe-float-text span:nth-child(4) { color: #00c853; animation-delay: 0.9s; }
.believe-float-text span:nth-child(5) { color: #2979ff; animation-delay: 1.2s; }
.believe-float-text span:nth-child(6) { color: #651fff; animation-delay: 1.5s; }
.believe-float-text span:nth-child(7) { color: #d81b60; animation-delay: 1.8s; }

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

@keyframes fadeInWrapper {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

/* 🌟 Selector Modal Options */
.selector-option {
  padding: 20px 40px;
  background: linear-gradient(to right, #007bff, #00c6ff);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  user-select: none;
  /* Removed position: absolute/fixed to avoid modal positioning conflicts */
  position: relative;
  outline: none;
}

.selector-option:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #005fa3, #00aaff);
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4);
}

.selector-option.selected {
  background: linear-gradient(to right, #005fa3, #003366);
  color: #fff;
  border: 3px solid #00c6ff;
  box-shadow: 0 0 25px rgba(0, 86, 179, 0.8), 0 0 10px rgba(0, 198, 255, 0.5);
  transform: scale(1.1);
  position: relative;
  outline: none;
  transition: all 0.3s ease;
}

#selectionHint {
  display: none;
  text-align: center;
  color: #0077cc;
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 15px;
  animation: fadeInHint 0.5s ease forwards;
}

@keyframes fadeInHint {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 🌟 Student Form Modal Styling */
#studentFormWrapper {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background: transparent;
  justify-content: center;
  align-items: center;
}

#studentFormWrapper .form-modal-content {
  max-width: 750px;
  box-shadow: 0 20px 80px rgba(0, 123, 255, 0.2), 0 0 60px rgba(0, 198, 255, 0.3);
  border: 2px solid rgba(0, 198, 255, 0.2);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 50px 40px;
  border-radius: 20px;
  width: 96%;
  position: relative;
  animation: emergeSmooth 0.6s ease-out forwards;
  overflow-y: auto;
  max-height: 92vh;
  transform: scale(0.98);
  transition: all 0.4s ease;
  white-space: normal;
  margin: 0 auto;
}

#studentFormWrapper .form-modal-content h2 {
  font-size: 2rem;
  text-align: center;
  color: #002244;
  margin-bottom: 20px;
}

#studentFormWrapper form input,
#studentFormWrapper form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #000000;
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}

#studentFormWrapper form textarea {
  resize: vertical;
  min-height: 100px;
}

#studentFormWrapper form label {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

#studentFormWrapper form h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(to right, #00c6ff, #0077cc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#studentFormWrapper form > div {
  margin-bottom: 20px;
}


/* Fix alignment of the three student form skill columns */
#studentFormWrapper form fieldset.skill-column {
  flex: 1;
  border: none;
  padding: 0 10px;
  margin: 0;
  min-width: 150px;
  max-width: 205px;
}

/* Ensure columns align horizontally and wrap responsively if needed */
#studentFormWrapper form .skill-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Improve readability and wrapping of skill checkboxes */
#studentFormWrapper form .skill-items label {
  display: block;
  white-space: normal;
  margin-bottom: 10px;
  font-size: 1rem;
}


/* Improve checkbox label spacing */
#studentFormWrapper form fieldset label {
  display: flex;
  flex-direction: row-reverse;
  font-size: 1.05rem;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
}



#studentFormWrapper form button {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #ffffff;
  font-weight: bold;
  padding: 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 40%;
  margin: 20px auto 0 auto;
  display: block;
  transition: transform 0.3s ease, background 0.3s ease;
}

#studentFormWrapper form button:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
  transform: scale(1.05);
}

#studentFormWrapper .form-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: #000000;
  cursor: pointer;
  z-index: 10;
}

/* Character counter */
#studentFormWrapper p {
  font-size: 0.85rem;
  color: #666;
  text-align: right;
  margin-top: 4px;
}

/* Scroll for mobile */
@media (max-width: 768px) {
  #studentFormWrapper .form-modal-content {
    padding: 30px 20px;
  }
}
@keyframes emergeSmooth {
  from {
    transform: scale(0.8);
    opacity: 0;
    filter: blur(5px);
  }
  to {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
/* ==================== Client Form Wrapper Styles (Appended) ==================== */
#clientFormWrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 198, 255, 0.2);
  z-index: 10002;
  width: 96%;
  max-width: 1500px;
}

#clientFormWrapper form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#clientFormWrapper input,
#clientFormWrapper textarea {
  padding: 10px 14px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
}

#clientFormWrapper button {
  background: #737577;
  color: white;
  font-size: 1.1rem;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#clientFormWrapper button:hover {
  background: #0056b3;
}

/* 🎉 Reusable Form Success Popup Styling */
.form-success-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeInPopup 0.3s ease-out forwards;
}

.popup-box {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0, 123, 255, 0.4);
  position: relative;
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  z-index: 10;
}

.popup-close {
  color: #000000; /* Black close icon on white popup */
}

#popupHeading {
  font-size: 1.8rem;
  font-weight: 700;
  color: #28a745;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

#popupMessage {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #000000;
  font-family: 'Lato', sans-serif;
}

@keyframes fadeInPopup {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 🌟 Service Seeker Form Styling */
#seekerFormWrapper {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background: transparent;
  justify-content: center;
  align-items: center;
}

#seekerFormWrapper .form-modal-content {
  max-width: 750px;
  box-shadow: 0 20px 80px rgba(0, 123, 255, 0.2), 0 0 60px rgba(0, 198, 255, 0.3);
  border: 2px solid rgba(0, 198, 255, 0.2);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 50px 40px;
  border-radius: 20px;
  width: 96%;
  position: relative;
  animation: emergeSmooth 0.6s ease-out forwards;
  overflow-y: auto;
  max-height: 92vh;
  transform: scale(0.98);
  transition: all 0.4s ease;
  white-space: normal;
  margin: 0 auto;
}

#seekerFormWrapper .form-modal-content h2 {
  font-size: 2rem;
  text-align: center;
  color: #002244;
  margin-bottom: 20px;
}

#seekerFormWrapper form input,
#seekerFormWrapper form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #000000;
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
}

#seekerFormWrapper form textarea {
  resize: vertical;
  min-height: 100px;
}

#seekerFormWrapper form fieldset {
  border: none;
  margin-bottom: 20px;
}

#seekerFormWrapper form legend {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #002244;
}

#seekerFormWrapper form label {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
  cursor: pointer;
}

#seekerFormWrapper form input[type="radio"] {
  margin-right: 10px;
}

#seekerFormWrapper form button {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #ffffff;
  font-weight: bold;
  padding: 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 40%;
  margin: 20px auto 0 auto;
  display: block;
  transition: transform 0.3s ease, background 0.3s ease;
}

#seekerFormWrapper form button:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
  transform: scale(1.05);
}

#seekerFormWrapper .form-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: #000000;
  cursor: pointer;
  z-index: 10;
}

/* Character counter */
#seekerFormWrapper p {
  font-size: 0.85rem;
  color: #666;
  text-align: right;
  margin-top: 4px;
}

@media (max-width: 768px) {
  #seekerFormWrapper .form-modal-content {
    padding: 30px 20px;
  }
}
/* 🌟 Seeker Form Select Dropdown Styling */
#seekerFormWrapper form select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #000000;
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
  color: #333;
  transition: border-color 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

#seekerFormWrapper form select:focus {
  border-color: #0077cc;
  outline: none;
}
/* 🌟 Form Logo Styling */
.form-logo {
  text-align: center;
  margin-bottom: 20px;
}

.form-logo img {
  max-width: 200px;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  animation: fadeInLogo 0.8s ease-in-out;
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ✅ Selector Option Enhancements */
.selector-option {
  position: relative;
  overflow: hidden;
}

.selector-option::after {
  content: "✔";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.5rem;
  color: #00ff8a;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.selector-option.selected::after {
  opacity: 1;
  transform: scale(1.2);
  animation: bounceTick 0.4s ease;
}

@keyframes bounceTick {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 💠 Modal entry/exit smoother */
.website-modal.active {
  animation: modalFadeZoom 0.6s ease-out;
}

@keyframes modalFadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 📲 Better touch target for mobile */
@media (max-width: 768px) {
  .selector-option {
    font-size: 1.3rem;
    padding: 18px 30px;
  }
}

.role-selector-wrapper {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 16px;
}

.selector-option {
  border: 2px solid #000000;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.selector-option.active-selection {
  background: #e0f4ff;
  border-color: #0077cc;
  font-weight: bold;
}
 
button.continue-btn, .continue-btn {
  background: linear-gradient(to right, #007bff, #00c6ff);
  color: #ffffff;
  font-size: 1.1rem;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  display: block;
  margin: 20px auto 0;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
  text-align: center;
  width: 60%;
  max-width: 400px;
  z-index: 10;
  position: relative;
}

#selectionContinue:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
  transform: scale(1.05);
}



/* 🌟 Social Media Hero Section */

.social-hero-section {
  background: linear-gradient(to right, #e3f2fd, #ffffff);
  padding: 100px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0); }
  100% { transform: translate(30px, 30px); }
}

.social-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.social-hero-text {
  flex: 1;
  max-width: 600px;
}

.social-hero-text h1 {
  font-size: 3.2rem;
  font-weight: 900;
  font-family: 'Playfair Display', serif;
  color: #002244;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(30px);
  animation: textDropFade 1.4s ease-out forwards;
}

.social-hero-text p {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(40px);
  animation: textFadeSlide 1.8s ease-out forwards;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

/* Enhanced Social Hero Button with Sparkle Animation */
.social-hero-btn,
.cta-btn-glow {
  padding: 16px 32px;
  font-size: 1.2rem;
  font-weight: bold;
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: glowPulse 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.social-hero-btn::after,
.cta-btn-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transition: all 0.5s ease;
}

.social-hero-btn:hover,
.cta-btn-glow:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 198, 255, 0.4);
}
.social-hero-btn:hover::after,
.cta-btn-glow:hover::after {
  left: 100%;
}

.social-hero-lottie {
  flex: 1;
  max-width: none;
  text-align: center;
}

.social-hero-lottie lottie-player {
  width: 750px;
  height: 750px;
  max-width: none;
}



@keyframes textDropFade {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

/* 🌟 Section 2: Social Media Feature Cards */
.social-feature-section {
  background-color: #ffffff;
  padding: 100px 20px;
  text-align: center;
}

.social-feature-section .section-heading {
  font-size: 3rem;
  font-weight: 800;
  color: #002244;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.social-feature-section .section-subheading {
  font-size: 1.2rem;
  color: #555;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.social-feature-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 80px;
}

  .social-feature-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 50px 40px;
    padding-top: 60px;
    max-width: 500px;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: emergeSmooth 1s ease forwards;
  }

.social-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(0, 123, 255, 0.3), 0 12px 30px rgba(0, 0, 0, 0.15);
}

.social-feature-card lottie-player {
  width: 420px;
  height: 420px;
  margin: 0 auto 30px auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.social-feature-card h3 {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #003366;
}

.social-feature-card p {
  font-size: 1.5rem;
  color: #555;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .social-feature-card {
    max-width: 90%;
  }

  .social-feature-card lottie-player {
    width: 200px;
    height: 200px;
    top: 0;
    transform: none;
    margin-bottom: 20px;
  }
}
/* 🌟 Social Lottie Intro Section */
/* 🌟 Refined Spacing for Social Lottie Intro */
.social-lottie-intro {
  position: relative;
  z-index: 1;
  padding: 10px 0 !important;  /* Less vertical spacing */
  margin-bottom: -80px;        /* Pulls up next section */
  text-align: center;
  background: linear-gradient(to bottom, #ffffff, #f0faff);
}

.social-lottie-intro lottie-player {
  width: 90vw !important;
  max-width: 1100px;
  height: 300px !important;
  margin: 0 auto;
  display: block;
}

/* 🌟 Section 3: Cinematic Creative Workflow */
.creative-workflow-section {
  background: linear-gradient(to bottom right, #f4f8ff, #ffffff);
  padding: 120px 20px;
  text-align: center;
  overflow: hidden;
}

.creative-workflow-section h2 {
  font-size: 3rem;
  font-weight: 800;
  font-family: 'Playfair Display', serif;
  color: #002244;
  margin-bottom: 1rem;
  animation: fadeInUp 1s ease-out;
}

.creative-workflow-section .section-subheading {
    font-size: 1.4rem;
    color: #444;
    max-width: 850px;
    margin: 0 auto 3rem;
    line-height: 1.8;
    animation: emergeSmooth 1.2s ease-out;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(to right, #0077cc, #00c6ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
@keyframes emergeSmooth {
    from {
        transform: scale(0.8);
        opacity: 0;
        filter: blur(5px);
    }
    to {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
}

.workflow-step {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #b1e5ff, #f6e771, #86e798);
  background-size: 400% 400%;
  animation: lightGradientShift 1s ease infinite;
  border-radius: 20px;
  padding: 3rem 2rem;
  justify-content: space-between;
  gap: 60px;
  padding: 60px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.997);
  transition: transform 0.3s ease;
  animation: emergeSmooth 1.4s ease forwards;
}

.workflow-step.reverse {
  flex-direction: row-reverse;
}

.workflow-step:hover {
  transform: translateY(-10px);
}

.workflow-lottie {
  flex: 1;
  max-width: 600px;
}

.workflow-lottie lottie-player {
  width: 100%;
  height: auto;
  max-height: 600px;
}

.workflow-text {
  flex: 1;
  text-align: left;
}

.workflow-text h3 {
  font-size: 2rem;
  color: #003366;
  margin-bottom: 1rem;
}

.workflow-text p {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .workflow-step,
  .workflow-step.reverse {
    flex-direction: column;
    text-align: center;
  }

  .workflow-text {
    text-align: center;
  }
}
@keyframes lightGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.social-cta-section {
  background: linear-gradient(135deg, #eef9ff, #ffffff);
  padding: 80px 20px;
  text-align: center;
}

.cta-container h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #111;
}

.cta-container p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #555;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.cta-btn-glow {
  background-color: #0077cc;
  color: #fff;
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 119, 204, 0.4);
}

.cta-btn-glow:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 119, 204, 0.6);
}

.cta-btn-outline {
  padding: 14px 28px;
  border: 2px solid #0077cc;
  border-radius: 8px;
  color: #0077cc;
  font-size: 1.1rem;
  text-decoration: none;
  transition: 0.3s ease;
}

.cta-btn-outline:hover {
  background-color: #0077cc;
  color: #fff;
}
/* 🌟 Social Media Modal Styles */
#socialMediaFormWrapper {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background: transparent;
  justify-content: center;
  align-items: center;
}

#socialMediaFormWrapper .form-modal-content {
  max-width: 750px;
  box-shadow: 0 20px 80px rgba(0, 123, 255, 0.2), 0 0 60px rgba(0, 198, 255, 0.3);
  border: 2px solid rgba(0, 198, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 50px 40px;
  border-radius: 20px;
  width: 96%;
  position: relative;
  animation: emergeSmooth 0.6s ease-out forwards;
  overflow-y: auto;
  max-height: 92vh;
  transform: scale(0.98);
  transition: all 0.4s ease;
  white-space: normal;
  margin: 0 auto;
}

#socialMediaFormWrapper .form-modal-content h2 {
  font-size: 2rem;
  text-align: center;
  color: #002244;
  margin-bottom: 20px;
}

#socialMediaFormWrapper form input,
#socialMediaFormWrapper form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #000000;
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}

#socialMediaFormWrapper form textarea {
  resize: vertical;
  min-height: 100px;
}

#socialMediaFormWrapper form button {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #ffffff;
  font-weight: bold;
  padding: 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 40%;
  margin: 20px auto 0 auto;
  display: block;
  transition: transform 0.3s ease, background 0.3s ease;
}

#socialMediaFormWrapper form button:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
  transform: scale(1.05);
}

#socialMediaFormWrapper .form-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: #000000;
  cursor: pointer;
  z-index: 10;
}
/* Ensure modal is visible when triggered */
#socialMediaFormModal.show {
  display: flex !important;
}

/* Fix for the button z-index and visibility */
.cta-btn-glow {
  position: relative;
  z-index: 1;
}

/* Fix form modal button overlap issues */
#socialMediaFormModal .cta-btn-glow {
  margin-top: 20px;
  z-index: 2;
}

/* Fix modal z-index priority */
#socialMediaFormModal {
  z-index: 99999;
}

#socialMediaFormModal .form-modal-content {
  z-index: 100000;
}
/* 🌟 Social Media Form Modal Styling */
#socialMediaFormModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

#socialMediaFormModal .form-modal-content {
  max-width: 700px;
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 123, 255, 0.4);
  text-align: center;
  animation: emergeSmooth 0.5s ease-out forwards;
}

#socialMediaFormModal h2 {
  font-size: 2rem;
  color: #002244;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

#socialMediaFormModal input,
#socialMediaFormModal textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #000000;
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 15px;
  font-family: 'Poppins', sans-serif;
}

#socialMediaFormModal textarea {
  resize: vertical;
  min-height: 100px;
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.submit-btn,
.cancel-btn {
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  border: none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.submit-btn {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #ffffff;
}

.submit-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #005fa3, #00aaff);
}

.cancel-btn {
  background: #dddddd;
  color: #000000;
}

.cancel-btn:hover {
  background: #bbbbbb;
  transform: scale(1.05);
}

.form-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.form-close-btn:hover {
  color: #ff3333;
}
/* 🌟 Enhanced Social Media Form Modal Styles */
#socialMediaFormModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

#socialMediaFormModal .form-modal-content {
  max-width: 750px;
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 123, 255, 0.4);
  text-align: center;
  animation: emergeSmooth 0.6s ease-out forwards;
  overflow-y: auto;
  max-height: 92vh;
  transform: scale(0.98);
  transition: all 0.4s ease;
  white-space: normal;
  margin: 0 auto;
}

#socialMediaFormModal h2 {
  font-size: 2rem;
  color: #002244;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

#socialMediaFormModal input,
#socialMediaFormModal select,
#socialMediaFormModal textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #000000;
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 15px;
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

#socialMediaFormModal select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

#socialMediaFormModal .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
  margin-bottom: 15px;
}

#socialMediaFormModal .checkbox-group label {
  font-size: 1rem;
  font-weight: 500;
  color: #002244;
  cursor: pointer;
}

#socialMediaFormModal input[type="file"] {
  border: none;
  padding: 0;
  margin-bottom: 20px;
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.submit-btn,
.cancel-btn {
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  border: none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.submit-btn {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #ffffff;
}

.submit-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #005fa3, #00aaff);
}

.cancel-btn {
  background: #dddddd;
  color: #000000;
}

.cancel-btn:hover {
  background: #bbbbbb;
  transform: scale(1.05);
}

.form-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.form-close-btn:hover {
  color: #ff3333;
}
/* 🌟 Two-Column Social Media Form */
#socialMediaFormModal .form-modal-content {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#socialMediaFormModal .form-columns {
  display: flex;
  flex-direction: row;
  gap: 40px;
  justify-content: center;
  width: 100%;
}

#socialMediaFormModal .form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#socialMediaFormModal .form-column input,
#socialMediaFormModal .form-column textarea,
#socialMediaFormModal .form-column select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 1rem;
  border: 2px solid #000000;
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
}

#socialMediaFormModal .form-column textarea {
  resize: vertical;
  min-height: 100px;
}

#socialMediaFormModal .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

#socialMediaFormModal .checkbox-group label {
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: 10px;
}

#socialMediaFormModal .form-buttons {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

#socialMediaFormModal .submit-btn,
#socialMediaFormModal .cancel-btn {
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

#socialMediaFormModal .submit-btn {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: white;
  border: none;
}

#socialMediaFormModal .submit-btn:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
}

#socialMediaFormModal .cancel-btn {
  background: #e0e0e0;
  color: #333;
  border: none;
}

#socialMediaFormModal .cancel-btn:hover {
  background: #cccccc;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  #socialMediaFormModal .form-columns {
    flex-direction: column;
  }
}

#socialMediaFormModal .checkbox-group input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #000000;
  border-radius: 4px;
  background-color: #ffffff;

  cursor: pointer;
  position: relative;
}

#socialMediaFormModal .checkbox-group input[type="checkbox"]:checked::before {
  content: '✔';
  position: absolute;
  font-size: 30px;
  left: 2px;
  top: -3px;
  color: #0077cc;
}
#socialMediaFormModal .cancel-btn {
  padding: 16px 36px;
  font-size: 1.1rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  transition: all 0.3s ease;
}
#socialMediaSuccessPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeInPopup 0.4s ease-out forwards;
}

#socialMediaSuccessPopup .popup-box {
  background: white;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0, 123, 255, 0.4);
  position: relative;
  animation: launchPopIn 0.7s ease-out forwards;
}

#socialMediaSuccessPopup .popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

#socialMediaSuccessPopup h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #28a745;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

#socialMediaSuccessPopup p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  font-family: 'Lato', sans-serif;
}

@keyframes launchPopIn {
  0% {
    transform: scale(0.5) rotate(-15deg);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    transform: scale(1.05) rotate(3deg);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.preferred-platforms-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.preferred-platforms-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-family: 'Poppins', sans-serif;
  color: #111;
  white-space: nowrap; /* ✅ Prevents text from wrapping */
}
.preferred-platforms-wrapper {
  text-align: center;
  margin: 30px auto;
  padding: 10px 20px;
}

.preferred-platforms-label {
  font-size: 1.3rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 15px;
  color: #000;
}


/* ✅ Refined Preferred Platforms Alignment */
#clientFormWrapper .preferred-platforms {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 20px;
}

#clientFormWrapper .preferred-platforms label {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  gap: 10px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}
.horizontal-checkboxes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
  margin-top: 20px;
}
.checkbox-group label{
  display: grid;
  grid-template-rows: auto;
}
/* === Enhance and Enlarge All Checkboxes Globally === */
input[type="checkbox"] {
  width: 30px;
  height: 30px;
  accent-color: #0077cc; /* Adds a blue accent to the checkbox */
  border: 2px solid #0077cc;
  transform: scale(1.2);
  cursor: pointer;
}

/* 🌟 English Speaking Hero Section Styles */
.hero-section {
  background: linear-gradient(to right, #e3f2fd, #ffffff);
  padding: 100px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* 🌟 English Speaking Hero Section Split Layout */
.english-hero-section {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #bdcbf8, #ffffff);
  justify-content: center; /* Center everything horizontally */
  gap: 80px;
  width:100%;
  flex-wrap: wrap;
  padding: 100px 20px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 80vh;
}

.english-hero-text {
  flex: 1;
  max-width: 600px;
  animation: emergeSmooth 1.2s ease-out forwards;
  text-align: left;
}

.english-hero-text h1 {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  font-family: 'Playfair Display', serif;
  color: #002244;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateX(-30px);
  animation: textDropFade 1.4s ease-out forwards;
}

.english-hero-text p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #444;
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateX(-30px);
  animation: textFadeSlide 1.6s ease-out forwards;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

.english-hero-lottie {
  flex: 1;
  display:flex;
  justify-content: center;
}

.english-hero-lottie lottie-player {
  width: 600px;
  height: 600px;
}


@media (max-width: 768px) {
  .english-hero-section {
    flex-direction: column;
    text-align: center;
  }

  .english-hero-lottie lottie-player {
    width: 350px;
    height: 350px;
  }

  .english-hero-text h1 {
    font-size: 2.2rem;
  }

  .english-hero-text p {
    font-size: 1.1rem;
  }
}

/* 🌟 English Speaking Hero Section */
.speak-hero {
  background: linear-gradient(to right, #f0faff, #ffffff);
  padding: 120px 20px 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
  text-align: center;
}

.speak-text {
  flex: 1 1 500px;
  max-width: 600px;
}

.speak-text h1 {
  font-size: 3.2rem;
  font-weight: 800;
  font-family: 'Playfair Display', serif;
  color: #002244;
  margin-bottom: 20px;
}

.speak-text p {
  font-size: 1.3rem;
  line-height: 1.7;
  color: #555555;
}

.speak-lottie {
  flex: 1 1 400px;
  max-width: 500px;
}

.speak-lottie lottie-player {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* 🌟 English Speaking Feature Grid Section */
.speak-features {
  background: #ffffff;
  padding: 100px 20px;
}


/* 📱 Responsive */
@media (max-width: 768px) {
  .speak-hero {
    flex-direction: column;
    padding: 80px 20px;
  }

  .speak-text h1 {
    font-size: 2.2rem;
  }

  .speak-text p {
    font-size: 1.1rem;
  }

  .speak-feature-card {
    max-width: 90%;
  }

  .speak-feature-card lottie-player {
    width: 100px;
    height: 100px;
  }
}
/* =================== TRUST + BELIEVE FLOAT UPGRADE =================== */
.trust-float-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  animation: fadeInWrapper 1s ease forwards;
  min-height: 200px;
}

.trust-float-text {
  font-size: 6rem;
  font-weight: 900;
  color: #111;
  letter-spacing: 10px;
  font-family: 'Poppins', sans-serif;
  animation: fadeInUp 1.2s ease forwards;
}

.believe-float-text {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-top: 10px;
  animation: floatInOut 8s ease-in-out infinite;
}

.believe-float-text span {
  font-size: 3rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  color: #002244;
  opacity: 0;
  transform: translateY(20px);
  animation: letterFloat 4s ease-in-out infinite;
}

@keyframes fadeInWrapper {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes floatInOut {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* 🌟 New Speak Features Enhanced Section */
.speak-section-enhanced {
  background: linear-gradient(to right, #f7f9fc, #ffffff);
  padding: 100px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.speak-features-grid {
  display: flex;
  gap: 80px;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.speak-section-enhanced .speak-feature-card {
  flex: 1 1 30%;
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.speak-section-enhanced .speak-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.15);
}

.speak-section-enhanced .speak-feature-card h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #002244;
  margin: 20px 0 10px;
}

.speak-section-enhanced .speak-feature-card p {
  font-size: 1.1rem;
  color: #555555;
  line-height: 1.6;
}

.speak-section-enhanced .speak-feature-card lottie-player {
  width: 180px;
  height: 180px;
  margin-bottom: 20px;
}
/* 🌟 Countdown Milestone Section */
.countdown-milestone-section {
  background: linear-gradient(to right, #e0f7ff, #f0faff);
  padding: 100px 20px;
  text-align: center;
}

.countdown-milestone-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  animation: emergeSmooth 1s ease-out forwards;
}

.countdown-milestone-wrapper h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #002244;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

.countdown-milestone-wrapper p {
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.6;
}

.countdown-timer-box {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.countdown-timer-box div {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  padding: 20px 30px;
  border-radius: 15px;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  min-width: 100px;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
  text-align: center;
  animation: glowPulse 3s infinite;
}

.countdown-timer-box label {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 8px;
  color: #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
  .countdown-milestone-wrapper h2 {
    font-size: 2.2rem;
  }
  .countdown-milestone-wrapper p {
    font-size: 1.1rem;
  }
  .countdown-timer-box div {
    font-size: 1.5rem;
    padding: 16px 24px;
  }
}
/* 🌟 Flip Countdown Animation */
.countdown-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2rem;
  font-family: 'Poppins', sans-serif;
}

.countdown-box {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: white;
  padding: 30px 20px;
  border-radius: 18px;
  text-align: center;
  width: 120px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
  font-weight: bold;
  animation: emergeSmooth 0.5s ease-out;
  transform-style: preserve-3d;
}

.countdown-box .label {
  font-size: 1.2rem;
  margin-top: 8px;
}

.countdown-number {
  font-size: 2.8rem;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: flipIn 0.8s ease-in-out forwards;
  display: inline-block;
}

@keyframes flipIn {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
/* ===================== Countdown Timer Styles ===================== */
.countdown-item {
  width: 160px;
  height: 160px;
  font-size: 2.2rem;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.countdown-item span {
  font-size: 1.1rem;
}
/* 🌟 English Courses Highlight Section */
.english-courses-highlight {
  background: linear-gradient(to right, #e6f0ff, #ffffff);
  padding: 100px 20px;
  text-align: center;
}

.english-courses-highlight .highlight-heading {
  font-size: 3rem;
  color: #002244;
  font-family: 'Playfair Display', serif;
  margin-bottom: 2rem;
}

.courses-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
}

.course-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
  max-width: 400px;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: emergeSmooth 0.8s ease forwards;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.course-card lottie-player {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px auto;
  display: block;
}

.course-card h3 {
  font-size: 1.8rem;
  color: #003366;
  margin-bottom: 1rem;
  width: 90%;
}

.course-card p {
  font-size: 1.5rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  width: 90%;
}
.course-card ul {
  width: 90%;
}
.course-card ul li{
  margin-bottom:25px;
  font-size: 1.1rem;

}

/* 🎯 Popup Button */
.open-course-popup-btn {
  margin-top: 60px;
  background: linear-gradient(to right, #007bff, #00c6ff);
  color: white;
  padding: 16px 32px;
  font-size: 1.2rem;
  border-radius: 10px;
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3);
  animation: glowPulse 2s ease-in-out infinite;
}

.open-course-popup-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 123, 255, 0.5);
}

/* Modal Style */
.course-popup-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.course-popup-modal .popup-box {
  background: white;
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  position: relative;
  animation: emergeSmooth 0.5s ease forwards;
}

.course-popup-modal .popup-box h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #002244;
}

.course-popup-modal .popup-box p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 2rem;
}

.course-popup-modal .continue-btn {
  background: linear-gradient(to right, #00c6ff, #0077cc);
  color: white;
  font-size: 1.1rem;
  padding: 14px 30px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease;
}


.course-popup-modal .continue-btn:hover {
  transform: scale(1.05);
}

.course-popup-modal .popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  font-weight: bold;
  color: #ff3333;
  cursor: pointer;
}
@keyframes popInCenter {
  0% {
    opacity: 0;
    transform: scale(0.6) translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
  }
}


/* 🎬 Cinematic Video Editing Animated Headline */
.video-hero-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 20px;
  background-size: 400% 400%;
  animation: animateVideoHeroBG 15s ease infinite;
  flex-wrap: wrap;
  gap: 60px;
  text-align: center;
}

.video-hero-heading {
  flex: 1;
  min-width: 300px;
  animation: emergeSmooth 1.5s ease forwards;
}

.animated-headline {
  font-size: 4rem;
  font-weight: 900;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  display: inline-block;
  opacity: 0;
  animation: fadeInHeadline 2s ease forwards;
}

.animated-headline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: floatLetters 1s ease forwards;
}

.animated-headline span:nth-child(1) { animation-delay: 0s; }
.animated-headline span:nth-child(2) { animation-delay: 0.1s; }
.animated-headline span:nth-child(3) { animation-delay: 0.2s; }
.animated-headline span:nth-child(4) { animation-delay: 0.3s; }
.animated-headline span:nth-child(5) { animation-delay: 0.4s; }
.animated-headline span:nth-child(6) { animation-delay: 0.5s; }
.animated-headline span:nth-child(7) { animation-delay: 0.6s; }
.animated-headline span:nth-child(8) { animation-delay: 0.7s; }
.animated-headline span:nth-child(9) { animation-delay: 0.8s; }
.animated-headline span:nth-child(10) { animation-delay: 0.9s; }
.animated-headline span:nth-child(11) { animation-delay: 1.0s; }
.animated-headline span:nth-child(12) { animation-delay: 1.1s; }
.animated-headline span:nth-child(13) { animation-delay: 1.2s; }
.animated-headline span:nth-child(14) { animation-delay: 1.3s; }
.animated-headline span:nth-child(15) { animation-delay: 1.4s; }
.animated-headline span:nth-child(16) { animation-delay: 1.5s; }

.video-subtext {
  font-size: 1.5rem;
  color: #f0f0f0;
  margin-top: 20px;
  animation: slideInSubtext 2.5s ease forwards;
  opacity: 0;
  transform: translateY(30px);
}

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

@keyframes fadeInHeadline {
  to { opacity: 1; transform: scale(1.05); }
}

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

@keyframes slideInSubtext {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .animated-headline {
    font-size: 2.5rem;
  }
  .video-subtext {
    font-size: 1.2rem;
  }
}
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.video-hero-section {
  position: relative; /* ensure child absolute video is positioned correctly */
  overflow: hidden;
}

/* Ensure video background stays behind all content */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.video-hero-container {
  position: relative;
  z-index: 1;
}
/* 🌟 Floating Text Animation Styles */
#floating-text-zone {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  z-index: 10;
}
.floating-phrase {
  position: absolute;
  font-size: 2rem;
  font-weight: bold;
  opacity: 0;
  animation: fadeInOut 3s ease-in-out forwards;
  z-index: 10;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  white-space: nowrap;
  pointer-events: none;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: scale(0.8); }
  10% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.95); }
}
/* ======================== */
/* Video Hero Section Style */
/* ======================== */
.video-hero-section {
    height: 700px;
}

/* ======================== */
/* Floating Phrase Animation */
/* ======================== */


@keyframes fadePhrase {
  0%, 10% {
    opacity: 0;
    transform: translateY(20px);
  }
  20%, 40% {
    opacity: 1;
    transform: translateY(0);
  }
  50%, 100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Hide duplicate floating phrase at bottom-left if present */
.left-bottom-phrase {
    display: none !important;
}
.floating-phrase.bottom-copy {
    display: none !important;
}
/* 🌟 Floating Phrases Animation & Style */


@keyframes fadeAndFloat {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }
  80% {
    opacity: 1;
    transform: translateY(-5px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}
#floating-text-zone {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  min-height: 400px;
  z-index: 2;
}

#floating-text-zone::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #b3e5fc, #ffffff);
  opacity: 0.2;
  filter: blur(120px);
  animation: backgroundFloat 20s ease-in-out infinite;
  z-index: 1;
}

@keyframes backgroundFloat {
  0% { transform: translate(0, 0); }
  50% { transform: translate(30px, 30px); }
  100% { transform: translate(0, 0); }
}
/* Floating Phrase Section Background Animation Layer */


@keyframes floatBackground {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
/* Background layer behind the floating phrase section */
.floating-phrase-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #e0f7ff, #ffffff, #e0f7ff);
  background-size: 300% 300%;
  animation: animatedCanvasGlow 16s ease-in-out infinite;
  z-index: -1;
  opacity: 0.6;
}

@keyframes animatedCanvasGlow {
  0% {
    background-position: 0% 50%;
    opacity: 0.6;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.6;
  }
}
/* =================== Cinematic Glassmorphic Floating Text Zone =================== */
#floating-text-zone {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px 20px;
  overflow: hidden;
}
/* FINAL OVERRIDE: Remove all ghost backgrounds from phrases section */
#floating-text-zone,
#floating-text-zone::before,
#floating-text-zone::after,
.floating-text-container::before,
.floating-text-container::after,
.floating-phrase-section::before,
.floating-phrase-section::after {
  background: none !important;
  content: none !important;
  filter: none !important;
  display: block !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}
.floating-phrase {
  font-family: 'Glacial Indifference', 'Helvetica Neue', 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 3rem;
  letter-spacing: 0.5px;
  text-shadow: none;
  color: inherit; /* use JS-set color */
  transition: all 0.3s ease;
}
/* 🌟 Video Editing Process Section Styles */
.video-editing-process {
  padding: 100px 20px;
  background: white;
  font-family: 'Glacial Indifference', sans-serif;
  text-align: center;
  color: #111;
  animation: fadeInWrapper 1.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 40px;
}



.video-editing-process h2 {
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  color: black;
  font-family: 'Playfair Display', serif;
  margin-bottom:0.8rem;
}
.video-editing-process p {
  font-size: 1.2rem;
  font-weight: 500;
  color: black;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}
.flow-icon-video {
background-color: transparent;
}

.video-editing-process .intro {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 3rem;
  color: #333;
}

.video-step {
  max-width: 850px;
  margin: 0 auto 3.5rem;
  text-align: center;
  animation: emergeSmooth 1s ease-out;
}

.video-step h3 {
  font-size: 2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 0.5rem;
}

.video-step p {
  font-size: 1.1rem;
  color: #444;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ======================= Video Editing Process Lottie Animation Styles ======================= */
.video-editing-process {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 60px;
  padding: 80px 20px;
  position: relative;
  z-index: 1;
}

.video-editing-step {
  width: 320px;
  height: 320px;
  padding: 30px;
  border-radius: 20px;
  background: linear-gradient(to bottom right, #f0f4ff, #deeaff);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: scale(0.8) translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
  perspective: 1000px;
}

.video-editing-step.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.video-editing-step lottie-player {
  width: 100%;
  height: 100%;
  max-width: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.video-editing-step h3 {
  text-align: center;
  margin-top: 20px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #002244;
}
/* 🎬 Video Editing Process Styling */
.video-editing-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  padding: 100px 20px;
  background: linear-gradient(to right, #fdfdfd, #f0f9ff);
  animation: cinematicGradientShift 12s ease infinite;
  text-align: center;
}

/* 🎬 Video Editing Process - Safe Scoped Styles */
.flow-container-video {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  padding: 100px 20px;
  background: linear-gradient(to right, #fdfdfd, #f0f9ff);
  text-align: center;
}

/* 🌟 Video Editing Process Refinements */

.animated-process-flow .section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  text-align: center;
}

.animated-process-flow .section-heading h2 {
  font-size: 3.4rem;
  font-weight: 900;
  color: #002244;
  margin-bottom: 0.5rem;
}

.animated-process-flow .section-heading p {
  font-size: 1.3rem;
  color: #555;
  font-weight: 500;
  max-width: 800px;
  margin: 0 auto;
}
.video-flow-step lottie-player {
  width: 950px;
  height:950px;
}

/* 🌟 Vertical Film Strip Design for Video Editing Process */
.vertical-filmstrip{
  position: relative;
  background-color: black;
  padding: 80px 20px;
  border-left: 8px dotted #fff;
  border-right: 8px dotted #fff;
  margin-top: 60px;
  overflow: hidden;
}
.vertical-filmstrip-inner{
  background-color: white;
}
.vertical-filmstrip::before,
.vertical-filmstrip::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff 10px,
    transparent 10px,
    transparent 20px
  );
  z-index: 1;
}

.vertical-filmstrip::before {
  left: -16px;
}

.vertical-filmstrip::after {
  right: -16px;
}

.vertical-filmstrip .video-flow-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: relative;
  z-index: 2;
}

.vertical-filmstrip .video-flow-step {
  background: #1a1a1a;
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.vertical-filmstrip .video-flow-step:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15);
}

.vertical-filmstrip .video-flow-step h3 {
  font-size: 1.6rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-family: 'Poppins', sans-serif;
}

.vertical-filmstrip .video-flow-step p {
  font-size: 1.1rem;
  color: #ccc;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .vertical-filmstrip {
    padding: 60px 15px;
    border-left: 4px dotted #fff;
    border-right: 4px dotted #fff;
  }

  .vertical-filmstrip .video-flow-step {
    padding: 30px 20px;
  }

  .vertical-filmstrip .video-flow-step h3 {
    font-size: 1.4rem;
  }

  .vertical-filmstrip .video-flow-step p {
    font-size: 1rem;
  }
}
/* 🎞️ Filmstrip Video Editing Section */
.vertical-filmstrip {
  background-color: lightgray;
  padding: 5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.strip-step {
  background-color:  white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: 700px;
  width: 100%;
  text-align: center;
  transition: transform 0.3s ease;
}

.strip-step:hover {
  transform: scale(1.03);
}

.strip-step lottie-player {
  width: 280px;
  height: 280px;
  margin-bottom: 1rem;
}

.strip-step h3 {
  color:#ffffff !important;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #111111;
}


.strip-step p {
  font-size: 1.1rem;
  color: #333333;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .strip-step {
    padding: 2rem 1.5rem;
  }

  .strip-step lottie-player {
    width: 220px;
    height: 220px;
  }
}
/* ✅ VIDEO CAROUSEL FINAL FIX */
/* ===================== Video Carousel Styles ===================== */
.video-carousel-wrapper {
  overflow-x: auto;
  padding: 20px;
}

.video-carousel {
  display: flex;
  gap: 10px;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.video-slide {
  flex: 0 0 auto; /* Show ~2 videos per screen */
  width: 600px;
  height:400px;
  position: relative;
  background-color: #000;
}

.video-frame {
  width: 100%;
  height: 100%;
  max-width: 640px;  /* Full HD width for better clarity */
  aspect-ratio: 16 / 9;
  border-radius: 25px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  transition: transform 0.4 ease, box-shadow 0.4 ease;
  z-index: 1;
}

.video-frame:hover {
  transform: scale(1.05);
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
  z-index: 15;
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  transition: transform 0.4s ease;
  border: none;
}
video-frame:hover iframe {
  transform: scale(1.02); /* Slight inner zoom for iframe */
}

.video-brand-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
}
.carousel-heading {
  font-size: 2.5rem; /* Increase size */
  font-weight: 700;
  text-align: center; /* Center-align the text */
  margin-bottom: 2rem;
  color: #111; /* or whatever your heading color is */
}

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

.video-frame:hover .view-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}
.video-carousel-wrapper {
  overflow: hidden;
  scroll-behavior: smooth;
  white-space: nowrap;
  position: relative;
}

.video-carousel {
  display: flex;
  gap: 25px;
  animation: scrollCarousel 60s linear infinite;
  width: max-content;
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.video-carousel:hover {
  animation-play-state: paused; /* ⛔ Stops auto-scroll */
}

@keyframes scrollCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.video-frame:hovered {
  transform: scale(1.05);
}

/* === Video Lightbox Button Styles === */
.video-lightbox-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  z-index: 20;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.photo-overlay.hovered .video-lightbox-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1.05);
}

.video-frame:hovered .view-btn {
  opacity: 1;
}
/* 🌟 Lightbox Styling for Videos - Unique Class */
.video-lightbox {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px); /* site blur */
  background-color: rgba(255, 255, 255, 0.05); /* very light transparent white */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Animation */
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.video-lightbox.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.video-lightbox .lightbox-content {
  position: relative;
  max-width: 1150px;
  width: 95%;
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-lightbox iframe {
  width: 100%;
  height: 75vh;
  border: none;
  border-radius: 12px;
}

/* Close Button */
.video-lightbox .lightbox-close {
  position: absolute;
  top: -20px;
  right: -20px;
  background: #fff;
  color: #000;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  z-index: 10001;
}
.video-lightbox .lightbox-close:hover {
  background: #ff3333;
  color: white;
}

.creative-touch-section {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}

.creative-touch-section .section-heading {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.creative-touch-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.creative-point {
  flex: 1 1 250px;
  max-width: 300px;
  height: 500px;
  background: #fff;
  padding: 50px 20px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.creative-point:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.creative point h3{
  font-size:1.5rem;
}

.creative-point p {
  margin-top: 50px;
  font-size: 1.1rem;
  font-weight: 500;
}
.creative-touch-section {
  background: linear-gradient(-45deg, #fceabb, #e8eaf6, #d0f0fd, #fbeffb);
  background-size: 400% 400%;
  animation: animatedCreativeBG 10s ease infinite;
  padding: 80px 20px;
  border-radius: 16px; /* Optional: For rounded edge */
}

@keyframes animatedCreativeBG {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 50%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}
/* ✅ Video Form Success Popup Styling */
.video-form-success {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.success-popup {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 123, 255, 0.3);
  animation: fadeInPopup 0.5s ease-out forwards;
}

.success-popup h3 {
  font-size: 2rem;
  color: #28a745;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.success-popup p {
  font-size: 1.1rem;
  color: #333;
  font-family: 'Lato', sans-serif;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.success-popup button {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #ffffff;
  font-size: 1rem;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.success-popup button:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
  transform: scale(1.05);
}

@keyframes fadeInPopup {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.video-cta-section {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(to right, #eaf6ff, #ffffff);
}

.cta-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: #001f3f;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.cta-subtext {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 2rem;
  font-family: 'Lato', sans-serif;
}
/* 🎯 CTA Button Styling */
/* 🎯 CTA Button */
.open-video-form-btn {
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: #fff;
  font-size: 1.1rem;
  font-family: 'Poppins', sans-serif;
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 118, 255, 0.3);
  margin-top: 20px;
}
.open-video-form-btn:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
  transform: translateY(-2px);
}

/* 🧊 Overlay Background */
.video-form-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.video-form-overlay.show {
  display: flex;
  opacity: 1;
}

/* 🧩 Popup Styling */
.video-form-popup {
  background: #fff;
  padding: 40px 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.video-form-overlay.show .video-form-popup {
  transform: scale(1);
  opacity: 1;
}

/* ❌ Close Button */
.close-video-form {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

/* 📝 Steps */
.form-step {
  display: none;
}
.form-step.active-step {
  display: block;
}

/* 🧾 Input Fields */
.form-step input,
.form-step select,
.form-step textarea {
  width: 100%;
  padding: 14px 18px;
  font-size: 1.1rem;
  border-radius: 8px;
  border: 2px solid #000000;
  margin-bottom: 18px;
  font-family: 'Lato', sans-serif;
  box-sizing: border-box;
}
.form-step textarea {
  min-height: 80px;
  resize: vertical;
}

/* 🔁 Step Navigation */
.form-step-navigation {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.form-step-navigation button,
.next-step-btn {
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(to right, #0077cc, #00c6ff);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.form-step-navigation button:hover,
.next-step-btn:hover {
  background: linear-gradient(to right, #005fa3, #00aaff);
}

/* 📻 Radio Buttons */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
}
.radio-group input[type="radio"] {
  transform: scale(1.3);
}

/* ⚠️ Validation Red Border */
.invalid-field {
  border: 2px solid red !important;
  outline: none;
}

/* 📷 Logo inside form */
.video-form-logo {
  width: 250px;
  max-width: 90%;
  margin-bottom: 20px;
}
.error-message {
  color: red;
  font-size: 0.85rem;
  margin-top: -12px;
  margin-bottom: 10px;
  display: none;
}
.video-popup-success {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #cc0000, #ff4d4d);
  color: #fff;
  padding: 20px 30px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  animation: popupFadeIn 0.4s ease;
  max-width: 90%;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.popup-content p {
  font-size: 1.5rem;
  margin: 0;
}

@keyframes popupFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }             
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -60%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.remove-file-btn {
  margin-top: 10px;
  background: #ff4444;
  color: white;
  border: none;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}
.remove-file-btn:hover {
  background: #cc0000;
}
.qr-image {
  display: block;
  max-width: 220px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  cursor: pointer;
}
.qr-image:hover {
  transform: scale(1.05);
}




.cinematic-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.cinematic-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinematic-caption-box {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
  max-width: 800px;
  width: 90%;
}

.cinematic-glow-heading {
  font-size: 2.8rem;
  font-weight: 700;
  background: linear-gradient(90deg, #0ff, #fff, #0ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cinematicShimmer 3s linear infinite;
}
.cinematic-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.intro-content {
  position: absolute;
  top: 60px; /* 🟢 Distance from top */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  padding: 30px 40px;
  border-radius: 20px;
  max-width: 900px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
}

.heading-wrapper {
  overflow-x: visible;
  white-space: nowrap;
  max-width: 100%;
}

.cinematic-heading {
  display: inline-block;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2px;
  white-space: nowrap;
}
.letter:nth-child(18) {
  color: #ff00ff !important;
  background: #000 !important;
  text-shadow: none !important;
 
}

.letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateY(0deg);
  animation:
    letterAppear 1.5s ease forwards,
    softRevolve 6s ease-in-out infinite;
}

/* Entry animation */
@keyframes letterAppear {
  0% {
    opacity: 0;
    transform: translateY(30px) rotateY(-45deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg);
  }
}

/* Soft 3D revolve animation */
@keyframes softRevolve {
  0% {
    transform: rotateY(0deg);
    text-shadow: 0 0 6px rgba(255,255,255,0.15);
  }
  50% {
    transform: rotateY(10deg);
    text-shadow: 0 0 8px currentColor;
  }
  100% {
    transform: rotateY(0deg);
    text-shadow: 0 0 6px rgba(255,255,255,0.15);
  }
}
/* Space handling */
.space {
  width: 15px;
  display: inline-block;
}
.letter:nth-child(1)  { color: #ff007a; animation-delay: 0s; }
.letter:nth-child(2)  { color: #ff4d00; animation-delay: 0.1s; }
.letter:nth-child(3)  { color: #ffcc00; animation-delay: 0.2s; }
.letter:nth-child(4)  { color: #33ff00; animation-delay: 0.3s; }
.letter:nth-child(5)  { color: #00fff2; animation-delay: 0.4s; }
.letter:nth-child(6)  { color: #007bff; animation-delay: 0.5s; }
.letter:nth-child(7)  { color: #4b00ff; animation-delay: 0.6s; }
.letter:nth-child(8)  { color: #d633ff; animation-delay: 0.7s; }
.letter:nth-child(9)  { color: #ff3399; animation-delay: 0.8s; }
.letter:nth-child(10) { color: #ff0000; animation-delay: 0.9s; }

.letter:nth-child(11) { color: transparent; animation-delay: 1s; }  /* space */
.letter:nth-child(12) { color: #00ffcc; animation-delay: 1.1s; }
.letter:nth-child(13) { color: #ffcc00; animation-delay: 1.2s; }
.letter:nth-child(14) { color: #00ff00; animation-delay: 1.3s; }
.letter:nth-child(15) { color: #ff66cc; animation-delay: 1.4s; }
.letter:nth-child(16) { color: #ff3333; animation-delay: 1.5s; }
.letter:nth-child(17) { color: #66ff33; animation-delay: 1.6s; }

.letter:nth-child(18) { color: #00ffff; animation-delay: 1.7s; } /* space */
.letter:nth-child(19) { color: #00ccff; animation-delay: 1.8s; }
.letter:nth-child(20) { color: #ff6600; animation-delay: 1.9s; }
.letter:nth-child(21) { color: #66ffff; animation-delay: 2.0s; }
.letter:nth-child(22) { color: #ccff33; animation-delay: 2.1s; }
.letter:nth-child(23) { color: #ff9999; animation-delay: 2.2s; }
.letter:nth-child(24) { color: #00ff66; animation-delay: 2.3s; }
.letter:nth-child(25) { color: #ffccff; animation-delay: 2.4s; }
.letter:nth-child(26) { color: #3399ff; animation-delay: 2.5s; }
.letter:nth-child(27) { color: #ff0066; animation-delay: 2.6s; }

.cinematic-subheading {
  margin-top: 15px;
  color: #e0e0e0;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 30px;
}
/* 🎯 Digital Marketing Hero Styling */
.dm-hero {
  background: linear-gradient(135deg, #e0f7fa, #fce4ec, #fef9e7);
  color: #111111;
  padding: 100px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.dm-hero-content {
  max-width: 1600px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(80px, 10vw, 140px);
}
  

.dm-hero-left {
    flex: 1;
    max-width: 700px; /* 📏 this keeps it controlled */
    padding-top: 40px;
    animation: fadeSlideLeft 1.2s ease forwards;
}

.dm-heading {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #111111;
  animation: glowPulse 2.5s ease-in-out infinite;

}
@keyframes glowPulse {
  0% {
    text-shadow: 0 0 0px rgba(0, 132, 255, 0);
  }
  50% {
    text-shadow: 0 0 15px rgba(0, 132, 255, 0.6);
  }
  100% {
    text-shadow: 0 0 0px rgba(0, 132, 255, 0);
  }
}
.dm-subheading {
  font-size: 1.3rem;
  color: #333333;
  margin-bottom: 35px; /* 👈 Add this */
}

.dm-cta-btn {
  background: linear-gradient(45deg, #007bff, #00bfff);
  color: #ffffff;
  padding: 14px 28px;
  border: none;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.dm-cta-btn:hover {
  background: linear-gradient(45deg, #0056b3, #00aaff);
  transform: translateY(-2px);
}
.dm-cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  background: linear-gradient(45deg, #0077ff, #00e0ff);
}


  .dm-hero-right {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
      padding-top: 20px; /* Adjust if needed */
  animation: fadeSlideRight 1.2s ease forwards;
  }

  .dm-hero-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(0, 224, 255, 0.15), transparent 70%);
    filter: blur(70px);
    z-index: 0;
    top: 0;
    right: 10%;
    pointer-events: none;
  }
.dm-hero-lottie {
  width: 350px;
  height: 350px;
  max-width: 100%;
}

/* ✨ Entry Animations */
@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Background Video */
.scanner-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.scanner-flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 60px;
  z-index: 2;
  position: relative;
}

/* Section Wrapper */
.ai-scanner-section {
  position: relative;
  padding: 20px 20px;
  min-height: 80vh;
  overflow: hidden;
  color: #fff;
}
.scanner-center {
  max-width: 300px;
  text-align: center;
  padding: 0 20px;
}

/* Grid */
.scanner-grid.simple-mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  gap: 50px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Info Cards */
.info-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 40px 30px;
  width: 450px;
  height: 600px;
  color:#ffffff;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
  transition: transform 0.4s ease;
  position: relative;
  z-index: 1;
}
@keyframes waveCards {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

.golden-divider {
  width: 3px;
  height: auto;
  background: linear-gradient(to bottom, #ffd700, #ffffff33, #ffd700);
  animation: goldenWave 3s infinite linear;
  opacity: 0.7;
  border-radius: 5px;
}

@keyframes goldenWave {
  0% { background-position: 0% -100%; }
  100% { background-position: 0% 200%; }
}
.info-card:hover {
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.3),
    0 0 60px rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.2);
}
.info-card::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(0,255,255,0.2), transparent 70%);
  z-index: 0;
  border-radius: 50%;
  filter: blur(20px);
}
.info-card::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewY(-15deg);
  transition: top 0.8s ease;
  z-index: 2;
  pointer-events: none;
}

.info-card:hover::after {
  top: 100%;
}
/* Glow Overlay */
.card-glow {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  animation: glow-sweep 4s linear infinite;
  pointer-events: none;
}

@keyframes glow-sweep {
  0% { top: -100%; }
  100% { top: 100%; }
}
/* Stronger Heading Glow */
.glow-strong {
  animation: shimmerText 3s infinite linear;
  background-size: 400% !important;
}

/* Enhanced Block Glow Sweep */
.enhanced-glow {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 195, 255, 0.05));
  animation: glow-sweep 6s linear infinite;
}

.info-card {
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}

.info-card:hover {
  transform: rotateX(3deg) rotateY(-3deg) scale(1.02);
}
/* Lottie */
.info-card lottie-player {
  margin-bottom: 20px;
}

/* Headings + Paragraphs */
.info-card h4 {
  font-size: 25px;
  font-weight:600;
  margin-top: 10px;
  color: #ffffff;
}

.info-card p {
  font-size: 18px;
  line-height: 1.6;
  margin-top: 10px;
  color: #dddddd;
}

/* Points List */
.scan-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scan-points li {
  margin-bottom: 8px;
  font-size: 14px;
}

/* Center Tagline */
.scanner-center {
  text-align: center;
}

.scanner-glow {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px #00ffff;
  background: linear-gradient(90deg, #00eaff, #ffffff, #00eaff);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 5s infinite linear;
}

@keyframes shimmerText {
  0% { background-position: 0%; }
  100% { background-position: 300%; }
}
.scanner-sub {
  color: #cccccc;
  font-size: 16px;
  margin-top: 10px;
}
@keyframes waveCards {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}
.scanner-grid {
  display: grid;
  place-items: center;
  gap: 40px;
  padding: 20px 0;
  min-height: auto;
}
.popup-trigger {
  margin-top: 20px;
  background: #00bcd4;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.popup-trigger:hover {
  background: #0097a7;
}
.info-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  background: #ffffff;
  padding: 50px 40px;
  width: 90%;
  max-width: 720px;
  min-height: 350px;
  border-radius: 24px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 9999;
}

.info-popup.active {
  pointer-events: auto;
}

.popup-content h4 {
  font-size: 24px;
  margin-bottom: 12px;
  color: #000;
  text-align: center;
}

.popup-content p {
  font-size: 17px;
  line-height: 1.7;
  color: #333;
  text-align: center;
  padding: 0 20px;
}
.center-lottie-center-group {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  animation: pulseLottie 4s ease-in-out infinite;
  z-index: 2;
  position: relative;
}

@keyframes pulseLottie {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 22px;
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
}
@keyframes dragToCenterFromLeft {
  0% {
    top: var(--startTop);
    left: var(--startLeft);
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 50%;
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dragToCenterFromRight {
  0% {
    top: var(--startTop);
    left: var(--startLeft);
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 50%;
    transform: scale(1);
    opacity: 1;
  }
}
.dm-final-cta {
  background: linear-gradient(135deg, #140e25, #31045c); /* contrast-rich purple tone */
  padding: 80px 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.cta-glass-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 50px 30px;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
}

.cta-heading {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20px;
  text-shadow: 0 0 10px #00ffe0a4;
}

.cta-subheading {
  font-size: 18px;
  color: #dddddd;
  margin-bottom: 35px;
}

.cta-button {
  background: #00ffe0;
  color: #000;
  font-size: 16px;
  padding: 14px 30px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(0, 255, 224, 0.3);
  transition: all 0.3s ease;
}

.cta-button:hover 


.ttd-underdev-glassy {
  position: relative;
  padding: 100px 20px;
  background: linear-gradient(135deg, #eef6ff, #f7fbff);
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 153, 255, 0.3), transparent);
  animation: floatCircle 12s ease-in-out infinite;
  filter: blur(20px);
  z-index: 0;
}

/* 💡 Make sure they’re visible! */
.floating-circle.one {
  width: 180px;
  height: 180px;
  top: 40px;
  left: 10%;
  animation-delay: 0s;
  background: radial-gradient(circle, rgba(0, 123, 255, 0.4), transparent);
}

.floating-circle.two {
  width: 250px;
  height: 250px;
  bottom: 50px;
  right: 15%;
  animation-delay: 4s;
  background: radial-gradient(circle, rgba(102, 16, 242, 0.3), transparent);
}

.floating-circle.three {
  width: 120px;
  height: 120px;
  top: 60%;
  left: 70%;
  transform: translateY(-50%);
  animation-delay: 8s;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.3), transparent);
}

/* ⬆ Floating Animation */
@keyframes floatCircle {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0.9;
  }
}
.floating-social-bar {
  position: fixed;
  top: 15%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
.social-item {
  width: 240px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 15px 0 0 15px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  transform: translateX(180px);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-item i {
  width: 60px;
  font-size: 28px;
  text-align: center;
}
.social-item span {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.3s ease;
  white-space: nowrap;
  font-weight: 500;
}
.social-item:hover {
  transform: translateX(0) translateY(-6px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.social-item:hover span {
  transform: translateX(0);
  opacity: 1;
}

.facebook { 
  align-items: center;
  background: #3b5998; }
.instagram { 
  align-items: center;
  background: #bc2a8d; }
.youtube { 
  align-items: center;
  padding-left: 5px;  
  background: #ff0000; }
.whatsapp {  
  align-items: center;
  background: #128C7E; }
.email { 
  align-items: center;  
  background: #5e2e91; }
.google {
  align-items: center;
  background: #1A73E8;}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-logo,
.footer-contact,
.footer-links {
  flex: 1 1 200px;
  max-width: 300px;
}
@keyframes floatInCurved {
  0% {
    transform: translate(-150px, -50px) scale(0.8) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: translate(50px, 10px) scale(1.05) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Apply to entire bar initially */
.floating-social-bar {
  animation: floatInCurved 1.5s ease-out;
  animation-fill-mode: forwards;
  opacity: 0; /* hidden before animation */
}

/*contact */
/* =========================================================================== */
/* TTD Contact Section Styles - VETERAN LEVEL CREATIVE (ENHANCED)          */
/* =========================================================================== */

.ttd-contact-section {
  width: 95vw;
  max-width: 1400px;
  margin: 80px auto; /* Increased top/bottom margin for more separation */
  padding: 80px 40px; /* More padding inside the section for a grander feel */
  box-sizing: border-box;
  /* Soft, deeper blue gradient, giving a more premium base */
  background: linear-gradient(145deg, #e3f2fd, #bbdefb); 
  border-radius: 30px; /* Even larger border-radius for modern look */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); /* More prominent, soft shadow */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden; 
  font-family: 'Poppins', sans-serif; 
}

/* Dynamic background elements for contact section */
.ttd-contact-section::before,
.ttd-contact-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px); /* Soft blur */
  opacity: 0.4; /* Subtle opacity */
  z-index: 1; /* Below content, above section background */
  animation: floatingBlob 15s ease-in-out infinite alternate;
}

.ttd-contact-section::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-color-1) 0%, transparent 70%); /* Blue blob */
  top: -10%;
  left: -10%;
}

.ttd-contact-section::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-color-3) 0%, transparent 70%); /* Orange blob */
  bottom: -10%;
  right: -10%;
  animation-delay: 5s; /* Stagger animation */
}

@keyframes floatingBlob {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 30px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Header Styles */
.contact-header {
  margin-bottom: 60px; /* More space below header */
  position: relative;
  z-index: 2; 
  padding: 0 20px; /* Ensure padding for text */
}

.contact-header h2 {
  font-size: clamp(2.5rem, 5vw, 4rem); /* Larger, more impactful heading */
  font-weight: 800;
  color: var(--text-color-dark);
  margin-bottom: 20px; /* More space below heading */
  position: relative;
  display: inline-block;
  letter-spacing: 0.5px; /* Slight letter spacing */
}

/* Creative underline effect - Adjusted for bolder look */
.contact-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px; /* Lower the underline */
  left: 50%;
  transform: translateX(-50%);
  width: 70%; /* Wider underline */
  height: 8px; /* Thicker underline */
  background: linear-gradient(90deg, var(--accent-color-1) 0%, var(--accent-color-2) 50%, var(--accent-color-3) 100%);
  border-radius: 4px;
  opacity: 0.8;
}

.contact-header p {
  font-size: clamp(1.2rem, 2vw, 1.5rem); /* Larger, more readable paragraph */
  color: var(--text-color-light);
  line-height: 1.7;
  max-width: 800px;
  font-weight: 400; /* Ensure it's not too bold */
}

/* Contact Card Wrapper - Strict 4-column layout for larger screens */
.contact-card-wrapper {
  display: grid;
  /* Force 4 columns, even if it causes horizontal scroll on very specific medium screens */
  /* We'll handle overflow with media queries for smaller screens */
  grid-template-columns: repeat(4, 1fr); 
  gap: 35px; /* More gap between cards for breathing room */
  width: 100%;
  max-width: 1300px; /* Allow wider spread */
  position: relative;
  z-index: 2; 
  padding: 0 10px; /* Slight horizontal padding for wrapper */
}

/* Contact Card Styles - Enhanced Glassmorphism & Interactive Effects */
.contact-card {
  background: rgba(255, 255, 255, 0.08); /* More transparent for stronger glass effect */
  backdrop-filter: blur(20px); /* Stronger frosted glass blur */
  -webkit-backdrop-filter: blur(20px); 
  border: 1px solid rgba(255, 255, 255, 0.25); /* More visible light border */
  border-bottom-color: rgba(255, 255, 255, 0.15); /* Defines the bottom edge */
  border-right-color: rgba(255, 255, 255, 0.15); /* Defines the right edge */
  border-radius: 22px; /* Slightly larger border-radius for rounder corners */
  padding: 35px 25px; /* More vertical padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Softer initial shadow */
  /* Combined transition for a smoother feel */
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.05), /* Custom springy ease-out */
              box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1.05), 
              background 0.4s ease-out;
  cursor: pointer;
  will-change: transform, box-shadow, background; /* Performance */
  position: relative; /* For subtle internal effects */
}

.contact-card::before { /* Inner border/glow on hover */
  content: '';
  position: absolute;
  inset: 0; /* Shorthand for top, right, bottom, left: 0 */
  border-radius: inherit; /* Inherit parent's border-radius */
  border: 2px solid transparent;
  opacity: 0;
  transition: opacity 0.3s ease-out, border-color 0.3s ease-out;
  z-index: -1;
}

.contact-card:hover {
  transform: translateY(-15px) scale(1.05); /* More pronounced lift and scale */
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.2), 
              0 0 0 6px rgba(255, 255, 255, 0.5); /* Stronger white border/glow */
  background: rgba(255, 255, 255, 0.15); /* Slightly less transparent for 'lit up' effect */
}

.contact-card:hover::before {
  opacity: 1;
  border-color: var(--accent-color-1); /* Accent color border on hover */
}
/* Specific hover colors for different cards for extra flair */
.contact-card[data-type="email"]:hover::before { border-color: var(--accent-color-2); }
.contact-card[data-type="whatsapp"]:hover::before { border-color: #25D366; /* WhatsApp Green */ }
.contact-card[data-type="google"]:hover::before { border-color: #4285F4; /* Google Blue */ }


/* Icon Styles - Consistent and Animated */
lord-icon {
  width: clamp(80px, 10vw, 110px); /* Slightly larger icons */
  height: clamp(80px, 10vw, 110px);
  margin-bottom: 25px; /* More space below icon */
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1.05); /* Smooth icon transition */
}

.contact-card:hover lord-icon {
  transform: translateY(-5px) rotateY(18deg) scale(1.1); /* Lift, rotate, and scale icon */
}

.contact-card .google-icon {
  width: clamp(80px, 10vw, 110px); 
  height: clamp(80px, 10vw, 110px);
  object-fit: contain;
  margin-bottom: 25px;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1.05);
}

.contact-card:hover .google-icon {
  transform: translateY(-5px) rotate(12deg) scale(1.1); 
}

/* Card Content Styles */
.contact-card h3 {
  font-size: clamp(1.5rem, 2.8vw, 2rem); /* Larger, bolder heading */
  color: var(--text-color-dark);
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.contact-card p {
  font-size: clamp(1rem, 1.8vw, 1.25rem); /* More readable paragraph */
  color: var(--text-color-light);
  line-height: 1.6;
  max-width: 90%; /* Constrain paragraph width inside card */
}

.contact-card a {
  color: var(--accent-color-1);
  text-decoration: none !important;
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

.contact-card a:hover {
  color: var(--accent-color-2);
}

/* Media Queries for Responsiveness - Adjusted for 4-column priority */
@media (max-width: 1200px) { /* Adjust for slightly smaller desktops/large tablets */
  .contact-card-wrapper {
      gap: 25px; /* Reduce gap */
  }
  .contact-card {
      padding: 30px 20px;
  }
}

@media (max-width: 992px) { /* Tablets in portrait */
  .ttd-contact-section {
      padding: 60px 30px;
      margin: 60px auto;
  }
  .contact-header h2 {
      font-size: clamp(2.2rem, 5vw, 3.5rem);
  }
  .contact-card-wrapper {
      grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
      gap: 30px;
      max-width: 700px; /* Constrain width for 2-col layout */
  }
  .contact-card lord-icon,
  .contact-card .google-icon {
      width: clamp(70px, 12vw, 90px);
      height: clamp(70px, 12vw, 90px);
  }
}

@media (max-width: 768px) { /* Smaller tablets and phones */
  .ttd-contact-section {
      padding: 40px 20px;
      margin: 40px auto;
      border-radius: 20px;
  }
  .contact-header {
      margin-bottom: 40px;
  }
  .contact-header h2 {
      font-size: clamp(2rem, 6vw, 3rem);
  }
  .contact-header h2::after {
      width: 60%;
      height: 6px;
      bottom: -8px;
  }
  .contact-header p {
      font-size: clamp(1rem, 2.5vw, 1.2rem);
  }
  .contact-card-wrapper {
      grid-template-columns: 1fr; /* Single column on small phones */
      gap: 25px;
      max-width: 400px; /* Constrain width for single column */
  }
  .contact-card {
      padding: 25px;
  }
  .contact-card lord-icon,
  .contact-card .google-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 20px;
  }
  .contact-card h3 {
      font-size: clamp(1.3rem, 4vw, 1.8rem);
  }
  .contact-card p {
      font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  }
}

@media (max-width: 480px) { /* Very small phones */
  .ttd-contact-section {
      padding: 30px 15px;
      margin: 30px auto;
  }
  .contact-header h2 {
      font-size: clamp(1.6rem, 7vw, 2.5rem);
  }
  .contact-header p {
      font-size: clamp(0.9rem, 3vw, 1.1rem);
  }
  .contact-card {
      padding: 20px;
  }
}
:root {
  --main-bg-color: #f0f4f8; /* Light blue-grey */
  --secondary-bg-color: #ffffff; /* Pure white for main container (proximity-section) */
  --accent-color-1: #4299e1; /* Soft Blue */
  --accent-color-2: #ed64a6; /* Rosy Pink */
  --accent-color-3: #f6ad55; /* Muted Orange */
  --text-color-dark: #2d3748; /* Dark grey for headings */
  --text-color-light: #4a5568; /* Slightly lighter grey for subheadings */
  
  /* Card properties: FULLY TRANSPARENT */
  --card-bg-light: rgba(255, 255, 255, 0); /* Fully transparent background */
  --card-border-light: rgba(200, 210, 220, 0); /* Fully transparent border */
  --card-shadow: rgba(0, 0, 0, 0.1); /* Subtle shadow for floating effect */

  /* Section specific background and shimmer colors */
  --section-gradient-start: #fdf2a0; /* Yellowish */
  --section-gradient-mid: #81dafa;   /* Light Blue */
  --section-gradient-end: #f9abab;   /* Pinkish */
  --section-shimmer-color: rgb(127, 200, 237); /* Light blue for shimmer effect */
}

/* =========================================================================== */
/* BODY STYLES (आपके मौजूदा body स्टाइल के साथ तालमेल बिठाया गया)             */
/* =========================================================================== */
body {
  margin: 0; /* सुनिश्चित करें कि कोई डिफ़ॉल्ट मार्जिन न हो */
  padding-top: 100px; /* यह आपकी अपनी पैडिंग है, इसे बनाए रखें */
  background: #ffffff;   /* White background */
  font-family: 'Lato', 'Poppins', sans-serif;
  color: #111111;        /* Dark text color */
  overflow-x: hidden; /* हॉरिजॉन्टल स्क्रॉल को रोकें */
  min-height: 100vh; /* बॉडी को कम से कम पूरी व्यूपोर्ट हाइट लेने दें */
  display: block; /* Flex से वापस default block डिस्प्ले पर */
  position: relative; /* यदि आप body::before/after का उपयोग कर रहे हैं */
}

/* अगर आपके पास body::before/after के लिए भी कोई स्टाइल है, तो उन्हें यहां रखें */
/*
body::before, body::after {
  content: '';
  position: absolute;
  background: radial-gradient(circle, var(--accent-color-1) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.1;
  z-index: -1;
  animation: floatEffect 20s ease-in-out infinite alternate;
}

body::before {
  width: 500px;
  height: 500px;
  top: -10%;
  left: -10%;
}

body::after {
  width: 600px;
  height: 600px;
  bottom: -15%;
  right: -15%;
  animation-delay: 3s;
  background: radial-gradient(circle, var(--accent-color-2) 0%, transparent 70%);
}

@keyframes floatEffect {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}
*/

/* =========================================================================== */
/* PROXIMITY SECTION SPECIFIC STYLES                                        */
/* =========================================================================== */

.proximity-section {
  width: 95vw;
  max-width: 1400px;
  min-height: 1250px; /* एक न्यूनतम पिक्सेल-आधारित ऊंचाई */
  height: calc(100vh - 100px - 40px); /* 100vh - body padding-top - section margin-top/bottom */
  /* यदि `height` बहुत कठोर है और कंटेंट को काट देता है, तो इसे `min-height` में बदल दें */

  background-color: var(--secondary-bg-color); /* White background for the main container */
  border-radius: 20px;
  box-shadow: 0 15px 40px var(--card-shadow);
  position: relative; /* शिमर और ग्रेडिएंट के लिए */
  overflow: hidden; /* कंटेंट को क्लिप करने के लिए */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* कंटेंट को ऊपर और नीचे फैलाएं और बीच में जगह दें */
  align-items: center; /* क्षैतिज रूप से सेंटर करें */
  padding: 40px;
  box-sizing: border-box; /* पैडिंग और बॉर्डर को चौड़ाई में शामिल करें */
  margin: 40px auto; /* ऊपर और नीचे 40px मार्जिन, और हॉरिजॉन्टल सेंटरिंग के लिए auto */
  font-family: 'Poppins', sans-serif; 
}

/* Section specific background and shimmer effects */
.proximity-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--section-gradient-start) 0%, var(--section-gradient-mid) 50%, var(--section-gradient-end) 100%);
  background-size: 400% 400%; /* एनिमेशन के लिए बड़ा बैकग्राउंड */
  animation: sectionGradientShift 12s ease-in-out infinite alternate;
  z-index: 0; /* कंटेंट के पीछे */
  border-radius: 20px; /* कंटेनर के समान रेडियस */
  opacity: 1; /* पूरी तरह दृश्यमान */
}

.proximity-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%; /* शिमर को बाईं ओर से शुरू करें */
  width: 200%; /* शिमर की चौड़ाई */
  height: 100%;
  background: linear-gradient(
      120deg,
      transparent 0%,
      var(--section-shimmer-color) 50%, /* शिमर का रंग */
      transparent 100%
  );
  animation: sectionShimmer 6s infinite linear;
  z-index: 1; /* ग्रेडिएंट के ऊपर, कंटेंट के पीछे */
  opacity: 0.3; /* Subtle shimmer effect */
  border-radius: 20px; /* कंटेनर के समान रेडियस */
}

/* Keyframes for section gradient animation */
@keyframes sectionGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Keyframes for section shimmer animation */
@keyframes sectionShimmer {
  0% { transform: translateX(0%); }
  100% { transform: translateX(50%); } /* शिमर को दाईं ओर ले जाएं */
}

/* =========================================================================== */
/* "LET'S BUILD SOMETHING BRILLIANT TOGETHER" text */
.background-text {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.2rem, 3vw, 2.2rem); /* Responsive font size */
  font-weight: 700;
  color: #000000; /* Pure black color */
  opacity: 1; /* Fully opaque */
  text-transform: uppercase;
  letter-spacing: 2px;
  pointer-events: none; /* क्लिक्स को पास होने दें */
  user-select: none;
  position: relative;
  text-align: center;
  margin-bottom: 10px;
  z-index: 10;
  white-space: normal; /* <-- टेक्स्ट को रैप करने की अनुमति दें */
  word-break: break-word; /* शब्दों को तोड़ने की अनुमति दें यदि आवश्यक हो */
  max-width: 90%; /* अपने पेरेंट (proximity-section) की चौड़ाई लें */
  box-sizing: border-box;
  padding: 0 20px;
  text-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* =========================================================================== */
/* Animated Heading "Witness The Magic" */
.animated-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.1;
  white-space: normal; /* <-- टेक्स्ट को रैप करने की अनुमति दें */
  word-break: break-word; /* शब्दों को तोड़ने की अनुमति दें यदि आवश्यक हो */
  animation: bounceIn 1s ease-out;
  color: var(--text-color-dark);
  position: relative;
  z-index: 9;
  padding-top: 20px;
  max-width: 90%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}

.animated-heading span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUpColorful 1.5s ease forwards;
  padding: 0 1px;
}

.animated-heading span:nth-child(3n+1) { color: var(--accent-color-1); }
.animated-heading span:nth-child(3n+2) { color: var(--accent-color-2); }
.animated-heading span:nth-child(3n) { color: var(--accent-color-3); }

.animated-heading span:nth-child(n) {
  animation-delay: calc(0.06s * var(--i));
}

@keyframes fadeInUpColorful {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
  50% { opacity: 1; transform: translateY(-5px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bounceIn {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* =========================================================================== */
/* Subheading */
.subheading {
  text-align: center;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  color: var(--text-color-light);
  margin-top: 15px;
  margin-bottom: 40px;
  max-width: 700px;
  line-height: 1.6;
  animation: fadeIn 2s ease forwards 1.5s;
  opacity: 0;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  padding: 0 20px;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* =========================================================================== */
/* Proximity Area (where cards will appear) */
.proximity-area {
  width: 100%;
  flex-grow: 1; /* उपलब्ध लंबवत स्थान का विस्तार करें */
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px; /* कार्ड्स के लिए न्यूनतम जगह */
}

/* =========================================================================== */
/* Card Styles (for proximity effect) */
/* =========================================================================== */
/* Card Styles (for proximity effect) - ENHANCED HOVER ANIMATION           */
/* =========================================================================== */

/* =========================================================================== */
/* Card Styles (for proximity effect) - VETERAN LEVEL ANIMATION            */
/* =========================================================================== */

.card {
  position: absolute;
  /* UPDATED: Increased base size for cards */
  width: clamp(220px, 22vw, 320px);  
  height: clamp(280px, 28vw, 420px); 

  background: transparent; /* Card background is now truly transparent */
  border: none; /* No border for the card itself */
  border-radius: 20px; /* Slightly larger border-radius for smoother look */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle initial shadow */

  /* Initial state: More pronounced 3D rotation, slightly smaller, and deeper */
  transform: perspective(1200px) rotateX(95deg) rotateZ(var(--tilt, 0deg)) scale(0.6) translateY(80px) translateZ(-100px);
  transform-origin: center center;
  opacity: 0;

  /* Smoother, weighted springy transition for transforms and opacity */
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), /* Custom springy ease */
              opacity 0.6s ease-out,
              box-shadow 0.4s ease-out; /* Add shadow transition */
  
  z-index: 5;
  pointer-events: none; /* क्लिक्स को पास होने दें */
  will-change: transform, opacity, box-shadow; /* Performance optimization */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensure image stays within bounds */
  padding: 0;
  box-sizing: border-box;

  /* NEW: Dynamic light source for a glossy/shimmer effect */
  /* This radial gradient creates a subtle highlight that moves with --lightX, --lightY */
  background: radial-gradient(circle at var(--lightX, 50%) var(--lightY, 50%), 
              rgba(255, 255, 255, 0.15) 0%, /* Brighter core */
              rgba(255, 255, 255, 0.05) 30%, /* Fading out */
              transparent 70%); /* Transparent beyond a certain point */
}

.card.show {
  /* Hover state: Pop out significantly, full scale, and more dynamic parallax */
  transform: perspective(1200px) 
             rotateX(var(--parallaxX, 0deg)) 
             rotateY(var(--parallaxY, 0deg)) 
             rotateZ(var(--tilt, 0deg)) 
             scale(1.1) /* Slightly larger pop */
             translateZ(100px); /* Significant Z-axis translation for a strong pop-out */
  opacity: 1;
  z-index: 15; /* Ensure it's on top */
  /* Springy transition for the show state, slightly faster for responsiveness */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), /* Responsive springy ease */
              opacity 0.2s ease-out;
  /* Enhanced shadow for a floating, illuminated effect */
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), /* Larger, darker, softer shadow */
              0 0 0 8px rgba(255, 255, 255, 0.4); /* Pronounced white border/glow */
}

/* No change to .card img and .card-title, but .card img will now benefit from the parent's overflow: hidden */
.card img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ensures the entire image is visible, scales down if needed */
  display: block;
  border-radius: 0; /* Ensures square image without border-radius */
  box-shadow: none;
  margin: 0;
}

.card-title { /* Kept for completeness, but not used in current HTML */
  display: none;
}

/* =========================================================================== */
/* Media Queries for Proximity Section (UPDATED card sizes)                 */
/* =========================================================================== */
@media (max-width: 768px) {
  .proximity-section {
      min-height: 650px;
      padding: 20px;
      margin-top: 15px;
      margin-bottom: 15px;
  }
  .animated-heading {
      font-size: clamp(2rem, 8vw, 3.5rem);
      margin-top: 40px;
      padding: 0 10px;
  }
  .subheading {
      font-size: clamp(0.9rem, 2.5vw, 1.1rem);
      padding: 0 10px;
  }
  .background-text {
      font-size: clamp(1.2rem, 4vw, 1.8rem);
      padding: 0 10px;
  }
  .proximity-area {
      min-height: 250px;
      margin-top: 15px;
  }
  .card {
      /* UPDATED for smaller screens too */
      width: clamp(160px, 30vw, 220px); 
      height: clamp(200px, 35vw, 280px);
      padding: 0;
  }
}
.ttd-logo-inside {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;     /* ⬅️ Negative margin upar kheenchta hai */
  margin-bottom: 0px;
  position: relative;
  z-index: 10;
}

.ttd-logo-inside img {
  width: 250px;          /* ⬅️ Increase this as needed: 160px–200px */
  height: auto;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: transform 0.3s ease;
}

.unlock-button {
  background: linear-gradient(135deg, #00c6ff, #7f00ff);
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  margin-top: 12px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.unlock-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.error-input {
  border: 2px solid red;
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
/* 📢 Plan Marquee Bar Styling */
/* 🌐 Enhanced Marquee Styling */
.plan-marquee {
  background: linear-gradient(to right, #6a85f1, #a16ae8); /* subtle techy gradient */
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  font-family: 'Poppins', sans-serif;
}

/* ⏳ Timer Display Styling */
.chat-timer-bar {
  background-color: #ffe477; /* softer yellow */
  color: #222;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
  text-align: center;
  border-bottom: 1px solid #ccc;
  font-family: 'Poppins', sans-serif;
}
#chatbotBody {
  max-height: 360px;
  overflow-y: auto;
  padding: 12px;
  scroll-behavior: smooth;
}
#chatbotBody .greeted {
  display: block;
  width: fit-content;
  background: #f1f5ff;
  padding: 35px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #000;
  line-height: 1.4;
}

/* 🧠 TTD Intelli – Plan UI */

.plan-ui-container {
  margin-top: 20px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.plan-block {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  padding: 15px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.plan-block:hover {
  transform: scale(1.02);
}
/* 🧠 Plan Layout – Final Styling */
.plan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.plan-card-box {
  flex: 1 1 30%; /* flexible width per plan */
  min-width: 180px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffffcc;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.plan-card-box:hover {
  transform: translateY(-4px);
}

.plan-name {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
  text-align: center;
}

.plan-card {
  font-size: 13px;
  padding: 8px 12px;
  width: 100%;
  background: linear-gradient(135deg, #00c6ff, #7f00ff);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.plan-card:hover {
  background: linear-gradient(135deg, #7f00ff, #00c6ff);
}
.close-popup {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
}

#planPopupDesc {
  margin-top: 30px;
  font-size: 15px;
  color: #111;
  line-height: 1.5;
}

.purchase-btn {
  margin-top: 20px;
  width: 100%;
  background: #0d6efd;
  color: white;
  padding: 10px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.purchase-btn:hover {
  background: #084ed6;
}


#mobileNoticeBar {
  display: none;
  background: #fffbe5;
  color: #333;
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
  font-family: 'Poppins', sans-serif;
  border-top: 1px solid #eee;
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.close-notice {
  margin-left: 10px;
  font-weight: bold;
  cursor: pointer;
}
.plan-marquee {
  width: 100%;
  background: #f0f9ff;
  color: #333;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid #ccc;
}

.chat-timer-bar {
  background: #ffe6e6;
  color: #b30000;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  font-family: 'Poppins', sans-serif;
  animation: slideTimerBar 0.5s ease-out;
}

@keyframes slideTimerBar {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.legal-note {
  font-size: 18px;
  color: #000000;
  text-align: center;
  margin-top: 10px;
}
.legal-note strong {
  color: #222;
}






body.modal-open {
  overflow: hidden !important;
  height: 100vh;
  position: fixed;
  width: 100%;
  padding-right: 0;
}