/*
Theme Name: Consultoría Online/Offline - Dark Creative Biomorphic
Version: 1.0
Author: AI Assistant
Description: A modern, responsive CSS for a consulting website with a dark theme, creative design, biomorphic elements, bright colors, and morphing animations.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 CSS Variables
2.0 Global Styles
    2.1 Body & Typography
    2.2 Links
    2.3 Buttons (Global)
    2.4 Forms (Global)
    2.5 Utility Classes
3.0 Header / Navigation
4.0 Footer
5.0 Sections
    5.1 Hero Section
    5.2 Mission Section
    5.3 Services Section (Cards)
    5.4 Statistics Section
    5.5 History Section
    5.6 Behind the Scenes Section
    5.7 Pricing Section (Cards)
    5.8 Customer Stories (Testimonials / Carousel)
    5.9 Clientele Section
    5.10 External Resources Section (Cards)
    5.11 FAQ Section (Accordion)
    5.12 Contact Section
6.0 Specific Page Styles
    6.1 Success Page
    6.2 Privacy & Terms Pages
7.0 Animations & Transitions
8.0 Responsive Adjustments
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 CSS Variables
--------------------------------------------------------------*/
:root {
    /* Bright Color Scheme - Dark Theme */
    --primary-color: #00E5FF; /* Bright Cyan/Teal */
    --primary-color-darker: #00B8D4;
    --secondary-color: #FFEB3B; /* Vibrant Yellow */
    --secondary-color-darker: #FDD835;
    --accent-color-1: #FF4081; /* Bright Pink/Magenta */
    --accent-color-1-darker: #F50057;

    --success-color: #76FF03; /* Bright Green */
    --success-color-darker: #64DD17;
    --info-color: #448AFF; /* Bright Blue */
    --info-color-darker: #2962FF;
    --warning-color: #FFC107; /* Bootstrap's warning, good for accent */

    /* Dark Theme Basics */
    --bg-dark: #121212;
    --bg-darker: #1E1E1E;
    --bg-card: #282828; /* Slightly lighter for cards if not glass */
    --bg-card-glass: rgba(40, 40, 40, 0.65); /* For glassmorphism effect */
    --text-light: #F5F5F5; /* Main light text for high contrast */
    --text-light-secondary: #BDBDBD; /* Subdued light text */
    --text-dark: #212121; /* For any light backgrounds */
    --border-color: #424242;
    --border-color-light: rgba(255, 255, 255, 0.15); /* For glassmorphism borders */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-color-light: rgba(255, 255, 255, 0.05); /* Subtle light shadow on dark */

    /* Fonts */
    --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Transitions & Animations */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
    --animation-morph-duration: 0.4s;

    /* Biomorphic Design Elements */
    --border-radius-soft: 12px;
    --border-radius-roundish: 25px;
    --border-radius-pill: 50px;
    --border-radius-organic-card: 20px 50px 20px 40px; /* Example for cards */

    /* Spacing */
    --section-padding-y: 5rem;
}

/*--------------------------------------------------------------
2.0 Global Styles
--------------------------------------------------------------*/

/* 2.1 Body & Typography */
body {
    background-color: var(--bg-dark);
    color: var(--text-light-secondary);
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: 1rem; /* Base font size for rem calculation */
    overflow-x: hidden; /* Prevent horizontal scroll from AOS or other animations */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem !important; /* Bootstrap override */
    font-weight: 700;
    color: var(--text-light);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Ensured text shadow */
}

p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: var(--text-light-secondary);
}

strong {
    font-weight: 600;
    color: var(--text-light);
}

/* 2.2 Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out, transform var(--transition-speed-fast) ease-in-out;
}
a:hover {
    color: var(--primary-color-darker);
    text-decoration: underline;
}
.link-highlight {
    color: var(--secondary-color);
    font-weight: 500;
}
.link-highlight:hover {
    color: var(--secondary-color-darker);
}
.resource-link {
    color: var(--accent-color-1);
    font-weight: 500;
}
.resource-link:hover {
    color: var(--accent-color-1-darker);
}
/* Read More link style */
.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    padding: 0.5em 0;
    position: relative;
    text-decoration: none;
}
.read-more-link::after {
    content: '→';
    margin-left: 0.5em;
    transition: transform var(--transition-speed-fast) ease-out;
}
.read-more-link:hover::after {
    transform: translateX(5px);
}
.read-more-link:hover {
    color: var(--primary-color-darker);
    text-decoration: none;
}

/* 2.3 Buttons (Global) */
.btn, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: var(--border-radius-pill); /* Biomorphic - pill shape */
    transition: all var(--animation-morph-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Morphing transition */
    border: 2px solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* Primary Button Style (Bootstrap .btn-primary) */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-dark); /* Ensure contrast with bright button */
    border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    color: var(--text-dark);
    transform: translateY(-3px) scale(1.03); /* Morphing effect */
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* Success Button Style (Bootstrap .btn-success) */
.btn-success {
    background-color: var(--success-color);
    color: var(--text-dark);
    border-color: var(--success-color);
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--success-color-darker);
    border-color: var(--success-color-darker);
    color: var(--text-dark);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* Outline Button Styles */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--primary-color);
    color: var(--text-dark);
    border-color: var(--primary-color);
    transform: translateY(-3px) scale(1.03);
}
.btn-outline-info {
    color: var(--info-color);
    border-color: var(--info-color);
    background-color: transparent;
}
.btn-outline-info:hover, .btn-outline-info:focus {
    background-color: var(--info-color);
    color: var(--text-light);
    border-color: var(--info-color);
    transform: translateY(-3px) scale(1.03);
}
/* Biomorphic specific button classes if needed for more unique shapes */
.biomorphic-button { /* Applied in HTML */
    border-radius: var(--border-radius-organic-card); /* More organic shape */
}
.biomorphic-button-outline { /* Applied in HTML */
    border-radius: var(--border-radius-organic-card);
}
/* Microinteractions for buttons */
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* 2.4 Forms (Global) */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.05); /* Subtle input background */
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-soft);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
}
.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25); /* Focus ring, use RGB for Bootstrap's variable system if they exist */
    /* If --primary-color is #00E5FF, then rgba(0, 229, 255, 0.25) */
    box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.25);
}
.form-control::placeholder {
    color: var(--text-light-secondary);
    opacity: 0.7;
}
.form-label {
    color: var(--text-light);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.form-check-input {
    background-color: rgba(255,255,255,0.1);
    border-color: var(--border-color);
}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.25);
}
/* Custom Toggle Switch */
.custom-toggle .form-check-input {
    width: 3em;
    height: 1.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,.25%29'/%3e%3c/svg%3e"); /* Custom inactive state */
}
.custom-toggle .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); /* Custom active state */
}

/* 2.5 Utility Classes */
.bg-darker {
    background-color: var(--bg-darker) !important;
}
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color-1) !important; }

/*--------------------------------------------------------------
3.0 Header / Navigation
--------------------------------------------------------------*/
.navbar {
    padding: 1rem 0;
    transition: background-color var(--transition-speed-normal) ease-in-out, box-shadow var(--transition-speed-normal) ease-in-out;
    box-shadow: 0 2px 10px var(--shadow-color-light);
}
.navbar.bg-dark {
    background-color: var(--bg-dark) !important; /* Ensure override */
}
.navbar-brand {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color) !important; /* Ensure brand color */
}
.navbar-nav .nav-link {
    color: var(--text-light-secondary) !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: var(--border-radius-pill);
    transition: color var(--transition-speed-fast) ease, background-color var(--transition-speed-fast) ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--text-light) !important;
    background-color: rgba(255,255,255,0.05);
}
.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 700;
}
.navbar-toggler {
    border-color: rgba(255,255,255,0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28224, 224, 224, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/*--------------------------------------------------------------
4.0 Footer
--------------------------------------------------------------*/
footer.bg-dark {
    background-color: var(--bg-dark) !important; /* Ensure override */
    padding-top: var(--section-padding-y);
    padding-bottom: calc(var(--section-padding-y) / 2);
}
footer h5, footer h6 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}
footer p, footer .small {
    color: var(--text-light-secondary);
}
.footer-link {
    color: var(--text-light-secondary);
    font-size: 0.95rem;
    display: inline-block;
    padding: 0.25rem 0;
    transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
}
.footer-link:hover {
    color: var(--primary-color);
    transform: translateX(3px);
    text-decoration: none;
}
/* Social links are text based, handled by .footer-link */

/*--------------------------------------------------------------
5.0 Sections
--------------------------------------------------------------*/
section {
    padding: var(--section-padding-y) 0;
    position: relative; /* For potential pseudo-elements or absolute positioning */
}

/* 5.1 Hero Section */
.hero-section {
    min-height: 85vh; /* Natural height based on content but ensure it's substantial */
    /* Background handled inline with linear-gradient and data-prompt */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section h1 {
    color: #FFFFFF !important; /* STRICT: White text for hero */
    font-size: 3.5rem;
    text-shadow: 2px 2px 8px var(--shadow-color); /* Enhanced shadow for readability */
}
.hero-section .lead {
    color: #F0F0F0 !important; /* Light color, ensure readability */
    font-size: 1.3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 4px var(--shadow-color);
}

/* Generic Card Styles (apply to .service-card, .pricing-card, .testimonial-card, .resource-card etc.) */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-soft); /* Softer biomorphic edge */
    transition: transform var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
    display: flex; /* For STROGLY required centering */
    flex-direction: column; /* For STROGLY required centering */
    /* align-items: center; */ /* Centering content within card */
    text-align: left; /* Default text align, center specific elements if needed */
    overflow: hidden; /* Ensure content respects border-radius */
    box-shadow: 0 5px 15px var(--shadow-color-light);
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Slightly more prominent shadow */
}
.card .card-body {
    padding: 1.75rem;
    flex-grow: 1; /* Allows card body to fill space if card has fixed height */
    display: flex;
    flex-direction: column;
}
.card .card-title {
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}
.card .card-text {
    color: var(--text-light-secondary);
    font-size: 0.95rem;
    flex-grow: 1; /* Pushes button to bottom if card-body is flex col */
}
.card .card-header {
    background-color: rgba(255,255,255,0.05);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}
.card .card-header h4 {
    margin-bottom: 0;
    color: var(--text-light);
}
/* Image container within cards */
.card-image {
    width: 100%;
    height: 220px; /* STROGLY: Fixed height for image consistency */
    overflow: hidden;
    display: flex; /* Centers image if it's smaller than container */
    align-items: center; /* Centers image vertically */
    justify-content: center; /* Centers image horizontally */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGLY: Ensure image covers and is not distorted */
    transition: transform var(--transition-speed-slow) ease;
}
.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}
/* Centering specifically for card content itself, as per strict requirement */
.card > .card-body, .card > .card-header, .card > .card-footer {
    /* text-align: center; This might be too much globally, center specific elements */
}
.card.text-center .card-body, .card.text-center .card-header {
    align-items: center; /* For flex children if card body is flex */
}

/* 5.3 Services Section */
.service-card {
    /* Uses global .card styles */
}

/* 5.4 Statistics Section */
.stat-item {
    background-color: var(--bg-card-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-organic-card);
    padding: 2rem !important;
    text-align: center;
}
.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    /* Color handled inline via HTML for variety */
}
.stat-label {
    font-size: 1.1rem;
    color: var(--text-light-secondary);
}

/* 5.5 History Section */
#history .biomorphic-image {
    border-radius: var(--border-radius-organic-card);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 5.6 Behind the Scenes Section */
.bg-darker-card {
    background-color: var(--bg-darker);
    border-radius: var(--border-radius-soft);
}
.bg-darker-card .card-image img {
    border-top-left-radius: var(--border-radius-soft);
    border-top-right-radius: var(--border-radius-soft);
}
.bg-darker-card .card-body {
    padding: 1rem;
}

/* 5.7 Pricing Section */
.pricing-card {
    border-radius: var(--border-radius-roundish); /* More rounded for pricing */
}
.pricing-card .card-header {
    border-top-left-radius: var(--border-radius-roundish);
    border-top-right-radius: var(--border-radius-roundish);
}
.pricing-card.popular-plan {
    border: 2px solid var(--secondary-color);
    box-shadow: 0 0 25px rgba(var(--secondary-color), 0.3); /* Use RGB for Bootstrap's variable system if they exist */
    /* If --secondary-color is #FFEB3B, then rgba(255, 235, 59, 0.3) */
    box-shadow: 0 0 25px rgba(255, 235, 59, 0.3);
    transform: scale(1.03); /* Make popular plan stand out */
}
.pricing-card .badge {
    position: absolute;
    top: -15px;
    right: 20px;
    font-size: 0.8rem;
    padding: 0.5em 1em;
}
.pricing-card ul li {
    padding: 0.4rem 0;
    font-size: 0.95rem;
}

/* 5.8 Customer Stories (Testimonials / Carousel) */
#testimonialCarousel .carousel-item {
    padding: 0 1rem; /* Space for controls if overlapping */
}
.testimonial-card {
    max-width: 700px !important; /* Override Bootstrap width constraint if needed */
    margin: 1rem auto; /* Center card in carousel item */
    background-color: var(--bg-card-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-soft);
    padding: 1rem;
}
.testimonial-card .card-image img {
    width: 100px !important; /* Smaller image for testimonials */
    height: 100px !important;
    border-radius: 50%; /* Circular images */
    object-fit: cover;
    margin: 0 auto 1rem auto; /* Center image */
}
.testimonial-card .card-body {
    padding: 0.5rem; /* Reduced padding */
    text-align: center;
}
.testimonial-card .card-text {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text-light);
    margin-bottom: 1rem;
}
.testimonial-card .card-subtitle {
    color: var(--primary-color) !important;
    font-weight: 600;
}
.carousel-indicators [data-bs-target] {
    background-color: var(--primary-color);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.6;
}
.carousel-indicators .active {
    opacity: 1;
    background-color: var(--secondary-color);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    padding: 1.2rem; /* Make clickable area larger */
    background-size: 50% 50%;
}

/* 5.9 Clientele Section */
.client-logo {
    max-height: 60px;
    width: auto;
    filter: grayscale(100%) opacity(0.7);
    transition: filter var(--transition-speed-normal) ease;
    margin: 1rem;
}
.client-logo:hover {
    filter: grayscale(0%) opacity(1);
}

/* 5.10 External Resources Section */
.resource-card {
    /* Uses global .card styles */
}
.resource-card .card-title a {
    text-decoration: none;
}

/* 5.11 FAQ Section (Accordion) */
.accordion-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius-soft) !important; /* Override Bootstrap */
}
.accordion-button {
    background-color: var(--bg-card);
    color: var(--text-light);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--border-radius-soft) !important; /* For collapsed state */
}
.accordion-button:not(.collapsed) {
    background-color: var(--primary-color);
    color: var(--text-dark);
    box-shadow: inset 0 -1px 0 var(--border-color);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.25);
    border-color: var(--primary-color);
}
.accordion-button::after { /* Custom icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0e0e0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform var(--transition-speed-normal) ease-in-out;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}
.accordion-body {
    padding: 1.5rem;
    color: var(--text-light-secondary);
    font-size: 0.95rem;
}
.accordion-flush .accordion-item {
    border-radius: var(--border-radius-soft) !important;
}
.accordion-flush .accordion-item:first-child {
    border-top-left-radius: var(--border-radius-soft) !important;
    border-top-right-radius: var(--border-radius-soft) !important;
}
.accordion-flush .accordion-item:last-child {
    border-bottom-left-radius: var(--border-radius-soft) !important;
    border-bottom-right-radius: var(--border-radius-soft) !important;
}

/* 5.12 Contact Section */
#contact .contact-form {
    background-color: var(--bg-card-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-roundish);
}

/*--------------------------------------------------------------
6.0 Specific Page Styles
--------------------------------------------------------------*/

/* 6.1 Success Page */
.success-page-container { /* Add this class to the main container on success.html */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.success-page-container h1 {
    color: var(--success-color);
    font-size: 3rem;
    margin-bottom: 1rem;
}
.success-page-container p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
}
.success-page-container .btn {
    margin-top: 1rem;
}

/* 6.2 Privacy & Terms Pages */
.privacy-policy-page, .terms-conditions-page { /* Add this class to main on privacy.html and terms.html */
    padding-top: 100px !important; /* Ensure content below fixed header */
}
.privacy-policy-page .container, .terms-conditions-page .container {
    background-color: var(--bg-darker);
    padding: 2rem;
    border-radius: var(--border-radius-soft);
}
.privacy-policy-page h2, .terms-conditions-page h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.privacy-policy-page h3, .terms-conditions-page h3 {
    color: var(--text-light);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

/*--------------------------------------------------------------
7.0 Animations & Transitions
--------------------------------------------------------------*/
/* AOS default transition, can be overridden per element if needed */
[data-aos] {
    transition-property: transform, opacity;
}
/* General smooth scroll */
html {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
8.0 Responsive Adjustments
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem !important;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .hero-section .lead {
        font-size: 1.1rem;
    }
    .navbar-nav {
        margin-top: 1rem;
        background-color: var(--bg-darker);
        border-radius: var(--border-radius-soft);
        padding: 0.5rem;
    }
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        margin: 0.25rem 0;
    }
    #testimonialCarousel .testimonial-card {
        padding: 0.5rem;
    }
    .pricing-card.popular-plan {
        transform: scale(1); /* Reset popular plan scale on mobile for better stacking */
    }
}

@media (max-width: 767.98px) {
    :root {
        --section-padding-y: 3.5rem;
    }
    .stat-number {
        font-size: 2.8rem;
    }
    #history .row > div {
        text-align: center;
    }
    #history img {
        margin-bottom: 2rem !important;
    }
    .footer .col-md-4, .footer .col-md-2, .footer .col-md-3 {
        text-align: center;
        margin-bottom: 2rem;
    }
    .footer ul {
        padding-left: 0;
    }
    .hero-section {
        min-height: 70vh;
    }
}

@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section .lead {
        font-size: 1rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .btn, button, input[type="submit"] {
        padding: 0.6rem 1.25rem;
        font-size: 0.85rem;
    }
    .testimonial-card .card-image img {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Update year in footer */
#currentYear::before {
    content: ""; /* Will be set by JS */
}