/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

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

/* Responsive Typography */
h1 {
    font-size: 2.5rem; /* Desktop */
}
@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 2.2rem; /* Tablet */
    }
}
@media (max-width: 767px) {
    h1 {
        font-size: 1.8rem; /* Mobile */
    }
}

h2 {
    font-size: 2.2rem; /* Desktop */
}
@media (min-width: 768px) and (max-width: 1023px) {
    h2 {
        font-size: 2rem; /* Tablet */
    }
}
@media (max-width: 767px) {
    h2 {
        font-size: 1.6rem; /* Mobile */
    }
}

h3 {
    font-size: 1.8rem; /* Desktop */
}
@media (min-width: 768px) and (max-width: 1023px) {
    h3 {
        font-size: 1.6rem; /* Tablet */
    }
}
@media (max-width: 767px) {
    h3 {
        font-size: 1.4rem; /* Mobile */
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1a202c; /* Dark background for track */
}

::-webkit-scrollbar-thumb {
    background: #8b5cf6; /* Purple for thumb */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a78bfa; /* Lighter purple on hover */
}

/* Animations */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.animate-fade-in-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.animate-fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-fade-in-up-delay {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.animate-fade-in-up-delay-2 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out 0.2s, transform 0.7s ease-out 0.2s;
}
.animate-fade-in-up-delay-3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out 0.4s, transform 0.7s ease-out 0.4s;
}
.animate-fade-in-up-delay-4 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;
}
.animate-fade-in-up-delay-5 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out 0.8s, transform 0.7s ease-out 0.8s;
}
.animate-fade-in-up-delay-6 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out 1s, transform 0.7s ease-out 1s;
}
.animate-fade-in-up-delay-7 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out 1.2s, transform 0.7s ease-out 1.2s;
}

/* Path animation for How It Works section */
.path-animation {
    stroke-dashoffset: 1000;
    animation: dash 1.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/* Specific overrides for select elements */
select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0aec0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.6c0%204.8%201.8%209.1%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.9%205.4s9.3-1.8%2012.9-5.4L287%2095.5a17.6%2017.6%200%200%200%205.4-12.9c0-4.8-1.8-9.1-5.4-12.9z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.8em 0.8em;
    padding-right: 2.5rem;
}

/* Mobile Menu Overlay */
#mobile-menu-overlay.transform-none {
    transform: translateX(0);
}

/* Cookie Banner */
#cookie-banner.transform-none {
    transform: translateY(0);
}

/* FAB Button */
#scroll-to-top-btn.scale-100 {
    transform: scale(1) translateY(-10px); /* Lift slightly above messenger icon */
    opacity: 1;
}

/* Cookie Modal specific z-index for scrollbar */
#cookie-settings-modal .max-h-[90vh] {
    max-height: 90vh;
}

/* Ensure buttons don't have underlines */
button {
    text-decoration: none !important;
}
/*
 * Base styles for the .userClauseNet container
 * Provides top margin and side padding for content readability.
 */
.userClauseNet {
    margin-top: 2rem; /* Spacing above the content block */
    padding-left: 1.5rem; /* Padding on the left side */
    padding-right: 1.5rem; /* Padding on the right side */
}

/*
 * Stock styles for headings (h1-h5)
 * Designed for moderate font sizes and good vertical rhythm.
 */
.userClauseNet h1 {
    font-size: 2em; /* Moderate heading size */
    line-height: 1.2; /* Tighter line height for headings */
    margin-top: 1.5em; /* Space above h1 */
    margin-bottom: 0.8em; /* Space below h1 */
    font-weight: 700; /* Bold font weight */
    color: #fff; /* Darker color for prominence */
}

.userClauseNet h2 {
    font-size: 1.6em; /* Moderate heading size */
    line-height: 1.3;
    margin-top: 1.4em;
    margin-bottom: 0.7em;
    font-weight: 700;
    color: #fff;
}

.userClauseNet h3 {
    font-size: 1.3em; /* Moderate heading size */
    line-height: 1.4;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-weight: 700;
    color: #fff;
}

.userClauseNet h4 {
    font-size: 1.1em; /* Moderate heading size, slightly larger than body text */
    line-height: 1.5;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 700;
    color: #fff;
}

.userClauseNet h5 {
    font-size: 1em; /* Similar to body text size, but bold */
    line-height: 1.5;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    font-weight: 700;
    color: #fff;
}

/*
 * Stock styles for paragraphs (p)
 * Ensures good readability and spacing between paragraphs.
 */
.userClauseNet p {
    font-size: 1em; /* Base font size for body text */
    line-height: 1.6; /* Optimal line height for readability */
    margin-bottom: 1em; /* Space between paragraphs */
    color: #fff; /* Slightly lighter than headings for body text */
}

/*
 * Stock styles for unordered lists (ul) and list items (li)
 * Provides standard bullet points, indentation, and spacing.
 */
.userClauseNet ul {
    list-style-type: disc; /* Default bullet style */
    margin-top: 1em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 1.5em; /* Indentation for bullet points */
    color: #fff;
}

.userClauseNet li {
    font-size: 1em; /* Inherit or explicitly set to body text size */
    line-height: 1.6; /* Consistent line height with paragraphs */
    margin-bottom: 0.5em; /* Space between list items */
    color: #fff;
}