.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-7cef10d:#061C9B;--e-global-color-ff85ff9:#65C5FD;--e-global-color-e6d4106:#32324E;--e-global-color-e2d4a52:#6F75A7;--e-global-color-17d26bc:#4768FA;--e-global-color-2499fe7:#FFF977;--e-global-color-79a904a:#BBFF00;--e-global-color-29c773f:#24CFF8;--e-global-color-9b690a5:#F8FF82;--e-global-color-fedd93d:#194E64;--e-global-color-067f94b:#19253D;--e-global-color-94f3353:#FF6B35;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*
* Enhanced by Claude - Originally developed by Abhishek Patra Dev
* Ultra-optimized CSS code for maximum performance and fastest page loading.
* Includes advanced performance techniques and Core Web Vitals optimizations.
*/
/* ==========================================================================
0. Critical Performance Headers & Preloading
========================================================================== */
/*
Add these to your HTML for maximum performance:
*/
/* ==========================================================================
1. Advanced Foundational Performance & Reset
========================================================================== */
/* Ultra-fast box model with subpixel rendering optimization */
*,
*::before,
*::after {
box-sizing: border-box;
/* Prevent font boosting on mobile devices */
-webkit-text-size-adjust: 100%;
/* Optimize tap highlighting */
-webkit-tap-highlight-color: transparent;
}
/* Enhanced reset with performance considerations */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol {
margin: 0;
/* Prevent margin collapse issues */
padding: 0;
}
/* Optimized media handling with lazy loading support */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
/* Critical: Prevent layout shifts during image loading */
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 0.75rem;
}
/* Enhanced image loading performance */
img {
/* Use browser's native lazy loading */
loading: lazy;
/* Decode images asynchronously for better performance */
decoding: async;
}
/* Remove default list styles with performance optimization */
ul[role='list'],
ol[role='list'],
ul:where([class]),
ol:where([class]) {
list-style: none;
padding: 0;
margin: 0;
}
/* Enhanced form controls for better performance */
input,
button,
textarea,
select {
font: inherit;
/* Prevent zoom on iOS when focusing inputs */
font-size: max(16px, 1rem);
/* Optimize button rendering */
cursor: pointer;
/* Remove default appearances for faster rendering */
background: none;
border: none;
outline: none;
}
/* Optimize button performance */
button {
/* Remove button styling overhead */
padding: 0;
background: transparent;
/* Improve touch targets */
min-height: 44px;
min-width: 44px;
}
/* ==========================================================================
2. Enhanced Performance-Focused Defaults
========================================================================== */
/* Root-level optimizations */
:root {
/* Optimize color-scheme for faster rendering */
color-scheme: light dark;
/* Predefine common values to reduce recalculations */
--transition-fast: 150ms ease-out;
--transition-medium: 300ms ease-out;
--transition-slow: 500ms ease-out;
/* Use CSS custom properties for consistent spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
}
/* Enhanced smooth scrolling with performance considerations */
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
/* Optimize scroll performance */
* {
scroll-margin-top: 2rem;
}
}
/* Respect user motion preferences globally */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Advanced font loading strategy */
@font-face {
font-family: 'Your-Custom-Font';
src: url('/fonts/your-custom-font.woff2') format('woff2');
font-display: swap; /* Swap immediately when custom font loads */
/* Optimize font rendering */
font-style: normal;
font-weight: 400;
/* Unicode range for better loading performance */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Ultra-optimized body styles */
html {
/* Optimize scrolling performance */
scroll-padding-top: 2rem;
}
body {
/* Enhanced system font stack for maximum speed */
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
/* Optimize text rendering */
text-rendering: optimizeSpeed; /* Faster than optimizeLegibility for body text */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Performance-focused layout */
min-height: 100vh;
min-height: 100dvh; /* Dynamic viewport height for mobile */
line-height: 1.5;
/* Prevent horizontal scrolling issues */
overflow-x: hidden;
/* Optimize scrolling */
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* ==========================================================================
3. Advanced GPU-Accelerated Animations & Transitions
========================================================================== */
/* Base animation class with hardware acceleration */
.animated-element {
/* Only animate GPU-accelerated properties */
transition:
transform var(--transition-medium),
opacity var(--transition-medium),
filter var(--transition-medium);
/* Force hardware acceleration */
transform: translateZ(0);
/* Alternatively: will-change: transform; (use sparingly) */
/* Optimize for smooth animations */
backface-visibility: hidden;
perspective: 1000px;
}
/* Enhanced hover states with performance optimization */
.animated-element:hover {
transform: translateY(-5px) translateZ(0);
opacity: 0.9;
/* Only use will-change when actually animating */
will-change: transform, opacity;
}
/* Remove will-change after animation completes to free GPU memory */
.animated-element:not(:hover) {
will-change: auto;
}
/* ==========================================================================
4. Critical Performance Utilities
========================================================================== */
/* Content visibility for better initial page load */
.below-fold {
content-visibility: auto;
contain-intrinsic-size: 0 500px; /* Estimate height to prevent layout shifts */
}
/* Optimize images with CSS */
.performance-img {
/* Prevent layout shifts */
aspect-ratio: 16/9; /* Adjust based on your images */
object-fit: cover;
/* Optimize rendering */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* Fast loading states */
.loading-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ==========================================================================
5. Advanced Layout Performance
========================================================================== */
/* Use CSS Grid and Flexbox efficiently */
.performance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-md);
/* Optimize grid performance */
contain: layout style paint;
}
.performance-flex {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
/* Optimize flex performance */
contain: layout;
}
/* ==========================================================================
6. Core Web Vitals Optimizations
========================================================================== */
/* Prevent Cumulative Layout Shift (CLS) */
.aspect-ratio-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.aspect-ratio-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Optimize for Largest Contentful Paint (LCP) */
.lcp-optimized {
/* Ensure critical content loads first */
font-display: block;
/* Prioritize loading */
fetchpriority: high;
}
/* ==========================================================================
7. Advanced Performance Utilities
========================================================================== */
/* Force layer creation for complex animations */
.force-layer {
transform: translateZ(0);
/* Alternative: will-change: transform; */
}
/* Optimize repaints */
.optimized-paint {
contain: paint;
}
/* Optimize for keyboard navigation performance */
:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
/* Optimize focus ring performance */
transition: outline-offset var(--transition-fast);
}
/* Remove focus styles for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* ==========================================================================
8. Responsive Performance Optimizations
========================================================================== */
/* Mobile-first performance optimizations */
@media (max-width: 768px) {
/* Disable expensive effects on mobile */
.desktop-only-effects {
animation: none !important;
transform: none !important;
filter: none !important;
}
/* Optimize touch interactions */
button, [role="button"] {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
}
/* Desktop optimizations */
@media (min-width: 1024px) {
/* Enable advanced effects only on capable devices */
.advanced-effects {
backdrop-filter: blur(10px);
will-change: backdrop-filter;
}
}
/* High-performance mode for reduced motion */
@media (prefers-reduced-motion: reduce) {
.loading-skeleton {
animation: none;
background: #f0f0f0;
}
}/* End custom CSS */