:root {
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Lato', sans-serif;

    /* Pastel Color Palette */
    --color-bg-main: #FAF0E6;       /* Light Pastel Linen */
    --color-bg-alt: #F0E8F0;        /* Light Pastel Purple/Grey */
    --color-card-bg: #FFFFFF;

    --color-primary: #FFC0CB;       /* Pastel Pink - Main Accent */
    --color-primary-darker: #F8A7BB;
    --color-primary-shadow: rgba(255, 192, 203, 0.4);
    --color-primary-shadow-hover: rgba(255, 192, 203, 0.6);

    --color-secondary: #ADD8E6;     /* Pastel Blue - Secondary Accent */
    --color-secondary-darker: #92C5D9;
    --color-secondary-shadow: rgba(173, 216, 230, 0.4);
    --color-secondary-shadow-hover: rgba(173, 216, 230, 0.6);
    
    --color-accent: #D988B9;        /* Pastel Purple/Pink - Links, Card Titles */
    --color-accent-darker: #B0578D;

    /* Text Colors */
    --text-color-base: #3A3B3C;      /* Dark Grey for body text on light backgrounds */
    --text-color-headings: #2C2D2E;  /* Darker Grey for headings */
    --text-color-light: #EAEAEA;    /* Light Grey for text on dark backgrounds (footer) */
    --text-color-light-muted: #D1D1D1; /* Lighter grey for footer links */
    --text-color-light-copyright: #AAAAAA; /* Even lighter for copyright */
    --text-color-white: #FFFFFF;    /* For Hero section text, buttons */
    --text-color-muted: #666666;    /* Muted text on light backgrounds */
    --text-color-link: var(--color-accent);
    --text-color-link-hover: var(--color-accent-darker);

    /* Shadows & Borders */
    --box-shadow-volumetric: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --box-shadow-volumetric-hover: 0 12px 24px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.08);
    --border-radius-normal: 15px;
    --border-radius-large: 20px;
    --border-radius-button: 25px;
    --border-color-form: #DDDDDD;
    --border-color-form-focus: var(--color-primary);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Header height for page offset (approximate) */
    --header-height: 80px; /* Adjust if navbar height changes */
}

/* General Body Styles */
body {
    font-family: var(--font-secondary);
    background-color: var(--color-bg-main);
    color: var(--text-color-base);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 16px; /* Base font size */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--text-color-headings);
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}
h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-top: 3rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.05); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1.1rem, 2.2vw, 1.25rem); }

p {
    margin-bottom: 1.25rem;
    font-size: clamp(1rem, 1.8vw, 1.1rem);
}

a {
    color: var(--text-color-link);
    text-decoration: none;
    transition: color var(--transition-normal);
}
a:hover {
    color: var(--text-color-link-hover);
    text-decoration: underline;
}

/* Global Button Styles */
.btn, button, input[type='submit'], input[type='button'] {
    background-color: var(--color-primary);
    color: var(--text-color-white);
    border: none;
    padding: 12px 28px;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 1.1rem;
    border-radius: var(--border-radius-button);
    box-shadow: 0 4px 10px var(--color-primary-shadow);
    transition: background-color var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1.5; /* Ensure consistent height */
}

.btn:hover, button:hover, input[type='submit']:hover, input[type='button']:hover,
.btn:focus, button:focus, input[type='submit']:focus, input[type='button']:focus {
    background-color: var(--color-primary-darker);
    color: var(--text-color-white);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 12px var(--color-primary-shadow-hover);
    text-decoration: none;
    outline: none; /* Remove default focus outline if custom is applied or not needed */
}
/* Ensure .btn-custom inherits or is styled similarly */
.btn-custom { /* Already used in HTML, ensure it's covered */
    /* Styles are same as .btn above, this ensures it if Bootstrap's .btn has different base */
}

.btn-secondary-custom {
    background-color: var(--color-secondary);
    box-shadow: 0 4px 10px var(--color-secondary-shadow);
}
.btn-secondary-custom:hover, .btn-secondary-custom:focus {
    background-color: var(--color-secondary-darker);
    box-shadow: 0 6px 12px var(--color-secondary-shadow-hover);
}

/* Volumetric Elements Base Style */
.volumetric-element {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-normal);
    box-shadow: var(--box-shadow-volumetric);
    padding: 25px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.volumetric-element:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-volumetric-hover);
}

/* Page offset for fixed header on sub-pages (privacy, terms) */
/* This matches the inline style used in the HTML for main elements */
#privacy-policy main,
#terms-conditions main,
#contact-page main,
#about-full main,
#success-message main { /* Add main to selector if direct child of body is not main */
    padding-top: var(--header-height); /* Initial padding, adjust if needed */
}
/* A more robust way if #navbarNav is the dynamic part of header height: */
body {
    padding-top: var(--header-height); /* Apply to body if navbar is fixed-top */
}
main {
     /* No general padding-top here as body takes care of it, or individual pages handle it if header is not on all of them. */
}
/* If body padding-top is used, then subpage main doesn't need its own padding-top */
#privacy-policy, #terms-conditions, #contact-page, #about-full, #success-message {
    /* If these are direct children of body, body's padding-top will create the space */
    /* If main tag is used inside these section IDs, then target 'main' as above or remove body padding */
}
/* Given the HTML uses fixed-top and main padding, let's keep it specific */
.page-content-wrapper { /* Wrap main content of subpages in this if not using direct main padding */
    padding-top: calc(var(--header-height) + 20px); /* e.g. 80px + 20px */
}

/* Header & Navigation */
.navbar-custom {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* position: sticky; /* From HTML, Bootstrap's fixed-top handles this */
    /* top: 0; */
    z-index: 1030; /* Bootstrap's default for fixed navbar */
    height: var(--header-height); /* Set a fixed height */
    display: flex;
    align-items: center;
}
.navbar-custom .container {
    display: flex;
    align-items: center; /* Vertically center brand and toggler */
}
.navbar-custom .navbar-brand {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--color-accent);
}
.navbar-custom .nav-link {
    font-family: var(--font-primary);
    color: var(--text-color-base);
    margin-left: 10px;
    margin-right: 10px;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-button);
    transition: background-color var(--transition-normal), color var(--transition-normal);
    font-weight: 500;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--text-color-white);
    background-color: var(--color-primary);
}
.navbar-toggler {
    border-color: rgba(0,0,0,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(217, 136, 185, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Hero Section */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--text-color-white);
    padding: 120px 0;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: 80vh; /* Replaced with flexible padding and content */
}
#hero::before { /* Dark overlay for text readability */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.65));
    z-index: 1;
}
#hero .container {
    position: relative;
    z-index: 2;
}
#hero h1 {
    color: var(--text-color-white);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}
#hero p {
    color: var(--text-color-white);
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    margin-bottom: 2.5rem;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* General Section Styling */
section {
    padding: 80px 0;
}
section:nth-of-type(even) {
    background-color: var(--color-bg-alt);
}
.section-title {
    margin-bottom: 60px;
    position: relative;
    padding-bottom: 20px;
}
.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 5px;
    background-color: var(--color-primary);
    margin: 15px auto 0;
    border-radius: 3px;
}

/* Card Styling */
.card {
    border: none;
    border-radius: var(--border-radius-normal);
    box-shadow: var(--box-shadow-volumetric);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    margin-bottom: 30px;
    overflow: hidden;
    background-color: var(--color-card-bg);
    display: flex; /* For STROGO rule: used for vertical stacking of image/body */
    flex-direction: column;
    height: 100%; /* For equal height cards in a row with Bootstrap */
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-volumetric-hover);
}

.card-image { /* Container for the image */
    width: 100%; /* Make the image container span the card width */
    height: 220px; /* Fixed height as requested for card images */
    overflow: hidden;
    position: relative;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Covers the area, crops if necessary */
    object-position: center; /* Ensures the "center" of the image is shown */
    display: block;
    transition: transform var(--transition-slow);
}
.card:hover .card-image img {
    transform: scale(1.08);
}

.card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows body to expand, pushing elements like buttons to bottom */
}
.card-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 1rem;
    text-align: left; /* Default for card titles, can be overridden with .text-center on card if needed */
}
.card-text {
    color: var(--text-color-muted);
    font-size: 1rem;
    line-height: 1.6;
    flex-grow: 1; /* Pushes button down if text is short */
}
.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent-darker);
    margin: 1rem 0;
    text-align: left; /* Default, align with card title */
}
#services .card-body .btn-custom,
#events .card-body .btn-custom { /* Ensure buttons in cards are at the bottom */
    margin-top: auto; /* Pushes button to the bottom of the card-body */
    align-self: flex-start; /* Aligns button to the left by default */
}
#services .card-body .btn-custom.w-100, /* If button should be full width */
#events .card-body .btn-custom.w-100 {
    align-self: stretch;
}

/* Centered content cards (e.g., team members, some community icons) */
.card.text-center .card-title,
.card.text-center .price,
.card.text-center .card-text {
    text-align: center;
}
.card.text-center .card-body .btn-custom {
    align-self: center;
}
.card.text-center .card-image { /* For circular avatars or smaller centered images */
    /* Example: width: 150px; height: 150px; from HTML for team member image */
    /* If the card-image div itself needs to be smaller and centered */
    /* margin-left: auto; margin-right: auto; */
    /* And img itself should be styled to fit, e.g. rounded-circle */
}
/* Specifically for team member images in HTML */
.card .card-image.mx-auto {
    width: 150px !important; /* Overriding Bootstrap's mx-auto if it's on a block element */
    height: 150px !important;
    border-radius: 50%; /* Ensure it's circular */
}
.card .card-image.mx-auto img {
    border-radius: 50%;
}


/* Image Gallery */
.image-gallery .col {
    margin-bottom: 1.5rem;
}
.image-gallery img {
    border-radius: var(--border-radius-normal);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Maintain aspect ratio */
    object-fit: cover;
}

/* Testimonials Carousel */
#testimonialCarousel .testimonial-card {
    max-width: 800px;
    margin: auto;
    background-color: var(--color-card-bg); /* Already volumetric */
    padding: 40px; /* More padding */
}
#testimonialCarousel .carousel-inner {
    padding-bottom: 40px; /* Space for indicators */
}
#testimonialCarousel img.rounded-circle {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 3px solid var(--color-primary);
}
#testimonialCarousel .carousel-indicators button {
    background-color: var(--color-accent);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.7;
}
#testimonialCarousel .carousel-indicators .active {
    background-color: var(--color-primary);
    opacity: 1;
}
#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
    background-color: rgba(0,0,0,0.35);
    border-radius: 50%;
    padding: 15px; /* Make icons larger */
    width: 50px;
    height: 50px;
    background-size: 50%;
}

/* External Resources Section */
#external-resources .resource-item {
    background-color: var(--color-card-bg);
    padding: 25px;
    border-radius: var(--border-radius-normal);
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    border-left: 5px solid var(--color-secondary);
}
#external-resources .resource-item h5 {
    color: var(--color-accent);
    margin-bottom: 0.75rem;
    text-align: left;
}
#external-resources .resource-item h5 a {
    color: var(--color-accent);
}
#external-resources .resource-item h5 a:hover {
    color: var(--color-accent-darker);
}
#external-resources .resource-item p {
    font-size: 0.95rem;
    color: var(--text-color-muted);
    margin-bottom: 0.5rem;
}

/* Contact Form */
.contact-form-container { /* This is already a .volumetric-element */
    padding: 30px 40px;
    border-radius: var(--border-radius-large);
}
.contact-form-container h3 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-color-headings);
}
.form-label {
    font-weight: 500;
    color: #444;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.form-control {
    border-radius: 10px;
    border: 1px solid var(--border-color-form);
    padding: 12px 18px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    font-size: 1rem;
    background-color: #fcfcfc; /* Slightly off-white */
}
.form-control:focus {
    border-color: var(--border-color-form-focus);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05), 0 0 0 0.2rem var(--color-primary-shadow);
    outline: none;
    background-color: var(--color-card-bg);
}
textarea.form-control {
    min-height: 130px;
    resize: vertical;
}
.form-check-label a {
    text-decoration: underline;
}

/* Footer */
.footer-custom {
    background-color: var(--text-color-base); /* Dark Grey */
    color: var(--text-color-light);
    padding: 50px 0 25px;
    text-align: center;
}
.footer-custom h5 {
    color: var(--text-color-white);
    margin-bottom: 1.25rem;
    font-size: 1.3rem;
    font-weight: 500;
}
.footer-custom p {
    color: var(--text-color-light-muted);
    font-size: 0.95rem;
}
.footer-custom ul {
    list-style: none;
    padding: 0;
}
.footer-custom ul li {
    margin-bottom: 0.5rem;
}
.footer-custom ul li a {
    color: var(--text-color-light-muted);
    text-decoration: none;
    transition: color var(--transition-normal);
    font-size: 0.95rem;
}
.footer-custom ul li a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.footer-custom .social-links a {
    margin: 0 12px;
    font-size: 1.05rem; /* Text links, not icons */
    display: inline-block;
    padding: 5px 0;
    color: var(--text-color-light-muted);
}
.footer-custom .social-links a:hover {
    color: var(--color-primary);
}
.footer-custom .copyright {
    margin-top: 30px;
    font-size: 0.9rem;
    color: var(--text-color-light-copyright);
}
.footer-custom hr {
    border-color: rgba(255,255,255,0.15);
}

/* ScrollReveal - elements will be hidden by default if JS adds visibility:hidden */
[data-sr-id] { /* ScrollReveal adds this attribute */
    /* visibility: hidden; /* This is managed by ScrollReveal JS */
}

/* Page Transitions (Basic) */
.page-transition-fade-out { animation: fadeOut var(--transition-slow) forwards; }
.page-transition-fade-in { animation: fadeIn var(--transition-slow) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Cookie Consent Popup */
#cookieConsentPopup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(30, 30, 30, 0.97); /* Darker, more solid */
    color: var(--text-color-light);
    padding: 25px;
    box-shadow: 0 -3px 15px rgba(0,0,0,0.25);
    z-index: 9999;
    display: none; /* Hidden by default */
    font-size: 0.95rem;
}
#cookieConsentPopup p {
    margin: 0 0 15px 0;
    color: var(--text-color-light);
    font-size: 0.9rem;
    line-height: 1.5;
}
#cookieConsentPopup .container-cookie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
#cookieConsentPopup button { /* Overrides global button style slightly for this specific context */
    background-color: var(--color-primary);
    color: var(--text-color-white);
    padding: 10px 22px;
    border-radius: 8px; /* Slightly less rounded than global buttons */
    font-weight: 500;
}
#cookieConsentPopup button:hover {
    background-color: var(--color-primary-darker);
}
#cookieConsentPopup a {
    color: var(--color-primary);
    text-decoration: underline;
}
#cookieConsentPopup a:hover {
    color: var(--color-primary-darker);
}

/* Success Page Specific Styles */
.success-page-container { /* Wrap the main content of success.html in this */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - 210px); /* Approx footer height 210px */
    text-align: center;
    padding: 30px 15px; /* Padding for smaller screens */
}
.success-icon {
    font-size: 5.5rem;
    color: #6DD86D; /* More vibrant success green */
    margin-bottom: 1.5rem;
    font-weight: bold;
}
.success-page-container .volumetric-element {
    max-width: 650px;
    width: 100%;
}

/* "Read More" link style example */
.read-more-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
    padding: 8px 15px;
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-button);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}
.read-more-link:hover {
    background-color: var(--color-accent);
    color: var(--text-color-white);
    text-decoration: none;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    body {
        font-size: 15px; /* Adjust base font size */
        padding-top: calc(var(--header-height) - 10px); /* Adjust if header height changes */
    }
    :root {
        --header-height: 70px; /* Example adjustment for smaller screens */
    }
    #hero { padding: 100px 0; }
    #hero h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
    #hero p { font-size: clamp(1rem, 3vw, 1.3rem); }
    .section-title { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-bottom: 40px; }
    
    .navbar-custom .nav-link { margin-left: 5px; margin-right: 5px; padding: 0.5rem 0.8rem; }
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.98);
        border-radius: 0 0 var(--border-radius-normal) var(--border-radius-normal);
        margin-top: 10px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 10px 0;
    }
    .navbar-custom .nav-item { width: 100%; text-align: center; }
    .navbar-custom .nav-link { display: block; margin: 5px 0; }
}

@media (max-width: 767.98px) {
    :root {
        --header-height: 65px; /* Example adjustment for mobile */
    }
    body {
        padding-top: calc(var(--header-height) - 5px);
    }
    #hero { padding: 80px 0; }
    #hero h1 { font-size: clamp(1.8rem, 7vw, 2.2rem); }
    #hero p { font-size: clamp(0.9rem, 4vw, 1.1rem); }
    section { padding: 60px 0; }
    .section-title { font-size: clamp(1.6rem, 6vw, 2rem); }
    .volumetric-element { padding: 20px; }
    .contact-form-container { padding: 25px 20px; }
    
    .btn, button, input[type='submit'], input[type='button'], .btn-custom {
        padding: 10px 20px;
        font-size: 1rem;
    }

    #cookieConsentPopup .container-cookie {
        flex-direction: column;
        text-align: center;
    }
    #cookieConsentPopup p { margin-bottom: 15px; }
    #cookieConsentPopup button { width: 100%; margin-top: 10px; }

    .footer-custom { text-align: center; }
    .footer-custom .col-md-4 { margin-bottom: 30px; }
    .footer-custom .col-md-4:last-child { margin-bottom: 0; }
}

@media (max-width: 575.98px) {
    .card-image { height: 180px; } /* Slightly smaller images on very small screens */
    .price { font-size: 1.8rem; }
    .card-title { font-size: 1.4rem; }
    #hero { padding: 60px 0; }
}
html,body{
    overflow-x: hidden;
}