/* Home (Bangladesh) page styles */
.remark-page--home-bd {
    background-color: var(--remark-color-bg);
}

/* Hero */
.remark-home-bd-hero.remark-section {
    padding: 100px 20px 0;
    min-height: 780px;
    background-color: var(--remark-color-bg-alt);
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Set initial state for GSAP animations to prevent FOUC */
.remark-home-bd-hero__badge,
.remark-home-bd-hero__title,
.remark-home-bd-hero__subtitle,
.remark-home-bd-hero__cta-wrapper,
.remark-home-bd-hero__media {
    opacity: 0;
    /* Keep opacity for a smooth fade-in */
    transform: translateY(40px);
}


.remark-home-bd-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.remark-home-bd-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--remark-color-white);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--remark-font-body);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.remark-home-bd-hero__highlight,
.remark-home-bd-hero__badge-text {
    background-image: linear-gradient(90deg, var(--remark-color-highlight-start), var(--remark-color-highlight-end));
    background-size: 200% 100%;
    background-position: 200% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.remark-home-bd-hero__title {
    width: clamp(540px, 70vw, 1000px);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 400;
    line-height: 1.05;
    color: var(--remark-color-primary);
}

.remark-home-bd-hero__title-line {
    display: block;
    font-size: clamp(2.4rem, 4vw, 4rem);
}

.remark-home-bd-hero__highlight {
    background-image: linear-gradient(90deg, var(--remark-color-highlight-start), var(--remark-color-highlight-end));
    background-size: 200% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.remark-home-bd-hero__subtitle {
    margin: 0;
    width: clamp(360px, 45vw, 540px);
    font-family: var(--remark-font-body);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    color: var(--remark-color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Standard property for broader compatibility */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.remark-home-bd-hero__cta-wrapper {
    display: inline-flex;
}

.remark-home-bd-hero__media {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1280px;
    height: auto;
    z-index: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.remark-home-bd-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 48px 48px 16px 16px;
    object-fit: cover;
}

.remark-home-bd-hero__title--mobile {
    display: none;
}

/* Brands */
.remark-home-bd-brands.remark-section {
    padding: 120px 24px;
    background-color: var(--remark-color-white);
}

.remark-home-bd-brands__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.remark-home-bd-brands__layout {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.remark-home-bd-brands__stats {
    flex: 0 0 320px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.remark-home-bd-brands__card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-radius: 28px;
    background: linear-gradient(90deg, #FFF9F8 0%, #FBF1EC 100%);
    box-shadow: none;
}

.remark-home-bd-brands__icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background-color: var(--remark-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    flex-shrink: 0;
}

.remark-home-bd-brands__icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.remark-home-bd-brands__icon span {
    font-family: var(--remark-font-title);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--remark-color-primary);
}

.remark-home-bd-brands__card-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.remark-home-bd-brands__card-value {
    font-family: var(--remark-font-title);
    font-weight: 400;
    font-size: 1.8rem;
    color: #161D29;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.remark-home-bd-brands__card-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--remark-color-text-muted);
}

.remark-home-bd-brands__content {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.remark-home-bd-brands__title {
    margin: 0;
    font-size: clamp(2.2rem, 2.8vw, 3rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--remark-color-primary);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.remark-home-bd-brands__title-line {
    display: block;
}

.remark-home-bd-brands__summary {
    margin: 0;
    max-width: 540px;
    font-family: var(--remark-font-body);
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
    line-height: 1.6;
    color: var(--remark-color-primary);
}

.remark-home-bd-brands__cta-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Logo Marquee */
.remark-home-bd-brands__logo-marquee {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 0;
}

.remark-home-bd-brands__logo-row {
    display: flex;
    width: fit-content;
}

.remark-home-bd-brands__logo-row--2 {
    margin-top: 20px;
}

.remark-home-bd-brands__logo-slide {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 10px;
    flex-shrink: 0;
}

.remark-home-bd-brands__logo-link {
    display: block;
    text-decoration: none;
}

.remark-home-bd-brands__logo-wrapper {
    width: 160px;
    height: 140px;
    border: 1px solid #E3E5EF;
    border-radius: 16px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.remark-home-bd-brands__logo-item {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* Promo 1 */
.remark-home-bd-promo-1 {
    background-color: #00357A;
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCIgdmlld0JveD0iMCAwIDE0NCAxNDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iLTE1LjExOSIgeT0iNzEuODQwNiIgd2lkdGg9IjEyMy40OTQiIGhlaWdodD0iMTIzLjQ5NCIgcng9IjQxIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgLTE1LjExOSA3MS44NDA2KSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCIgdmlld0JveD0iMCAwIDE0NCAxNDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iLTE1LjExOSIgeT0iNzEuODQwNiIgd2lkdGg9IjEyMy40OTQiIGhlaWdodD0iMTIzLjQ5NCIgcng9IjQxIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgLTE1LjExOSA3MS44NDA2KSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: 70% calc(100% + 50px), calc(100% + 50px) 20px;
    background-size: 144px, 216px;
}

.remark-home-bd-promo-1__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    position: relative;
}

.remark-home-bd-promo-1__content {
    grid-column: 1 / 7;
    grid-row: 1;
    padding: 60px 60px 60px 34px;
    position: relative;
    z-index: 1;
}

.remark-home-bd-promo-1__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(7 / 6 * 100%);
    height: 100%;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    border-radius: 16px;
    z-index: -1;
}

.remark-home-bd-promo-1__media {
    grid-column: 7 / 13;
    grid-row: 1;
}

.remark-home-bd-promo-1__title {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.2;
}

.remark-home-bd-promo-1__title-line {
    display: block;
}

.remark-home-bd-promo-1__subtitle {
    color: #ffffff;
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 0 0 30px;
}

.remark-home-bd-promo-1__image {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

@media (max-width: 1100px) {
    .remark-home-bd-brands__layout {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .remark-home-bd-brands__stats {
        width: 100%;
        max-width: 520px;
    }

    .remark-home-bd-brands__content {
        align-items: center;
        text-align: center;
    }

    .remark-home-bd-brands__summary {
        max-width: 100%;
    }

    .remark-home-bd-brands__cta-wrapper {
        justify-content: center;
    }
}

.remark-home-bd-brands__card-value-number {
    display: inline-block;
    line-height: 1;
}

.remark-home-bd-brands__card-value-text {
    display: inline-block;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-transform: uppercase;
    color: inherit;
}

@media (min-width: 992px) {
    .remark-home-bd-hero__image {
        width: 65%;
    }
}

@media (max-width: 640px) {
    .remark-home-bd-hero__title--desktop {
        display: none;
    }

    .remark-home-bd-hero__title--mobile {
        display: flex;
        /* Let the section/container control horizontal padding (20px left/right).
           Make the title fill the inner container so it will naturally respect the
           20px mobile padding applied to the sections elsewhere in this file. */
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* Prevent individual title lines from wrapping on mobile so the JS can
       size each line as a single unbroken string. The JS will then scale
       font-size and distribute spacing to make the text fill the container. */
    .remark-home-bd-hero__title--mobile .remark-home-bd-hero__title-line {
        white-space: nowrap;
        display: inline-block;
    }

    /* Scale the title lines on small screens so the text fits within the padded container.
       clamp(min, preferred, max) keeps the size responsive while preventing it from
       becoming too small or too large. Adjust values if you want different scaling. */
    .remark-home-bd-hero__title--mobile .remark-home-bd-hero__title-line {
        font-size: clamp(1.4rem, 6.5vw, 2.4rem);
        line-height: 1.05;
        /* Prevent wrapping — we size lines via JS as unwrapped strings */
        white-space: nowrap;
        /* keep normal word-break behavior */
        word-break: normal;
        display: inline-block;
        /* ensure inline-block if earlier rules set block */
    }

    /* Mobile subtitle: show full text, left aligned, no clamp/ellipsis */
    .remark-home-bd-hero__inner>p,
    .remark-home-bd-hero__subtitle {
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        max-height: none !important;
        max-width: none !important;
        width: 100% !important;
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .remark-home-bd-promo-1__inner {
        grid-template-columns: 1fr;
        background-color: rgba(255, 255, 255, 0.16);
        border-radius: 16px;
        padding: 40px 24px;
    }

    .remark-home-bd-promo-1__content,
    .remark-home-bd-promo-1__media {
        grid-column: 1;
        grid-row: auto;
    }

    .remark-home-bd-promo-1__content {
        order: 2;
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }

    .remark-home-bd-promo-1__media {
        order: 1;
    }

    .remark-home-bd-promo-1__content::before {
        display: none;
    }
}

/* Remove padding from CTA content for the specific section (4538244) */
body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent>div>div>section>div>div.remark-home-bd-cta__content,
body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-cta__content {
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Hide CTA image on mobile and center content inside CTA section */
@media (max-width: 640px) {

    /* Hide the media block that contains the image */
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent>div>div>section .remark-home-bd-cta__media,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-cta__media {
        display: none !important;
    }

    /* Center content (text and CTA) horizontally */
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent>div>div>section .remark-home-bd-cta__content,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-cta__content,
    .remark-home-bd-cta.remark-section--home-bd .remark-home-bd-cta__content {
        text-align: center !important;
        align-items: center !important;
        /* since content is a flex column */
        justify-content: center !important;
    }

    /* Make the CTA wrapper center the button */
    .remark-home-bd-cta__cta-wrapper {
        display: inline-flex !important;
        justify-content: center !important;
        width: 100%;
        margin: 0 auto !important;
    }

    /* Ensure button is centered and not full-width */
    .remark-home-bd-cta__button {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Zero top padding for the "Discover Our Story" section on mobile */
@media (max-width: 640px) {

    body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent>div>div>section,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section {
        padding-top: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Make certificates grid show two items per row on mobile */
@media (max-width: 640px) {

    /* More specific selector including the elementor container */
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-2306a8b.e-con-full.e-flex.e-con.e-parent>div>div>section>div>div,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-2306a8b.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div,
    /* A more maintainable selector using the component classes */
    .remark-home-bd-certificates .remark-home-bd-certificates__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        /* reduce gap to fit two nicely */
        justify-items: center !important;
    }

    .remark-home-bd-certificates .remark-home-bd-certificates__item {
        width: 100% !important;
        /* grid cell should occupy full column */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .remark-home-bd-certificates .remark-home-bd-certificates__image {
        /* Mobile: cap to 120x120 and center */
        max-width: 120px !important;
        max-height: 120px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* Ensure promo-1 title uses Inter 28px on mobile and has 30px top padding.
   Use the class selector for reliability (Elementor markup can vary). */
@media (max-width: 640px) {
    .remark-home-bd-promo-1__title {
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        padding-top: 30px !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Make promo-1 title behave like a paragraph on mobile: ignore hard line-breaks
   Convert the title container from flex/column to normal block flow and make
   any title-line elements inline so text wraps naturally. */
@media (max-width: 640px) {
    .remark-home-bd-promo-1__title {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        /* remove flex gap if inherited */
        text-align: left !important;
    }

    /* If the markup uses .remark-home-bd-promo-1__title-line spans/blocks,
       make them inline so they behave like words in a paragraph. */
    .remark-home-bd-promo-1__title-line,
    .remark-home-bd-promo-1__title>span,
    .remark-home-bd-promo-1__title>strong,
    .remark-home-bd-promo-1__title>em {
        display: inline !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure highlighted inline text keeps intended weight and smoothing */
    .remark-home-bd-promo-1__title .remark-home-bd-hero__highlight {
        font-weight: 700 !important;
        -webkit-font-smoothing: antialiased !important;
    }
}

.remark-home-bd-promo-1__cta.button--stroke {
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    color: var(--remark-color-primary);
    background-color: var(--remark-color-white);
}

/*
==========================================================================
  Button Component
==========================================================================

  The interactive button animation is powered by GSAP and is initialized
  in `page.anim.js`. It targets any element with the `data-block="button"`
  attribute.

  Required HTML Structure:
  <a href="..." class="button" data-block="button">
      <span class="button__flair"></span>
      <span class="button__label">Button Text</span>
  </a>

  How it works:
  - The `.button` is the main container, which must have `position: relative`
    and `overflow: hidden`.
  - The `.button__flair` is an empty span that holds the animated pseudo-element.
    GSAP moves and scales this flair based on mouse position.
  - The `.button__label` holds the text and icon, and needs `z-index: 1`
    to appear above the flair animation.

  Preferences / Customization:
  - The flair's color is set on `.button__flair:before { background-color: ... }`.
  - The size of the flair is controlled by the `width` property on `.button__flair:before`.
  - Different button color schemes are handled by specific classes like
    `.remark-home-bd-hero__cta` or `.remark-home-bd-cta__button`.
*/
.button {
    align-items: center;
    background: 0 0;
    border: none;
    border-radius: 6.25rem;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 600;
    gap: 0.363636em;
    justify-content: center;
    letter-spacing: -0.01em;
    line-height: 1.04545;
    overflow: hidden;
    padding: 0.9375rem 1.5rem;
    position: relative;
    text-decoration: none;
    word-break: break-word;
    text-decoration: none;
}

@media (hover: hover) {
    .button:hover {
        color: var(--remark-color-white);
        text-decoration: none;
    }
}

.button--stroke:after {
    border: none;
    border-radius: 6.25rem;
    content: "";
    pointer-events: none;
}

.button__label {
    position: relative;
    z-index: 1;
    text-align: center;
    transition: color 50ms var(--ease-in-out-quart);
    display: inline-flex;
    align-items: center;
}

.button__label::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 12px;
    margin-left: 8px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRTMzRDNCIi8+PC9zdmc+');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.15s var(--ease-in-out-quart);
}

.button:hover .button__label {
    transition: color 0.15s var(--ease-in-out-quart);
}

.button--stroke:hover .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+');
}

.button__flair {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.button .button__flair {
    transform: scale(0);
    transform-origin: 0 0;
    will-change: transform;
}

.button__flair:before {
    aspect-ratio: 1/1;
    background-color: #D71921;
    border-radius: 50%;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    width: 280%;
}

.remark-home-bd-hero__cta,
.remark-home-bd-brands__cta {
    background-color: var(--remark-color-primary);
    color: var(--remark-color-white);
}

.remark-home-bd-hero__cta .button__flair:before,
.remark-home-bd-brands__cta .button__flair:before {
    background-color: #D71921;
}

.remark-home-bd-hero__cta .button__label::after,
.remark-home-bd-brands__cta .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+');
}

/* Make white-g-btn inside BD brands appear with white label and arrow by default
       The global .white-g-btn sets label color to blue by default; for buttons
       that sit on a dark background (like the BD brands area) we want white text
       and icon in the default state. */
/* Removed white-on-dark override for white-g-btn after switching to blue-g-btn */

/* Promo 2 */
.remark-home-bd-promo-2 {
    padding: 100px 24px;
    background-color: var(--remark-color-white);
}

.remark-home-bd-promo-2__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 60px;
}

.remark-home-bd-promo-2__content {
    grid-column: 1 / 6;
}

.remark-home-bd-promo-2__media {
    grid-column: 6 / -1;
}

.remark-home-bd-promo-2 .remark-home-bd-promo-2__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px 0 0 24px !important;
}

.remark-home-bd-promo-2__badge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: #F6F6FA;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--remark-font-body);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.remark-home-bd-promo-2__badge-text {
    background-image: linear-gradient(90deg, var(--remark-color-highlight-start), var(--remark-color-highlight-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.remark-home-bd-promo-2__title {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--remark-color-text);
    margin: 0 0 16px;
}

.remark-home-bd-promo-2__subtitle {
    font-family: var(--remark-font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--remark-color-text);
    margin: 0 0 16px;
    line-height: 28px;
}

.remark-home-bd-promo-2__description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--remark-color-text-muted);
    margin: 0;
}

/* Certificates Section */
.remark-home-bd-certificates {
    padding: 100px 24px;
    background-color: var(--remark-color-white);
}

.remark-home-bd-certificates__inner {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.remark-home-bd-certificates__title {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--remark-color-text);
    margin: 0 0 50px;
}

.remark-home-bd-certificates__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.remark-home-bd-certificates__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.remark-home-bd-certificates__image {
    /* Default: cap images to 120x120 and prevent stretching */
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .remark-home-bd-promo-2__inner {
        grid-template-columns: 1fr;
    }

    .remark-home-bd-promo-2__content {
        grid-row: 2;
        grid-column: 1;
    }

    .remark-home-bd-promo-2__media {
        grid-row: 1;
        grid-column: 1;
    }

    .remark-home-bd-promo-2 .remark-home-bd-promo-2__image {
        border-radius: 24px !important;
    }
}

/* Specific override: for the Elementor block with ID/class 'elementor-element-fcc7d3e'
   make the description/text appear before the image on small screens
   (image should be below the description). Use high specificity and !important
   to override Elementor inline styles if present. */
@media (max-width: 640px) {
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-promo-2__content {
        grid-row: 1 !important;
        grid-column: 1 !important;
    }

    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-promo-2__media {
        grid-row: 2 !important;
        grid-column: 1 !important;
    }

    /* Ensure the image inside this specific section is full width and sits after text */
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-promo-2__image {
        width: 100% !important;
        height: auto !important;
        border-radius: 24px !important;
        display: block !important;
        order: 2 !important;
    }

    /* Force textual content to come first */
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-promo-2__title,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-promo-2__subtitle,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-promo-2__description,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section .remark-home-bd-promo-2__badge {
        order: 1 !important;
    }
}

/* Specific mobile gap: ensure 24px spacing between description and image for the
   elementor-element-fcc7d3e promo-2 section. Targets the inner wrapper (if present)
   or the direct div under the section. Uses !important to override other rules. */
@media (max-width: 640px) {

    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div.remark-home-bd-promo-2__inner,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div {
        gap: 24px !important;
    }
}

/* Blog Section */
.remark-home-bd-blogs {
    padding: 100px 24px;
    background-color: var(--remark-color-white);
}

.remark-home-bd-blogs__inner {
    max-width: 1280px;
    margin: 0 auto;
}

.remark-home-bd-blogs__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.remark-home-bd-blogs__title {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--remark-color-text);
    margin: 0;
}

.remark-home-bd-blogs__posts {
    overflow: hidden;
    /* Required for Swiper */
    padding: 4px 4px 30px 4px;
    /* Give space for shadow and scrollbar */
    margin: -4px -4px -30px -4px;
}

.remark-home-bd-blogs__posts .swiper-wrapper {
    display: flex;
}

.swiper-slide {
    min-width: 300px;
    background-color: var(--remark-color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: auto;
    /* Let slide content define height */
}

.remark-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.remark-blog-card__image-link {
    display: block;
    aspect-ratio: 16 / 10;
}

.remark-blog-card__image-tag {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Make blog section flush to the right on small screens */
@media (max-width: 640px) {
    .remark-home-bd-blogs {
        /* keep left padding, remove only right padding so the blog content can align flush to the viewport right */
        padding-right: 0 !important;
    }
}

.remark-blog-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.remark-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.remark-blog-card__category {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: #F6F6FA;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--remark-font-body);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.remark-blog-card__category-text {
    background-image: linear-gradient(90deg, var(--remark-color-highlight-start), var(--remark-color-highlight-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.remark-blog-card__meta {
    margin-bottom: 12px;
}

.remark-blog-card__date {
    font-size: 0.75rem;
    color: var(--remark-color-text-muted);
    letter-spacing: 0.05em;
}

.remark-blog-card__title {
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0 0 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Standard property for broader compatibility */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remark-blog-card__title a {
    text-decoration: none;
    color: #000000;
    transition: color 0.2s;
}

.remark-blog-card__title a:hover {
    color: var(--remark-color-primary);
}

.remark-home-bd-blogs__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000000;
    font-weight: 600;
}

/* CTA Banner */
.remark-home-bd-cta {
    padding: 100px 24px;
    background-color: var(--remark-color-white);
}

.remark-home-bd-cta__inner {
    --remark-home-bd-cta-bg: #00357A;
    max-width: 1180px;
    margin: 0 auto;
    background-color: var(--remark-home-bd-cta-bg);
    border-radius: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    position: relative;
    overflow: hidden;
    box-shadow: none;
    /* removed per request */
}

.remark-home-bd-cta__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(140% 140% at 80% 20%, rgba(255, 255, 255, 0.12), transparent 70%);
    pointer-events: none;
}

.remark-home-bd-cta__media {
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.remark-home-bd-cta__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body .remark-home-bd-cta__content {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 48px 64px 48px 48px !important;
    color: var(--remark-color-white);
    position: relative;
    z-index: 1;
}

.remark-home-bd-cta__title {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--remark-color-white);
}

.remark-home-bd-cta__description {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.86);
    max-width: 440px;
}

.remark-home-bd-cta__cta-wrapper {
    display: inline-flex;
    align-items: center;
}

.remark-home-bd-cta__button {
    background-color: var(--remark-color-white);
    color: var(--remark-color-primary);
}

.remark-home-bd-cta__button .button__label {
    color: var(--remark-color-primary);
}

.remark-home-bd-cta__button .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRTMzRDNCIi8+PC9zdmc+');
}

.remark-home-bd-cta__button:hover .button__label {
    color: var(--remark-color-white);
}

.remark-home-bd-cta__button:hover .button__label::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMjQ0NDcgNy4wNjYyM0M5Ljk1NTI5IDYuNTMzMTEgOS45NTUyOSA1LjQ2Njg3IDkuMjQ0NDcgNC45MzM3NUwzLjAyNDc2IDAuMjY4OTcxQzIuMTQ2MTMgLTAuMzkgMC44OTIyODUgMC4yMzY5MjIgMC44OTIyODUgMS4zMzUyMUwwLjg5MjI4NSAxMC42NjQ4QzAuODkyMjg1IDExLjc2MzEgMi4xNDYxMyAxMi4zOSAzLjAyNDc2IDExLjczMUw5LjI0NDQ3IDcuMDY2MjNaIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+');
}

.remark-home-bd-cta__button .button__flair:before {
    background-color: #D71921;
}

.remark-home-bd-cta__shape {
    position: absolute;
    width: 157px;
    height: 157px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 157.06 157.06'%3E%3Crect x='14.33' y='14.33' width='128.39' height='128.39' rx='32' ry='32' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

.remark-home-bd-cta__shape--tl {
    top: -60px;
    right: 28%;
    width: 130px;
    height: 130px;
    transform: rotate(45deg);
}

.remark-home-bd-cta__shape--br {
    bottom: -50px;
    right: 40px;
    transform: rotate(45deg);
}

@media (max-width: 640px) {
    .remark-home-bd-cta {
        padding: 80px 20px;
    }

    .remark-home-bd-cta__inner {
        grid-template-columns: 1fr;
        padding: 40px 32px;
        gap: 32px;
        text-align: left;
    }

    .remark-home-bd-cta__description {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .remark-home-bd-cta {
        padding: 64px 16px;
    }

    .remark-home-bd-cta__inner {
        padding: 32px 24px;
    }
}

/* Mobile consistency: tighten horizontal padding from 24px -> 20px for main sections */
@media (max-width: 640px) {

    .remark-home-bd-brands.remark-section,
    .remark-home-bd-promo-1,
    .remark-home-bd-promo-2,
    .remark-home-bd-certificates,
    .remark-home-bd-blogs,
    .remark-home-bd-cta,
    .remark-home-bd-brands__logo-marquee {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Also adjust inner paddings that are set specifically in mobile rules */
    .remark-home-bd-promo-1__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .remark-home-bd-cta__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Mobile: make brand title lines behave like a paragraph (no forced line-breaks)
       and apply Greycliff CF at 36px with normal weight, highlighted spans bold. */
    .remark-home-bd-brands__title {
        /* switch from flex/column to normal block flow so child spans can sit inline */
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        /* Use Greycliff CF per design request; fall back to existing title font if missing */
        font-family: 'Greycliff CF', var(--remark-font-title), system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-size: 36px !important;
        font-weight: 400 !important;
        line-height: 1.08 !important;
        /* keep color as the primary color already used */
        color: var(--remark-color-primary);
        text-align: center;
        /* keep consistent with .remark-home-bd-brands__content at smaller widths */
    }

    .remark-home-bd-brands__title-line {
        display: inline !important;
        /* prevent hard line breaks created by block spans */
        white-space: normal !important;
        /* allow natural wrapping like a paragraph */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Highlighted text inside the title should be heavier */
    .remark-home-bd-brands__title .remark-home-bd-hero__highlight,
    .remark-home-bd-brands__title .remark-home-bd-hero__highlight * {
        font-weight: 700 !important;
        /* Keep the gradient text treatment; ensure the weight applies */
        -webkit-font-smoothing: antialiased;
    }

    /* Stronger specificity in case other stylesheets (Elementor etc.) override earlier rules */
    .remark-home-bd-brands__content .remark-home-bd-brands__title {
        /* If display:flex is enforced elsewhere, switch direction to row and allow wrapping
           so title-line spans behave like a paragraph. This is resilient to display overrides. */
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .remark-home-bd-brands__content .remark-home-bd-brands__title-line {
        display: inline !important;
    }

    .remark-home-bd-brands__content .remark-home-bd-brands__title .remark-home-bd-hero__highlight {
        font-weight: 700 !important;
    }

    /* Ensure a single space between inline title-line spans so words don't join when
       lines are converted from block -> inline on mobile */
    .remark-home-bd-brands__content .remark-home-bd-brands__title-line::after {
        content: ' ' !important;
        display: inline-block !important;
        width: 0.25rem;
    }
}

/* Global mobile description typography for BD page
   If devtools inspection isn't available, apply a robust rule that targets
   common 'description' and 'subtitle' class name patterns as well as
   specific known description selectors. This forces Inter 16px 400 on mobile. */
@media (max-width: 640px) {

    /* scope to BD home page to avoid site-wide changes */
    .remark-page--home-bd [class*="description"],
    .remark-page--home-bd [class*="subtitle"],
    .remark-page--home-bd [class*="summary"],
    .remark-page--home-bd [class*="copy"],
    .remark-page--home-bd [class*="lead"],
    /* specific known selectors */
    .remark-page--home-bd .remark-home-bd-promo-2__description,
    .remark-page--home-bd .remark-home-bd-promo-1__subtitle,
    .remark-page--home-bd .remark-home-bd-hero__subtitle,
    .remark-page--home-bd .remark-home-bd-brands__summary,
    .remark-page--home-bd .remark-home-bd-cta__description,
    .remark-page--home-bd .remark-blog-card__content p {
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }

    /* Ensure images/text blocks that use gap/spacing keep proper vertical rhythm */
    .remark-page--home-bd [class*="description"]+img,
    .remark-page--home-bd img+[class*="description"] {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
}

/* Mobile: make logo marque full-bleed (cancel section horizontal padding)
   This lets the logo marquee extend to the viewport edges while keeping
   layout and marquee animation behavior intact. */
@media (max-width: 640px) {
    .remark-home-bd-brands__logo-marquee {
        /* cancel the 20px mobile section padding applied above */
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* let the marquee stretch beyond the normal content box so logos
           appear flush to the viewport edges */
        max-width: none !important;
        width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        box-sizing: border-box !important;
    }

    /* Keep marquee overflow hidden so the sliding animation still masks
       correctly, but give the inner row a small internal offset so logos
       don't sit exactly on the device edge. */
    .remark-home-bd-brands__logo-row {
        padding-left: 20px;
    }

    /* Slightly reduce slide padding so logos remain visually balanced on
       smaller screens. */
    .remark-home-bd-brands__logo-slide {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Promo-1: ensure the outer promo section uses 20px padding on all sides in mobile view */
@media (max-width: 640px) {
    .remark-home-bd-promo-1 {
        padding: 64px 20px !important;
        box-sizing: border-box !important;
    }
}

/* Promo-1 inner: ensure equal 20px padding on all sides (override mobile rules) */
.remark-home-bd-promo-1__inner {
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Promo-1: mobile title (Inter 32px / 400) and 30px top padding
   Target the specific Elementor container path provided so this only
   affects the indicated block on mobile. */
@media (max-width: 640px) {

    #content>div.page-content>div>div.elementor-element.elementor-element-be7d72a.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-promo-1__content>div>h2,
    #content>div.page-content>div>div.elementor-element.elementor-element-be7d72a.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-promo-1__content>div>h2 font {
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        padding-top: 30px !important;
        margin-top: 0 !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }
}

/* Exact Elementor container: set 56px vertical padding on mobile
   This targets: body > div.elementor.elementor-12 > div.elementor-element.elementor-element-8205c2f.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > section
   Use high specificity and !important so Elementor inline styles are overridden on small screens. */
@media (max-width: 640px) {
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-8205c2f.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        box-sizing: border-box !important;
    }
}

/* Exact Elementor container: set 56px vertical padding on mobile for elementor-element-fcc7d3e
   This mirrors the rule used for elementor-element-8205c2f so the spacing matches. */
@media (max-width: 640px) {
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        box-sizing: border-box !important;
    }
}

/* Exact Elementor container: set top padding 0 and bottom padding 56px on mobile
   for elementor-element-cc9ca30 */
@media (max-width: 640px) {
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-cc9ca30.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section {
        padding-top: 0 !important;
        padding-bottom: 56px !important;
        box-sizing: border-box !important;
    }
}

/* Zero top padding for specific Elementor section to remove gap
   Selector: body > div.elementor.elementor-12 > div.elementor-element.elementor-element-2306a8b.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > section */
/* Zero top padding & 56px bottom padding for specific Elementor section
   Selector: body > div.elementor.elementor-12 > div.elementor-element.elementor-element-2306a8b.e-con-full.e-flex.e-con.e-parent > div > div > section
   Include both states when element has or hasn't been lazyloaded. */
body>div.elementor.elementor-12>div.elementor-element.elementor-element-2306a8b.e-con-full.e-flex.e-con.e-parent>div>div>section,
body>div.elementor.elementor-12>div.elementor-element.elementor-element-2306a8b.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section {
    padding-top: 0 !important;
    padding-bottom: 56px !important;
}

/* Make the logo-marquee inside the specific Elementor section have no bottom padding
   This targets the inner div.remark-home-bd-brands__logo-marquee inside that section. */
body>div.elementor.elementor-12>div.elementor-element.elementor-element-8205c2f.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div.remark-home-bd-brands__logo-marquee {
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Match promo-2 H2 font-size to promo-1 H2 for the specific Elementor containers
   (elementor-element-fcc7d3e should follow the promo-1 size used by elementor-element-529c5cb) */
body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-promo-2__content>h2,
body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-promo-2__content>h2 font {
    /* Desktop/tablet base size matches .remark-home-bd-promo-1__title (2.5rem) */
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

@media (max-width: 640px) {

    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-promo-2__content>h2,
    body>div.elementor.elementor-12>div.elementor-element.elementor-element-fcc7d3e.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-promo-2__content>h2 font {
        /* Mobile override: match promo-1 mobile sizing (28px) */
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
    }
}

/* Force padding on the homepage CTA banner to override the specific 0px rule */
body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent>div>div>section>div>div.remark-home-bd-cta__content,
body>div.elementor.elementor-12>div.elementor-element.elementor-element-4538244.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>div>div>section>div>div.remark-home-bd-cta__content {
    padding: 48px 64px 48px 48px !important;
}

/* Match home global mobile section padding for all home-bd sections */
@media (max-width: 768px) {
    .remark-home-bd-hero.remark-section,
    .remark-home-bd-brands.remark-section,
    .remark-home-bd-promo-1,
    .remark-home-bd-promo-2,
    .remark-home-bd-mission,
    .remark-home-bd-vision,
    .remark-home-bd-certificates,
    .remark-home-bd-cta,
    .remark-home-bd-news {
        padding: 80px 20px !important;
        margin: 0 !important;
    }
}

/* Hide specific image on mobile */
@media (max-width: 768px) {
    #content > div.page-content > div > div.elementor-element.elementor-element-44a9c16.e-con-full.e-flex.e-con.e-parent > div > div > section > div img,
    #content > div.page-content > div > div.elementor-element.elementor-element-44a9c16.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > section > div img {
        display: none !important;
    }
}

/* Show image on top for specific section on mobile */
@media (max-width: 768px) {
    #content > div.page-content > div > div.elementor-element.elementor-element-ea1b1a2.e-con-full.e-flex.e-con.e-parent > div > div > section > div.remark-home-bd-promo-1__inner,
    #content > div.page-content > div > div.elementor-element.elementor-element-ea1b1a2.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > section > div.remark-home-bd-promo-1__inner {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}

/* Show image on bottom for specific BD section 4945692 on mobile */
@media (max-width: 768px) {
    #content > div.page-content > div > div.elementor-element.elementor-element-4945692.e-con-full.e-flex.e-con.e-parent > div > div > section > div,
    #content > div.page-content > div > div.elementor-element.elementor-element-4945692.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > section > div {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}