/* static/css/main.css */

/* Global smooth scroll for anchor links if desired */
html {
    scroll-behavior: smooth;
}

/* Pricing Section Styles (Moved from index.html) */
.pricing-section .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
    border-width: 2px; /* Make border highlight more prominent */
}

.pricing-section .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.pricing-section .card-header {
    font-family: 'Montserrat', sans-serif; /* Example: Ensure consistent font */
}
.pricing-section .card-header h4 {
    font-size: 1.5rem;
    font-weight: 600;
}
.pricing-section .card-header small {
    font-size: 0.9rem;
    opacity: 0.8;
}

.pricing-card-title {
    font-family: 'Montserrat', sans-serif; /* Example */
    font-size: 2.8rem; /* Larger price */
    font-weight: 700;
    /* color: var(--text-color-primary); /* If using CSS vars globally */
}
.pricing-card-title .text-muted { /* For /month or /year */
    font-size: 1rem;
    font-weight: 400;
}

.pricing-section .list-unstyled li {
    font-size: 0.95rem;
}
/* .pricing-section .list-unstyled i.fa-check { } */ /* text-success handles color */
/* .pricing-section .list-unstyled i.fa-plus { } */

.pricing-section hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    opacity: 0.15;
}

.pricing-section .btn {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Add any other global styles or styles from your old style.css here */
/* For example, styles from the original style.css provided earlier: */
body {
    padding-top: 56px; /* Adjust if navbar height changes, or use CSS var for navbar height */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif; /* Example global font */
}

main.container, .container-fluid { /* Target both types of containers */
   flex: 1; /* Makes the main content area grow */
   width: 100%; /* Ensure full width for container-fluid */
}

footer.site-footer { /* Add a class to your footer element in base.html */
    margin-top: auto; /* Pushes footer down */
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #343a40; /* Example dark footer */
    color: #f8f9fa;
}

/* Style for form fieldsets if you want them globally */
fieldset legend.h5 { /* More specific selector */
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
}
/* static/css/main.css or page-specific CSS */

.hero-section-gradient {
    min-height: 90vh; /* Adjust for desired height */
    padding-top: 80px; /* Space from navbar */
    padding-bottom: 80px;
    position: relative; /* For overlay and scroll indicator */
}

.gradient-overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    z-index: 1;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-section-gradient .display-3 {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive font size */
}

.hero-section-gradient .lead {
    font-weight: 300;
}

.hero-section-gradient .btn-light.text-primary {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}
.hero-section-gradient .btn-light.text-primary:hover {
    background-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.hero-section-gradient .btn-outline-light {
    border-width: 2px;
    transition: all 0.3s ease;
}
.hero-section-gradient .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}


.scroll-indicator-gradient {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* Above overlay but below content if needed */
}
.scroll-indicator-gradient i {
    animation: bounceArrow 2s infinite;
}

@keyframes bounceArrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
html {
    scroll-behavior: smooth;
}