/* Prevent horizontal scroll - only on html to preserve sticky */ html { overflow-x: hidden; } /* ============================================ THEME COLOR CUSTOMIZATION GUIDE ============================================ To change the theme colors, modify the values below. Make sure to update both :root (light theme) and .dark (dark theme) sections. ============================================ */ :root { /* 🎨 PRIMARY THEME COLORS - Change these for main brand color */ --background: #ffffff; /* Main page background */ --foreground: #272727; /* Main text color */ --card: #ffffff; /* Card/container background */ --card-foreground: #000000; /* Text color on cards */ --popover: #ffffff; /* Popover/dropdown background */ --popover-foreground: #272727; /* Text color in popovers */ /* 🔴 PRIMARY COLOR - Main brand/accent color (buttons, links, highlights) */ --primary: #000000; /* ⚠️ CHANGE THIS for main theme color */ --primary-foreground: #ffffff; /* Text color on primary buttons */ --primary-hover: #333333; /* ⚠️ CHANGE THIS - darker shade for hover states */ --primary-variant: #000000; /* ⚠️ CHANGE THIS - variant of primary color */ /* 🟡 SECONDARY COLORS - Supporting colors */ --secondary: #E4E4E4; /* Secondary background color */ --secondary-foreground: #000000; /* ⚠️ CHANGE THIS - text on secondary (usually matches primary) */ --muted: #F7F7F7; /* Muted/subtle background */ --muted-foreground: #4E4E4E; /* Muted text color */ /* 🟢 ACCENT COLORS - Additional highlights */ --accent: #000000; /* ⚠️ CHANGE THIS - accent color (usually matches primary) */ --accent-foreground: #272727; /* Text color on accent elements */ /* 🔴 DESTRUCTIVE COLORS - Error/warning states */ --destructive: #ef4444; /* Error/delete button color */ --destructive-foreground: #ffffff; /* Text on destructive buttons */ /* 🔵 BORDER COLORS - Borders and dividers */ --border: #DFDFDF; /* Default border color */ --border-light: #000000; /* ⚠️ CHANGE THIS - light border accent (usually matches primary) */ --border-accent: #000000; /* ⚠️ CHANGE THIS - accent border (usually matches primary) */ --input: #DFDFDF; /* Input field border */ --ring: #000000; /* ⚠️ CHANGE THIS - focus ring color (usually matches primary) */ /* 🔗 LINK COLORS */ --link: #6383F7; /* Link color */ /* 📝 TEXT COLORS */ --text-primary: #272727; /* Primary text color */ --text-secondary: #4E4E4E; /* Secondary text color */ --text-black: #000000; /* Black text */ --text-white: #ffffff; /* White text */ /* 🌈 GRADIENT COLORS - Background gradients */ --gradient-start: rgba(255, 255, 255, 0); /* Gradient start (transparent) */ --gradient-mid: rgba(255, 59, 68, 1); /* ⚠️ CHANGE THIS - gradient middle (red tone) */ --gradient-end: rgba(191, 0, 21, 1); /* ⚠️ CHANGE THIS - gradient end (dark red) */ --gradient-primary-start: rgba(255, 59, 68, 0.2); /* ⚠️ CHANGE THIS - primary gradient start */ --gradient-primary-mid: rgba(255, 59, 68, 0.15); /* ⚠️ CHANGE THIS - primary gradient middle */ --gradient-primary-end: rgba(191, 0, 21, 0.05); /* ⚠️ CHANGE THIS - primary gradient end */ /* 🎭 SHADOW COLORS */ --shadow-sm: rgba(0, 0, 0, 0.1); /* Small shadow */ --shadow-md: rgba(0, 0, 0, 0.05); /* Medium shadow */ --shadow-primary: rgba(0, 0, 0, 0.3); /* ⚠️ CHANGE THIS - primary colored shadow (adjust RGB to match primary) */ /* 🎨 SPECIAL GRADIENTS - Hero, pricing, CTA sections */ --gradient-blue: #325CFF; /* Blue gradient color */ --hero-gradient: radial-gradient(ellipse 180% 150% at 35% 15%, #FFFFFF00 0%, rgba(255, 59, 68, 0.18) 40%, rgba(255, 59, 68, 0.45) 75%, rgba(191, 0, 21, 0.63) 100%); /* ⚠️ CHANGE THIS - hero section gradient */ --pricing-gradient: radial-gradient(ellipse 180% 150% at 35% 15%, #FFFFFF00 0%, rgba(255, 59, 68, 0.18) 40%, rgba(255, 59, 68, 0.45) 75%, rgba(191, 0, 21, 0.63) 100%); /* ⚠️ CHANGE THIS - pricing section gradient */ --cta-gradient: radial-gradient(ellipse 180% 150% at 35% 15%, #FFFFFF00 0%, rgba(255, 59, 68, 0.18) 40%, rgba(255, 59, 68, 0.45) 75%, rgba(191, 0, 21, 0.63) 100%); /* ⚠️ CHANGE THIS - CTA section gradient */ /* 🔤 FONT SETTINGS - Usually don't need to change */ --font-sans: Raleway, sans-serif; --font-serif: Merriweather, serif; --font-mono: JetBrains Mono, monospace; /* 📐 BORDER RADIUS - Usually don't need to change */ --radius: 0.5rem; --radius-sm: 17px; --radius-md: 20px; --radius-lg: 24px; --radius-xl: 47px; /* Common color mappings for dynamic theming - Usually don't need to change */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --black: #000000; --white: #ffffff; } /* ============================================ DARK THEME COLORS ============================================ Update these values to match your dark theme. Usually keep primary colors the same, but adjust backgrounds and text. ============================================ */ .dark { /* 🎨 PRIMARY THEME COLORS - Dark theme backgrounds */ --background: #0f172a; /* Dark page background */ --foreground: #e2e8f0; /* Light text color for dark theme */ --card: #1e293b; /* Dark card background */ --card-foreground: #e2e8f0; /* Light text on dark cards */ --popover: #1e293b; /* Dark popover background */ --popover-foreground: #e2e8f0; /* Light text in dark popovers */ /* 🔴 PRIMARY COLOR - Usually keep same as light theme */ --primary: #000000; /* ⚠️ CHANGE THIS - main theme color (usually same as light theme) */ --primary-foreground: #0f172a; /* Text color on primary (dark background) */ --primary-hover: #333333; /* ⚠️ CHANGE THIS - hover state (usually same as light theme) */ --primary-variant: #000000; /* ⚠️ CHANGE THIS - variant (usually same as light theme) */ /* 🟡 SECONDARY COLORS - Dark theme variants */ --secondary: #2d3748; /* Dark secondary background */ --secondary-foreground: #000000; /* ⚠️ CHANGE THIS - text on secondary (usually matches primary) */ --muted: #1e293b; /* Dark muted background */ --muted-foreground: #9ca3af; /* Muted text for dark theme */ /* 🟢 ACCENT COLORS */ --accent: #000000; /* ⚠️ CHANGE THIS - accent color (usually matches primary) */ --accent-foreground: #d1d5db; /* Light text on accent */ /* 🔴 DESTRUCTIVE COLORS */ --destructive: #ef4444; /* Error color (usually same as light theme) */ --destructive-foreground: #0f172a; /* Text on destructive (dark) */ /* 🔵 BORDER COLORS - Dark theme borders */ --border: #4b5563; /* Dark border color */ --border-light: #000000; /* ⚠️ CHANGE THIS - light border accent (usually matches primary) */ --border-accent: #000000; /* ⚠️ CHANGE THIS - accent border (usually matches primary) */ --input: #4b5563; /* Dark input border */ --ring: #000000; /* ⚠️ CHANGE THIS - focus ring (usually matches primary) */ /* 🔗 LINK COLORS */ --link: #818cf8; /* Light link color for dark theme */ /* 📝 TEXT COLORS - Dark theme text */ --text-primary: #e2e8f0; /* Light primary text */ --text-secondary: #9ca3af; /* Light secondary text */ --text-black: #ffffff; /* Inverted for dark theme */ --text-white: #0f172a; /* Inverted for dark theme */ /* 🌈 GRADIENT COLORS - Usually same as light theme */ --gradient-start: rgba(255, 255, 255, 0); /* Gradient start */ --gradient-mid: rgba(255, 59, 68, 1); /* ⚠️ CHANGE THIS - gradient middle (usually same as light) */ --gradient-end: rgba(191, 0, 21, 1); /* ⚠️ CHANGE THIS - gradient end (usually same as light) */ --gradient-primary-start: rgba(255, 59, 68, 0.2); /* ⚠️ CHANGE THIS - primary gradient start */ --gradient-primary-mid: rgba(255, 59, 68, 0.15); /* ⚠️ CHANGE THIS - primary gradient middle */ --gradient-primary-end: rgba(191, 0, 21, 0.05); /* ⚠️ CHANGE THIS - primary gradient end */ /* 🎭 SHADOW COLORS - Darker shadows for dark theme */ --shadow-sm: rgba(0, 0, 0, 0.3); /* Darker small shadow */ --shadow-md: rgba(0, 0, 0, 0.2); /* Darker medium shadow */ --shadow-primary: rgba(112, 112, 112, 0.3); /* ⚠️ CHANGE THIS - primary shadow (adjust RGB to match primary) */ /* 🎨 SPECIAL GRADIENTS - Usually same as light theme */ --gradient-blue: #325CFF; /* Blue gradient */ --hero-gradient: radial-gradient(ellipse 180% 150% at 35% 15%, #FFFFFF00 0%, rgba(255, 59, 68, 0.18) 40%, rgba(255, 59, 68, 0.45) 75%, rgba(191, 0, 21, 0.63) 100%); /* ⚠️ CHANGE THIS - hero gradient */ --pricing-gradient: radial-gradient(ellipse 180% 150% at 35% 15%, #FFFFFF00 0%, rgba(255, 59, 68, 0.18) 40%, rgba(255, 59, 68, 0.45) 75%, rgba(191, 0, 21, 0.63) 100%); /* ⚠️ CHANGE THIS - pricing gradient */ --cta-gradient: radial-gradient(ellipse 180% 150% at 35% 15%, #FFFFFF00 0%, rgba(255, 59, 68, 0.18) 40%, rgba(255, 59, 68, 0.45) 75%, rgba(191, 0, 21, 0.63) 100%); /* ⚠️ CHANGE THIS - CTA gradient */ /* 🔤 FONT SETTINGS - Usually same as light theme */ --font-sans: Raleway, sans-serif; --font-serif: Merriweather, serif; --font-mono: JetBrains Mono, monospace; /* 📐 BORDER RADIUS - Usually same as light theme */ --radius: 0.5rem; --radius-sm: 17px; --radius-md: 20px; --radius-lg: 24px; --radius-xl: 47px; /* Common color mappings for dynamic theming - Inverted for dark theme */ --gray-50: #1f2937; --gray-100: #374151; --gray-200: #4b5563; --gray-300: #6b7280; --gray-400: #9ca3af; --gray-500: #d1d5db; --gray-600: #e5e7eb; --gray-700: #f3f4f6; --gray-800: #f9fafb; --gray-900: #ffffff; --slate-50: #0f172a; --slate-100: #1e293b; --slate-200: #334155; --slate-300: #475569; --slate-400: #64748b; --slate-500: #94a3b8; --slate-600: #cbd5e1; --slate-700: #e2e8f0; --slate-800: #f1f5f9; --slate-900: #f8fafc; --black: #ffffff; --white: #000000; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-variant: var(--primary-variant); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-border-light: var(--border-light); --color-border-accent: var(--border-accent); --color-input: var(--input); --color-ring: var(--ring); --color-link: var(--link); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-black: var(--text-black); --color-text-white: var(--text-white); --font-sans: var(--font-sans); --font-mono: var(--font-mono); --font-serif: var(--font-serif); --radius-sm: var(--radius-sm); --radius-md: var(--radius-md); --radius-lg: var(--radius-lg); --radius-xl: var(--radius-xl); } .faq-item { transition: border-color 0.3s ease, border-width 0.3s ease; } .faq-content { transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out; overflow: hidden; } .faq-content.hidden { max-height: 0 !important; opacity: 0; margin-top: 0; } .faq-toggle svg { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease; } /* Ensure smooth initial state for expanded items */ .faq-item[data-expanded="true"] .faq-content:not(.hidden) { max-height: none; } #industriesTrack { overflow: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer and Edge */ } #industriesTrack::-webkit-scrollbar { display: none; /* Chrome, Safari, and Opera */ }

5K+ Users trust Crezlo

Transform Ideas Into Interactive,
Visual Presentations Fast

Create polished slides with rich media and customizable layouts. Collaborate in real-time and share seamlessly with your team.

Overview of Features

Explore the main functionalities and benefits that help you get the most out of our platform.

Interactive Slides Editor

Design beautiful, dynamic presentations with a clean drag-and-drop editor. Add text, media, layouts, animations, and more—no design skills required.

AI Slide Generation

Turn topics, scripts, or PDFs into complete slide decks instantly using AI-powered layout suggestions and auto-formatting.

Smart Design Templates

Choose from modern, professionally designed templates that adapt automatically to your content and brand style.

Media-Rich Slides

Embed videos, images, audio tracks, charts, tables, and code blocks. Slides load fast and look stunning on every screen.

Presenter Mode

Control your slides with notes, timers, shortcuts, and remote navigation — perfect for webinars, demos, and conferences.

Collaboration & Sharing

Invite team members, leave comments, work simultaneously in real time, and export to PDF anytime.

Transitions & Animations

Add smooth slide transitions and lightweight animations to enhance storytelling without slowing performance.

Brand Kits

Apply your brand’s logo, fonts, colors, and layouts across all slides automatically for a consistent identity.

Auto Layout Assistance

Slides adjust intelligently as you add or rearrange content, keeping spacing, alignment, and typography perfect.

Export & Embedding

Share your slide deck online, embed it on websites, or export it in high-quality PDF format.

Analytics & Insights

Track slide views, engagement, viewer drop-offs, and time spent on each slide to refine your message.

Offline Mode

Download your slides to present without internet—ideal for events, meetings, and travel.

Real Stories. Measurable Success.

Really impressed with Crezlo Tours! The UI feels clean and intuitive, and the results look super professional. The Dollhouse feature is an absolute game-changer, such a smart addition for 360° virtual tours. Love how easy it is to customize and brand. Great job team

Abhijit Saha

Design Lead (Socially)

Crezlo Flipbooks elevated our presentations. Clients love the smooth page flips and embedded media. Makes our content much more memorable.

Andy Kaplan

Founder

Crezlo Tours is fantastic! The Dollhouse feature makes exploring spaces so intuitive and interactive. Customizing branding and adding hotspots is super easy, and the tours always look professional. Highly recommended for real estate, events, or any immersive experience!

Jyoti Kyamsaria

Founder (TeamUp Property)

Crezlo Tours has transformed how we present spaces. The customization options are great, and tours feel interactive and engaging. Clients spend more time exploring, and the feedback has been amazing. A truly professional tool for immersive experiences

Saif

Operations Head (BrandSwitch)