/* =========================================
   1. VARIABLES & GLOBAL STYLES
   ========================================= */
:root {
    --color-yellow: #FFD700;   /* Bright Yellow */
    --color-red: #E60000;      /* Vibrant Red */
    --color-chocolaty: #5D4037; /* Chocolaty Brown */
    --color-green: #008f11;    /* Vibrant Green */
    --color-blue: #0044CC;     /* Vibrant Blue */
    --color-black: #000000;    /* Pure Black */
}

body { 
    font-family: 'Nunito Sans', sans-serif; 
    overflow-x: hidden; /* Horizontal scroll rokne ke liye */
}

/* Headings Font - Montserrat */
h1, h2, h3, h4, h5, h6, .section-title, .navbar-brand, .btn {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.section-title { 
    font-weight: 800; 
    text-transform: uppercase; 
}

/* Helper Classes */
.text-yellow { color: var(--color-yellow) !important; }
.text-chocolaty { color: var(--color-chocolaty) !important; }
.text-vibrant-red { color: var(--color-red) !important; }
.text-vibrant-green { color: var(--color-green) !important; }
.text-vibrant-blue { color: var(--color-blue) !important; }
.bg-vibrant-red { background-color: var(--color-red) !important; }

/* Borders */
.border-yellow { border: 3px solid var(--color-yellow) !important; }
.border-top-yellow { border-top: 5px solid var(--color-yellow) !important; }

/* =========================================
   2. BUTTONS
   ========================================= */
.btn {
    transition: all 0.3s ease-in-out;
    letter-spacing: 0.5px;
}

.btn-vibrant-red { background-color: var(--color-red); border: none; color: white; }
.btn-vibrant-red:hover { background-color: #b30000; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4); color: white; }

.btn-vibrant-green { background-color: var(--color-green); border: none; color: white; }
.btn-vibrant-green:hover { background-color: #006400; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 143, 17, 0.4); color: white; }

.btn-vibrant-blue { background-color: var(--color-blue); border: none; color: white; }
.btn-vibrant-blue:hover { transform: translateY(-3px); color: white; }

.btn-outline-chocolaty { border: 1px solid var(--color-chocolaty); color: var(--color-chocolaty); }
.btn-outline-chocolaty:hover { background-color: var(--color-chocolaty); color: white; }

/* Explore More Button */
.btn-explore {
    background-color: #8B0000; /* Dark Maroon */
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    border: 2px solid #8B0000;
}
.btn-explore:hover {
    background-color: #a00000;
    transform: translateY(-3px);
    color: white;
    box-shadow: 0 5px 15px rgba(139, 0, 0, 0.3);
}

/* =========================================
   3. HERO SECTION
   ========================================= */
.hero-section {
    position: relative;
    min-height: 90vh;
    padding: 80px 0;
    overflow: hidden;
}

.object-fit-cover { object-fit: cover; }
.bg-black-overlay { background: rgba(0, 0, 0, 0.4); z-index: 1; }

/* Hide Hero Arrows */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    display: none !important;
}

/* =========================================
   4. SERVICES SECTION
   ========================================= */
.services-bg {
    background-color: #FEFFC4 !important;
    background-image: none !important;
}

.service-card { transition: transform 0.3s; border-radius: 10px; overflow: hidden; border: 1px solid #eee; }
.service-card:hover { transform: translateY(-5px); border-color: var(--color-yellow); }
.service-card img { height: 220px; object-fit: cover; width: 100%; }

/* =========================================
   5. PHOTO & VIDEO GALLERY
   ========================================= */
#gallery { overflow: hidden; }

.gallery-img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #FFD700;
    transition: transform 0.3s ease;
}
.gallery-img:hover { transform: scale(1.02); }

/* Dark Arrows for Gallery */
.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(1);
    width: 3rem;
    height: 3rem;
}

/* Video Styling */
iframe { width: 100%; height: 100%; border:0; }

/* =========================================
   6. CONSULT CARDS & FOOTER
   ========================================= */
.consult-card {
    transition: 0.3s; border: 1px solid transparent; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 150px;
}
.consult-card:hover { transform: scale(1.05); border-color: var(--color-yellow); }

.modal-content { border: none; border-radius: 15px; overflow: hidden; }
.btn-close-white { filter: invert(1); }

footer a:hover { color: var(--color-yellow) !important; }
.bg-chocolaty { background-color: var(--color-chocolaty) !important; }

/* =========================================
   7. FLOATING ACTION BUTTONS (FIXED)
   ========================================= */
.float-btn {
    position: fixed;
    bottom: 25px;
    width: 60px;
    height: 60px;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 99999 !important; /* Forces buttons to be on top */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    text-decoration: none;
}

.float-call {
    left: 25px;
    background-color: #007bff;
    animation: pulse-blue 2s infinite;
}

.float-whatsapp {
    right: 25px;
    background-color: #25d366;
    animation: pulse-green 2s infinite;
}

.float-btn:hover {
    color: white;
    transform: scale(1.1);
}

/* Pulse Animations */
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* =========================================
   8. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .hero-title { font-size: 2rem; }
    .hero-section { padding: 40px 0; min-height: auto; }
    .hero-form { margin-top: 30px; }
    
    .gallery-img { height: 250px; margin-bottom: 15px; }
    
    /* Smaller Float Buttons on Mobile */
    .float-btn { width: 50px; height: 50px; font-size: 24px; bottom: 20px; }
    .float-call { left: 20px; }
    .float-whatsapp { right: 20px; }
}

/* Fade Animation for Load More */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    if (document.querySelector(".video-slider")) {
        new Swiper(".video-slider", {
            // Responsive Breakpoints
            breakpoints: {
                0: { slidesPerView: 1, spaceBetween: 20 },    // Mobile par 1 video
                768: { slidesPerView: 2, spaceBetween: 30 },  // Tablet par 2 video
                1024: { slidesPerView: 3, spaceBetween: 30 }  // Laptop par 3 video
            },
            
            // Loop & Autoplay
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false, // User ke touch karne par bhi chalta rahega
                pauseOnMouseEnter: true // Mouse le jane par ruk jayega
            },

            // Navigation Arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },

            // Pagination (Dots)
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    }
</script>

/* --- PHOTO GALLERY FIX (3 Photos at a time) --- */

/* 1. Slide Size Fix */
.photo-slider .swiper-slide {
    width: auto !important; /* Slide ki chaudai automatic hone dein */
    height: auto;
    opacity: 0.8; /* Side wali photos thodi halki dikhengi */
    transition: 0.3s;
}

/* 2. Active Slide (Beech wali photo highlight karein) */
.photo-slider .swiper-slide-active {
    opacity: 1;
    transform: scale(1.05); /* Thoda bada dikhega */
}

/* 3. Image Sizing */
.photo-slider .gallery-img {
    width: 100%;
    height: 300px; /* Height fix karein */
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #FFD700; /* Yellow Border */
    display: block;
}

/* 4. Swiper Wrapper Fix */
.photo-slider .swiper-wrapper {
    align-items: center; /* Center me align karein */
}