/* =========================================
   🌟 KHALSA VIP ANIMATIONS (FINAL GLITCH FIX) 🌟
========================================= */

/* 👉 FIX 1: Mobile Screen ko Side mein bhagne se Lock karna */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}
.about-section {
    overflow: hidden !important; /* Ye text ko screen ke bahar nahi nikalne dega */
    position: relative;
}

/* 1. BUTTON HOVER EFFECT */
.btn-primary, .btn-book, .view-all-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.btn-primary:hover, .btn-book:hover, .view-all-btn:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* 2. FLOATING CALL BUTTON PULSE */
.call-float {
    animation: pulse-glow 2s infinite !important;
}
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* 3. PREMIUM LIFT & SHADOW EFFECT */
.card, .slide {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    -webkit-tap-highlight-color: transparent; 
}
.card:hover, .card:active, 
.slide:hover, .slide:active {
    transform: translateY(-10px) !important; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
}

/* 4. SMOOTH PAGE LOAD (Text Fade Hoga, lekin Cards sirf Slide honge) */
.slide, .hero h1, .hero p, .feat-card {
    animation: fadeUp 0.6s ease-out forwards; 
    opacity: 0; 
}

/* 👉 FIX 2: Cards ki animation se "Opacity" hata di taaki Dark Line na dikhe */
.card {
    transform: translateY(40px); /* Start mein 40px neeche rahenge */
    animation: slideUpOnly 0.5s ease-out forwards;
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

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

@keyframes slideUpOnly {
    to { transform: translateY(0); } /* Sirf apni jagah par aayenge, gayab nahi honge */
}

/* 5. ABOUT US PURE CSS SCROLL ANIMATION */
.about-section h2, .about-text, .area-box {
    opacity: 1;
    transform: translateX(0);
}

@supports (animation-timeline: view()) {
    .about-section h2, .about-text {
        opacity: 0;
        transform: translateX(-30px); /* Screen ke zyada bahar nahi jayenge */
        animation: slide-in-left 0.6s forwards; 
        animation-timeline: view();
        animation-range: entry 5% cover 20%;
    }
    
    .area-box {
        opacity: 0;
        transform: translateX(30px); 
        animation: slide-in-right 0.6s forwards; 
        animation-timeline: view();
        animation-range: entry 5% cover 20%;
    }
}

@keyframes slide-in-left {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
    to { opacity: 1; transform: translateX(0); }
}
/* =========================================
   7. CUSTOMER REVIEWS SLIDER
========================================= */
.review-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 10px 5% 50px;
    scrollbar-width: none;
}
.review-container::-webkit-scrollbar { display: none; }

.review-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #fff;
    border-radius: 20px;
    padding: 30px 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.review-card:hover, .review-card:active {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
}

.stars {
    font-size: 20px;
    margin-bottom: 15px;
}

.review-card p {
    font-size: 14px;
    color: #555;
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.7;
}

.review-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: #111;
}