/* Web font: display=swap keeps text visible while font loads and reduces layout shift */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

/* Standalone design system CSS (not processed by Tailwind) */

:root {
    --background: 0 0% 98%;
    --foreground: 220 20% 15%;

    --card: 0 0% 100%;
    --card-foreground: 220 20% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 20% 15%;

    --primary: 210 85% 48%;
    --primary-foreground: 0 0% 100%;

    --primary-glow: 210 85% 65%;

    --secondary: 185 60% 50%;
    --secondary-foreground: 0 0% 100%;

    --muted: 210 30% 96%;
    --muted-foreground: 220 15% 45%;

    --accent: 185 60% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 15% 88%;
    --input: 220 15% 92%;
    --ring: 210 85% 48%;

    --radius: 0.75rem;

    /* Custom gradient tokens */
    --gradient-hero: linear-gradient(
        135deg,
        hsl(210 85% 48%) 0%,
        hsl(185 60% 50%) 100%
    );
    --gradient-card: linear-gradient(
        180deg,
        hsl(0 0% 100%) 0%,
        hsl(210 30% 98%) 100%
    );

    /* Shadow tokens */
    --shadow-sm: 0 2px 8px hsl(220 20% 15% / 0.04);
    --shadow-md: 0 4px 16px hsl(220 20% 15% / 0.08);
    --shadow-lg: 0 8px 32px hsl(220 20% 15% / 0.12);
    --shadow-glow: 0 0 40px hsl(210 85% 65% / 0.3);

    /* Transition tokens */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
    --background: 220 25% 12%;
    --foreground: 210 20% 95%;

    --card: 220 20% 15%;
    --card-foreground: 210 20% 95%;

    --popover: 220 20% 15%;
    --popover-foreground: 210 20% 95%;

    --primary: 210 85% 55%;
    --primary-foreground: 0 0% 100%;

    --primary-glow: 210 85% 70%;

    --secondary: 185 60% 55%;
    --secondary-foreground: 0 0% 100%;

    --muted: 220 20% 20%;
    --muted-foreground: 210 15% 65%;

    --accent: 185 60% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 50.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 20% 22%;
    --input: 220 20% 25%;
    --ring: 210 85% 55%;

    --gradient-hero: linear-gradient(
        135deg,
        hsl(210 85% 55%) 0%,
        hsl(185 60% 55%) 100%
    );
    --gradient-card: linear-gradient(
        180deg,
        hsl(220 20% 15%) 0%,
        hsl(220 20% 18%) 100%
    );

    /* Shadow tokens */
    --shadow-sm: 0 2px 8px hsl(0 0% 0% / 0.2);
    --shadow-md: 0 4px 16px hsl(0 0% 0% / 0.3);
    --shadow-lg: 0 8px 32px hsl(0 0% 0% / 0.4);
    --shadow-glow: 0 0 40px hsl(210 85% 70% / 0.4);

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    /* font-family: 'Inter', system-ui, -apple-system, sans-serif; */
    font-family: "Outfit", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: 'Inter', system-ui, -apple-system, sans-serif; */
    font-family: "Outfit", sans-serif;
    font-weight: 700;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.gradient-hero {
    background: var(--gradient-hero);
}

.gradient-card {
    background: var(--gradient-card);
}

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

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

/* Custom Css */

nav {
    background: #fff;
}

/* Locla Header - Standard Navigation Bar */
.locla-header {
    height: 75px;
    max-height: 75px;
    min-height: 75px;
}

.locla-header img {
    max-height: 60px;
    object-fit: contain;
}
section#service-search {
    /* background-image: url(/main-banner-bg2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
    /* padding: 4% 10%;
  padding-bottom: 10%; */
    position: relative;
    /* overflow: hidden; */
}

/* Mobile responsive padding for hero section */
@media (max-width: 640px) {
    section#service-search {
        padding: 2rem 1rem;
        padding-bottom: 3rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    section#service-search {
        padding: 3rem 2rem;
        padding-bottom: 5rem;
    }
}

section#service-search::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* bottom: 0; */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 100%
    );
    z-index: 0;
}

section#service-search > * {
    position: relative;
    z-index: 1;
}
/* Hero section images - grid layout */
.second section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
    width: 100%;
}

.second section img {
    /* Prevent layout shift - images maintain natural aspect ratio */
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Use content-visibility for better performance */
    content-visibility: auto;
}
.browse {
    display: inline-block;
    transition: var(--transition-smooth);
    text-align: center;
    border: 2px solid hsl(var(--primary));
    box-shadow: 4px 4px hsl(var(--primary));
    background-color: white;
    color: hsl(var(--primary));
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 100px;
}

.browse:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px hsl(var(--primary));
    background-color: hsl(var(--primary));
    color: white;
}
.browseAll {
    display: inline-block;
    transition: var(--transition-smooth);
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 1);
    box-shadow: 4px 4px rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, 1);
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 100px;
}

.browseAll:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, 1);
    opacity: 0.9;
}
.rating i {
    color: #efc02f;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s;
}

.rating:hover i {
    transform: scale(1.1);
}
.bxs-star:before {
    content: "\ee67";
}
.price {
    color: hsl(var(--muted-foreground));
    position: relative;
    font-weight: 500;
    font-size: 13px;
}

.price span {
    color: hsl(var(--foreground));
    font-weight: 700;
    font-size: 18px;
    display: inline-block;
    margin-left: 8px;
}
.copyright-area {
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 35px;
    padding: 18px 0px;
}
.second {
    position: relative;
    /* top: 30px; */
}

.second section img {
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    margin-bottom: 8px;
}

.second section img:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.mostPopular {
    padding: 8px 0;
}

/* Prevent layout shift on image load - CSS-only solution */
/* Only apply to images without explicit dimensions */
img[loading="lazy"]:not([width]):not([height]) {
    max-width: 100%;
}

/* Category images - already have fixed container height, ensure no shift */
[id^="home-section-"] .relative.h-48 img,
[id^="home-section-"] .relative.sm\:h-56 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure images with width/height maintain aspect ratio without forcing CSS height
   (HTML width/height still reserve space for layout/CLS) */
img[width][height] {
    max-width: 100%;
    /* height: auto; */
}

/* Service suggestions dropdown - prevent shift */
#service-suggestions {
    min-height: 0;
    max-height: 256px;
    contain: layout style;
}

/* Hero section - prevent layout shift */
/* section#service-search {
  min-height: 500px;
} */

/* Category section containers - prevent shift */
[id^="home-section-"] {
    min-height: 200px;
}

/* Mobile responsive improvements */
@media (max-width: 640px) {
    /* Better spacing on mobile */
    .space-y-16 > * + * {
        margin-top: 3rem;
    }

    /* Category cards better mobile width */
    .mostPopular {
        padding: 4px 0;
    }

    /* Testimonials better mobile padding */
    .js-testimonial-carousel {
        padding: 1.5rem 1rem;
        border-radius: 1.5rem;
    }

    /* Better text sizing on mobile */
    h1 {
        line-height: 1.2;
    }

    h2 {
        line-height: 1.3;
    }

    /* Ensure touch targets are large enough */
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
}
/* End Custom Css*/

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

.animate-scrolling {
    animation: scrolling 30s linear infinite;
    will-change: transform;
    animation-timing-function: linear;
    backface-visibility: hidden;
    perspective: 1000px;
}

.animate-scrolling:hover {
    animation-play-state: paused;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

@keyframes floatSlow {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-16px);
    }
    100% {
        transform: translateY(0);
    }
}
.floating {
    animation: floatSlow 7s ease-in-out infinite;
}

.fade {
    animation: fadeScale 0.45s ease;
}
@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}