body {
    font-family: 'Poppins', sans-serif;
}

* {
    box-sizing: border-box;
}

.container {
    max-width: 1200px;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #2d3748; /* bg-gray-800 */
}

::-webkit-scrollbar-thumb {
    background: #8b5cf6; /* purple-500 */
    border-radius: 4px;
}

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

/* Hero Section Animations */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-up.delay-200 {
    animation-delay: 0.2s;
}

.animate-fade-in-up.delay-400 {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Timeline Item Styling */
.timeline-item {
    position: relative;
}

.timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item .md\:w-1\/2 {
    position: relative;
    z-index: 10;
}

.timeline-item .w-10 {
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .timeline-item:nth-child(odd) .md\:w-1\/2:first-child {
        order: 1;
    }
    .timeline-item:nth-child(odd) .md\:w-1\/2:last-child {
        order: 2;
    }
    .timeline-item:nth-child(even) .md\:w-1\/2:first-child {
        order: 2;
    }
    .timeline-item:nth-child(even) .md\:w-1\/2:last-child {
        order: 1;
    }
}

/* Service Card Styling */
.service-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Typography */
h1 {
    font-size: 2.5rem; /* Mobile */
}

h2 {
    font-size: 2rem; /* Mobile */
}

h3 {
    font-size: 1.5rem; /* Mobile */
}

@media (min-width: 768px) {
    h1 {
        font-size: 4rem; /* Tablet */
    }
    h2 {
        font-size: 3rem; /* Tablet */
    }
    h3 {
        font-size: 2rem; /* Tablet */
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 5rem; /* Desktop */
    }
    h2 {
        font-size: 4rem; /* Desktop */
    }
    h3 {
        font-size: 2.25rem; /* Desktop */
    }
}

/* Navigation Title/Logo */
nav .text-xl {
    font-size: 1.25rem; /* Mobile */
}

nav .text-2xl {
    font-size: 1.5rem; /* Tablet */
}

@media (min-width: 768px) {
    nav .text-xl {
        font-size: 1.5rem; /* Tablet */
    }
    nav .text-2xl {
        font-size: 1.75rem; /* Desktop */
    }
}

@media (min-width: 1024px) {
    nav .text-xl {
        font-size: 1.75rem; /* Desktop */
    }
    nav .text-2xl {
        font-size: 2rem; /* Desktop */
    }
}

/* Cookie Banner and Modal Specific Styles */
#cookie-banner.show {
    transform: translateY(0);
    display: block;
}

#cookie-modal.show {
    opacity: 1;
    display: flex;
}

#cookie-modal.show > div {
    transform: scale(1);
}

.form-checkbox:checked {
    background-color: #8b5cf6; /* purple-500 */
    border-color: #8b5cf6; /* purple-500 */
}

.form-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5); /* purple-500 with opacity */
}

.form-checkbox:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}/*
 * Base styles for the .dataTrustFrame container.
 * Provides internal padding and top margin for separation.
 */
.dataTrustFrame {
    margin-top: 2em; /* Space above the entire dataTrustFrame block */
    padding: 1.5em 2em; /* Internal padding for content within the frame */
    /* Consider adding a background-color or border here if needed for visual distinction */
    /* background-color: #f9f9f9; */
    /* border: 1px solid #e0e0e0; */
    /* border-radius: 8px; */
}

/*
 * Heading styles for h1-h5 within .dataTrustFrame.
 * Designed for a moderate, readable hierarchy without excessively large fonts.
 */
.dataTrustFrame h1 {
    font-size: 1.8em; /* Main title, not overly large */
    line-height: 1.2; /* Tighter line height for headings */
    margin-top: 0; /* Remove default top margin if it's the first element in the frame */
    margin-bottom: 0.8em; /* Space below the heading */
    font-weight: 700; /* Strong bold */
}

.dataTrustFrame h2 {
    font-size: 1.6em; /* Secondary heading */
    line-height: 1.2;
    margin-top: 1.5em; /* Space above if preceded by other content */
    margin-bottom: 0.7em;
    font-weight: 600; /* Semi-bold */
}

.dataTrustFrame h3 {
    font-size: 1.4em; /* Tertiary heading */
    line-height: 1.3;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-weight: 600;
}

.dataTrustFrame h4 {
    font-size: 1.2em; /* Minor heading */
    line-height: 1.4;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 500; /* Medium weight */
}

.dataTrustFrame h5 {
    font-size: 1.1em; /* Sub-heading, slightly larger than body text */
    line-height: 1.4;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    font-weight: 500;
}

/*
 * Paragraph styles within .dataTrustFrame.
 * Focus on readability with standard font size and good line height.
 */
.dataTrustFrame p {
    font-size: 1em; /* Standard body text size */
    line-height: 1.6; /* Generous line height for readability */
    margin-bottom: 1em; /* Space between paragraphs */
}

/*
 * Unordered list styles within .dataTrustFrame.
 * Provides standard bullet points and appropriate spacing/indentation.
 */
.dataTrustFrame ul {
    list-style: disc; /* Default bullet style */
    margin-top: 1em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 1.8em; /* Indentation for bullet points */
}

/*
 * List item styles within .dataTrustFrame.
 * Ensures consistent text size and spacing between list items.
 */
.dataTrustFrame 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 individual list items */
}
.timeline-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.icon-box {
    width: 44px;
    height: 44px;
    background-color: rgb(126, 34, 206);
    color: white;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.5);
    font-size: 20px;
}

/* Mobile: timeline on left */
@media (max-width: 768px) {
    .timeline-icon {
        left: -4px;
        transform: translateX(0);
    }
}