/* FILE: css/style.css */

:root {
 /* Sandy tones and jade accents */
 --primary-color: #3d9970;
 --primary-dark: #2d7a58;
 --primary-light: #5fb594;

 --secondary-color: #e8d5b7;
 --secondary-dark: #d4bfa0;
 --secondary-light: #f5ebd9;

 --accent-jade: #40e0b0;
 --accent-sand: #c9a677;

 --bg-color: #ffffff;
 --bg-light: #faf8f5;
 --bg-sand: #f7f1e8;

 --text-primary: #2c3e50;
 --text-secondary: #5d6d7e;
 --text-muted: #95a5a6;

 --border-color: #e8dcc8;
 --shadow-color: rgba(61, 153, 112, 0.1);

 --font-primary: "Inter", sans-serif;
 --font-heading: "Merriweather", serif;

 --transition: all 0.3s ease;
}

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

body {
 font-family: var(--font-primary);
 color: var(--text-primary);
 line-height: 1.6;
 background-color: var(--bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: var(--font-heading);
 font-weight: 700;
 line-height: 1.3;
 color: var(--text-primary);
}

/* Navigation */
.navbar {
 padding: 1rem 0;
 transition: var(--transition);
}

.navbar.scrolled {
 box-shadow: 0 2px 10px var(--shadow-color);
}

.navbar-brand {
 font-size: 1.5rem;
 color: var(--primary-color) !important;
 font-family: var(--font-heading);
}

.nav-link {
 color: var(--text-primary) !important;
 font-weight: 500;
 margin: 0 0.5rem;
 transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
 color: var(--primary-color) !important;
}

/* Hero Section */
.hero-section {
 padding: 140px 0 80px;
 background: linear-gradient(135deg, var(--bg-sand) 0%, var(--bg-light) 100%);
}

.hero-section h1 {
 color: var(--text-primary);
}

.hero-section .lead {
 color: var(--text-secondary);
 font-size: 1.1rem;
}

/* Buttons */
.btn-primary {
 background-color: var(--primary-color);
 border-color: var(--primary-color);
 color: white;
 padding: 0.75rem 2rem;
 font-weight: 600;
 border-radius: 8px;
 transition: var(--transition);
}

.btn-primary:hover {
 background-color: var(--primary-dark);
 border-color: var(--primary-dark);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px var(--shadow-color);
}

.btn-outline-primary {
 color: var(--primary-color);
 border-color: var(--primary-color);
 padding: 0.75rem 2rem;
 font-weight: 600;
 border-radius: 8px;
 transition: var(--transition);
}

.btn-outline-primary:hover {
 background-color: var(--primary-color);
 border-color: var(--primary-color);
 color: white;
 transform: translateY(-2px);
}

/* Sections */
.section-padding {
 padding: 80px 0;
}

.section-title {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 color: var(--text-primary);
}

.bg-light {
 background-color: var(--bg-light) !important;
}

/* Module Cards */
.module-card {
 background: white;
 padding: 2rem;
 border-radius: 12px;
 border: 2px solid var(--border-color);
 transition: var(--transition);
}

.module-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 24px var(--shadow-color);
 border-color: var(--primary-color);
}

.module-number {
 font-size: 2.5rem;
 font-weight: 700;
 color: var(--accent-jade);
 margin-bottom: 1rem;
 font-family: var(--font-heading);
}

.module-card h4 {
 font-size: 1.25rem;
 margin-bottom: 0.75rem;
 color: var(--text-primary);
}

.module-card p {
 color: var(--text-secondary);
 margin-bottom: 0;
}

/* Feature List */
.feature-list {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
}

.feature-item {
 display: flex;
 gap: 1rem;
 align-items: flex-start;
}

.feature-item i {
 color: var(--primary-color);
 font-size: 1.5rem;
 flex-shrink: 0;
 margin-top: 0.25rem;
}

.feature-item h5 {
 font-size: 1.1rem;
 margin-bottom: 0.5rem;
}

.feature-item p {
 color: var(--text-secondary);
 margin-bottom: 0;
}

/* Format Cards */
.format-card {
 background: white;
 padding: 2.5rem 1.5rem;
 border-radius: 12px;
 border: 2px solid var(--border-color);
 transition: var(--transition);
}

.format-card:hover {
 border-color: var(--accent-jade);
 box-shadow: 0 6px 20px var(--shadow-color);
}

.format-icon {
 width: 80px;
 height: 80px;
 background: linear-gradient(135deg, var(--primary-color), var(--accent-jade));
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 1.5rem;
 color: white;
 font-size: 2rem;
}

.format-card h4 {
 font-size: 1.25rem;
 margin-bottom: 1rem;
}

.format-card p {
 color: var(--text-secondary);
 margin-bottom: 0;
}

/* Results List */
.results-list {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
}

.result-item {
 display: flex;
 gap: 1.5rem;
 align-items: flex-start;
 padding: 1.5rem;
 background: var(--bg-light);
 border-radius: 10px;
 transition: var(--transition);
}

.result-item:hover {
 background: white;
 box-shadow: 0 4px 16px var(--shadow-color);
}

.result-icon {
 width: 60px;
 height: 60px;
 background: var(--primary-color);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 1.5rem;
 flex-shrink: 0;
}

.result-item h5 {
 font-size: 1.15rem;
 margin-bottom: 0.5rem;
}

.result-item p {
 color: var(--text-secondary);
 margin-bottom: 0;
}

/* Form Container */
.form-container {
 background: white;
 padding: 3rem;
 border-radius: 16px;
 box-shadow: 0 8px 32px var(--shadow-color);
}

.form-label {
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 0.5rem;
}

.form-control,
.form-select {
 border: 2px solid var(--border-color);
 padding: 0.75rem 1rem;
 border-radius: 8px;
 transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
 border-color: var(--primary-color);
 box-shadow: 0 0 0 0.2rem rgba(61, 153, 112, 0.15);
}

/* FAQ */
.accordion-item {
 border: 2px solid var(--border-color);
 margin-bottom: 1rem;
 border-radius: 10px !important;
 overflow: hidden;
}

.accordion-button {
 background-color: white;
 color: var(--text-primary);
 font-weight: 600;
 font-size: 1.05rem;
 padding: 1.25rem 1.5rem;
}

.accordion-button:not(.collapsed) {
 background-color: var(--bg-sand);
 color: var(--primary-color);
 box-shadow: none;
}

.accordion-button:focus {
 box-shadow: none;
 border-color: var(--primary-color);
}

.accordion-body {
 padding: 1.5rem;
 color: var(--text-secondary);
 background-color: var(--bg-light);
}

/* CTA Section */
.cta-section {
 background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 color: white;
 padding: 80px 0;
}

.cta-section h2 {
 color: white;
}

.cta-section .lead {
 color: rgba(255, 255, 255, 0.9);
}

.btn-light {
 background-color: white;
 color: var(--primary-color);
 border: none;
 padding: 0.75rem 2rem;
 font-weight: 600;
 border-radius: 8px;
 transition: var(--transition);
}

.btn-light:hover {
 background-color: var(--bg-light);
 transform: translateY(-2px);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Footer */
.footer {
 background-color: var(--text-primary);
 color: white;
 padding: 60px 0 30px;
}

.footer h5 {
 color: white;
 margin-bottom: 1.5rem;
}

.footer p {
 color: rgba(255, 255, 255, 0.8);
}

.footer-links {
 list-style: none;
 padding: 0;
}

.footer-links li {
 margin-bottom: 0.75rem;
}

.footer-links a {
 color: rgba(255, 255, 255, 0.8);
 text-decoration: none;
 transition: var(--transition);
}

.footer-links a:hover {
 color: var(--accent-jade);
 padding-left: 5px;
}

.footer-contact {
 list-style: none;
 padding: 0;
}

.footer-contact li {
 color: rgba(255, 255, 255, 0.8);
 margin-bottom: 0.75rem;
 display: flex;
 align-items: center;
 gap: 0.75rem;
}

.footer-contact i {
 color: var(--accent-jade);
}

/* Cookie Consent */
.cookie-consent {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: var(--primary-dark);
 color: white;
 padding: 1.5rem 0;
 z-index: 9999;
 box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
 display: none;
}

.cookie-consent.show {
 display: block;
}

.cookie-consent p {
 margin: 0;
 color: white;
}

.cookie-consent a {
 color: var(--accent-jade);
}

/* Service Pages */
.service-hero {
 padding: 140px 0 60px;
 background: linear-gradient(135deg, var(--bg-sand) 0%, var(--bg-light) 100%);
}

.who-card {
 background: white;
 padding: 2rem;
 border-radius: 12px;
 border: 2px solid var(--border-color);
 height: 100%;
 transition: var(--transition);
}

.who-card:hover {
 border-color: var(--primary-color);
 box-shadow: 0 6px 20px var(--shadow-color);
}

.who-card i {
 color: var(--primary-color);
}

.who-card h4 {
 margin: 1rem 0;
}

.who-card p {
 color: var(--text-secondary);
 margin: 0;
}

.problems-list {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
}

.problem-item {
 display: flex;
 gap: 1.5rem;
 padding: 1.5rem;
 background: var(--bg-light);
 border-radius: 10px;
 border-left: 4px solid var(--accent-sand);
}

.problem-icon {
 color: var(--accent-sand);
 font-size: 1.5rem;
 flex-shrink: 0;
}

.problem-item h5 {
 font-size: 1.15rem;
 margin-bottom: 0.5rem;
}

.problem-item p {
 color: var(--text-secondary);
 margin: 0;
}

.delivery-card {
 background: white;
 padding: 2rem;
 border-radius: 12px;
 border: 2px solid var(--border-color);
 height: 100%;
 transition: var(--transition);
}

.delivery-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 24px var(--shadow-color);
}

.delivery-number {
 width: 60px;
 height: 60px;
 background: var(--accent-jade);
 color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 font-weight: 700;
 margin: 0 auto 1.5rem;
}

.delivery-card h5 {
 margin-bottom: 1rem;
}

.delivery-card p {
 color: var(--text-secondary);
 margin: 0;
}

.result-box {
 background: white;
 padding: 2rem;
 border-radius: 12px;
 border: 2px solid var(--border-color);
 height: 100%;
 transition: var(--transition);
}

.result-box:hover {
 border-color: var(--primary-color);
 box-shadow: 0 6px 20px var(--shadow-color);
}

.result-box i {
 color: var(--primary-color);
 font-size: 2rem;
 margin-bottom: 1rem;
}

.result-box h5 {
 margin-bottom: 0.75rem;
}

.result-box p {
 color: var(--text-secondary);
 margin: 0;
}

.mini-cta {
 background: var(--bg-sand);
 padding: 60px 0;
}

.mini-cta h3 {
 color: var(--text-primary);
}

.mini-cta p {
 color: var(--text-secondary);
}

/* Contact Page */
.page-hero {
 padding: 140px 0 60px;
 background: linear-gradient(135deg, var(--bg-sand) 0%, var(--bg-light) 100%);
}

.contact-info-card {
 display: flex;
 gap: 1.5rem;
 padding: 1.5rem;
 background: var(--bg-light);
 border-radius: 10px;
 border: 2px solid var(--border-color);
 transition: var(--transition);
}

.contact-info-card:hover {
 background: white;
 border-color: var(--primary-color);
 box-shadow: 0 4px 16px var(--shadow-color);
}

.contact-info-icon {
 width: 60px;
 height: 60px;
 background: var(--primary-color);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 1.5rem;
 flex-shrink: 0;
}

.contact-info-card h5 {
 font-size: 1.1rem;
 margin-bottom: 0.5rem;
}

.contact-info-card p {
 color: var(--text-secondary);
 margin: 0;
}

.contact-info-card a {
 color: var(--primary-color);
 text-decoration: none;
}

/* Thank You Page */
.thank-you-section {
 padding: 180px 0 100px;
 background: linear-gradient(135deg, var(--bg-sand) 0%, var(--bg-light) 100%);
}

.thank-you-icon {
 width: 120px;
 height: 120px;
 background: var(--primary-color);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
}

.thank-you-icon i {
 color: white;
 font-size: 4rem;
}

/* Legal Pages */
.legal-page {
 padding: 140px 0 80px;
}

.legal-content {
 font-size: 1rem;
 line-height: 1.8;
}

.legal-content h2 {
 font-size: 1.75rem;
 margin-top: 2.5rem;
 margin-bottom: 1rem;
 color: var(--primary-color);
}

.legal-content h3 {
 font-size: 1.35rem;
 margin-top: 2rem;
 margin-bottom: 0.75rem;
}

.legal-content p {
 color: var(--text-secondary);
 margin-bottom: 1rem;
}

.legal-content ul {
 margin: 1rem 0 1.5rem 1.5rem;
}

.legal-content li {
 color: var(--text-secondary);
 margin-bottom: 0.5rem;
}

.legal-content a {
 color: var(--primary-color);
 text-decoration: none;
}

.legal-content a:hover {
 text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
 .hero-section {
 padding: 120px 0 60px;
 }

 .section-padding {
 padding: 60px 0;
 }

 .section-title {
 font-size: 2rem;
 }

 .form-container {
 padding: 2rem;
 }

 .module-card,
 .format-card,
 .who-card,
 .delivery-card {
 margin-bottom: 1rem;
 }
}

/* Smooth Scroll */
html {
 scroll-behavior: smooth;
}

/* Image Styles */
img {
 max-width: 100%;
 height: auto;
 border-radius: 10px;
}

/* Fade In Animation */
.fade-in {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
 opacity: 1;
 transform: translateY(0);
}