/* Ensure this is placed in the CSS section of your HubSpot module or theme stylesheet */
/* Import Roboto font (ensure it's loaded in your HubSpot theme) */
@import url('[https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap](https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap)');

/* --- HYPR Pull Quote Module Styles --- */
.hypr-pull-quote-module {
    font-family: 'Roboto', sans-serif;
    padding: 40px 20px; /* Vertical and horizontal padding */
    margin: 40px auto; /* Centering and space around the module */
    max-width: 750px; /* Max width for readability */
    position: relative; /* For positioning pseudo-elements like the quote mark */
    background-color: #ffffff; /* Assuming a light page background, or make transparent if page bg is sufficient */
    border-left: 5px solid #1a1288; /* HYPR Dark Blue accent border */
}

/* Large Quotation Mark Styling */
.hypr-pull-quote-module::before {
    content: '“'; /* Unicode for left double quotation mark */
    font-family: 'Georgia', serif; /* A classic serif for quote marks, or use Roboto Black */
    font-size: 6em; /* Large size for impact */
    font-weight: 900; /* Make it bold */
    color: #e5b364; /* HYPR Gold for the quote mark */
    position: absolute;
    top: -15px; /* Adjust for vertical alignment with new padding */
    left: 10px; /* Position near the border, slightly offset by padding */
    opacity: 0.7; /* Slightly transparent for subtlety */
    line-height: 1;
    z-index: 0; /* Behind the text */
    user-select: none; /* Prevent text selection of the quote mark */
}

.hypr-quote-content {
    position: relative; /* To ensure it's above the pseudo-element */
    z-index: 1;
    padding-left: 55px; /* Space for the quote mark to breathe, adjusted for new quote mark pos */
}

.hypr-quote-text {
    font-size: 1.6em; /* Prominent quote text */
    font-weight: 300; /* Lighter weight for modern feel */
    color: #333333; /* Dark gray for readability */
    line-height: 1.5;
    margin-bottom: 25px;
    font-style: italic; /* Common for pull quotes */
}

.hypr-quote-attribution {
    font-size: 1em;
    font-weight: 400;
    color: #555555; /* Slightly lighter gray for attribution */
    text-align: right;
}

.hypr-quote-attribution .name {
    font-weight: 700;
    color: #1a1288; /* HYPR Dark Blue for the name */
    display: block; /* Name on its own line */
    margin-bottom: 3px;
}

.hypr-quote-attribution .title-company {
    font-size: 0.9em;
    color: #777777;
}

/* Optional: Company Logo within attribution */
.hypr-quote-company-logo {
    display: block; /* Or inline-block if next to text */
    max-height: 30px; /* Adjust as needed */
    width: auto;
    margin-top: 8px;
    /* float: right; /* If you want it aligned with attribution text */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hypr-pull-quote-module {
        padding: 30px 15px;
        margin: 30px auto;
    }
    .hypr-pull-quote-module::before {
        font-size: 5em;
        left: 5px; /* Adjusted */
        top: -10px; /* Adjusted */
    }
    .hypr-quote-content {
        padding-left: 45px; /* Adjusted */
    }
    .hypr-quote-text {
        font-size: 1.4em;
    }
    .hypr-quote-attribution {
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .hypr-pull-quote-module::before {
        font-size: 4em;
        left: 0px; /* Adjusted */
        top: -5px; /* Adjusted */
    }
    .hypr-quote-content {
        padding-left: 35px; /* Adjusted */
    }
    .hypr-quote-text {
        font-size: 1.2em;
    }
}