/* General Styling - Updated with Barber Shop Color Scheme */
:root {
    /* Colors derived from Barber shop Website Design CSS */
    --primary-color: #87996f; /* From #banner background gradient and other green/earthy tones */
    --secondary-color: #d6b937; /* From #menuBtn background and .feature-icon color */
    --background-color: #efefef; /* From #footer background, a light grey */
    --text-color: #34495e; /* Keeping a general dark text, or could be tweaked */
    --card-bg: #ffffff; /* Keeping white for cards */
    --light-gray: #bdc3c7; /* Keeping existing light gray for borders/dividers */
    --accent-green: #87996f; /* Similar to primary-color, for consistent branding */
    --highlight-color: #f57660; /* From nav ul li a color, a reddish-orange accent */

    /* Additional colors from Barber Shop CSS that might be used directly */
    --barber-shop-dark-overlay: rgba(0,0,0,0.5); /* From #banner gradient */
    --barber-shop-white: #fff; /* White text/borders */
    --barber-shop-footer-text: #009688; /* From footer links/icons */
    --barber-shop-service-bg: #e6d7a3; /* From #service background */
    --barber-shop-testimonial-shadow: #b99c19; /* From testimonial box-shadow */
    --barber-shop-feature-border: #f34e31; /* From feature icon border */
}

body {
    font-family: 'Poppins', sans-serif; /* Using Poppins from barber shop */
    margin: 0;
    padding-top: 60px; /* Space for fixed header */
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Header and Navigation */
header { background-color: var(--card-bg); box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: fixed; width: 100%; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; padding: 0 5%; height: 60px; }
nav .logo { font-size: 1.5em; font-weight: bold; color: var(--primary-color); text-decoration: none; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
nav ul li a { padding: 20px 15px; text-decoration: none; color: var(--highlight-color); /* Using highlight for nav links */ font-weight: bold; transition: color 0.3s; }
nav ul li a:hover { color: var(--secondary-color); /* Hover color from menuBtn */ }
/* Page Management */
.page { padding: 40px 5%; min-height: calc(100vh - 120px); }
.hidden { display: none; }
/* Hero Section (Homepage) */
.hero { text-align: center; padding: 60px 20px; }
.hero h1 { font-size: 3em; color: var(--primary-color); }
.card-container { display: flex; justify-content: center; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.card { background: var(--card-bg); border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 25px; width: 300px; text-align: left; }
.card h3 { color: var(--secondary-color); }
/* Landing Pages */
.landing-page { text-align: center; max-width: 800px; margin: 0 auto; }
.landing-image { max-width: 100%; height: auto; border-radius: 8px; margin: 30px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
/* Description & Other Pages */
.description-page { max-width: 1400px; margin: 0 auto; background: var(--card-bg); padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.description-page h1 { font-size: 2.5em; color: var(--primary-color); text-align: center; margin-bottom: 20px;}
.back-link { display: inline-block; margin-bottom: 20px; color: var(--secondary-color); text-decoration: none; font-weight: bold; }
/* Financial Calculator */
.calculator-container { background-color: var(--background-color); padding: 25px; border-radius: 8px; margin-top: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--light-gray); box-sizing: border-box; }
.result-box { margin-top: 20px; padding: 15px; background-color: lighten(var(--primary-color), 40%); /* Adjusted from #eafaf1 */ border: 1px solid darken(var(--primary-color), 10%); /* Adjusted from #58d68d */ border-radius: 4px; font-weight: bold; color: var(--primary-color); /* Adjusted from #1e8449 */ }
/* HR and Email Sections */
.hr-section, .email-preview { border: 1px solid var(--light-gray); padding: 20px; border-radius: 8px; margin-top: 20px; }
.email-header, .email-body, .email-footer { padding: 10px; border-bottom: 1px dashed var(--light-gray); }
.email-footer { border-bottom: none; text-align: center; }
/* Buttons */
.btn { display: inline-block; background-color: var(--secondary-color); color: var(--barber-shop-white); padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: bold; border: none; cursor: pointer; transition: background-color 0.3s; margin-top: 15px; }
.btn:hover { background-color: darken(var(--secondary-color), 10%); } /* Darker shade of secondary */
.btn-highlight { background-color: var(--highlight-color); }
.btn-highlight:hover { background-color: darken(var(--highlight-color), 10%); } /* Darker shade of highlight */
.btn.disabled { background-color: var(--light-gray); cursor: not-allowed; }
/* Footer */
footer { background-color: var(--primary-color); color: var(--barber-shop-white); text-align: center; padding: 20px; }
.footer-links a { color: var(--barber-shop-footer-text); /* Specific green from original footer links */ margin: 0 10px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
/* BUSINESS PLAN FLYER STYLES */
.flyer-container { max-width: 960px; margin: 0 auto; background-color: var(--card-bg); padding: 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.flyer-header { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; flex-wrap: wrap; }
.profile-pic-placeholder { width: 150px; height: 150px; background-color: var(--light-gray); border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: bold; color: var(--text-color); flex-shrink: 0; }
.flyer-title h1 { font-size: 2.5em; color: var(--accent-green); margin: 0; }
.flyer-title h1 .fa-leaf { margin-right: 10px; }
.flyer-title h2 { font-size: 1.2em; color: var(--text-color); margin: 0; font-weight: normal; }
.flyer-main-headline { text-align: center; background-color: var(--accent-green); color: white; padding: 20px; border-radius: 8px; margin-bottom: 40px; }
.flyer-main-headline h3 { font-size: 1.8em; margin: 0 0 10px 0; }
.flyer-main-headline p { margin: 0; font-style: italic; opacity: 0.9; }
.flyer-section h2 { text-align: center; font-size: 2em; color: var(--primary-color); margin-bottom: 30px; }
.why-choose-us-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.feature-box { background-color: var(--primary-color); color: white; padding: 20px; border-radius: 8px; text-align: center; }
.feature-box h4 { margin: 0 0 10px 0; font-size: 1.1em; }
.feature-box .fas { font-size: 1.5em; margin-bottom: 10px; }
.feature-box p { font-size: 0.9em; margin: 0; line-height: 1.5; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.service-box { background-color: var(--background-color); padding: 25px; border-radius: 8px; }
.service-box h3 { background-color: var(--accent-green); color: white; padding: 10px 15px; border-radius: 5px; margin: -25px -25px 20px -25px; font-size: 1.2em; }
.service-box ul { list-style-type: none; padding: 0; margin: 0; }
.service-box ul li { padding-left: 20px; position: relative; margin-bottom: 10px; }
.service-box ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--accent-green); }
.flyer-cta { text-align: center; margin-top: 40px; }
/* PANAMA LONG-FORM LANDING PAGE STYLES */
.long-form-container { max-width: 1100px; margin: 0 auto; background-color: var(--card-bg); padding: 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.content-section { display: flex; gap: 40px; align-items: center; margin-bottom: 60px; }
.content-section .text-block, .content-section .image-block { flex: 1; }
.content-section .text-block h2 { font-size: 2.2em; color: var(--primary-color); margin-bottom: 15px; }
.content-section .text-block p { font-size: 1.1em; }
.content-section .image-block img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.content-section.image-right { flex-direction: row-reverse; }
.services-section { text-align: center; padding: 30px; background-color: var(--background-color); border-radius: 8px; margin-bottom: 40px; }
.services-section h2 { font-size: 2.2em; color: var(--primary-color); }
.services-section .services-intro { font-size: 1.2em; margin-bottom: 20px; }
.services-section .services-image { max-width: 100%; height: auto; margin-bottom: 30px; }
.services-section ul { list-style: none; padding: 0; text-align: left; max-width: 600px; margin: 0 auto 20px auto; font-size: 1.1em; }
.services-section ul li { margin-bottom: 10px; }
/* BUSINESS PLAN DESCRIPTION PAGE STYLES */
.product-selection-container { margin-top: 40px; border-top: 1px solid var(--light-gray); padding-top: 20px; }
.product-selection-container > h2 { text-align: center; font-size: 2.2em; color: var(--primary-color); }
.product-category { margin-bottom: 50px; }
.product-category h3 { font-size: 1.8em; color: var(--accent-green); border-bottom: 2px solid var(--accent-green); padding-bottom: 10px; margin-bottom: 20px; }
.blaster-cards-container { display: flex; gap: 20px; margin-bottom: 30px; }
.blaster-card { flex: 1; background-color: var(--background-color); padding: 20px; border-radius: 8px; border-left: 5px solid var(--secondary-color); }
.blaster-card h4 { margin: 0 0 5px 0; font-size: 1.2em; }
.blaster-card p { margin: 0; }
.image-card-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.image-card { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.image-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.image-card img { display: block; width: 250px; height: 350px; object-fit: cover; }

/* =========== NEW STYLES FOR BACK OFFICE CTA & FRANCHISE GROWTH CENTER (ADDED HERE) =========== */
.flyer-cta-section {
    text-align: center;
    background-color: var(--primary-color);
    color: var(--barber-shop-white);
    padding: 30px;
    border-radius: 8px;
    margin-top: 50px;
}
.flyer-cta-section h3 {
    font-size: 1.8em;
    margin: 0 0 10px 0;
}
.flyer-cta-section p {
    margin: 0 0 15px 0;
    opacity: 0.9;
}
.growth-section { margin: 60px 0; padding-top: 40px; border-top: 1px solid var(--light-gray); }
.growth-section:first-of-type { margin-top: 20px; padding-top: 0; border-top: none; }
.growth-section h2 { font-size: 2em; color: var(--primary-color); margin-bottom: 20px; }
.growth-section h3 { font-size: 1.5em; color: var(--text-color); margin-bottom: 15px; margin-top: 30px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.client-card { background-color: var(--background-color); text-align: center; padding: 15px; font-weight: bold; border-radius: 5px; transition: background-color 0.3s, color 0.3s; }
.client-card:hover { background-color: var(--secondary-color); color: var(--barber-shop-white); }
.investment-list { list-style: none; padding: 0; column-count: 2; }
.investment-list li { padding-left: 30px; position: relative; margin-bottom: 10px; font-size: 1.1em; }
.investment-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--accent-green); }
.tip-box { background-color: var(--barber-shop-service-bg); /* Using a softer background */ border-left: 5px solid var(--secondary-color); /* Using secondary as a highlight */ padding: 20px; margin: 30px 0; border-radius: 0 8px 8px 0; }
.tutorial-section { background-color: var(--background-color); padding: 30px; border-radius: 8px; margin-bottom: 30px; }
.tutorial-steps { padding-left: 20px; }
.tutorial-steps li { margin-bottom: 15px; line-height: 1.7; }
.tutorial-steps li::marker { font-weight: bold; color: var(--primary-color); }
.tutorial-image { width: 100%; border: 1px solid var(--light-gray); border-radius: 8px; margin-top: 20px; }

/* Responsive Design */
@media (max-width: 900px) {
    .why-choose-us-grid { grid-template-columns: 1fr 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .content-section, .content-section.image-right { flex-direction: column; }
    .blaster-cards-container { flex-direction: column; }
    .investment-list { column-count: 1; }
}
@media (max-width: 768px) {
    nav ul { display: none; }
    .card-container { flex-direction: column; align-items: center; }
    .hero h1 { font-size: 2.5em; }
    .flyer-header { flex-direction: column; text-align: center; }
    .why-choose-us-grid { grid-template-columns: 1fr; }
}