/* 1. Global Styles & Variables */
:root {
    --hitender-blue: #0A53BE;
    --hitender-green: #00BF6F;
    --hitender-red: #D7282A;
    --primary-color: var(--hitender-blue); 
    --secondary-color: var(--hitender-green);
    --accent-color: var(--hitender-red);
    --dark-color: #212529;
    --light-color: #FFFFFF;
    --background-light: #F7F9FC;
    --text-color: #555555;
    --border-color: #EAEAEA;
    --footer-bg: #1C1C1C;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--light-color); }
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; color: var(--dark-color); line-height: 1.2; }
.container { max-width: 1200px; margin: auto; padding: 0 1rem; }
section { padding: 2rem 0; position: relative; overflow: hidden; }

.section-title { text-align: center; font-size: 2.8rem; margin-bottom: 1rem; color: var(--primary-color); }
.section-subtitle { text-align: center; font-size: 1.1rem; max-width: 700px; margin: 0 auto 3.5rem auto; color: var(--text-color); }
.btn { display: inline-block; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; font-size: 1.05rem; }
.btn-primary { background-color: var(--primary-color); color: var(--light-color); border: 2px solid var(--primary-color); }
.btn-primary:hover { background-color: var(--light-color); color: var(--primary-color); }
.btn-secondary { background-color: var(--secondary-color); color: var(--light-color); border: 2px solid var(--secondary-color); }
.btn-secondary:hover { background-color: var(--light-color); color: var(--secondary-color); }
.btn.btn-small { padding: 8px 20px; font-size: 0.9rem; }

/* 2. Header & Navigation */
.site-header { position: sticky; top: 0; z-index: 1000; background-color: var(--light-color); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.header-top-bar { background: linear-gradient(90deg, var(--hitender-blue), #2a72d0); color: var(--light-color); padding: 0.5rem 0; font-size: 0.9rem; }
.header-top-bar .container { max-width: 1200px; }
.top-bar-content { display: flex; justify-content: space-between; align-items: center; }
.social-links-top a { color: var(--light-color); margin-left: 1.2rem; font-size: 1rem; transition: color 0.3s ease; }
.social-links-top a:hover { color: rgba(255, 255, 255, 0.8); }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 0; }
.navbar .container { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; }
.navbar .logo img { height: 80px; }
.nav-menu { display: flex; list-style: none; }
.nav-menu li a { padding: 0 1.2rem; text-decoration: none; color: var(--dark-color); font-weight: bold; position: relative; }
.nav-menu li a:hover { color: var(--primary-color); }
.nav-menu li a::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) scaleX(0); width: 80%; height: 3px; background-color: var(--primary-color); transition: transform 0.3s ease-out; }
.nav-menu li a:hover::after { transform: translateX(-50%) scaleX(1); }
.nav-right { display: flex; align-items: center; }
.search-icon { margin-left: 1.5rem; font-size: 1.2rem; cursor: pointer; color: var(--dark-color); }

/* 3. Hero Section */
.hero { background: linear-gradient(135deg, var(--primary-color), #2a72d0); color: var(--light-color); height: 90vh; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; z-index: 1; }
.hero::before { width: 300px; height: 300px; top: -50px; left: -50px; }
.hero::after { width: 400px; height: 400px; bottom: -100px; right: -100px; opacity: 0.8; }
.hero-content { max-width: 900px; z-index: 2; }
.hero h1 { font-size: 4rem; color: var(--light-color); margin-bottom: 0.5rem; }
.hero .tagline { font-size: 1.5rem; color: var(--light-color); margin-bottom: 2rem; letter-spacing: 0.5px; font-weight: 300; }
.hero p { font-size: 1.35rem; margin: 1.5rem 0 2.5rem 0; max-width: 700px; margin-left: auto; margin-right: auto; }
.hero .btn { margin: 0 1rem; }

/* 4. Services Overview */
.services-overview { background-color: var(--background-light); padding: 7rem 0; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; text-align: center; }
.service-card { background: var(--light-color); padding: 2.5rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; border-bottom: 5px solid var(--secondary-color); }
.service-card:hover { transform: translateY(-15px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); border-color: var(--primary-color); }
.service-card i { font-size: 3.5rem; color: var(--primary-color); margin-bottom: 1.5rem; }
.service-card h4 { font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--primary-color); }

/* 5. Detailed Services & Pricing */
.detailed-services { padding: 7rem 0; }
.tabs { display: flex; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; border-bottom: 2px solid var(--border-color); }
.tab-link { padding: 12px 25px; cursor: pointer; background: none; border: none; border-bottom: 3px solid transparent; font-weight: bold; font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: var(--dark-color); transition: all 0.3s ease; }
.tab-link.active { color: var(--primary-color); border-color: var(--primary-color); background-color: var(--background-light); border-radius: 5px 5px 0 0; }
.tab-link:hover:not(.active) { color: var(--secondary-color); }
.tab-content { display: none; padding: 2rem 0; animation: fadeIn 0.5s ease-out; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.tab-content h3 { text-align: center; font-size: 2.2rem; color: var(--accent-color); }
.tab-content .subtitle { text-align: center; margin-bottom: 3.5rem; max-width: 750px; margin-left: auto; margin-right: auto; font-size: 1.15rem; color: var(--text-color); }
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 2.5rem; align-items: stretch; }
.plan-card { background: var(--light-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 2.5rem; display: flex; flex-direction: column; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.plan-card.recommended { border: 3px solid var(--secondary-color); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.plan-card .badge { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background: var(--secondary-color); color: var(--light-color); padding: 8px 20px; border-radius: 25px; font-size: 0.95rem; font-weight: bold; letter-spacing: 0.5px; }
.plan-card h4 { font-size: 1.8rem; text-align: center; color: var(--primary-color); margin-bottom: 1rem; }
.plan-card .price { font-size: 3.2rem; font-weight: bold; font-family: 'Poppins', sans-serif; text-align: center; color: var(--hitender-red); margin: 1.5rem 0; }
.plan-card .price span { font-size: 1.2rem; color: var(--text-color); font-weight: normal; }
.plan-card ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--secondary-color); margin-right: 10px; }
.plan-card .best-for { font-style: italic; text-align: center; margin-bottom: 2rem; color: var(--text-color); }
.plan-card .btn { text-align: center; margin-top: auto; }

/* 6. Process Section */
.process { background-color: var(--background-light); padding: 7rem 0; position: relative; }
.process::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/clean-textile.png'); opacity: 0.1; z-index: 0; }
.process-steps { display: flex; justify-content: space-between; gap: 2.5rem; text-align: center; flex-wrap: wrap; z-index: 1; position: relative; }
.step { flex: 1; min-width: 280px; background: var(--light-color); padding: 2.5rem; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease; }
.step:hover { transform: translateY(-10px); }
.step-number { width: 70px; height: 70px; background: var(--secondary-color); color: var(--light-color); border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; font-size: 2.5rem; font-family: 'Poppins', sans-serif; margin-bottom: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.step h4 { font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--primary-color); }

/* 7. Testimonials Section */
.testimonials { padding: 7rem 0; background: linear-gradient(to right, #eef3f8, var(--background-light)); }
.testimonial-slider { max-width: 900px; margin: auto; background: var(--light-color); padding: 3rem; border-left: 8px solid var(--accent-color); box-shadow: 0 8px 30px rgba(0,0,0,0.1); border-radius: 10px; position: relative; }
.testimonial-slider::before { content: "\f10d"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 20px; left: 20px; font-size: 3rem; color: var(--border-color); opacity: 0.6; }
.testimonial-slider p { font-size: 1.3rem; font-style: italic; margin-bottom: 1.5rem; color: var(--dark-color); }
.testimonial-slider .client-info { text-align: right; font-weight: bold; font-size: 1.1rem; }
.client-info span { font-weight: normal; font-style: italic; color: var(--text-color); display: block; margin-top: 5px; }

/* 8. Final CTA Banner */
.cta-banner { background: linear-gradient(90deg, var(--hitender-blue), var(--secondary-color)); color: var(--light-color); text-align: center; padding: 5rem 2rem; box-shadow: inset 0 5px 15px rgba(0,0,0,0.2); }
.cta-banner h2 { color: var(--light-color); font-size: 2.8rem; margin-bottom: 1rem; }
.cta-banner p { font-size: 1.25rem; margin-bottom: 2.5rem; max-width: 800px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.9); }

/* 9. Contact Section */
.contact { padding: 7rem 0; }
.contact-container { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: flex-start; }
.contact-form form input, .contact-form form textarea { width: 100%; padding: 15px; margin-bottom: 1.2rem; border-radius: 8px; border: 1px solid var(--border-color); font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.contact-form form input:focus, .contact-form form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(10, 83, 190, 0.2); }
.contact-form form button { width: 100%; border: none; cursor: pointer; }
.contact-details h3 { margin-bottom: 1.5rem; font-size: 1.8rem; color: var(--primary-color); }
.contact-details p { margin-bottom: 1.2rem; font-size: 1.05rem; }
.social-media { margin-top: 1.5rem; }
.social-media a { color: var(--dark-color); font-size: 1.8rem; margin-right: 1.2rem; text-decoration: none; transition: color 0.3s ease; }
.social-media a:hover { color: var(--hitender-red); }

/* 10. Footer */
.footer { background: var(--footer-bg); color: #a0a0a0; padding-top: 5rem; font-size: 0.95rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; padding-bottom: 4rem; border-bottom: 1px solid #444; }
.footer-col h4 { color: var(--light-color); margin-bottom: 1.5rem; font-size: 1.2rem; position: relative; }
.footer-col h4::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 40px; height: 2px; background-color: var(--primary-color); }
.footer-logo { height: 50px; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer-tagline { font-family: 'Poppins', sans-serif; color: #ccc; font-size: 1.1rem; margin-bottom: 1rem; }
.footer-contact-info p { margin-top: 0.8rem; }
.footer-contact-info i { color: var(--primary-color); margin-right: 10px; }
.links-col ul, .hours-col ul { list-style: none; }
.links-col ul li a { color: #a0a0a0; text-decoration: none; transition: color 0.3s ease, padding-left 0.3s ease; display: block; padding: 8px 0; }
.links-col ul li a:hover { color: var(--secondary-color); padding-left: 5px; }
.hours-col ul li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #333; }
.hours-col ul li span:first-child { color: #ccc; }
.signup-col p { margin-bottom: 1.5rem; }
.newsletter-form { display: flex; }
.newsletter-form input { flex-grow: 1; padding: 12px; border: 1px solid #555; background: #333; color: #fff; border-radius: 5px 0 0 5px; outline: none; }
.newsletter-form button { padding: 12px 15px; border: none; background: var(--primary-color); color: #fff; cursor: pointer; border-radius: 0 5px 5px 0; font-weight: bold; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; font-size: 0.9rem; }
.social-links-bottom a { color: #a0a0a0; margin-left: 1rem; font-size: 1.1rem; transition: color 0.3s ease; }
.social-links-bottom a:hover { color: var(--light-color); }

/* 11. Inner Page Styles */
.page-header.redesigned { background: linear-gradient(135deg, rgba(247, 249, 252, 0.9), rgba(238, 243, 248, 0.9)), url('/assets/img/gradient.jpg'); background-size: cover; background-position: center center; padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--border-color); }
.page-header.redesigned h1 { font-size: 3rem; color: var(--primary-color); margin-bottom: 0.5rem; }
.page-header .page-subtitle { font-size: 1.15rem; color: var(--text-color); max-width: 800px; margin: 0 auto 1rem auto; }
.breadcrumbs { font-size: 0.95rem; color: var(--text-color); }
.breadcrumbs a { color: var(--text-color); text-decoration: none; transition: color 0.3s ease; }
.breadcrumbs a:hover { color: var(--primary-color); }
.page-content { padding: 2rem 0; }
.content-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; }
.main-content h2 { text-align: center; font-size: 2.2rem; margin-bottom: 1rem; color: var(--dark-color); }
.main-content h3 { text-align: left; font-size: 1.8rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--primary-color); }
.main-content h3.extra-margin-top { margin-top: 3.5rem; }
.main-content h4 { text-align: left; font-size: 1.4rem; margin-top: 2rem; margin-bottom: 1rem; }
.main-content p { margin-bottom: 1.5rem; line-height: 1.7; }
.content-image { width: 100%; height: auto; border-radius: 10px; margin: 1rem 0 2rem 0; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.feature-list { list-style: none; padding-left: 0; }
.feature-list li { font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: flex-start; }
.feature-list i { color: var(--secondary-color); margin-right: 15px; margin-top: 5px; }
.sidebar .widget { background: var(--background-light); padding: 2rem; border-radius: 10px; margin-bottom: 2rem; }
.sidebar .widget h4 { text-align: left; font-size: 1.3rem; color: var(--primary-color); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border-color); }
.service-menu ul { list-style: none; }
.service-menu ul li a { display: block; text-decoration: none; color: var(--text-color); padding: 12px 15px; border-radius: 5px; margin-bottom: 0.5rem; transition: all 0.3s ease; }
.service-menu ul li a:hover, .service-menu ul li a.active { background: var(--primary-color); color: var(--light-color); transform: translateX(5px); }
.lead-form-widget { background: linear-gradient(135deg, var(--hitender-blue), #2a72d0); color: var(--light-color); }
.lead-form-widget h4 { color: var(--light-color); border-bottom-color: rgba(255,255,255,0.3); }
.lead-form-widget p { font-size: 0.9rem; margin-bottom: 1rem; }
.sidebar-form .form-group { margin-bottom: 1rem; }
.sidebar-form input, .sidebar-form textarea { width: 100%; padding: 12px; border: 1px solid #5a96e3; border-radius: 5px; background: #2a72d0; color: var(--light-color); font-family: 'Lato', sans-serif; }
.sidebar-form input::placeholder, .sidebar-form textarea::placeholder { color: rgba(255,255,255,0.7); }
.sidebar-form button { width: 100%; border: none; cursor: pointer; }
.process-timeline { border-left: 3px solid var(--primary-color); margin-top: 2rem; padding-left: 2rem; }
.timeline-item { position: relative; margin-bottom: 2.5rem; }
.timeline-icon { position: absolute; left: -42px; top: 0; width: 40px; height: 40px; background: var(--secondary-color); color: var(--light-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 3px solid var(--light-color); box-shadow: 0 0 0 3px var(--secondary-color); }
.timeline-content h4 { margin: 0 0 0.5rem 0; font-size: 1.3rem; color: var(--dark-color); }
.timeline-content p { margin: 0; }
.pricing-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-table { width: 90%; border-collapse: collapse; margin-top: 2rem; text-align: center; }
.pricing-table th, .pricing-table td { padding: 1rem; border: 1px solid var(--border-color); }
.pricing-table thead { background-color: var(--primary-color); color: var(--light-color); }
.pricing-table thead th { font-weight: 600; font-size: 1.1rem; }
.pricing-table tbody tr:nth-child(even) { background-color: var(--background-light); }
.pricing-table td:first-child { text-align: left; font-weight: bold; }
.pricing-table .check-icon { color: var(--secondary-color); font-size: 1.2rem; font-weight: bold; }
.pricing-table .cross-icon { color: #ccc; font-size: 1.2rem; }
.faq-container { margin-top: 2rem; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-question { padding: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: bold; color: var(--dark-color); transition: background-color 0.3s ease; }
.faq-question:hover { background-color: #f0f0f0; }
.faq-question::after { content: '+'; font-size: 1.5rem; color: var(--primary-color); transition: transform 0.3s ease; }
.faq-item.active .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease; padding: 0 1rem; }

/* 12. Responsive Styles */
@media (max-width: 992px) {
    .nav-menu li a { padding: 0 0.8rem; }
    .hero h1 { font-size: 3.2rem; }
    .section-title { font-size: 2.2rem; }
    .footer-content { grid-template-columns: repeat(2, 1fr); }
    .content-grid { grid-template-columns: 1fr; }
    .sidebar { margin-top: 3rem; }
}

@media (max-width: 768px) {
    .site-header { position: static; }
    .header-top-bar { display: none; }
    .navbar .container { flex-wrap: wrap; }
    .nav-menu { display: none; width: 100%; flex-direction: column; margin-top: 1rem; }
    .nav-menu li { width: 100%; text-align: center; padding: 0.5rem 0; }
    .nav-right { position: absolute; top: 1.5rem; right: 1rem; }
    .hero { height: auto; padding: 100px 0; }
    .hero h1 { font-size: 2.5rem; }
    .hero .btn { display: block; width: 80%; margin: 1rem auto; }
    .process-steps { flex-direction: column; }
    .contact-container { grid-template-columns: 1fr; }
    .testimonial-slider { padding: 2rem; }
    .tabs { justify-content: flex-start; }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .hours-col ul li { justify-content: center; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; }
}

/* ===================================================================
   Mega Menu Dropdown Styles
   =================================================================== */

/* Style the list item that will contain the dropdown */
.nav-menu .nav-item-dropdown {
    position: relative;
}

/* Add a small arrow icon next to the dropdown link */
.nav-menu .nav-item-dropdown > a::after {
    content: ' \f078'; /* Font Awesome chevron-down icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8em;
    margin-left: 5px;
}

/* The mega menu container */
.mega-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 650px; /* Width of the mega menu */
    background-color: var(--light-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 0 0 6px 6px;
    padding: 1rem;
    z-index: 1000;
}

/* Show the mega menu on hover */
.nav-menu .nav-item-dropdown:hover .mega-menu {
    display: block;
}

/* The content area inside the mega menu */
.mega-menu-content {
    /* Use the CSS columns property for automatic wrapping */
    column-count: 2; 
    column-gap: 30px; /* Space between columns */
    display: block; /* Ensures column-count property works */
    padding: 1.5rem; 
}

/* CRITICAL FIX 2: Prevent individual list items from being split across columns */
.mega-menu-column ul li {
    break-inside: avoid; 
    page-break-inside: avoid;
    margin-bottom: 0.5rem;
}

/* Ensure column headings stay above their links */
.mega-menu-column {
    display: inline-block; 
    width: 100%; 
    margin-bottom: 1.5rem;
}


/* --- Responsive Adjustment for Smaller Screens --- */
@media (max-width: 768px) {
    /* On smaller tablets/mobile, we shift back to a single column to maximize readability. */
    .mega-menu {
        width: 100%;
        max-width: 100%;
        left: 0;
        transform: translateX(0);
    }
    
    .mega-menu-content {
        column-count: 1; /* Shift back to 1 column on mobile */
        padding: 1rem;
    }
}
.mega-menu-column h4 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.mega-menu-column ul {
    list-style: none;
}

.mega-menu-column ul li a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: var(--text-color);
    font-weight: normal;
    transition: all 0.3s ease;
}

.mega-menu-column ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.nav-menu .nav-item-dropdown:hover .mega-menu {
    display: block ; /* Add !important here */
}

/* Find this rule in the CSS and ensure it's correct */

.page-header.redesigned {
    background: linear-gradient(135deg, rgba(247, 249, 252, 0.9), rgba(238, 243, 248, 0.9)), url('/assets/img/gradient.jpg');
    background-size: cover;
    background-position: center center;
    padding: 4rem 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

/* === Service Page Enhancements === */
.service-highlight {
  background: linear-gradient(90deg, var(--hitender-blue), var(--hitender-green));
  color: var(--light-color);
  padding: 3rem;
  border-radius: 12px;
  text-align: center;
  margin: 4rem 0;
}
.service-highlight h2 { color: var(--light-color); }

.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.addon-box {
  background: var(--hitender-blue);
  color: var(--light-color);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.addon-box:hover {
  transform: translateY(-8px);
  background: var(--hitender-green);
}
.addon-box h4 { color: var(--light-color); margin-bottom: 1rem; }

.feature-comparison {
  overflow-x: auto;
  margin-top: 3rem;
}
.feature-comparison table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.feature-comparison th {
  background: var(--hitender-blue);
  color: var(--light-color);
  padding: 1rem;
}
.feature-comparison td {
  padding: 1rem;
  border: 1px solid var(--border-color);
}
.feature-comparison tr:nth-child(even) {
  background: var(--background-light);
}

/* Local overrides for Website Development Plans Page */
.gradient-bg {
  background: linear-gradient(90deg, var(--hitender-red), var(--hitender-blue), var(--hitender-green));
  color: #fff;
}
.section {
  padding: 80px 20px;
}
.section h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
  color: var(--hitender-blue);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.card {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
}
.process-step {
  text-align: center;
}
.process-step span {
  font-size: 2em;
  font-weight: bold;
  color: var(--hitender-blue);
}
.plan-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  padding: 30px;
  text-align: center;
}
.plan-card h3 {
  color: var(--hitender-red);
}
.plan-card ul {
  list-style: none;
  padding: 0;
}
.plan-card ul li {
  margin: 8px 0;
}
.feature-comparison {
    overflow-x: auto;
}
.feature-comparison table {
    width: 100%;
    border-collapse: collapse;
}
.feature-comparison th {
  background: var(--hitender-blue);
  color: #fff;
}
.feature-comparison td, .feature-comparison th {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.addon-box {
  background: var(--hitender-blue);
  color: #fff;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  transition: 0.3s;
}
.addon-box:hover {
  background: var(--hitender-green);
}
.service-highlight {
  background: linear-gradient(90deg, var(--hitender-red), var(--hitender-blue), var(--hitender-green));
  color: #fff;
  padding: 50px 30px;
  border-radius: 10px;
}

/* New background color for alternating sections */
.bg-light {
    background-color: #f8f9fa;
}

/* Forces four columns in a single row for specific sections */
.cards.force-4-col {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive adjustments for the 4-column layout */
@media (max-width: 1200px) {
    .cards.force-4-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cards.force-4-col {
        grid-template-columns: 1fr;
    }
}


/* Fix for squeezed sidebar */
.content-grid {
    grid-template-columns: 2fr 1fr; /* Changed from 3fr 1fr */
}

/* Re-style the "Recommended" section to remove the gradient */
.service-highlight {
    background: var(--background-light); /* Light grey background */
    color: var(--dark-color); /* Dark text color */
    padding: 40px 30px;
    border-radius: 10px;
    border: 2px solid var(--primary-color); /* Blue border */
}

/* Update text colors inside the new Recommended section */
.service-highlight h2 {
    color: var(--hitender-red);
}
.service-highlight ul {
    color: var(--text-color);
}

/* 1. Widen the sidebar by giving it a fixed width */
.content-grid {
    grid-template-columns: 1fr 350px; /* Main content takes remaining space, sidebar is 350px wide */
}

/* 2. Justify the main paragraph text */
.main-content p {
    text-align: justify;
}

/* 3. Fix the styling for the "Recommended" combo box */
.service-highlight {
    text-align: left; /* Align text to the left */
}

.service-highlight h2 {
    text-align: center; /* Keep the main heading centered */
    font-size: 1.8rem;
}

.service-highlight ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin-top: 1.5rem;
}

.service-highlight ul li {
    padding-left: 1.5em; 
    text-indent: -1.5em;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

/* Add a checkmark icon before each list item */
.service-highlight ul li::before {
    content: "\f00c"; /* Font Awesome check icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--hitender-green); /* Use your theme's green color */
    margin-right: 10px;
}

.service-highlight p {
    text-align: center;
    margin-top: 2rem;
    font-weight: bold;
}

/* New Internal CTA Banner */
.cta-banner-internal {
    background: linear-gradient(135deg, var(--primary-color), #2a72d0);
    color: var(--light-color);
    text-align: center;
    padding: 4rem 0;
    margin-bottom: 2rem; /* Add some space below it */
    border-radius: 10px;
}

.cta-banner-internal h2 {
    color: var(--light-color);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-banner-internal p {
    color: var(--light-color);
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-light-outline {
    background: transparent;
    color: var(--light-color);
    border: 2px solid var(--light-color);
}

.btn-light-outline:hover {
    background: var(--light-color);
    color: var(--primary-color);
}

/* Spacing Adjustments */

/* Reduce top/bottom padding for all major sections */
section, .page-content {
    padding: 1rem 0; /* Reduced from 3rem */
}

/* Reduce the gap between the main content and the sidebar */
.content-grid {
    gap: 1rem; /* Reduced from 3rem */
}

/* New layout for the 'Our Process' section */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
    gap: 2rem;
}

/* Responsive adjustments for the process grid */
@media (max-width: 992px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/* Reduce the gap between the main content and the sidebar */
.content-grid {
    gap: 1.5rem; /* Reduced from the previous value */
}

/* Styles for Horizontal Scrolling Section (Improved) */
.horizontal-scroll-wrapper {
    overflow-x: auto; /* Enable horizontal scroll if needed */
    padding-bottom: 1.5rem; /* Add space for the scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile devices */
}

/* Use Flexbox for a more reliable horizontal layout */
.cards.force-4-col.no-wrap {
    display: flex;
    flex-wrap: nowrap; /* Prevent cards from wrapping to a new line */
    gap: 1.5rem;
}

/* Give each card a fixed width so they don't shrink */
.cards.force-4-col.no-wrap .plan-card {
    flex: 0 0 280px; /* Do not grow, do not shrink, base width of 290px */
}

/* 1. Add padding to the main content column to fix abnormal spacing */
.main-content {
    padding: 1rem;
}

/* 2. Make the Feature Comparison table scroll horizontally */
.feature-comparison table {
    min-width: 800px; /* Forces the table to be wide, triggering the scroll on its wrapper */
}

/* New 2x2 Grid for Plan Cards */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create 2 equal columns */
    gap: 2rem;
}

/* Make the grid a single column on mobile */
@media (max-width: 768px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}


/* New Scrollable Wrapper for Feature Table */
.feature-comparison-wrapper {
    overflow-x: auto;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.feature-comparison-table {
    width: 100%;
    min-width: 800px; /* Force table to be wide, triggering scroll */
    border-collapse: collapse;
}

.feature-comparison-table th, .feature-comparison-table td {
    padding: 1rem;
    border: 1px solid var(--border-color);
    text-align: center;
}

.feature-comparison-table th {
    background-color: var(--primary-color);
    color: var(--light-color);
}

/* New Wrapper for Horizontally Scrolling Tables */
.pricing-table-wrapper,
.feature-comparison-wrapper {
    overflow-x: auto;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

/* New Modern Pricing Table Styles */
.pricing-table-alt {
    width: 100%;
    min-width: 900px; /* Force scroll on smaller screens */
    border-collapse: collapse;
    text-align: center;
}
.pricing-table-alt th, 
.pricing-table-alt td {
    padding: 1.25rem 1rem;
    border: 1px solid var(--border-color);
}
.pricing-table-alt thead th {
    background-color: var(--background-light);
    font-size: 1.2rem;
    color: var(--primary-color);
    position: sticky;
    top: 0;
}
.pricing-table-alt tbody td:first-child {
    text-align: left;
    font-weight: bold;
    background-color: var(--background-light);
}
.pricing-table-alt .recommended {
    background-color: #e7f5ff; /* Light blue highlight */
    border-left: 3px solid var(--primary-color);
    border-right: 3px solid var(--primary-color);
}
.pricing-table-alt thead .recommended {
    background-color: var(--primary-color);
    color: var(--light-color);
    border-color: var(--primary-color);
}

/* Fix for the Feature Comparison Table */
.feature-comparison-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}

/* New Pricing Card Grid Styles */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.pricing-card-new {
    background-color: var(--background-light);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.pricing-card-new:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.pricing-card-new h4 {
    font-size: 1.5rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.pricing-card-new .price {
    font-size: 2.8rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
    margin: 1.5rem 0;
}

.pricing-card-new ul {
    list-style: none;
    text-align: left;
    margin-bottom: 2rem;
    color: var(--text-color);
}

.pricing-card-new ul li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

.pricing-card-new ul li::before {
    content: "\f00c"; /* Font Awesome check icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--secondary-color);
    margin-right: 10px;
}

.pricing-card-new .btn {
    width: 100%;
}

/* New Modern Pricing Plan Styles */
.new-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: auto;
}

.new-plan-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.new-plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.new-plan-card.recommended {
    border: 2px solid var(--primary-color);
}

.recommended-badge {
    position: absolute;
    top: 0;
    right: -45px;
    background: var(--primary-color);
    color: var(--light-color);
    padding: 8px 40px;
    font-size: 0.9rem;
    font-weight: bold;
    transform: rotate(45deg);
}

.new-plan-card h4 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.new-plan-card .package-type {
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.new-plan-card .price {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--dark-color);
    margin-bottom: 2rem;
}

.new-plan-card .features {
    list-style: none;
    text-align: left;
    margin-bottom: 2.5rem;
    flex-grow: 1;
}

.new-plan-card .features li {
    padding: 0.6rem 0;
    display: flex;
    align-items: center;
}

.new-plan-card .features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--secondary-color);
    margin-right: 10px;
}

.buy-now-btn {
    display: inline-block;
    width: 100%;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 1.05rem;
    background-color: var(--primary-color);
    color: var(--light-color);
    border: 2px solid var(--primary-color);
    margin-top: auto; /* Pushes button to the bottom */
}

.buy-now-btn:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
}	


/* New Modern Pricing Plan Styles */
.new-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: auto;
}

.new-plan-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.new-plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.new-plan-card.recommended {
    border: 2px solid var(--primary-color);
}

.recommended-badge {
    position: absolute;
    top: 0;
    right: -45px;
    background: var(--primary-color);
    color: var(--light-color);
    padding: 8px 40px;
    font-size: 0.9rem;
    font-weight: bold;
    transform: rotate(45deg);
}

.new-plan-card h4 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.new-plan-card .package-type {
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.new-plan-card .price {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--dark-color);
    margin-bottom: 2rem;
}

.new-plan-card .features {
    list-style: none;
    text-align: left;
    margin-bottom: 2.5rem;
    flex-grow: 1;
}

.new-plan-card .features li {
    padding: 0.6rem 0;
    display: flex;
    align-items: center;
}

.new-plan-card .features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--secondary-color);
    margin-right: 10px;
}

.buy-now-btn {
    display: inline-block;
    width: 100%;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 1.05rem;
    background-color: var(--primary-color);
    color: var(--light-color);
    border: 2px solid var(--primary-color);
    margin-top: auto; /* Pushes button to the bottom */
}

.buy-now-btn:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
}

/* Force 4-column pricing grid into a single row */
.new-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    gap: 1.5rem;
}

/* Responsive behavior for the pricing grid */
@media (max-width: 1200px) {
    .new-pricing-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}
@media (max-width: 768px) {
    .new-pricing-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/* Update pricing grid to a 3-column FLEX layout */
/* Final layout for the 3-column pricing grid */
.new-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* This creates 3 equal columns */
    gap: 2rem;
}

/* Give each card a consistent size */
.new-pricing-grid .new-plan-card {
    flex-basis: 300px; /* Set a base width for each card */
    max-width: 320px; /* Prevent cards from stretching too wide */
}

/* ===================================================================
   MOBILE NAVIGATION STYLES (ADD TO END OF FILE)
   =================================================================== */

.mobile-nav-toggle { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 1.8rem; 
    color: var(--dark-color); 
    cursor: pointer; 
    z-index: 1002;
}

/* In your style.css or header-menu-fix.css */
@media (max-width: 991px) {
    /* Set the initial state: Hidden by default (CSS controls this) */
    .nav-menu { 
        display: none; 
    }
    
    /* Ensure the toggle is visible */
    .mobile-nav-toggle { 
        display: block; 
    }

    /* Set header to static to fix sticky issue */
    .site-header { 
        position: static ;
    }
}


/* ===================================================================
   MOBILE NAVIGATION STYLES (ADD TO END OF FILE)
   =================================================================== */

.mobile-nav-toggle { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 1.8rem; 
    color: var(--dark-color); 
    cursor: pointer; 
    z-index: 1002;
}

@media (max-width: 991px) {
    .navbar .container { 
        flex-wrap: wrap; 
    }
    .nav-menu, .nav-right { 
        display: none; 
    }
    .mobile-nav-toggle { 
        display: block; 
    }
    
    .nav-menu.mobile-nav-active {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
        background-color: var(--light-color);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .nav-menu.mobile-nav-active li {
        width: 100%;
        text-align: center;
        padding: 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-menu.mobile-nav-active li a {
        padding: 1rem;
        display: block;
    }

    .nav-menu.mobile-nav-active .nav-item-dropdown .mega-menu {
        display: none; /* Hides the complex dropdown on mobile */
    }
}

/* =================================================================
   CONTENT GRID & SIDEBAR STYLES
================================================================= */

/* 1. Main Grid Layout */
.content-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column on mobile */
    gap: 2.5rem; /* Space between content and sidebar */
}

/* 2. Main Content Area */
.main-content {
    line-height: 1.8;
}
.main-content h1, .main-content h2, .main-content h3 {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #0047ab; /* Dark Blue */
}

/* 3. Sidebar General Styling */
.sidebar {
    position: sticky;
    top: 20px; /* Sticks the sidebar when scrolling */
    align-self: start; /* Prevents sidebar from stretching */
}

/* 4. Widget Styling */
.widget {
    background-color: #f8f9fa; /* Light grey background */
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid #dee2e6;
}
.widget h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
}

/* 5. Service Menu Widget */
.widget.service-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget.service-menu li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #212529;
    text-decoration: none;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.widget.service-menu li a:hover {
    background-color: #e9ecef;
}
.widget.service-menu li a.active {
    background-color: #0d6efd; /* Primary Blue */
    color: #fff;
    font-weight: 600;
}

/* 6. Lead Form Widget */
.sidebar-form .form-group {
    margin-bottom: 1rem;
}
.sidebar-form input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box; /* Important for width calculation */
}
.sidebar-form .btn {
    width: 100%;
    padding: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}
.sidebar-form .btn.btn-secondary {
    background-color: #0047ab; /* Darker blue */
    color: #fff;
}
.sidebar-form .btn.btn-secondary:hover {
    background-color: #003b8f; /* Slightly darker on hover */
}


/* 7. Responsive Breakpoint for Desktop */
@media (min-width: 992px) {
    .content-grid {
        /* Activate 2-column layout on larger screens */
        grid-template-columns: 2.5fr 1fr; /* Content takes ~70%, sidebar ~30% */
    }
}

/* =================================================================
   SIDEBAR SUB-MENU STYLES
================================================================= */

.widget.service-menu ul .sub-menu {
    list-style: none;
    padding-left: 20px; /* Indents the sub-menu */
    margin-top: 8px;
    margin-bottom: 8px;
    border-left: 2px solid #e0e0e0; /* Adds a visual separator */
}

.widget.service-menu ul .sub-menu li a {
    font-size: 0.9em; /* Makes sub-item text slightly smaller */
    padding: 0.6rem 1rem;
    color: #6c757d; /* Lighter text color for sub-items */
    font-weight: 400;
}

.widget.service-menu ul .sub-menu li a:hover {
    color: #0d6efd; /* Highlight on hover */
    background-color: #e9ecef;
}

/* Style for when a sub-menu item is the active page */
.widget.service-menu ul .sub-menu li a.active {
    background-color: #0d6efd; /* Primary blue background */
    color: #fff; /* White text */
    font-weight: 600;
}

/* ===================================================================
   FLYOUT LINKS & SLIDEOUT PANEL (ADD TO END OF CSS)
   =================================================================== */

/* Container for the circular buttons */
.flyout-links {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Individual circular button style */
.flyout-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--light-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in-out;
}
.flyout-btn:hover {
    transform: scale(1.1);
}

/* WhatsApp button color */
.flyout-btn.whatsapp-btn {
    background-color: #25D366;
}

/* Dark background overlay for when the flyout is open */
.flyout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}
.flyout-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

/* The slide-out panel itself */
.flyout-panel {
    position: fixed;
    top: 0;
    right: -450px; /* Hidden off-screen to the right */
    width: 400px;
    max-width: 90%;
    height: 100%;
    background-color: var(--light-color);
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.4s ease-in-out;
}

/* The visible state for the panel */
.flyout-panel.is-open {
    right: 0;
}

.flyout-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.flyout-header h3 {
    margin: 0;
    font-size: 1.6rem;
    color: var(--primary-color);
}
.flyout-header p {
    margin: 5px 0 0 0;
    color: var(--text-color);
}
.flyout-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 300;
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
}
.flyout-body {
    padding: 2rem;
    overflow-y: auto;
}
.flyout-form .form-group { margin-bottom: 1.2rem; }
.flyout-form label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; }
.flyout-form input, .flyout-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
}
.flyout-form .btn {
    width: 100%;
    margin-top: 1rem;
}

/* ===================================================================
   About Us Page Specific Styles
   =================================================================== */
.founder-section {
    display: flex;
    align-items: center;
    gap: 4rem;
}
.founder-bio {
    flex: 1.5;
}
.founder-bio h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.founder-quote {
    flex: 1;
    background: var(--background-light);
    padding: 2.5rem;
    border-left: 5px solid var(--primary-color);
    border-radius: 8px;
}
.founder-quote blockquote {
    margin: 0;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 300;
}
.founder-quote cite {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--primary-color);
}
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.expertise-card {
    background: var(--white);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}
.expertise-card:hover {
    transform: translateY(-8px);
}
.expertise-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.expertise-card h4 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--secondary-color);
}
.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background: var(--secondary-color);
    color: var(--white);
    padding: 4rem;
    border-radius: 12px;
}
.mission-vision-grid h3 {
    font-size: 1.8rem;
    color: var(--white);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    display: inline-block;
}
.mission-vision-grid p {
    opacity: 0.9;
}
@media (max-width: 992px) {
    .founder-section {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   About Us Page Specific Styles
   =================================================================== */

.founder-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.founder-quote blockquote {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--dark-color);
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 0;
    position: relative;
}

.founder-quote blockquote::before {
    content: '\201C'; /* Left double quotation mark */
    font-family: Georgia, serif;
    font-size: 5rem;
    color: var(--border-color);
    position: absolute;
    left: -10px;
    top: -20px;
    z-index: -1;
}

.founder-quote cite {
    display: block;
    text-align: right;
    margin-top: 1rem;
    font-weight: bold;
    color: var(--primary-color);
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.expertise-card {
    text-align: center;
    padding: 2rem;
    background: var(--background-light);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.expertise-card i {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.mission-vision-grid h3 {
    color: var(--accent-color);
}

/* /assets/css/style.css - Add this new block */

/* --- Definitive Styling for Pricing Plan Features --- */

.detailed-services .plan-card ul {
    list-style: none !important;  /* Force-removes the old bullet points */
    padding-left: 0 !important;   /* Removes the space left by the old bullets */
    margin: 0;
}

.detailed-services .plan-card ul li {
    position: relative;           /* Required for positioning the new icon */
    padding-left: 30px;           /* Creates space on the left for the new icon */
    margin-bottom: 15px;          /* Adds vertical space between features */
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}

/* This CSS automatically creates the checkmark icon */
.detailed-services .plan-card ul li::before {
    font-family: "Font Awesome 5 Free"; /* Use the Font Awesome font library */
    content: "\f00c";                 /* This is the Unicode for the 'fa-check' icon */
    font-weight: 900;                 /* Use the solid version of the icon */
    color: #28a745;                   /* A nice green color */
    
    position: absolute;               /* Position it precisely */
    left: 0;
    top: 4px;                         /* Adjust for perfect vertical alignment */
    font-size: 18px;                  /* Make the icon slightly larger */
}

/* /assets/css/style.css - Add this new block */

/* --- Styling for the Thank You Page --- */
.thank-you-container {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 50px 40px;
    max-width: 650px; /* A bit wider for better proportions */
    margin: 60px auto; /* Centers the box vertically and horizontally */
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* A subtle shadow */
    border: 1px solid #e9ecef;
}

.thank-you-icon {
    font-size: 5rem; /* Larger icon */
    color: #28a745; /* Success green */
    margin-bottom: 25px;
}

.thank-you-container h1 {
    font-weight: 700;
    margin-bottom: 15px;
    color: #343a40;
}

.thank-you-container .lead {
    color: #6c757d; /* Softer text color */
    margin-bottom: 30px;
    font-size: 1.2rem;
}

/* /assets/css/style.css - Add this new block at the end */

/* --- Styling for Blog Preview Section on Homepage --- */

#blog-preview .blog-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

#blog-preview .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

#blog-preview .blog-card-img {
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#blog-preview .blog-card .card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

#blog-preview .blog-card .card-title a {
    text-decoration: none;
    color: #343a40; /* Dark text color */
    font-weight: 700;
    transition: color 0.3s ease;
}

#blog-preview .blog-card .card-title a:hover {
    color: #0d6efd; /* Your primary blue color */
}

#blog-preview .blog-card .btn-link {
    text-decoration: none;
    font-weight: 600;
}

/* /assets/css/style.css - Add this new block */

/* --- Definitive Styling for Testimonial Slider --- */

#testimonials .testimonial-slider-container {
    max-width: 800px;
    margin: 40px auto;
    position: relative;
    background: #ffffff;
    padding: 3rem 4rem; /* More padding for a premium feel */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    overflow: hidden; /* This is crucial to hide the other slides */
}

#testimonials .testimonial-slider {
    display: flex; /* Lays out slides side-by-side */
    transition: transform 0.5s ease-in-out; /* Smooth sliding animation */
}

#testimonials .testimonial-slide {
    min-width: 100%;
    box-sizing: border-box;
}

#testimonials .testimonial-text {
    font-size: 1.25rem;
    font-style: italic;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

#testimonials .client-info h4 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

#testimonials .client-info span {
    color: #777;
    font-size: 0.9rem;
}

/* Fix for Slider Navigation Buttons */
#testimonials .slider-nav {
    position: absolute;
    top: 50%;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

#testimonials .slider-nav button {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

#testimonials .slider-nav button:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* ... (inside @media (max-width: 768px) block) ... */

@media (max-width: 768px) {
    .site-header { 
        position: static; /* CRITICAL FIX: Ensures header doesn't stick on mobile */
    }
    .header-top-bar { 
        display: none; 
    }
    .navbar .container { 
        flex-wrap: wrap; 
    }
    /* ... (rest of mobile styles) ... */
}

/* ... (Existing CSS) ... */

/* ===================================================================
   MOBILE NAVIGATION STYLES (Focus on Fix)
   =================================================================== */

/* CRITICAL FIX: Ensure the header is not sticky on mobile */
@media (max-width: 991px) {
    .site-header { 
        position: static !important; /* Forces the header to be static */
    }
    .navbar .container { 
        flex-wrap: wrap; 
    }
    .nav-menu { 
        display: none; 
    }
    .mobile-nav-toggle { 
        display: block; 
    }
    
    /* CRITICAL FIX: Force menu to display when toggled */
    .nav-menu.mobile-nav-active {
        display: flex !important; /* Forces visibility when JS toggles the class */
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
        background-color: var(--light-color);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .nav-menu.mobile-nav-active li {
        width: 100%;
        text-align: center;
        padding: 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-menu.mobile-nav-active li a {
        padding: 1rem;
        display: block;
    }
    /* Hides the complex dropdown on mobile */
    .nav-menu.mobile-nav-active .nav-item-dropdown .mega-menu {
        display: none; 
    }
}

/* =================================================================
   CRITICAL MOBILE MENU FIXES (FINAL DEFINITIVE OVERRIDE V2)
   ================================================================= */

/* Ensure the sticky behavior is completely disabled on mobile */
@media (max-width: 991px) {
    
    /* FIX 1: Header Position - Force STATIC and reset all conflicting properties */
    .site-header { 
        position: static !important; 
        top: auto !important; 
        z-index: 1000 !important;
        width: 100%;
        display: block !important;
    }
    
    /* FIX 2: Menu Visibility (Default/Hidden State) */
    .nav-menu { 
        display: none !important; 
        position: static !important; /* Reset position conflicts */
        width: 100%; 
        transition: none !important; 
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    /* FIX 3: Menu Visibility (Active State) - FORCE OPEN */
    .nav-menu.mobile-nav-active {
        display: flex !important; /* CRITICAL: Forces menu visible when JS toggles the class */
        flex-direction: column !important;
        
        /* Positioning the menu to slide down immediately below the header */
        position: absolute !important;
        /* Calculate this value based on your logo height (approx 80px) + any padding */
        top: 80px !important; 
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important; 
        
        /* Theme styling */
        background-color: var(--light-color) !important; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
        padding: 0 0 10px 0 !important; 
    }

    /* FIX 4: Ensure the toggle icon is visible and correctly positioned */
    .mobile-nav-toggle { 
        display: block !important; 
    }

    /* Ensure the logo/toggle container handles the wrapping correctly */
    .navbar .container {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}

/* =================================================================
   FIX: Force Service Pages to Full Width (Remove Sidebar)
   ================================================================= */

/* Target the main content wrapper (assuming it uses the 'content-grid' class) */
.content-grid {
    /* CRITICAL FIX: Reset the grid to a single column */
    grid-template-columns: 1fr !important; 
    
    /* Ensure the gap is reduced/removed */
    gap: 0 !important;
}

/* Ensure the main content area inside the grid takes up all available space */
.main-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure the sidebar element itself is completely hidden, regardless of where it is */
.sidebar {
    display: none !important;
}

/* Responsive adjustment check */
@media (min-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr !important; /* Ensure desktop view stays single column */
    }
}

/* =================================================================
   UNIVERSAL FLOATING CTA FIX (index_footer.php components)
   ================================================================= */

/* Target the container for the WhatsApp and Inquiry buttons */
.flyout-links {
    position: fixed; /* CRITICAL: Makes buttons float above all content */
    bottom: 20px;
    right: 20px;
    z-index: 9999; /* Highest priority ensures it's always on top */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Ensure the overlay and the panel are also positioned fixed */
.flyout-overlay {
    position: fixed !important;
}

.flyout-panel {
    position: fixed !important;
}