/* General styles */
body {
    font-family: 'Open Sans', sans-serif;
    color: #e2e8f0; /* Light gray for general text */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: #ffffff; /* White for headings */
}

/* Custom utility classes */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, #3B82F6, #10B981, #F59E0B); /* Blue, Green, Yellow gradient */
    border-radius: 9999px;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Navbar specific styles */
.nav-link {
    position: relative;
    padding-bottom: 5px;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #10B981; /* Green */
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
    width: 100%;
}

/* Button styles */
.btn-primary {
    text-decoration: none; /* Remove underline for buttons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

/* Hero section parallax effect */
#hero {
    background-attachment: fixed; /* For parallax effect */
}

/* Service Section SVG Path Animation */
.service-step {
    min-height: 250px; /* Ensure equal height for steps */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* How It Works Section SVG Path Animation */
.how-it-works-step {
    min-height: 280px; /* Ensure equal height for steps */
}

/* Path animation for SVG */
.path-animation {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 2s ease-out forwards;
    animation-play-state: paused; /* Controlled by JS */
    animation-fill-mode: forwards;
}

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

/* Portfolio grid for Masonry-like effect (using flex for equal height for now) */
.portfolio-item {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure flex items fill grid cell height */
}
.portfolio-item img {
    flex-shrink: 0; /* Image should not shrink */
}
.portfolio-item .p-5 {
    flex-grow: 1; /* Content area should grow to fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom if content is short */
}

/* Stat cards */
.stat-card {
    min-width: 250px; /* Ensure minimum width for smaller screens */
    flex: 1 1 calc(25% - 2rem); /* For 4 columns, adjust gap */
    box-sizing: border-box;
}
@media (max-width: 1023px) { /* lg breakpoint */
    .stat-card {
        flex: 1 1 calc(50% - 1rem); /* 2 columns */
    }
}
@media (max-width: 639px) { /* sm breakpoint */
    .stat-card {
        flex: 1 1 100%; /* 1 column */
    }
}

/* Events slider */
.swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto; /* Allow height to adjust based on content */
}
.swiper-slide img {
    flex-shrink: 0;
}
.swiper-slide .p-8 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Gallery timeline */
.gallery-item {
    position: relative;
    /* For grid layout, ensure consistent height if content varies */
    display: flex;
    flex-direction: column;
    height: 100%;
}
.gallery-item img {
    flex-shrink: 0;
}
.gallery-item p {
    flex-grow: 1;
}

/* Cookie modal specific animations */
#cookie-consent-modal #cookie-settings {
    transition: all 0.4s ease-in-out;
}

/* Generic modal animation */
.modal-open > div:first-child { /* Targets the inner modal content */
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Animation for newsletter icon */
.animate-bounce-slow {
    animation: bounceSlow 3s infinite ease-in-out;
}

@keyframes bounceSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
/* New styles for typography within the .rightsCloudWrap container */

/* Container for general content, providing internal padding and centering */
.rightsCloudWrap {
    padding-top: 4rem; /* Top padding for the content block */
    padding-left: 1.5rem; /* Left padding */
    padding-right: 1.5rem; /* Right padding */
    max-width: 960px; /* Maximum width for content, similar to a text column */
    margin-left: auto; /* Center the block horizontally */
    margin-right: auto; /* Center the block horizontally */
}

/* Heading 1 styles */
.rightsCloudWrap h1 {
    font-size: 2.25rem; /* ~36px, moderate size */
    line-height: 1.2; /* Tighter line height for headings */
    margin-top: 2.5rem; /* Top margin for separation from preceding content */
    margin-bottom: 1.5rem; /* Bottom margin to separate from following text */
    color: #ffffff; /* White color for headings */
}

/* Heading 2 styles */
.rightsCloudWrap h2 {
    font-size: 1.875rem; /* ~30px */
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    color: #ffffff;
}

/* Heading 3 styles */
.rightsCloudWrap h3 {
    font-size: 1.5rem; /* ~24px */
    line-height: 1.35;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

/* Heading 4 styles */
.rightsCloudWrap h4 {
    font-size: 1.25rem; /* ~20px */
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

/* Heading 5 styles */
.rightsCloudWrap h5 {
    font-size: 1.125rem; /* ~18px */
    line-height: 1.45;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

/* Paragraph styles */
.rightsCloudWrap p {
    font-size: 1rem; /* Base font size, ~16px */
    line-height: 1.6; /* Comfortable line height for readability */
    margin-bottom: 1rem; /* Space between paragraphs */
    color: #e2e8f0; /* Light gray for general text */
}

/* Unordered list styles */
.rightsCloudWrap ul {
    list-style-type: disc; /* Standard disc bullet points */
    padding-left: 1.5rem; /* Indentation for bullet points */
    margin-top: 1rem; /* Space above the list */
    margin-bottom: 1rem; /* Space below the list */
    color: #e2e8f0; /* Inherit text color for list content */
}

/* List item styles */
.rightsCloudWrap li {
    font-size: 1rem; /* Inherit base font size */
    line-height: 1.6; /* Consistent line height with paragraphs */
    margin-bottom: 0.5rem; /* Space between list items */
}

/* Remove bottom margin from the last paragraph or list in a sequence */
.rightsCloudWrap p:last-child,
.rightsCloudWrap ul:last-child,
.rightsCloudWrap li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {

    #hero {
        background-attachment: scroll; /* Disable parallax on mobile for performance */
        height: 77vh;
    }

    #footer {
        position: relative !important; /* Override fixed positioning on small screens */
        text-align: center; /* Center footer text on small screens */
    }

    .foot-s {
        position: relative !important; /* Override fixed positioning on small screens */
        text-align: center; /* Center footer text on small screens */
    }
    

}