@import "variables.css";
@import "reset.css";
@import "responsive-mixins.css";
@import "./landing_page/about.css";
@import "./landing_page/faqs.css";
@import "./landing_page/features.css";
@import "./landing_page/header.css";
@import "./landing_page/hero.css";
@import "./landing_page/plans.css";
@import "./landing_page/testimonials.css";
@import "./landing_page/contact.css";
@import "./landing_page/footer.css";

.dotted-hr {
    border: none;
    border-top: 1px dotted #E9E9E9;
}

.section-title {
    text-transform: uppercase;
    font-family: var(--font-family-heading), sans-serif;
    font-weight: 800;
    color: var(--text-color);
    margin-block: 2rem;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .section-title {
        margin-block: 0;
    }
}

.highlight {
    display: inline-block;
    /* Replace with your desired gradient colors */
    background: linear-gradient(
            to right,
            #0D99FF 0%,
            #FFFFFF 100%
    );

    /* This is the trick for gradient text */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* standard property */
    color: transparent;    /* fallback if needed */
}