/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. Global Styles & Variables
    - CSS Variables (Colors, Fonts, Spacing)
    - Basic Reset & Body Styles
    - Typography (Headings, Paragraphs)
    - Utility Classes
    - Container & Layout
2. Header & Navigation
    - Fixed Header
    - Logo
    - Main Navigation (Desktop)
    - Hamburger Menu (Mobile)
3. Global Button Styles
4. Hero Section
5. Features Section
    - Feature Grid & Items
6. Packages Section
    - Package Grid & Items
7. Methodology Section (Timeline)
    - Timeline Structure
    - Timeline Items
8. Workshops Section (Custom Slider)
    - Slider & Slides
    - Slider Controls
9. Sustainability Section
10. External Resources Section
11. Contact Section
    - Contact Form Styles
    - Contact Info
12. Footer
    - Footer Grid & Columns
    - Footer Navigation
    - Footer Social Links (Text-based)
    - Copyright
13. Card Styles (Global)
    - Base Card
    - Card Image
    - Card Content
14. Specific Page Styles
    - success.html
    - privacy.html & terms.html
15. Animations & Transitions
    - Hover Effects
    - Scroll-based animation support (AOS)
16. Responsive Design (Media Queries)

-------------------------------------------------------------------*/

/* 1. Global Styles & Variables
-------------------------------------------------------------------*/
:root {
    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'DM Sans', sans-serif;

    /* Complementary Color Scheme - Retro Feel */
    --color-primary: #4A7C59; /* Muted Green */
    --color-primary-darker: #3B6347; /* Darker Green for hover */
    --color-secondary: #D46A6A; /* Muted Coral/Red */
    --color-secondary-darker: #B85959; /* Darker Coral for hover */
    --color-accent: #F0A869; /* Warm Orange/Yellow */
    --color-accent-darker: #D08A49;

    --color-background-light: #F8F4E3; /* Creamy Beige */
    --color-background-medium: #EAE0CC; /* Slightly darker beige for alt sections */
    --color-background-dark: #3D405B; /* Deep Indigo/Purple */

    --color-text-light: #FDF5E6; /* For dark backgrounds */
    --color-text-dark: #222222; /* Main text on light backgrounds */
    --color-text-medium: #555555; /* Secondary text */
    --color-text-inverted: #FFFFFF; /* For Hero and specific dark components */

    --color-border: #D1C7B0; /* Border for light backgrounds */
    --color-overlay: rgba(0, 0, 0, 0.5); /* Dark overlay for images */
    --color-overlay-light: rgba(255, 255, 255, 0.1); /* Light overlay */

    --border-radius-small: 5px;
    --border-radius-medium: 10px;
    --border-radius-large: 15px;

    --section-padding: 80px 0;
    --section-padding-mobile: 50px 0;

    --container-max-width: 1140px;
    --header-height: 80px; /* Adjusted for potential fixed header */

    --shadow-soft: 0 4px 15px rgba(0,0,0,0.08);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.12);

    /* "Warped Grid" inspired subtle angle */
    --skew-angle: -2deg;
}

/* Basic Reset & Body Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    overflow-x: hidden; /* Prevent horizontal scroll from AOS animations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-text-dark); /* Default dark for headings */
    line-height: 1.3;
    margin-bottom: 0.75em;
    font-weight: 700;
}

h1 { font-size: 2.8rem; margin-bottom: 0.5em; } /* Approx 44.8px */
h2 { font-size: 2.2rem; } /* Approx 35.2px */
h3 { font-size: 1.6rem; } /* Approx 25.6px */
h4 { font-size: 1.3rem; } /* Approx 20.8px */

p {
    margin-bottom: 1.25rem;
    color: var(--color-text-medium);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utility Classes */
.section-padding {
    padding: var(--section-padding);
}

.alt-bg {
    background-color: var(--color-background-medium);
    /* Example of a subtle warped grid background */
    /* background-image: linear-gradient(45deg, var(--color-border) 25%, transparent 25%), linear-gradient(-45deg, var(--color-border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-border) 75%), linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px; */
}

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

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem; /* Consistent title size */
    color: var(--color-text-dark); /* Enforce dark for section titles */
    position: relative;
}
/* Retro underline for section titles */
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--color-accent);
    margin: 15px auto 0;
    border-radius: 2px;
    transform: skewX(var(--skew-angle)); /* Warped element */
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: var(--color-text-medium);
}

.parallax-bg {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.parallax-bg .hero-overlay,
.parallax-bg .contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay); /* Dark overlay for text readability */
    z-index: 1;
}

.parallax-bg > .container {
    position: relative;
    z-index: 2;
}


/* Container & Layout */
.container {
    width: 90%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.container-wrapper { /* If used to wrap all content except header/footer */
    padding-top: var(--header-height); /* Account for fixed header */
}


/* 2. Header & Navigation
-------------------------------------------------------------------*/
.site-header {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 20px;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-soft);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.logo:hover {
    color: var(--color-primary-darker);
}

.main-nav .nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
}

.main-nav .nav-menu li {
    margin-left: 25px;
}

.main-nav .nav-menu a {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 0;
    position: relative;
    transition: color 0.3s ease;
}

.main-nav .nav-menu a:hover,
.main-nav .nav-menu a.active {
    color: var(--color-accent);
}
/* Underline animation for nav links */
.main-nav .nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
    transform: skewX(var(--skew-angle));
}
.main-nav .nav-menu a:hover::after,
.main-nav .nav-menu a.active::after {
    width: 100%;
}

/* Hamburger Menu */
.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1010; /* Above nav menu when open */
}

.hamburger {
    display: block;
    position: relative;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    transition: all 0.3s ease-in-out;
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    transition: all 0.3s ease-in-out;
}
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Active state for hamburger (JS toggles .active class on .nav-toggle or .main-nav) */
.nav-toggle.active .hamburger { background-color: transparent; }
.nav-toggle.active .hamburger::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active .hamburger::after { transform: translateY(-8px) rotate(-45deg); }


/* 3. Global Button Styles
-------------------------------------------------------------------*/
.btn, button[type="submit"], input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    padding: 12px 30px;
    font-size: 1rem;
    border-radius: var(--border-radius-small); /* Retro squared-off or slightly rounded */
    transition: all 0.3s ease;
    text-decoration: none;
    letter-spacing: 0.5px;
    /* transform: skewX(var(--skew-angle)); /* Subtle warp */
}
/* .btn > *, button[type="submit"] > *, input[type="submit"] > * {
    display: inline-block;
    transform: skewX(calc(var(--skew-angle) * -1)); /* Counter-skew content */
/* } */

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    color: var(--color-text-light);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border-color: var(--color-secondary);
}
.btn-secondary:hover {
    background-color: var(--color-secondary-darker);
    border-color: var(--color-secondary-darker);
    color: var(--color-text-light);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-text-dark);
    border-color: var(--color-accent);
}
.btn-accent:hover {
    background-color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
    color: var(--color-text-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* "Read More" Link Style */
.read-more-link {
    font-family: var(--font-primary);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
    padding-right: 20px; /* Space for arrow */
}
.read-more-link::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-weight: normal; /* Reset from parent if needed */
}
.read-more-link:hover {
    color: var(--color-accent-darker);
    transform: translateX(3px);
}
.read-more-link:hover::after {
    transform: translateY(-50%) translateX(3px);
}

/* 4. Hero Section
-------------------------------------------------------------------*/
.hero-section {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* For overlay */
    color: var(--color-text-inverted); /* This makes all direct text children white */
}
.hero-content {
    max-width: 800px;
    position: relative; /* Above overlay */
    z-index: 2;
}
.hero-title {
    font-size: 3.5rem; /* Large and impactful */
    margin-bottom: 20px;
    color: var(--color-text-inverted); /* Strictly white */
    font-weight: 700;
}
.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 30px;
    line-height: 1.8;
    color: var(--color-text-inverted); /* Strictly white */
    opacity: 0.9;
}
.hero-section .btn-primary {
    padding: 15px 40px;
    font-size: 1.1rem;
}

/* 5. Features Section
-------------------------------------------------------------------*/
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.feature-item { /* Extends .card */
    text-align: center;
}
.feature-item .card-image img { /* Icon image */
    width: 80px; /* Fixed size for icons */
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
    /* "Hand-drawn" animation on hover example */
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Elastic */
}
.feature-item:hover .card-image img {
    transform: rotate(5deg) scale(1.1);
}
.feature-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--color-text-dark);
}

/* 6. Packages Section
-------------------------------------------------------------------*/
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.package-item { /* Extends .card */
    display: flex;
    flex-direction: column;
}
.package-title {
    font-size: 1.5rem;
    color: var(--color-text-dark);
    margin-bottom: 8px;
}
.package-price {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    color: var(--color-accent);
    margin-bottom: 15px;
    font-weight: 700;
}
.package-item .card-content {
    flex-grow: 1; /* Makes content take available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if it's last child */
}
.package-item .btn-secondary {
    margin-top: auto; /* Pushes button to the bottom */
    align-self: flex-start; /* Align button to the left */
}

/* 7. Methodology Section (Timeline)
-------------------------------------------------------------------*/
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.timeline::after { /* Central line */
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--color-accent);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    transform: skewY(var(--skew-angle)); /* Warped Line */
    border-radius: 2px;
}
.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: transparent;
    width: 50%;
}
/* Align items to left and right */
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(even) { left: 50%; }

/* Timeline Icon styling */
.timeline-item .timeline-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    right: -25px; /* Half of icon width to center on line */
    background-color: var(--color-background-light);
    border: 4px solid var(--color-accent);
    top: 20px;
    border-radius: 50%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -25px;
}
.timeline-item .timeline-icon img {
    width: 24px; /* Size of icon inside circle */
    height: 24px;
    object-fit: contain;
}
.timeline-content {
    padding: 20px 30px;
    background-color: #fff; /* Card-like background for content */
    position: relative;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-soft);
}
.timeline-item:nth-child(even) .timeline-content {
    /* Slight offset for warped grid feel */
    transform: translateX(10px) skewX(calc(var(--skew-angle) / 2));
}
.timeline-item:nth-child(odd) .timeline-content {
    transform: translateX(-10px) skewX(calc(var(--skew-angle) / -2));
}
.timeline-title {
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-top: 0;
}

/* 8. Workshops Section (Custom Slider)
-------------------------------------------------------------------*/
.custom-slider {
    position: relative;
    overflow: hidden; /* If using a simple flexbox slider */
    /* For JS library sliders, this might be different */
    display: flex; /* For simple manual slider */
    scroll-snap-type: x mandatory; /* For native scroll snapping */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding-bottom: 20px; /* Space for scrollbar if visible */
}
.custom-slider .slide {
    min-width: 80%; /* Adjust for how many slides to hint at */
    margin-right: 20px;
    scroll-snap-align: center;
    flex-shrink: 0;
}
.custom-slider .slide:last-child {
    margin-right: 0;
}
.workshop-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.slider-controls {
    text-align: center;
    margin-top: 30px;
}
.slider-controls button {
    background-color: var(--color-accent);
    color: var(--color-text-dark);
    border: none;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: var(--border-radius-small);
    font-size: 1.2rem;
    cursor: pointer;
}
.slider-controls button:hover {
    background-color: var(--color-accent-darker);
}

/* 9. Sustainability Section
-------------------------------------------------------------------*/
.sustainability-image {
    max-width: 250px;
    margin: 0 auto 30px auto;
    border-radius: var(--border-radius-medium);
    /* "Hand-drawn" outline effect
    outline: 3px dashed var(--color-accent);
    outline-offset: 5px; */
}
.sustainability-content p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-dark); /* Ensure good contrast for main paragraphs */
}

/* 10. External Resources Section
-------------------------------------------------------------------*/
.resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.resource-item { /* Extends .card */
    background-color: #fff; /* Override if needed */
}
.resource-item .card-content {
    padding: 20px;
}
.resource-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.resource-title a {
    color: var(--color-primary);
}
.resource-title a:hover {
    color: var(--color-secondary);
}

/* 11. Contact Section
-------------------------------------------------------------------*/
.contact-section {
    color: var(--color-text-light);
}
.contact-section .section-title,
.contact-section .section-subtitle,
.contact-section .contact-info h3,
.contact-section .contact-info p,
.contact-section .contact-info a {
    color: var(--color-text-inverted); /* White text due to dark parallax bg */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Ensure readability */
}
.contact-section .section-title::after {
    background-color: var(--color-text-inverted); /* White underline */
}
.contact-form-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Form takes more space */
    gap: 40px;
    margin-top: 40px;
    align-items: start;
}
.contact-form .form-group {
    margin-bottom: 20px;
}
.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-family: var(--font-primary);
    color: var(--color-text-inverted);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-small);
    background-color: rgba(255,255,255,0.9);
    color: var(--color-text-dark);
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent), 0.3);
}
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}
.contact-form button[type="submit"] {
    width: auto; /* Or 100% if preferred */
    background-color: var(--color-accent);
    color: var(--color-text-dark);
    border-color: var(--color-accent);
}
.contact-form button[type="submit"]:hover {
    background-color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
}
.contact-info {
    padding: 25px;
    background-color: rgba(0,0,0,0.3); /* Slight dark panel */
    border-radius: var(--border-radius-medium);
}
.contact-info h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
}
.contact-info p {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.contact-info img { /* Icons for email, phone */
    width: 20px;
    height: 20px;
    margin-right: 10px;
    filter: brightness(0) invert(1); /* Make icons white */
}

/* 12. Footer
-------------------------------------------------------------------*/
.site-footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
    padding-top: 60px;
    padding-bottom: 20px;
}
.site-footer a {
    color: var(--color-accent);
}
.site-footer a:hover {
    color: var(--color-text-light);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}
.footer-title {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: 20px;
    position: relative;
}
.footer-title::after { /* Small accent line */
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background: var(--color-accent);
    margin-top: 8px;
    transform: skewX(var(--skew-angle));
}
.footer-col p {
    color: var(--color-text-light);
    opacity: 0.8;
}
.footer-nav {
    list-style: none;
}
.footer-nav li {
    margin-bottom: 10px;
}
.footer-social-text { /* For text-based social links */
    list-style: none;
}
.footer-social-text li {
    margin-bottom: 8px;
}
.footer-social-text a {
    font-weight: 500;
    display: inline-block; /* For hover effects */
    transition: transform 0.2s ease;
}
.footer-social-text a:hover {
    transform: translateX(5px);
}
.copyright-text {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: var(--color-text-light);
    opacity: 0.7;
}

/* 13. Card Styles (Global)
-------------------------------------------------------------------*/
.card {
    background-color: #fff;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-soft);
    overflow: hidden; /* Ensures image corners are rounded if image is first child */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack image and content vertically */
    text-align: center; /* Center inline content like titles in card-content */
}
.card:hover {
    transform: translateY(-5px) skewX(calc(var(--skew-angle) / 4)); /* Subtle retro lift and skew */
    box-shadow: var(--shadow-medium);
}
.card .card-image {
    width: 100%;
    /* For feature icons, no fixed height needed unless specified */
    /* For package images, fixed height to maintain grid consistency */
    /* text-align: center; done by card */
    display: flex; /* For centering the image itself if it's smaller */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Clip image if it's larger than container */
}
.package-item .card-image, .slide .card-image { /* For packages and workshops */
    height: 200px; /* Fixed height for these cards */
}
.card .card-image img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Cover for fixed height containers */
    /* margin: 0 auto; already centered by flex on .card-image or text-align on .card */
}
.card .card-content {
    padding: 25px;
    flex-grow: 1; /* Allow content to expand if card is in a flex container */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content items horizontally */
}
.card .card-content > *:last-child {
    margin-bottom: 0; /* Remove bottom margin from last element in card content */
}
.card .card-content p {
    font-size: 0.95rem;
    color: var(--color-text-medium);
}
.card .card-content h3 {
    margin-top: 0; /* If title is first in content */
}

/* 14. Specific Page Styles
-------------------------------------------------------------------*/
/* success.html */
body.success-page { /* Assuming a class 'success-page' is added to body */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background-color: var(--color-background-medium);
    padding: 20px;
}
.success-content {
    background-color: #fff;
    padding: 40px 50px;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    max-width: 600px;
}
.success-content h1 {
    color: var(--color-primary);
    font-size: 2.5rem;
}
.success-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}
.success-content .btn {
    margin-top: 10px;
}

/* privacy.html & terms.html */
body.privacy-page, body.terms-page { /* Assuming classes added to body */
    padding-top: calc(var(--header-height) + 40px); /* Header height + extra space */
}
.privacy-page .container, .terms-page .container {
    padding-bottom: 60px; /* Space at the bottom */
}
.privacy-page h1, .terms-page h1 {
    margin-bottom: 30px;
    text-align: left;
}
.privacy-page h1::after, .terms-page h1::after {
    margin-left: 0; /* Align underline to left */
}
.privacy-page h2, .terms-page h2 {
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 1.8rem;
    color: var(--color-primary);
}


/* 15. Animations & Transitions
-------------------------------------------------------------------*/
/* AOS will handle most scroll animations.
   These are general hover/focus states for interactivity. */
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Hand-drawn animation style (example for an icon if it were SVG/CSS) */
/* .animated-icon {
    animation: handDrawnWiggle 0.5s infinite alternate ease-in-out;
}
@keyframes handDrawnWiggle {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
} */


/* 16. Responsive Design (Media Queries)
-------------------------------------------------------------------*/
@media (max-width: 992px) {
    .container-wrapper { padding-top: calc(var(--header-height) - 10px); } /* Adjust if header height changes */
    .site-header { height: calc(var(--header-height) - 10px); }
    .hero-title { font-size: 2.8rem; }
    .section-title { font-size: 2rem; }
    .contact-form-container { grid-template-columns: 1fr; }
    .contact-info { margin-top: 30px; }
}

@media (max-width: 768px) {
    :root {
        --section-padding: var(--section-padding-mobile);
    }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }

    /* Mobile Navigation */
    .nav-toggle {
        display: block; /* Show hamburger */
    }
    .main-nav .nav-menu {
        display: none; /* Hide inline menu */
        flex-direction: column;
        position: absolute;
        top: var(--header-height); /* Position below header */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        padding: 20px 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-top: 1px solid var(--color-border);
    }
    .main-nav.active .nav-menu { /* JS adds .active to .main-nav */
        display: flex;
    }
    .main-nav .nav-menu li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .main-nav .nav-menu a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid var(--color-border);
    }
    .main-nav .nav-menu li:last-child a {
        border-bottom: none;
    }
    .main-nav .nav-menu a::after { /* Adjust underline for vertical menu */
        left: 50%;
        transform: translateX(-50%) skewX(var(--skew-angle));
    }

    .timeline::after { left: 25px; margin-left: 0; }
    .timeline-item, .timeline-item:nth-child(even) {
        width: 100%;
        padding-left: 70px; /* Space for icon */
        padding-right: 15px;
        left: 0;
    }
    .timeline-item .timeline-icon, .timeline-item:nth-child(even) .timeline-icon {
        left: 0; /* Align icon to the left of the content block */
    }
    .timeline-item .timeline-content,
    .timeline-item:nth-child(even) .timeline-content,
    .timeline-item:nth-child(odd) .timeline-content {
        transform: none; /* Reset transforms for mobile */
    }

    .custom-slider .slide {
        min-width: 90%; /* Show more of one slide on smaller screens */
    }

    .footer-grid {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-col {
        margin-bottom: 20px;
    }
    .footer-title::after {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    html { font-size: 15px; } /* Slightly smaller base for very small screens */
    .hero-title { font-size: 2rem; }
    .section-title { font-size: 1.8rem; }
    .btn, button[type="submit"], input[type="submit"] {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .hero-section .btn-primary {
        padding: 12px 30px;
        font-size: 1rem;
    }
    .package-item .card-image, .slide .card-image {
        height: 180px;
    }
}