/* =========================================
   1. SHARED UTILITIES & PRELOADER
   ========================================= */

/* Body Defaults for standard Dark Pages */
body {
    background-color: #121212;
    color: #ffffff;
    overflow-x: hidden;
}

/* Text Shadow Utility */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}



@keyframes spin {
    to { transform: rotate(360deg); }
}

/* FAQ Animation */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: sweep .3s ease-in-out; }
@keyframes sweep {
    0%   { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
   2. COMPONENT STYLES (Cards, Glass, Swiper)
   ========================================= */

/* Gallery Filter Active State */
.filter-btn.active {
    background-color: #FF6600;
    color: white;
    border-color: #FF6600;
}

/* Glassmorphism Panel */
.glass-panel {
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Card Hover Effects */
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(255, 102, 0, 0.3);
}
.card-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
}

/* Swiper Pagination */
.swiper-pagination-bullet { background: #fff; opacity: 0.5; }
.swiper-pagination-bullet-active { background: #FF6600; opacity: 1; }

/* Legacy IE Panel (from 404/503 pages) */
.ie-panel {
    display: none; background: #212121; padding: 10px 0;
    box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); text-align: center;
    position: relative; z-index: 1;
}
html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel { display: block; }


/* =========================================
   3. LIGHT THEME PAGE STYLES
   (Scoped to .fbh-light-theme to prevent breaking dark pages)
   ========================================= */

.fbh-light-theme {
    --primary-dark: #121212;
    --accent-orange: #FF6600; 
    --secondary-orange: #E65C00;
    --background-light: #F8F9FA;
    --background-white: #FFFFFF;
    --text-dark: #333333;
    --text-light: #FFFFFF;
    --whatsapp-color: #25D366;
    --font-family: 'Poppins', sans-serif;
    --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    font-family: var(--font-family); margin: 0; padding: 0;
    color: var(--text-dark); line-height: 1.6;
    background-color: var(--background-light); scroll-behavior: smooth;
}

.fbh-light-theme .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 20px 0; }
.fbh-light-theme h1 { font-size: clamp(2.2em, 5vw, 2.8em); line-height: 1.2; font-weight: 900; margin-top: 0; color: var(--text-light); }
.fbh-light-theme h2 { font-size: clamp(1.8em, 4vw, 2.8em); margin-bottom: 0.5em; text-align: center; color: var(--text-dark); }
.fbh-light-theme h3 { font-size: clamp(1.2em, 3vw, 1.5em); color: var(--accent-orange); }
.fbh-light-theme .section { padding: clamp(60px, 8vw, 100px) 0; }
.fbh-light-theme .text-center { text-align: center; }

/* Light Theme Navbar */
.fbh-light-theme .navbar { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); position: fixed; top: 0; width: 100%; z-index: 1000; padding: 0.5rem 0; box-shadow: var(--shadow-subtle); }
.fbh-light-theme .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 5%; }
.fbh-light-theme .logo-img { height: 45px; width: auto; transition: transform 0.3s ease; }
.fbh-light-theme .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 2rem; }
.fbh-light-theme .nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 500; transition: color 0.3s ease; padding-bottom: 5px; }
.fbh-light-theme .nav-links a:hover { color: var(--accent-orange); border-bottom: 2px solid var(--accent-orange); }
.fbh-light-theme .mobile-toggle { display: none; flex-direction: column; cursor: pointer; }
.fbh-light-theme .mobile-toggle span { width: 28px; height: 3px; background: var(--primary-dark); margin: 4px 0; transition: 0.3s; }

@media (max-width: 768px) {
    .fbh-light-theme .nav-links { display: none; }
    .fbh-light-theme .mobile-toggle { display: flex; }
    .fbh-light-theme .nav-links.active { display: flex; position: absolute; top: 100%; left: 0; width: 100%; background: rgba(255, 255, 255, 0.98); flex-direction: column; gap: 1rem; padding: 1rem 5%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
}

/* Light Theme Buttons */
.fbh-light-theme .cta-button { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--whatsapp-color), #128C7E); color: white; padding: 15px 35px; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: none; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); }
.fbh-light-theme .cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6); }
.fbh-light-theme .service-cta-button { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-orange); color: white; padding: 10px 20px; text-decoration: none; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; border: none; margin-top: 15px; }
.fbh-light-theme .service-cta-button:hover { background: var(--secondary-orange); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(255, 102, 0, 0.5); }

/* Light Theme Sections */
.fbh-light-theme .hero { padding: 180px 0 100px; color: var(--text-light); position: relative; overflow: hidden; background: url('https://cdn.pixabay.com/photo/2016/11/23/15/48/audience-1853662_1280.jpg?auto=compress&cs=tinysrgb&w=1600&h=800&fit=crop') center center no-repeat; background-size: cover; background-attachment: fixed; }
.fbh-light-theme .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.85)); z-index: 1; }
.fbh-light-theme .hero * { position: relative; z-index: 2; }
.fbh-light-theme .hero-content p { color: #fff; }

.fbh-light-theme .stats-bar { display: flex; justify-content: space-around; padding: 2.5rem 0; margin-top: 60px; border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); max-width: 900px; margin-left: auto; margin-right: auto; }
.fbh-light-theme .stat-item { text-align: center; display: flex; flex-direction: column; align-items: center; }
.fbh-light-theme .stat-item i { font-size: 2em; color: var(--accent-orange); margin-bottom: 10px; }
.fbh-light-theme .stat-item strong { display: block; font-size: 1.2em; font-weight: 700; color: var(--text-light); }
.fbh-light-theme .stat-item span { font-size: 0.9em; opacity: 0.8; color: #fff; }

.fbh-light-theme .service-item { background: var(--background-white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-subtle); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; border: 1px solid #E0E0E0; }
.fbh-light-theme .service-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-medium); }
.fbh-light-theme .service-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.fbh-light-theme .service-content { padding: 1.5rem; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.fbh-light-theme .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; margin-top: 3rem; }
@media (min-width: 1000px) { .fbh-light-theme .service-grid { grid-template-columns: 1fr 1fr; } }

.fbh-light-theme .feature-card { background: var(--background-white); padding: 2rem; border-radius: 12px; box-shadow: var(--shadow-subtle); text-align: left; border-top: 5px solid var(--accent-orange); transition: all 0.3s ease; }
.fbh-light-theme .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.fbh-light-theme .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; }
@media (min-width: 1000px) { .fbh-light-theme .features-grid { grid-template-columns: 1fr 1fr; } }

.fbh-light-theme .final-cta { background: var(--primary-dark); color: var(--text-light); text-align: center; padding: clamp(50px, 8vw, 100px) 0; }
.fbh-light-theme .final-cta p { color: #fff; opacity: 0.9; }
.fbh-light-theme .footer-links a { color: rgba(255, 255, 255, 0.8); margin: 0 10px; text-decoration: none; }
.fbh-light-theme .footer-links a:hover { color: var(--accent-orange); }
.fbh-light-theme .nav-phone { color: var(--accent-orange); font-weight: 700; margin-left: 20px; display: flex; align-items: center; font-size: 1.1em; text-decoration: none; }
@media (max-width: 900px) { .fbh-light-theme .nav-phone { display: none; } }

.fbh-light-theme .float-btn { position: fixed; right: 25px; z-index: 9999; width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }
.fbh-light-theme .float-btn:hover { transform: scale(1.1); }
.fbh-light-theme .call-float-btn { top: auto; bottom: 25px; background-color: var(--accent-orange); }
.fbh-light-theme .call-float-btn i { color: white; font-size: 25px; }

@media (max-width: 768px) {
    .fbh-light-theme body { padding-bottom: 75px; }
    .fbh-light-theme .call-float-btn { width: 50px; height: 50px; bottom: 20px; }
}