/*
 * Neurawave brand override for the constimes template.
 * Loaded after bootstrap.min.css / style.min.css / responsive.min.css.
 * The template consumes its brand colors via CSS custom properties in
 * :root (see style.min.css), so overriding them here recolors the whole
 * template without touching the vendored/minified files.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --color-orange: #009688;  /* was #d38e25 -> Neurawave secondary teal */
    --color-orange2: #33AF9F; /* was #ffba08 -> teal hover/highlight shade */
    --color-black: #000052;   /* was #15222c -> Neurawave primary navy */
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

.response.error {
    color: #D52D38;
}

/* Contact page: info sits beside the form (Bootstrap grid) and the map moves
   below, full width - overrides constimes' fixed 30%/70% side-by-side widths,
   which apply to these classes regardless of their parent wrapper. */
.contact-us .contact-left,
.contact-us .contact-map {
    width: 100%;
}

/* contact-info-item rows (contact page sidebar + footer "get in touch") are a
   flex row of a fixed-size icon and a text column. A long unbroken value (e.g.
   a long email address) has no wrap point, so the flexbox shrinks the icon to
   fit instead - lock the icon size and let the text wrap/break instead. */
.contact-us .contact-left li .my-icon,
.get-touch li .my-icon {
    flex-shrink: 0;
}

.contact-us .contact-left li .content,
.get-touch li .content {
    min-width: 0;
}

.contact-us .contact-left li .content h6,
.get-touch li .content h6 {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Minimalist service card (icon on top, title, short description, pill CTA) -
   replaces constimes' image-header card entirely, so none of the vendored
   .services-header/.services-img/.sev-link rules apply to this markup any
   more. Self-contained: works on both the light-gray (.services.v2, home)
   and white (.services.v3, listing page) section backgrounds via its own
   background + shadow, independent of the section wrapper. */
.services-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 40px 30px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 82, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 82, 0.1);
}

.services-card .services-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 150, 136, 0.08);
}

.services-card .services-icon .my-icon {
    font-size: 32px;
    color: var(--color-orange);
}

.services-card .services-text {
    /* neutralise constimes' own .services-card .services-text rule (padding:
       30px, background: white, border-radius), which was written for the old
       image-header card and would otherwise stack on top of this card's own
       padding. */
    padding: 0;
    background: none;
    border-radius: 0;
    min-width: 0;
}

.services-card .services-text h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-black);
    margin-bottom: 10px;
}

.services-card .services-text p {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-gBlack);
    margin-bottom: 0;
}

.services-card .services-btn {
    margin-top: auto;
    padding: 10px 26px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-orange);
    background: var(--color-white);
    border: 1px solid var(--color-orange);
    border-radius: 999px;
    transition: all 0.3s ease;
}

.services-card .services-btn:hover {
    color: var(--color-white);
    background: var(--color-orange);
}

/* Compact top-bar: constimes ships this strip at the same text/icon size and
   padding as the rest of the site (16px text, 15px vertical padding), which
   reads as oversized for what is just a contact-info strip above the main
   menu. Scale it down across text, icons, and the gaps between items. */
.top-bar.v1 {
    padding: 6px 0;
}

.top-bar.v1 p {
    font-size: 12px;
    line-height: 1.4;
}

.top-bar .my-icon {
    font-size: 12px;
}

.top-bar .my-icon ~ p {
    margin-left: 6px;
}

.top-bar .info-link ul {
    gap: 16px;
}

.top-bar .social-link ul {
    gap: 14px;
}

.top-bar .social-link a {
    font-size: 12px;
}

/* Footer texture: constimes only wires footer-shap.png into the (unused)
   .info-footer.v2 variant. Our footer markup is .info-footer.v1, so replicate
   the same background-texture overlay there instead of switching variants
   (v2 also recolors the social icons, which isn't wanted here). */
.info-footer.v1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.info-footer.v1:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/footer-img/footer-shape3.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    z-index: -1;
}

/* Blog sidebar "Recent Post" widget: constimes sizes the .post-img wrapper to
   75px but never constrains the <img> itself - its demo thumbnails happened
   to already be small files, but our seeded featured images are full-size
   hero photos, so they render at native size and overflow the 75px box. */
.widgets .post-list .post-img img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 5px;
}