@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

* {
    box-sizing: border-box !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #001F3F;
    background: #ffffff;
}

h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 213 100% 12%;
        --card: 0 0% 100%;
        --card-foreground: 213 100% 12%;
        --popover: 0 0% 100%;
        --popover-foreground: 213 100% 12%;
        --primary: 213 100% 12%;
        --primary-foreground: 0 0% 100%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 213 100% 12%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 213 20% 40%;
        --accent: 211 100% 50%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 214 32% 91%;
        --input: 214 32% 91%;
        --ring: 211 100% 50%;
        --radius: 0.75rem;
    }
}

/* Brand utility classes — Homora logo palette--- */
.text-brand {
    color: #001F3F;
}

.bg-brand {
    background-color: #001F3F;
}

.text-brand-blue {
    color: #007BFF;
}

.bg-brand-blue {
    background-color: #007BFF;
}

.border-brand-blue {
    border-color: #007BFF;
}

.text-brand-gold {
    color: #F5B301;
}

.bg-brand-gold {
    background-color: #F5B301;
}

.border-brand-gold {
    border-color: #F5B301;
}

.btn-primary {
    background: #F5B301;
    color: #001F3F;
    font-weight: 700;
    padding: 14px 26px;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 8px 24px -8px rgba(245, 179, 1, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    background: #FFC933;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(245, 179, 1, 0.7);
}

.btn-outline-white {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-outline-white:hover {
    background: #ffffff;
    color: #001F3F;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #E6F1FF;
    color: #001F3F;
    font-size: 12px;
    font-weight: 600;
}

/* WhatsApp floating button pulse */
@keyframes wa-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.wa-pulse {
    animation: wa-pulse 2s infinite;
}

.hero-grad {
    background: radial-gradient(1200px 500px at 10% 10%, #007bff2e, #0000 60%), radial-gradient(1000px 400px at 90% 20%, #001f3f24, #0000 60%), linear-gradient(180deg, #f4f8ff, #fff);
}

/* ============================================================
           SCROLL ANIMATIONS — Tailwind CSS ke saath
           (Har section scroll up/down par animate hoga)
           ============================================================ */

/* ----- Base scroll animation (fade up) ----- */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.85s cubic-bezier(0.22, 0.9, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 0.9, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Stagger children (bachay ek ek kar ke) ----- */
.stagger-scroll>* {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.9, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.9, 0.36, 1);
    will-change: opacity, transform;
}

.stagger-scroll.visible>*:nth-child(1) {
    transition-delay: 0.05s;
}

.stagger-scroll.visible>*:nth-child(2) {
    transition-delay: 0.10s;
}

.stagger-scroll.visible>*:nth-child(3) {
    transition-delay: 0.15s;
}

.stagger-scroll.visible>*:nth-child(4) {
    transition-delay: 0.20s;
}

.stagger-scroll.visible>*:nth-child(5) {
    transition-delay: 0.25s;
}

.stagger-scroll.visible>*:nth-child(6) {
    transition-delay: 0.30s;
}

.stagger-scroll.visible>*:nth-child(7) {
    transition-delay: 0.35s;
}

.stagger-scroll.visible>*:nth-child(8) {
    transition-delay: 0.40s;
}

.stagger-scroll.visible>*:nth-child(9) {
    transition-delay: 0.45s;
}

.stagger-scroll.visible>*:nth-child(10) {
    transition-delay: 0.50s;
}

.stagger-scroll.visible>* {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Left se slide ----- */
.scroll-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.9, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 0.9, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ----- Right se slide ----- */
.scroll-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.9, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 0.9, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ----- Scale animation ----- */
.scroll-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s cubic-bezier(0.22, 0.9, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 0.9, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* ----- Marquee ----- */
.animate-marquee {
    animation: marquee 28s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ----- Hover effects ----- */
.group {
    transition: all 0.25s ease;
}

.group video {
    transition: opacity 0.4s ease;
}

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.15);
}

.review-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.08);
    border-color: #007BFF;
}

.area-chip {
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.area-chip:hover {
    transform: scale(1.04);
}

/* ----- Initial load animations (pehle se the) ----- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

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

.fade-up-delay-1 {
    animation-delay: 0.1s;
}

.fade-up-delay-2 {
    animation-delay: 0.2s;
}

.fade-up-delay-3 {
    animation-delay: 0.3s;
}

.fade-up-delay-4 {
    animation-delay: 0.4s;
}

.fade-up-delay-5 {
    animation-delay: 0.5s;
}

.scale-in {
    opacity: 0;
    transform: scale(0.95);
    animation: scaleIn 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

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

.slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    animation: slideInRight 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   MOBILE SIDEBAR - FULL HEIGHT FIX
   ============================================================ */

/* Sidebar container - full viewport height */
#mobileMenu .w-\[300px\] {
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
    bottom: 0 !important;
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    #mobileMenu .w-\[300px\] {
        height: -webkit-fill-available !important;
    }
}

/* Overlay full height */
#mobileOverlay {
    height: 100vh !important;
    min-height: 100vh !important;
}

/* Navigation scroll */
#mobileMenu .flex-1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Bottom section fixed */
#mobileMenu .border-t {
    flex-shrink: 0 !important;
    background: white !important;
    position: sticky !important;
    bottom: 0 !important;
}

/* Header fixed */
#mobileMenu .border-b {
    flex-shrink: 0 !important;
    background: white !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

/* ============================================================
   HEADER STICKY — FIX
   ============================================================ */

header.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
}

#root,
.App,
.App > .flex,
.App > .flex.min-h-screen {
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}

body {
    padding-top: 0 !important;
}

html,
body {
    overflow-x: clip !important;
}

#mobileMenu {
    z-index: 99999 !important;
}

#toastContainer {
    z-index: 999999 !important;
}