/* --- 1. Variables & Reset --- */
:root {
    --primary-orange: #ff6b35;
    --primary-hover: #e55a2b;
    --secondary-teal: #2ec4b6;
    --cyan-bg: #00bcd4; /* For preloader & reviews */
    --light-peach: #fff3e0;
    --dark-bg: #222222;
    --light-bg: #f9f9f9;
    --text-color: #333;
    --white: #ffffff;
    --shadow: 0 4px 15px rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* --- PRELOADER STYLES --- */
#preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--cyan-bg); /* Match screenshot blue */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loader-content { text-align: center; }

.loader-logo-box {
    background: white;
    width: 100px; height: 100px;
    border-radius: 20px;
    display: flex; justify-content: center; align-items: center;
    font-size: 3rem; color: var(--primary-orange);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 20px;
    animation: pulse 1.5s infinite;
}

.loading-dots span {
    display: inline-block;
    width: 10px; height: 10px;
    background-color: white;
    border-radius: 50%;
    margin: 0 3px;
    animation: bounce 0.6s infinite alternate;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes bounce { to { transform: translateY(-10px); } }


/* --- Utility Classes --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
img { max-width: 100%; border-radius: 12px; }

.btn {
    display: inline-block; padding: 12px 24px; border-radius: 50px;
    text-decoration: none; font-weight: 600; transition: 0.3s;
    cursor: pointer; border: none; font-family: inherit;
}
.btn-primary { background-color: var(--primary-orange); color: var(--white); }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
.btn-secondary { background-color: var(--white); color: var(--primary-orange); border: 2px solid var(--primary-orange); }
.btn-secondary:hover { background-color: var(--primary-orange); color: var(--white); }
.btn-outline { border: 2px solid var(--white); color: var(--white); margin-left: 10px; }
.btn-outline:hover { background: var(--white); color: var(--dark-bg); }
.btn-large { padding: 15px 40px; font-size: 1.1rem; margin-top: 20px; }

/* --- Navbar --- */
.navbar {
    background: var(--white); padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 1000;
    transition: all 0.3s ease;
}
.navbar.scrolled {
    padding: 10px 0; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
}
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 700; color: var(--dark-bg); }

/* Desktop Menu Links */
.nav-links { display: flex; align-items: center; }
.nav-links .nav-item { margin-left: 20px; text-decoration: none; color: var(--text-color); font-weight: 500; }
.nav-links .nav-item:hover { color: var(--primary-orange); }

/* Elements hidden on desktop but shown on mobile menu */
.nav-header-mobile, .mobile-cta { display: none; }
.hamburger { display: none; font-size: 1.5rem; cursor: pointer; }
.nav-actions { display: flex; align-items: center; gap: 15px; }

/* --- Hero & Sections --- */
.hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover; background-position: center; background-attachment: fixed;
    height: 85vh; display: flex; align-items: center; text-align: center; color: var(--white);
}
.hero-content h1 { font-size: 3rem; margin-bottom: 20px; line-height: 1.2; }
.hero-buttons { margin-top: 30px; }

/* Features */
.features { padding: 60px 0; background-color: var(--light-bg); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.feature-card { background: var(--white); padding: 30px; border-radius: 15px; box-shadow: var(--shadow); text-align: center; transition: 0.3s; }
.feature-card:hover { transform: translateY(-5px); }
.icon-box { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.8rem; color: var(--white); }
.icon-box.orange { background: var(--primary-orange); }
.icon-box.teal { background: var(--secondary-teal); }
.icon-box.dark { background: var(--dark-bg); }

/* Gallery */
.gallery-section { padding: 60px 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 30px; }
.gallery-grid img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.3s ease; }
.gallery-grid img:hover { transform: scale(1.05); z-index: 2; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* Services */
.services { padding: 80px 0; }
.service-layout { display: flex; align-items: center; gap: 50px; }
.service-image, .service-text { flex: 1; }
.sub-heading { color: var(--primary-orange); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.check-list { list-style: none; margin: 20px 0; }
.check-list li { margin-bottom: 10px; }
.check-list i { color: var(--secondary-teal); margin-right: 10px; }

/* Reviews */
.testimonials { background-color: var(--cyan-bg); padding: 80px 0; color: var(--white); }
.section-title.white { color: var(--white); font-size: 2.2rem; }
.testimonial-card { background: var(--white); color: var(--text-color); padding: 40px; border-radius: 20px; max-width: 700px; margin: 30px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.testimonial-card h3 { font-size: 1.4rem; margin-bottom: 15px; color: var(--dark-bg); }
.quote { font-style: italic; font-size: 1.1rem; margin-bottom: 20px; color: #555; }
.author { font-weight: 700; color: var(--dark-bg); }

/* FAQ */
.faq-section { padding: 80px 0; background-color: var(--white); }
.accordion { max-width: 800px; margin: 0 auto; }
.accordion-item { background-color: var(--light-peach); margin-bottom: 15px; border-radius: 10px; overflow: hidden; }
.accordion-header { width: 100%; padding: 20px; background: none; border: none; text-align: left; font-size: 1.1rem; font-weight: 600; color: var(--primary-orange); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: var(--white); }
.accordion-content p { padding: 20px; margin: 0; color: var(--text-color); }

/* Contact */
.cta-section { background: var(--dark-bg); color: var(--white); padding: 60px 0; text-align: center; }
.hours-box { background: var(--white); color: var(--dark-bg); margin: 30px auto; padding: 20px; border-radius: 50%; width: 200px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.hours-box .icon-circle { font-size: 2rem; color: var(--primary-orange); margin-bottom: 5px; }
.contact-info { margin: 30px 0; display: flex; justify-content: center; gap: 30px; }
.contact-form { max-width: 500px; margin: 0 auto; background: var(--white); padding: 30px; border-radius: 15px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; }
.full-width { width: 100%; }
.success-message { text-align: center; padding: 20px; animation: fadeIn 0.5s; }

/* Footer */
.site-footer { background: #1a1a1a; color: #888; padding: 50px 0 20px; text-align: center; }
.footer-content { border-bottom: 1px solid #333; padding-bottom: 30px; margin-bottom: 20px; }
.footer-brand h3 { color: var(--white); margin-bottom: 10px; }
.footer-links a { color: var(--white); font-size: 1.5rem; margin: 0 10px; transition: 0.3s; }
.footer-links a:hover { color: var(--primary-orange); }
.creator-mark { margin-top: 15px; font-family: 'Courier New', monospace; font-size: 0.85rem; letter-spacing: 1px; opacity: 0.8; }
.mark-agency { background: linear-gradient(90deg, #007bff, #6a1b9a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; }

/* Modal */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); animation: fadeIn 0.3s; }
.modal-content { background-color: var(--white); margin: 10% auto; padding: 40px; border-radius: 20px; width: 90%; max-width: 450px; position: relative; animation: slideUp 0.3s; }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 25px; top: 15px; }

/* Animations */
.hidden { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.show { opacity: 1; transform: translateY(0); }
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes slideUp { from {transform: translateY(50px);} to {transform: translateY(0);} }

/* --- MOBILE RESPONSIVE (THE OVERLAY MENU) --- */
@media (max-width: 768px) {
    /* Hide Desktop Nav Elements */
    .nav-links {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100vh;
        background-color: var(--light-peach); /* Match screenshot bg */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateY(-100%); /* Hidden top */
        transition: transform 0.4s ease-in-out;
        z-index: 999; /* Below navbar, or above if we want full takeover */
    }

    /* Show Mobile Elements */
    .nav-links.active { transform: translateY(0); } /* Slide down */
    .hamburger { display: block; }
    .nav-header-mobile { display: block; position: absolute; top: 20px; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; align-items: center; }
    .logo-mobile { font-weight: bold; font-size: 1.2rem; }
    .close-menu { font-size: 1.5rem; cursor: pointer; }
    
    .nav-links .nav-item {
        margin: 15px 0;
        font-size: 1.5rem;
        font-weight: 600;
    }
    
    .mobile-cta {
        display: inline-block;
        margin-top: 30px;
        width: 80%;
        text-align: center;
        padding: 15px;
    }

    .hero-content h1 { font-size: 2rem; }
    .service-layout { flex-direction: column; }
    .contact-info { flex-direction: column; gap: 10px; }
}