/* General Reset and Base Styles for Krespaluni Project */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Global box-sizing */
}

*, *::before, *::after {
    box-sizing: inherit;
}

.krespaluniDailyJointContourBodyEleme {
    font-family: 'Arial', sans-serif; /* Fallback font, consider adding a Google Font if allowed, but for strict no-CDN Arial is safe */
    line-height: 1.6;
    color: #E0E0E0; /* Light gray for main text content */
    background-color: #03070A; /* Deep dark obsidian base background */
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    min-height: 100vh; /* Ensure body takes full viewport height */
    display: flex; /* Flex container for sticky footer */
    flex-direction: column; /* Stack children vertically */
}

.krespaluniDailyJointContourMainConte {
    flex-grow: 1; /* Allows main content to expand and push footer down */
}

a {
    color: #42FFD5; /* Mint accent for all links */
    text-decoration: none; /* Remove default underline */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for hover effects */
}

a:hover {
    color: #00FFC0; /* Slightly brighter mint on hover for better feedback */
    text-decoration: underline; /* Add underline on hover for clarity */
}

h1, h2, h3 {
    color: #42FFD5; /* Mint for all primary headings */
    margin-bottom: 1em; /* Spacing below headings */
    line-height: 1.2; /* Improved readability for headings */
    font-weight: bold; /* Ensure headings are bold */
}

h1 { font-size: 2.8em; } /* Large font for main hero title */
h2 { font-size: 2.2em; } /* Medium-large for section titles */
h3 { font-size: 1.8em; } /* Slightly smaller for sub-section titles/card titles */

p {
    margin-bottom: 1em; /* Spacing for paragraphs */
    font-size: 1em; /* Base font size for paragraphs */
}

ul {
    list-style: none; /* Remove default list bullets */
    padding: 0; /* Remove default list padding */
    margin: 0; /* Remove default list margin */
}

/* Reusable container for centering content and setting max width */
.krespaluniDailyJointContourHeadCent,
.krespaluniDailyJointContourHeroContai,
.krespaluniDailyJointContourQuoteContai,
.krespaluniDailyJointContourPriceContai,
.krespaluniDailyJointContourBenefitCont,
.krespaluniDailyJointContourAudienceCont,
.krespaluniDailyJointContourFaqContai,
.krespaluniDailyJointContourFormContai,
.krespaluniDailyJointContourExtraContai,
.krespaluniDailyJointContourFootCont {
    max-width: 1200px; /* Maximum width for content */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Inner padding for content */
    width: 100%; /* Ensure it takes full width up to max-width */
}

/* Header Section Styles */
.krespaluniDailyJointContourHeadWrap {
    background-color: #050A0F; /* Slightly lighter dark obsidian for header */
    padding: 15px 0; /* Vertical padding */
    position: sticky; /* Make header sticky at the top */
    top: 0; /* Stick to the top edge */
    z-index: 1000; /* Ensure header is above other content */
    border-bottom: 1px solid #42FFD5; /* Mint accent line at the bottom */
}

.krespaluniDailyJointContourHeadCent {
    display: flex; /* Flex container for logo and navigation */
    justify-content: space-between; /* Space out logo and nav */
    align-items: center; /* Vertically align items */
    padding: 0 20px; /* Horizontal padding for better edge spacing */
}

.krespaluniDailyJointContourLogoText {
    color: #42FFD5; /* Mint color for the logo text */
    font-size: 1.8em; /* Font size for logo */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1px; /* Spacing between letters */
    pointer-events: none; /* Make sure logo is not clickable */
    user-select: none; /* Prevent text selection on logo */
}

/* Navigation Menu Styles */
.krespaluniDailyJointContourMainNavi {
    display: block; /* Default display for desktop */
}

.krespaluniDailyJointContourNaviList {
    display: flex; /* Flex container for navigation items */
    gap: 30px; /* Space between navigation links */
}

.krespaluniDailyJointContourNaviLink {
    color: #E0E0E0; /* Light gray for nav links */
    font-size: 1.1em; /* Font size for nav links */
    position: relative; /* Needed for pseudo-element underline */
    padding-bottom: 5px; /* Space for the underline */
    white-space: nowrap; /* Prevent links from wrapping */
}

.krespaluniDailyJointContourNaviLink::after {
    content: ''; /* Pseudo-element for underline effect */
    position: absolute; /* Position relative to the link */
    left: 0;
    bottom: 0;
    width: 0; /* Start with no width */
    height: 2px; /* Thickness of the underline */
    background-color: #42FFD5; /* Mint color for underline */
    transition: width 0.3s ease; /* Smooth transition for width */
}

.krespaluniDailyJointContourNaviLink:hover::after {
    width: 100%; /* Expand underline on hover */
}

/* Burger Menu for Mobile Devices (CSS-only) */
.krespaluniDailyJointContourMenuCheck {
    display: none; /* Hide the actual checkbox input */
}

.krespaluniDailyJointContourMenuBurg {
    display: none; /* Hidden by default, shown on mobile via media query */
    flex-direction: column; /* Stack burger lines */
    justify-content: space-between; /* Space out lines */
    width: 30px; /* Width of the burger icon */
    height: 22px; /* Height of the burger icon */
    cursor: pointer; /* Indicate clickable element */
    z-index: 1001; /* Ensure burger is above navigation when open */
    position: relative; /* For correct positioning of lines */
}

.krespaluniDailyJointContourBurgLine {
    display: block; /* Each line is a block element */
    width: 100%; /* Full width of burger icon */
    height: 3px; /* Thickness of the lines */
    background-color: #42FFD5; /* Mint color for burger lines */
    transition: all 0.3s ease; /* Smooth transition for animations */
    border-radius: 2px; /* Slightly rounded lines */
}

/* Animation for burger menu when checked (open) */
.krespaluniDailyJointContourMenuCheck:checked ~ .krespaluniDailyJointContourMenuBurg .krespaluniDailyJointContourBurgLine:nth-child(1) {
    transform: translateY(9px) rotate(45deg); /* First line rotates and moves */
}

.krespaluniDailyJointContourMenuCheck:checked ~ .krespaluniDailyJointContourMenuBurg .krespaluniDailyJointContourBurgLine:nth-child(2) {
    opacity: 0; /* Middle line fades out */
}

.krespaluniDailyJointContourMenuCheck:checked ~ .krespaluniDailyJointContourMenuBurg .krespaluniDailyJointContourBurgLine:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg); /* Third line rotates and moves */
}

.krespaluniDailyJointContourMenuCheck:checked ~ .krespaluniDailyJointContourMainNavi {
    transform: translateX(0); /* Show the navigation menu */
}

/* Hero Section (Block 1) Styles */
.krespaluniDailyJointContourHeroSectioN {
    padding: 80px 0; /* Vertical padding */
    background-color: #03070A; /* Dark obsidian background */
}

.krespaluniDailyJointContourHeroContai {
    display: flex; /* Flex container for two columns */
    align-items: center; /* Vertically align items in the center */
    gap: 40px; /* Space between the image and text blocks */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.krespaluniDailyJointContourHeroImageWraper {
    flex: 1 1 50%; /* Image wrapper takes roughly half width, allows shrinking */
    min-width: 300px; /* Minimum width before breaking layout */
    display: flex; /* Ensure image is centered within its wrapper */
    justify-content: center;
    align-items: center;
}

.krespaluniDailyJointContourHeroImage {
    max-width: 100%; /* Image scales within its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Slightly rounded corners for the image */
    object-fit: cover; /* Ensures image covers area without distortion */
    box-shadow: 0 0 20px rgba(66, 255, 213, 0.2); /* Subtle mint glow effect */
}

.krespaluniDailyJointContourHeroTextBloc {
    flex: 1 1 40%; /* Text block takes slightly less than half, allows shrinking */
    min-width: 300px; /* Minimum width before breaking layout */
    text-align: left; /* Align text to the left */
}

.krespaluniDailyJointContourHeroTitle {
    font-size: 3.5em; /* Large, prominent title */
    margin-bottom: 0.5em;
    color: #42FFD5; /* Mint color for the main title */
}

.krespaluniDailyJointContourHeroSubtitl {
    font-size: 1.5em; /* Subheading font size */
    color: #A0A0A0; /* Lighter gray for subtext */
    margin-bottom: 1.5em;
}

.krespaluniDailyJointContourHeroParagr {
    font-size: 1.1em; /* Paragraph text size */
    margin-bottom: 1.2em;
}

.krespaluniDailyJointContourHeroCtaButt {
    display: inline-block; /* Make button behave like a block but align with text */
    background-color: #42FFD5; /* Primary button mint background */
    color: #03070A; /* Dark text on mint button */
    padding: 15px 30px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners */
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase; /* Uppercase text */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    box-shadow: 0 0 0 rgba(66, 255, 213, 0); /* Initial subtle shadow */
}

.krespaluniDailyJointContourHeroCtaButt:hover {
    background-color: #00FFC0; /* Slightly brighter mint on hover */
    box-shadow: 0 0 15px rgba(66, 255, 213, 0.7); /* Soft glow on hover */
}

/* Quote Section (Block 4) Styles */
.krespaluniDailyJointContourQuoteSecti {
    background-color: #070D14; /* Slightly darker background */
    padding: 80px 0; /* Vertical padding */
    text-align: center; /* Center align all text */
    position: relative; /* For pseudo-element decorations */
    overflow: hidden; /* Hide overflowing decorative lines */
}

/* Decorative mint lines for the quote section */
.krespaluniDailyJointContourQuoteSecti::before,
.krespaluniDailyJointContourQuoteSecti::after {
    content: '';
    position: absolute;
    height: 2px; /* Thickness of the lines */
    background: linear-gradient(to right, transparent, #42FFD5, transparent); /* Gradient mint line */
    opacity: 0.3; /* Subtle transparency */
    animation: krespaluniGlowLine 3s infinite alternate; /* Animation for a soft glow */
}

.krespaluniDailyJointContourQuoteSecti::before {
    top: 0; /* Position at the top */
    left: -50%; /* Start off-screen to the left */
    width: 200%; /* Long width to cover rotation */
    transform: rotate(2deg); /* Slightly angled */
}

.krespaluniDailyJointContourQuoteSecti::after {
    bottom: 0; /* Position at the bottom */
    right: -50%; /* Start off-screen to the right */
    width: 200%; /* Long width */
    transform: rotate(-2deg); /* Slightly angled in opposite direction */
}

@keyframes krespaluniGlowLine {
    from { opacity: 0.3; transform: scaleX(0.8) rotate(2deg); } /* Initial state */
    to { opacity: 0.7; transform: scaleX(1.2) rotate(2deg); } /* Animated state */
}
/* Re-adjusting the animation for the bottom line if different rotation */
.krespaluniDailyJointContourQuoteSecti::after {
    animation: krespaluniGlowLineBottom 3s infinite alternate;
}
@keyframes krespaluniGlowLineBottom {
    from { opacity: 0.3; transform: scaleX(0.8) rotate(-2deg); }
    to { opacity: 0.7; transform: scaleX(1.2) rotate(-2deg); }
}


.krespaluniDailyJointContourQuoteContai {
    max-width: 900px; /* Max width for quote content */
    position: relative; /* Ensure quote text is above the lines */
    z-index: 1; /* Bring to front */
}

.krespaluniDailyJointContourQuoteText {
    font-size: 2em; /* Large italic font for the quote */
    font-style: italic;
    color: #F0F0F0; /* Lightest gray for quote text */
    margin-bottom: 1.5em;
    position: relative; /* For custom quote marks */
    padding: 0 40px; /* Padding for quote marks */
}

/* Custom large quote marks */
.krespaluniDailyJointContourQuoteText::before,
.krespaluniDailyJointContourQuoteText::after {
    content: '“'; /* Opening quote mark */
    font-size: 4em; /* Very large font size */
    color: #42FFD5; /* Mint color */
    position: absolute;
    opacity: 0.5; /* Semi-transparent */
    line-height: 0.5; /* Adjust vertical alignment */
}

.krespaluniDailyJointContourQuoteText::before {
    top: 0;
    left: 0;
}

.krespaluniDailyJointContourQuoteText::after {
    content: '”'; /* Closing quote mark */
    bottom: 0;
    right: 0;
}

.krespaluniDailyJointContourQuoteAutho {
    font-size: 1.2em; /* Font size for author */
    color: #A0A0A0; /* Lighter gray for author */
    margin-top: 1em;
    font-style: normal; /* Ensure author text is not italic */
}

/* Price Section (Packages) Styles */
.krespaluniDailyJointContourPriceSecti {
    padding: 80px 0;
    background-color: #03070A;
    text-align: center;
}

.krespaluniDailyJointContourPriceTitle {
    font-size: 2.5em;
    margin-bottom: 0.8em;
}

.krespaluniDailyJointContourPriceSubte {
    font-size: 1.2em;
    color: #A0A0A0;
    margin-bottom: 3em; /* More space before price cards */
}

.krespaluniDailyJointContourPriceGridCo {
    display: flex; /* Flex container for price cards */
    flex-wrap: wrap; /* Allow cards to wrap to next line */
    justify-content: center; /* Center cards horizontally */
    gap: 30px; /* Space between cards */
}

.krespaluniDailyJointContourPriceCard {
    background-color: #070D14; /* Darker background for cards */
    border: 1px solid #1A222B; /* Subtle border */
    border-radius: 10px; /* Rounded corners */
    padding: 30px;
    width: 100%; /* Default to full width on small screens */
    max-width: 300px; /* Maximum width for each card */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center items horizontally */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Soft shadow */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

.krespaluniDailyJointContourPriceCard:hover {
    transform: translateY(-10px); /* Lift card slightly on hover */
    border-color: #42FFD5; /* Mint border on hover */
    box-shadow: 0 10px 30px rgba(66, 255, 213, 0.2); /* More pronounced mint glow */
}

.krespaluniDailyJointContourCardTitle {
    font-size: 1.7em;
    color: #42FFD5; /* Mint for card titles */
    margin-bottom: 0.5em;
}

.krespaluniDailyJointContourCardPrice {
    font-size: 2.5em;
    font-weight: bold;
    color: #F0F0F0; /* Lightest gray for price */
    margin-bottom: 1em;
}

.krespaluniDailyJointContourCardFeatu {
    text-align: left; /* Align feature list to the left */
    margin-bottom: 2em;
    width: 100%; /* Take full width of card */
    padding: 0 10px; /* Horizontal padding */
}

.krespaluniDailyJointContourFeatuItem {
    margin-bottom: 0.8em;
    color: #E0E0E0;
    position: relative; /* For custom bullet point */
    padding-left: 25px; /* Space for the custom bullet */
}

.krespaluniDailyJointContourFeatuItem::before {
    content: '✔'; /* Checkmark icon */
    color: #42FFD5; /* Mint color for checkmark */
    position: absolute;
    left: 0;
    font-size: 1.1em;
}

.krespaluniDailyJointContourCardButto {
    margin-top: auto; /* Push button to the bottom of the card */
}

/* Primary Button Base Styles (reused from Hero CTA) */
.krespaluniDailyJointContourPrimaryBut {
    background-color: #42FFD5;
    color: #03070A;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

.krespaluniDailyJointContourPrimaryBut:hover {
    background-color: #00FFC0;
    box-shadow: 0 0 12px rgba(66, 255, 213, 0.8); /* Stronger glow on hover */
}

/* Benefit Section (What Regular Practice Gives) Styles */
.krespaluniDailyJointContourBenefitSec {
    padding: 80px 0;
    background-color: #070D14;
}

.krespaluniDailyJointContourBenefitCont {
    display: flex;
    flex-wrap: wrap; /* Allow content to wrap */
    align-items: center;
    gap: 40px;
}

.krespaluniDailyJointContourBenefitTextWra {
    flex: 1 1 45%; /* Text wrapper takes roughly half width */
    min-width: 300px;
}

.krespaluniDailyJointContourBenefitTitl {
    font-size: 2.5em;
    margin-bottom: 0.8em;
}

.krespaluniDailyJointContourBenefitParag {
    font-size: 1.1em;
    margin-bottom: 2em;
    color: #E0E0E0;
}

.krespaluniDailyJointContourBenefitList {
    display: flex;
    flex-wrap: wrap; /* Allow list items to wrap */
    gap: 15px; /* Space between list items */
}

.krespaluniDailyJointContourBenefitItem {
    width: calc(50% - 7.5px); /* Two columns layout for list items */
    color: #E0E0E0;
    position: relative;
    padding-left: 25px;
    font-size: 1.05em;
}

.krespaluniDailyJointContourBenefitItem::before {
    content: '▶'; /* Mint arrow bullet point */
    color: #42FFD5;
    position: absolute;
    left: 0;
    font-size: 0.9em;
    top: 2px;
}

.krespaluniDailyJointContourBenefitImageW {
    flex: 1 1 45%; /* Image wrapper takes roughly half width */
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.krespaluniDailyJointContourBenefitImage {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(66, 255, 213, 0.2);
}

/* Audience Section (For Whom It Is For) Styles */
.krespaluniDailyJointContourAudienceS {
    padding: 80px 0;
    background-color: #03070A;
}

.krespaluniDailyJointContourAudienceCta {
    text-align: center;
    margin-bottom: 50px; /* Space below the image */
}

.krespaluniDailyJointContourAudienceImag {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(66, 255, 213, 0.2);
}

.krespaluniDailyJointContourAudienceCont {
    max-width: 1000px; /* Slightly wider content area */
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.krespaluniDailyJointContourAudienceTitl {
    font-size: 2.5em;
    margin-bottom: 0.8em;
}

.krespaluniDailyJointContourAudienceParag {
    font-size: 1.1em;
    color: #E0E0E0;
    margin-bottom: 2em;
}

.krespaluniDailyJointContourAudienceList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center list items */
    gap: 20px;
}

.krespaluniDailyJointContourAudienceItem {
    background-color: #070D14;
    border: 1px solid #1A222B;
    border-radius: 8px;
    padding: 20px 25px;
    width: 100%;
    max-width: 380px; /* Max width for each audience item */
    text-align: left;
    color: #E0E0E0;
    font-size: 1em;
    line-height: 1.4;
    position: relative;
    padding-left: 45px; /* Space for star icon */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.krespaluniDailyJointContourAudienceItem:hover {
    transform: translateY(-5px); /* Lift item slightly on hover */
    border-color: #42FFD5; /* Mint border on hover */
}

.krespaluniDailyJointContourAudienceItem::before {
    content: '⭐'; /* Star icon as bullet */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #42FFD5; /* Mint color for star */
    font-size: 1.3em;
}

/* FAQ Section (Block 5) Styles */
.krespaluniDailyJointContourFaqSectio {
    padding: 80px 0;
    background-color: #070D14;
}

.krespaluniDailyJointContourFaqContai {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.krespaluniDailyJointContourFaqTitle {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 2em;
}

.krespaluniDailyJointContourFaqAccord {
    border-radius: 10px;
    overflow: hidden; /* Ensure rounded corners for the whole accordion */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}

.krespaluniDailyJointContourFaqDetail {
    background-color: #0A1118; /* Slightly lighter dark shade for each FAQ item */
    border-bottom: 1px solid #1A222B; /* Separator line */
}

.krespaluniDailyJointContourFaqDetail:last-child {
    border-bottom: none; /* No border for the last item */
}

.krespaluniDailyJointContourFaqSumma {
    display: block; /* Make summary clickable block */
    padding: 20px 30px;
    font-size: 1.2em;
    font-weight: bold;
    color: #42FFD5; /* Mint for summary text */
    cursor: pointer;
    position: relative;
    user-select: none; /* Prevent text selection */
    transition: background-color 0.3s ease;
}

.krespaluniDailyJointContourFaqSumma:hover {
    background-color: #0E161F; /* Slightly darker on hover */
}

.krespaluniDailyJointContourFaqSumma::after {
    content: '+'; /* Plus icon for closed state */
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    transition: transform 0.3s ease; /* Smooth rotation for icon */
    color: #E0E0E0;
}

.krespaluniDailyJointContourFaqDetail[open] .krespaluniDailyJointContourFaqSumma::after {
    content: '−'; /* Minus icon for open state */
    transform: translateY(-50%) rotate(0deg); /* No rotation, just content change */
}

.krespaluniDailyJointContourFaqAnswe {
    padding: 0 30px 20px 30px; /* Padding for answer text */
    color: #E0E0E0;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Form Section (Block 6) Styles */
.krespaluniDailyJointContourFormSecti {
    padding: 80px 0;
    background-color: #03070A;
}

.krespaluniDailyJointContourFormContai {
    max-width: 700px; /* Max width for the form container */
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* Center form elements */
}

.krespaluniDailyJointContourFormTitle {
    font-size: 2.5em;
    margin-bottom: 0.8em;
}

.krespaluniDailyJointContourFormSubte {
    font-size: 1.2em;
    color: #A0A0A0;
    margin-bottom: 2.5em;
}

.krespaluniDailyJointContourContactForm {
    background-color: #070D14; /* Darker background for the form itself */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    text-align: left; /* Align form labels/inputs to left */
}

.krespaluniDailyJointContourFormGroup {
    margin-bottom: 25px; /* Space between form groups */
}

.krespaluniDailyJointContourFormLabel {
    display: block; /* Make label a block for proper spacing */
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #E0E0E0;
    font-weight: bold;
}

.krespaluniDailyJointContourFormInput,
.krespaluniDailyJointContourFormTextar {
    width: 100%; /* Full width inputs */
    padding: 12px 15px;
    background-color: #1A222B; /* Darker background for input fields */
    border: 1px solid #303A45; /* Subtle border */
    border-radius: 5px;
    color: #E0E0E0; /* Light text color for input */
    font-size: 1em;
    outline: none; /* Remove default outline on focus */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth focus effects */
}

.krespaluniDailyJointContourFormInput:focus,
.krespaluniDailyJointContourFormTextar:focus {
    border-color: #42FFD5; /* Mint border on focus */
    box-shadow: 0 0 8px rgba(66, 255, 213, 0.5); /* Mint glow on focus */
}

.krespaluniDailyJointContourFormTextar {
    resize: vertical; /* Allow only vertical resizing for textareas */
    min-height: 120px; /* Minimum height for textarea */
}

.krespaluniDailyJointContourFormCheckb {
    margin-bottom: 25px;
    display: flex; /* Flex for checkbox and label */
    align-items: center; /* Vertically align items */
}

.krespaluniDailyJointContourCheckInput {
    margin-right: 10px;
    width: 18px; /* Size of checkbox */
    height: 18px;
    cursor: pointer;
    accent-color: #42FFD5; /* Mint accent for checkbox */
}

.krespaluniDailyJointContourCheckLabel {
    color: #E0E0E0;
    font-size: 0.95em;
}

.krespaluniDailyJointContourPrivLink {
    color: #42FFD5;
    text-decoration: underline; /* Underline for policy link */
}

.krespaluniDailyJointContourPrivLink:hover {
    color: #00FFC0;
    text-decoration: none; /* Remove underline on hover for contrast */
}

.krespaluniDailyJointContourFormSubmi {
    width: 100%; /* Full width submit button */
    padding: 15px;
    font-size: 1.2em;
}

/* Extra Text Sections Styles */
.krespaluniDailyJointContourExtraSecti {
    padding: 60px 0;
    background-color: #0A1118; /* Alternating dark shades for visual separation */
    border-bottom: 1px solid #1A222B; /* Subtle separator */
}

.krespaluniDailyJointContourSectionOne {
    background-color: #070D14; /* Distinct background */
}
.krespaluniDailyJointContourSectionTwo {
    background-color: #03070A; /* Distinct background */
}
.krespaluniDailyJointContourSectionThree {
    background-color: #070D14; /* Distinct background */
    border-bottom: none; /* No border for the last extra section */
}

.krespaluniDailyJointContourExtraContai {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.krespaluniDailyJointContourExtraTitle {
    font-size: 2.2em;
    margin-bottom: 1em;
    text-align: center;
}

.krespaluniDailyJointContourExtraParag {
    font-size: 1.05em;
    color: #E0E0E0;
    margin-bottom: 1.5em;
    text-align: justify; /* Justify text for a cleaner look */
}

/* Footer Section Styles */
.krespaluniDailyJointContourFootCont {
    background-color: #050A0F; /* Slightly lighter dark obsidian for footer */
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid #42FFD5; /* Mint accent line at the top */
    margin-top: auto; /* Push footer to the bottom */
}

.krespaluniDailyJointContourFootText {
    margin-bottom: 20px;
}

.krespaluniDailyJointContourCopyText {
    font-size: 1em;
    color: #A0A0A0;
    margin-bottom: 10px;
}

.krespaluniDailyJointContourEmailAdd {
    font-size: 1em;
    color: #E0E0E0;
}

.krespaluniDailyJointContourEmailLink {
    color: #42FFD5;
    text-decoration: underline;
}

.krespaluniDailyJointContourEmailLink:hover {
    color: #00FFC0;
    text-decoration: none;
}

.krespaluniDailyJointContourFootLink {
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap */
    justify-content: center;
    gap: 20px; /* Space between footer links */
    padding: 0 20px;
}

.krespaluniDailyJointContourFooterNavL {
    color: #E0E0E0;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.krespaluniDailyJointContourFooterNavL:hover {
    color: #42FFD5;
}

/* Media Queries for Responsiveness */

/* Mobile Devices (up to 767px wide) */
@media (max-width: 767px) {
    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.5em; }
    p { font-size: 0.95em; } /* Slightly smaller text for better fit */

    .krespaluniDailyJointContourHeadCent {
        padding: 0 15px; /* Reduced padding for smaller screens */
    }

    .krespaluniDailyJointContourLogoText {
        font-size: 1.5em; /* Smaller logo */
    }

    .krespaluniDailyJointContourMenuBurg {
        display: flex; /* Show burger menu icon */
    }

    .krespaluniDailyJointContourMainNavi {
        position: fixed; /* Fixed position for off-canvas menu */
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #050A0F; /* Dark background for the mobile menu */
        flex-direction: column; /* Stack nav items vertically */
        justify-content: center; /* Center items */
        align-items: center;
        transform: translateX(100%); /* Hide menu off-screen initially */
        transition: transform 0.3s ease-in-out; /* Smooth slide animation */
        z-index: 999; /* Ensure menu is above main content */
    }

    .krespaluniDailyJointContourNaviList {
        flex-direction: column; /* Stack nav items */
        text-align: center;
        gap: 25px; /* More space between mobile nav links */
    }

    .krespaluniDailyJointContourNaviLink {
        font-size: 1.5em; /* Larger font for mobile nav links */
        padding: 10px 0;
        width: fit-content; /* Ensure underline matches text width */
        margin: 0 auto;
    }

    .krespaluniDailyJointContourNaviLink::after {
        height: 1px; /* Thinner underline for mobile */
    }

    .krespaluniDailyJointContourHeroContai {
        flex-direction: column; /* Stack image and text vertically */
        text-align: center; /* Center text */
    }

    .krespaluniDailyJointContourHeroImageWraper,
    .krespaluniDailyJointContourHeroTextBloc {
        min-width: unset; /* Remove min-width to allow full flexibility */
        width: 100%;
    }

    .krespaluniDailyJointContourHeroImage {
        width: 100%;
        height: 300px; /* Fixed height for mobile hero image to prevent excessive length */
        object-fit: contain; /* Ensure image fits well, adjust to 'cover' if preferred */
    }

    .krespaluniDailyJointContourHeroTitle {
        font-size: 2.5em; /* Adjusted hero title size */
    }
    .krespaluniDailyJointContourHeroSubtitl {
        font-size: 1.2em;
    }
    .krespaluniDailyJointContourHeroCtaButt {
        padding: 12px 20px;
        font-size: 1em;
    }

    .krespaluniDailyJointContourQuoteText {
        font-size: 1.5em; /* Smaller quote text */
    }

    .krespaluniDailyJointContourQuoteText::before,
    .krespaluniDailyJointContourQuoteText::after {
        font-size: 3em; /* Smaller quote marks */
    }

    .krespaluniDailyJointContourPriceGridCo {
        flex-direction: column; /* Stack price cards vertically */
        align-items: center;
    }

    .krespaluniDailyJointContourPriceCard {
        max-width: 90%; /* Adjust max-width for better mobile fit */
    }

    .krespaluniDailyJointContourBenefitCont {
        flex-direction: column-reverse; /* Text above image for better flow */
    }

    .krespaluniDailyJointContourBenefitTextWra,
    .krespaluniDailyJointContourBenefitImageW {
        min-width: unset;
        width: 100%;
    }

    .krespaluniDailyJointContourBenefitImage {
        height: 300px; /* Fixed height for mobile benefit image */
        object-fit: contain;
    }

    .krespaluniDailyJointContourBenefitList {
        flex-direction: column; /* Stack benefit list items */
    }

    .krespaluniDailyJointContourBenefitItem {
        width: 100%; /* Full width for list items */
    }

    .krespaluniDailyJointContourAudienceList {
        flex-direction: column;
        align-items: center;
    }

    .krespaluniDailyJointContourAudienceItem {
        max-width: 90%;
    }

    .krespaluniDailyJointContourFaqSumma {
        font-size: 1.1em;
        padding: 15px 20px;
    }
    .krespaluniDailyJointContourFaqSumma::after {
        right: 20px;
    }
    .krespaluniDailyJointContourFaqAnswe {
        padding: 0 20px 15px 20px;
        font-size: 1em;
    }

    .krespaluniDailyJointContourContactForm {
        padding: 25px;
    }

    .krespaluniDailyJointContourFormGroup {
        margin-bottom: 20px;
    }

    .krespaluniDailyJointContourFormSubmi {
        font-size: 1.1em;
    }

    .krespaluniDailyJointContourCheckb {
        flex-direction: column; /* Stack checkbox and label */
        align-items: flex-start; /* Align checkbox to left */
    }

    .krespaluniDailyJointContourCheckInput {
        margin-bottom: 10px; /* Space between checkbox and label text */
    }

    .krespaluniDailyJointContourFooterNavL {
        font-size: 0.85em; /* Smaller footer links */
    }

    .krespaluniDailyJointContourFootLink {
        flex-direction: column; /* Stack footer links vertically */
        gap: 10px; /* Reduced space */
    }
}

/* Tablet Devices (768px to 1023px wide) */
@media (min-width: 768px) and (max-width: 1023px) {
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.6em; }

    .krespaluniDailyJointContourHeadCent {
        padding: 0 25px;
    }

    .krespaluniDailyJointContourLogoText {
        font-size: 1.6em;
    }

    .krespaluniDailyJointContourNaviList {
        gap: 20px; /* Slightly less space for nav links */
    }

    .krespaluniDailyJointContourHeroContai {
        flex-direction: column; /* Stack hero content on tablet for better readability */
        text-align: center;
    }

    .krespaluniDailyJointContourHeroImageWraper {
        width: 80%; /* Take more width for the image */
        max-width: 600px; /* Limit image size */
    }
    .krespaluniDailyJointContourHeroTextBloc {
        width: 100%;
        max-width: 700px; /* Limit text width */
    }

    .krespaluniDailyJointContourHeroImage {
        width: 100%;
        height: 400px; /* Adjust height */
        object-fit: cover;
    }

    .krespaluniDailyJointContourQuoteText {
        font-size: 1.8em;
    }

    .krespaluniDailyJointContourPriceGridCo {
        justify-content: space-around; /* Distribute cards with space */
        gap: 25px;
    }

    .krespaluniDailyJointContourPriceCard {
        max-width: 45%; /* Two cards per row */
    }

    .krespaluniDailyJointContourBenefitCont {
        flex-direction: row; /* Keep two columns if space allows */
    }
    .krespaluniDailyJointContourBenefitTextWra,
    .krespaluniDailyJointContourBenefitImageW {
        flex: 1 1 48%; /* Adjust flex basis */
    }
    .krespaluniDailyJointContourBenefitList {
        flex-direction: column; /* Stack list items on tablet too for consistency */
    }
    .krespaluniDailyJointContourBenefitItem {
        width: 100%;
    }

    .krespaluniDailyJointContourAudienceList {
        justify-content: space-around;
        gap: 15px;
    }

    .krespaluniDailyJointContourAudienceItem {
        max-width: 45%; /* Two per row */
    }

    .krespaluniDailyJointContourFormContai {
        padding: 0 30px;
    }

    .krespaluniDailyJointContourExtraContai {
        padding: 0 30px;
    }
}

/* Desktop Devices (1024px and up) - Base styles are already mostly for desktop */
@media (min-width: 1024px) {
    .krespaluniDailyJointContourHeadCent {
        padding: 0 40px; /* Wider padding for larger screens */
    }

    .krespaluniDailyJointContourLogoText {
        font-size: 2em;
    }

    .krespaluniDailyJointContourHeroContai,
    .krespaluniDailyJointContourBenefitCont {
        flex-wrap: nowrap; /* Prevent wrapping for optimal two-column layout */
    }

    .krespaluniDailyJointContourHeroImage {
        height: 500px; /* Specific height for desktop hero image */
        object-fit: cover;
    }

    .krespaluniDailyJointContourPriceCard {
        max-width: 280px; /* Allow four cards per row without being too cramped */
    }

    .krespaluniDailyJointContourBenefitImage {
        height: 400px; /* Specific height for desktop benefit image */
        object-fit: cover;
    }

    .krespaluniDailyJointContourAudienceItem {
        max-width: 300px; /* Three per row */
    }
}