/* =====================================================================
   Best Cleaning — project layer on top of the Brote theme.
   Everything the Laravel build adds or changes lives here; brote.css
   stays untouched so the theme can be updated independently.

   1. Tokens
   2. Header: catering link, language switcher
   3. Banner slider
   4. Certificates 5 × 2
   5. Partners (larger logos)
   6. Contact block (full width, no picture) and map
   7. Services: WhatsApp order
   8. Forms
   9. Career
   10. Page furniture: filters, pagination, prose, errors
   11. Floating WhatsApp
   12. Soap bubbles
   ===================================================================== */

/* 1. Tokens ------------------------------------------------------------ */
:root {
    --bc-base: var(--brote-base, #35559c);
    --bc-primary: var(--brote-primary, #73b234);
    --bc-ink: #1d2b4f;
    --bc-muted: #6b7386;
    --bc-line: #e3e7f0;
    --bc-surface: #ffffff;
    --bc-surface-2: #eef0f6;
    --bc-whatsapp: #25d366;
    --bc-radius: 14px;
    --bc-shadow: 0 18px 44px -22px rgba(29, 43, 79, .45);
    --bc-ease: cubic-bezier(.22, 1, .36, 1);
}

/* 2. Header ------------------------------------------------------------ */
.bc-header-tools,
.stricky-header .bc-header-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Catering: the last menu item, right after Contact, marked with a small
   arrow because it opens the sister site. */
.main-menu .main-menu__list > li.bc-nav-catering > a::after,
.stricky-header .main-menu__list > li.bc-nav-catering > a::after {
    content: "\f35d"; /* fa-external-link-alt */
    margin-left: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    opacity: .55;
}

.what-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* No welcome strip above the header any more, so the theme's 140px white
   logo badge (built to hang into that strip) would now reach down into the
   menu bar. Instead the logo sits centred in the contact row, badge-free. */
@media (min-width: 992px) {
    .bc-header .main-header__logo {
        top: 50%;
        transform: translateY(-50%);
    }

    .bc-header .main-header__logo > a {
        width: auto;
        height: auto;
        background: none;
    }
}

/* Social links sit where the working hours were, at the end of the
   contact row. */
.main-header__top-details-list li.bc-header-socials .bc-socials {
    gap: 12px;
}

.main-header__top-details-list li.bc-header-socials .bc-social {
    --bc-social-size: 40px;
}

/* the theme hides the last item of that row on small laptops — there it
   drops the address instead, so the social links stay */
@media (min-width: 992px) and (max-width: 1199px) {
    .main-header__top-details-list li.bc-header-socials {
        display: flex;
    }

    .main-header__top-details-list li:has(+ li.bc-header-socials) {
        display: none;
    }
}

/* Social links in their real brand colours */

.bc-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bc-socials .bc-social,
.mobile-nav__social.bc-socials a + a {
    margin: 0;
}

.bc-socials .bc-social {
    --bc-social-size: 34px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bc-social-size);
    height: var(--bc-social-size);
    border-radius: 50%;
    font-size: calc(var(--bc-social-size) * .47);
    line-height: 1;
    color: #fff;
    background: var(--bc-social-bg, var(--bc-base));
    box-shadow: 0 6px 14px -8px var(--bc-social-glow, rgba(29, 43, 79, .6));
    overflow: hidden;
    transition: transform .35s var(--bc-ease), box-shadow .35s var(--bc-ease);
}

.bc-socials .bc-social:hover,
.bc-socials .bc-social:focus-visible {
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 22px -10px var(--bc-social-glow, rgba(29, 43, 79, .7));
}

.mobile-nav__social.bc-socials .bc-social {
    --bc-social-size: 40px;
}

.bc-social--facebook  { --bc-social-bg: #1877f2; --bc-social-glow: rgba(24, 119, 242, .8); }
.bc-social--instagram {
    --bc-social-bg: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    --bc-social-glow: rgba(214, 36, 159, .75);
}
.bc-social--linkedin  { --bc-social-bg: #0a66c2; --bc-social-glow: rgba(10, 102, 194, .8); }
.bc-social--youtube   { --bc-social-bg: #ff0000; --bc-social-glow: rgba(255, 0, 0, .7); }
.bc-social--twitter   { --bc-social-bg: #000; --bc-social-glow: rgba(0, 0, 0, .7); }
.bc-social--pinterest { --bc-social-bg: #e60023; --bc-social-glow: rgba(230, 0, 35, .7); }
.bc-social--tiktok    { --bc-social-bg: #010101; --bc-social-glow: rgba(37, 244, 238, .7); }
.bc-social--telegram  { --bc-social-bg: #26a5e4; --bc-social-glow: rgba(38, 165, 228, .8); }

/* TikTok's cyan / red offset glyph */
.bc-social--tiktok i {
    text-shadow: -1.5px -1px 0 #25f4ee, 1.5px 1px 0 #fe2c55;
}

.bc-social--twitter svg {
    width: .82em;
    height: .82em;
}

.bc-lang {
    position: relative;
}

.bc-lang > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bc-base);
    background: var(--bc-surface-2);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    transition: box-shadow .3s var(--bc-ease);
}

.bc-lang > summary::-webkit-details-marker {
    display: none;
}

.bc-lang > summary:hover,
.bc-lang[open] > summary {
    box-shadow: 0 0 0 2px var(--bc-primary);
}

.bc-lang__caret {
    font-size: 9px;
    transition: transform .3s var(--bc-ease);
}

.bc-lang[open] .bc-lang__caret {
    transform: rotate(180deg);
}

.bc-lang__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 999;
    min-width: 170px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: var(--bc-radius);
    background: var(--bc-surface);
    box-shadow: var(--bc-shadow);
}

.bc-lang__menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--bc-ink);
}

.bc-lang__menu a:hover {
    background: var(--bc-surface-2);
}

.bc-lang__menu a.is-active {
    color: #fff;
    background: var(--bc-base);
}

.bc-lang__code {
    min-width: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}

.bc-lang__menu a.is-active .bc-lang__name {
    color: rgba(255, 255, 255, .8);
}

.bc-mobile-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 20px 0 10px;
}

.bc-lang-inline {
    display: inline-flex;
    gap: 6px;
}

.bc-lang-inline a {
    min-width: 42px;
    padding: 8px 10px;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.bc-lang-inline a.is-active {
    background: var(--bc-primary);
}

@media (max-width: 767px) {
    .main-menu__right .bc-lang {
        display: none;
    }
}

/* 3. Banner video -----------------------------------------------------
   A muted, looping background video over the poster photo; a navy scrim on
   the left keeps the white copy readable. Everything that moves here is
   transform / opacity only, so it stays on the compositor. */
.bc-hero {
    overflow: hidden;
    background: #16213d;
    isolation: isolate;
}

.bc-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #16213d;
    background-size: cover;
    background-position: center;
}

.bc-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
}

.bc-hero__video.is-playing {
    opacity: 1;
}

/* the poster layer over the video: slow zoom, then gone once it plays
   (the poster is a frame of the video, so any opacity shows a double image) */
.bc-hero .image-layer {
    z-index: 1;
    background-size: cover;
    background-position: center;
    transform-origin: 60% 50%;
    transition: opacity 1s ease;
    animation: bcHeroZoom 9s ease-out both;
}

.bc-hero .image-layer:before {
    display: none;
}

.bc-hero__video.is-playing + .bc-hero__image {
    opacity: 0;
    animation-play-state: paused;
}

@keyframes bcHeroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.12); }
}

.bc-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(18, 30, 62, .85) 0%, rgba(18, 30, 62, .6) 40%, rgba(18, 30, 62, .1) 78%),
        linear-gradient(0deg, rgba(18, 30, 62, .5) 0%, rgba(18, 30, 62, 0) 40%);
}

.bc-hero .container {
    z-index: 4;
    min-height: 760px;
    display: flex;
    align-items: center;
}

.bc-hero .main-slider__content {
    max-width: 720px;
}

/* The theme hides the copy until a slide becomes active (a 1 s delay plus
   a 2 s transition); here it is visible straight away with a short rise. */
.bc-hero .main-slider__sub-title,
.bc-hero .main-slider__title,
.bc-hero .main-slider__btn-box {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    animation: bcHeroIn .7s var(--bc-ease) both;
}

.bc-hero .main-slider__title {
    color: #fff;
    animation-delay: .08s;
}

.bc-hero .main-slider__btn-box {
    animation-delay: .16s;
}

.bc-hero .main-slider__sub-title {
    color: #d8e4ff;
}

@keyframes bcHeroIn {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to { opacity: 1; transform: none; }
}

/* Scroll cue, bottom centre: a mouse with a rolling wheel over two chevrons. */
.bc-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 104px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    color: #fff;
    transform: translateX(-50%);
    opacity: .85;
    transition: opacity .3s var(--bc-ease);
}

.bc-hero__scroll:hover,
.bc-hero__scroll:focus-visible {
    color: #fff;
    opacity: 1;
}

.bc-hero__mouse {
    position: relative;
    display: block;
    width: 26px;
    height: 42px;
    border: 2px solid currentColor;
    border-radius: 14px;
}

.bc-hero__wheel {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: currentColor;
    animation: bcHeroWheel 1.8s ease-in-out infinite;
}

.bc-hero__chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bc-hero__chevrons i {
    display: block;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: bcHeroChevron 1.8s ease-in-out infinite;
}

.bc-hero__chevrons i + i {
    animation-delay: .2s;
}

@keyframes bcHeroWheel {
    0% { opacity: 0; transform: translate3d(0, 0, 0); }
    25% { opacity: 1; }
    75% { opacity: 0; transform: translate3d(0, 12px, 0); }
    100% { opacity: 0; transform: translate3d(0, 12px, 0); }
}

@keyframes bcHeroChevron {
    0%, 100% { opacity: .15; }
    50% { opacity: 1; }
}

/* the theme pulls the banner up 70px under the header; land below it */
.bc-hero__anchor {
    display: block;
    height: 0;
    scroll-margin-top: 20px;
}

@media (max-width: 991px) {
    .bc-hero .container {
        min-height: 620px;
    }

    .bc-hero .main-slider__title {
        font-size: 64px;
        line-height: 66px;
    }
}

@media (max-width: 575px) {
    .bc-hero .container {
        min-height: 540px;
    }

    .bc-hero .main-slider__title {
        font-size: 44px;
        line-height: 48px;
    }

    .bc-hero__scroll {
        bottom: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bc-hero .image-layer,
    .bc-hero .main-slider__sub-title,
    .bc-hero .main-slider__title,
    .bc-hero .main-slider__btn-box,
    .bc-hero__wheel,
    .bc-hero__chevrons i {
        animation: none;
    }
}

/* 4. Certificates 5 × 2 ------------------------------------------------ */
.bc-certificates .container {
    position: relative;
    z-index: 2;
}

.bc-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.bc-cert {
    margin: 0;
}

.bc-cert__frame {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--bc-radius);
    background: #fff;
    box-shadow: 0 10px 30px -18px rgba(29, 43, 79, .5);
    transition: transform .45s var(--bc-ease), box-shadow .45s var(--bc-ease);
}

.bc-cert__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bc-cert__zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff; 
    opacity: 0;
    transition: opacity .35s var(--bc-ease);
}

.bc-cert__frame:hover,
.bc-cert__frame:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--bc-shadow);
}

.bc-cert__frame:hover .bc-cert__zoom,
.bc-cert__frame:focus-visible .bc-cert__zoom {
    opacity: 1;
}

.bc-cert__caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    text-align: center;
}

.bc-cert__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bc-ink);
}

.bc-cert__meta {
    font-size: 13px;
    color: var(--bc-muted);
}

.bc-cert__pdf {
    font-size: 13px;
    font-weight: 700;
    color: var(--bc-base);
}

.bc-section-more {
    margin-top: 50px;
    text-align: center;
}

.bc-certificates--page {
    padding: 120px 0 90px;
}

@media (max-width: 1199px) {
    .bc-cert-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .bc-cert-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .bc-cert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* 5. Partners — larger logos ------------------------------------------ */
.bc-brands .brand-one__inner {
    padding: 80px 0 110px;
}

.bc-brands .brand-one__main-content .swiper-slide {
    height: 130px;
}

.bc-brands .brand-one__main-content .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.bc-brands .brand-one__main-content .swiper-slide img {
    width: 100%;
    max-width: 240px;
    max-height: 120px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .bc-brands .brand-one__main-content .swiper-slide {
        height: 100px;
    }
}

/* 6. Contact block — full width, no picture ---------------------------- */
.bc-contact .contact-one__left {
    margin-right: 0;
}

/* the theme skews this band behind a two-column layout; with one column it
   simply runs edge to edge */
.bc-contact .contact-one__left:before {
    left: -100vw;
    right: -100vw;
    transform: none;
}

.bc-contact__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 10px;
}

.bc-contact__head .section-title {
    margin-bottom: 30px;
}

.bc-contact__call {
    margin-bottom: 30px;
}

.bc-contact .welcome-one__call-sub-title {
    color: #b1c2f5;
}

.bc-contact .welcome-one__call-number a {
    color: #fff;
}

/* The form: 2 + 2 + 1 grid of labelled fields with icons */
.bc-cform__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 26px;
}

.bc-field--wide {
    grid-column: 1 / -1;
}

.bc-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

.bc-field__label span {
    color: var(--bc-primary);
}

.bc-field__control {
    position: relative;
}

.bc-field__icon {
    position: absolute;
    top: 50%;
    left: 20px;
    z-index: 1;
    font-size: 15px;
    color: var(--bc-base);
    transform: translateY(-50%);
    pointer-events: none;
    transition: color .3s var(--bc-ease);
}

.bc-field__control--area .bc-field__icon {
    top: 22px;
    transform: none;
}

.bc-cform .bc-field input,
.bc-cform .bc-field select,
.bc-cform .bc-field textarea {
    display: block;
    width: 100%;
    height: 58px;
    padding: 0 20px 0 50px;
    border: 1.5px solid #fff;
    border-radius: 12px;
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--bc-base);
    background: #fff;
    transition: border-color .3s var(--bc-ease), background-color .3s var(--bc-ease), box-shadow .3s var(--bc-ease);
}

.bc-cform .bc-field textarea {
    height: 150px;
    padding-top: 16px;
    padding-bottom: 16px;
    resize: vertical;
    line-height: 1.6;
}

.bc-cform .bc-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    cursor: pointer;
}

.bc-cform .bc-field select option {
    color: var(--bc-ink);
}

.bc-field__control--select::after {
    content: "\f107"; /* fa-angle-down */
    position: absolute;
    top: 50%;
    right: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--bc-base);
    transform: translateY(-50%);
    pointer-events: none;
}

.bc-cform .bc-field input::placeholder,
.bc-cform .bc-field textarea::placeholder {
    font-weight: 400;
    color: rgba(53, 85, 156, .5);
}

.bc-cform .bc-field input:hover,
.bc-cform .bc-field select:hover,
.bc-cform .bc-field textarea:hover {
    box-shadow: 0 8px 22px -14px rgba(10, 20, 50, .6);
}

.bc-cform .bc-field input:focus,
.bc-cform .bc-field select:focus,
.bc-cform .bc-field textarea:focus {
    border-color: var(--bc-primary);
    box-shadow: 0 0 0 4px rgba(115, 178, 52, .35);
}

.bc-cform__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 30px;
    margin-top: 26px;
}

.bc-contact .bc-consent {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .85);
}

.bc-contact .bc-form-error {
    color: #ffd2cc;
}

/* the summary banner keeps its own light background, so it needs dark text */
.bc-contact .bc-form-error--block {
    color: #9b2c1f;
}

@media (max-width: 767px) {
    .bc-cform__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .bc-cform__footer .thm-btn {
        width: 100%;
        justify-content: center;
    }
}

/* a real, full-colour Google map (the theme greys it out) */
.bc-map {
    position: relative;
}

.bc-map .google-map__one {
    mix-blend-mode: normal;
    height: 480px;
}

.bc-map__open {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bc-base);
    background: #fff;
    box-shadow: var(--bc-shadow);
    transition: transform .3s var(--bc-ease), color .3s var(--bc-ease), background-color .3s var(--bc-ease);
}

.bc-map__open i {
    color: #ea4335;
}

.bc-map__open:hover {
    color: #fff;
    background: var(--bc-base);
    transform: translateY(-2px);
}

/* Project cards share one portrait ratio whatever shape the upload is. */
.project-one__img img {
    width: 100%;
    aspect-ratio: 370 / 472;
    object-fit: cover;
}

.portfolio-details__img img {
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    background: #eef0f6;
}

.services-three__img img {
    width: 100%;
    aspect-ratio: 270 / 267;
    object-fit: cover;
}

/* Card zoom: hovering a service or project card slowly zooms its photo
   (bestclean.js adds .is-zoomed on touch screens, which cannot hover). */
.bc-zoom-card .services-three__img img,
.bc-zoom-card .project-one__img img {
    transform: scale(1);
    transition: transform 1.1s var(--bc-ease);
    will-change: transform;
}

.bc-zoom-card:hover .services-three__img img,
.bc-zoom-card:hover .project-one__img img,
.bc-zoom-card.is-zoomed .services-three__img img,
.bc-zoom-card.is-zoomed .project-one__img img {
    transform: scale(1.14);
}

@media (prefers-reduced-motion: reduce) {
    .bc-zoom-card .services-three__img img,
    .bc-zoom-card .project-one__img img {
        transition: none;
    }
}

.services-two__img img {
    width: 100%;
    aspect-ratio: 370 / 267;
    object-fit: cover;
}

.team-details__top-img img {
    width: 100%;
    aspect-ratio: 550 / 531;
    object-fit: cover;
}

/* Introduction: "Contact us" and the phone box share one row. The theme
   lets both shrink, which breaks the button's arrow under its label and the
   number over two lines; now each stays whole and the phone box drops
   under the button when the row is too narrow (longer AZ / RU labels). */
@media (min-width: 1200px) {
    .welcome-one__right {
        margin-left: 40px;
    }
}

.welcome-one__btn-call-box {
    flex-wrap: wrap;
    gap: 20px 30px;
}

.welcome-one__btn-box,
.welcome-one__call-box {
    flex: 0 0 auto;
}

.welcome-one__call-box {
    margin-left: 0;
}

.thm-btn,
.welcome-one__call-number {
    white-space: nowrap;
}

/* Homepage cards line up: titles on one line, descriptions on two. */
.services-carousel-page .services-three__title,
.services-one .project-one__title,
.services-one .project-one__sub-title,
.blog-one .blog-one__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* margin instead of the theme's padding: a clamped line would still show
   through padding; min-height keeps one-line descriptions level too */
.services-carousel-page .services-three__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2lh;
    margin: 16px 0 20px;
    padding: 0;
}

/* Project cards: the photo stays clear on hover; only the text gets a
   panel behind it. On touch screens it shows for the card in the middle
   of the screen (bestclean.js adds .is-zoomed). */
.project-one__img:before {
    display: none;
}

.project-one__content {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 18px 22px 18px;
    border-top: 0;
    border-left: 4px solid var(--bc-primary);
    border-radius: 12px;
    background: rgba(22, 33, 61, .78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translateY(16px);
}

.project-one__content .project-one__title {
    margin: 0 0 2px;
    font-size: 21px;
    line-height: 30px;
}

.project-one__content .project-one__sub-title {
    margin: 0;
}

.bc-zoom-card.is-zoomed .project-one__content {
    opacity: 1;
    transform: translateY(0);
}

.bc-zoom-card.is-zoomed .project-one__arrow {
    transform: scale(1);
}

/* 7. Services: WhatsApp order ------------------------------------------ */
.bc-service-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bc-wa-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 21px;
    color: #fff;
    background: var(--bc-whatsapp);
    transition: transform .3s var(--bc-ease), box-shadow .3s var(--bc-ease);
}

.bc-wa-chip:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(37, 211, 102, .9);
}

.bc-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding: 28px 32px;
    border-radius: var(--bc-radius);
    background: var(--bc-surface-2);
    border-left: 5px solid var(--bc-whatsapp);
}

.bc-order__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--bc-ink);
}

.bc-order__text p {
    margin: 0;
}

.bc-order__btn {
    border: 0;
    background: var(--bc-whatsapp);
}

.bc-order__btn i {
    position: static;
    width: auto;
    height: auto;
    margin: 0 8px 0 0;
    font-size: 20px;
    background: none;
}

.bc-order__btn:hover {
    background: var(--bc-base);
}

/* 8. Forms ------------------------------------------------------------- */
.bc-form-success {
    padding: 14px 18px;
    margin-bottom: 22px;
    border-radius: 12px;
    font-size: 15px;
    color: #1f4a07;
    background: #e7f5d8;
    border: 1.5px solid rgba(115, 178, 52, .55);
}

.bc-form-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #c0392b;
}

.bc-form-error--block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid #f5c2bc;
    border-left: 4px solid #d93025;
    border-radius: 12px;
    background: #fdecea;
    color: #9b2c1f;
    font-size: 15px;
    font-weight: 600;
}

.bc-form-error--block::before {
    content: "!";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d93025;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.bc-form-success--dark {
    color: #fff;
    background: rgba(115, 178, 52, .25);
    border-color: rgba(115, 178, 52, .6);
}

.bc-form-error--dark {
    color: #ffd2cc;
}

.bc-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}

.bc-consent input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 18px;
    accent-color: var(--bc-primary);
}

[aria-invalid="true"] {
    box-shadow: 0 0 0 2px #e74c3c !important;
}

.bc-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bc-ink);
}

.bc-label span[aria-hidden] {
    color: #e74c3c;
}

.bc-label small {
    font-weight: 400;
    color: var(--bc-muted);
}

.bc-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--bc-muted);
}

.bc-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 22px;
    border-radius: 10px;
    border: 2px dashed #c7cfe2;
    background: #fff;
    color: var(--bc-muted);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .3s var(--bc-ease);
}

.bc-file:hover,
.bc-file:focus-within {
    border-color: var(--bc-base);
}

.bc-file.has-file {
    border-style: solid;
    border-color: var(--bc-primary);
    color: var(--bc-ink);
}

.bc-file i {
    color: var(--bc-base);
}

.bc-file__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bc-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* 9. Career ------------------------------------------------------------ */
.bc-career {
    padding-bottom: 60px;
}

/* Vacancy cards read left-aligned; the description stops at two lines. */
.bc-vacancy .services-two__content {
    text-align: left;
}

.bc-vacancy .services-two__btn {
    text-align: center;
}

.bc-vacancy .services-two__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.bc-vacancy__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 6px 0 12px;
    font-size: 14px;
    color: var(--bc-muted);
}

.bc-vacancy__meta i {
    color: var(--bc-primary);
    margin-right: 4px;
}

.bc-apply {
    /* room at the bottom for the contact strip that overlaps it */
    padding: 110px 0 210px;
    background: var(--bc-surface-2);
}

/* no contact strip after it (the career listing): no room needed */
main > .bc-apply:last-child {
    padding-bottom: 110px;
}

.bc-apply .container {
    max-width: 900px;
}

.bc-apply__intro {
    margin-bottom: 30px;
    text-align: center;
}

.bc-apply .comment-form__input-box input[type="tel"] {
    height: 60px;
    width: 100%;
    border: none;
    outline: none;
    background-color: #fff;
    font-size: 14px;
    color: var(--brote-gray);
    padding: 0 30px;
    border-radius: 10px;
    margin-bottom: 0;
}

.bc-apply .comment-form__input-box {
    margin-bottom: 26px;
}

.bc-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 20px 0 24px;
}

.bc-facts dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bc-muted);
}

.bc-facts dd {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--bc-ink);
}

/* 10. Page furniture ---------------------------------------------------- */
/* The menu bar's floats get their own formatting context, so the banner
   tucked up under the bar is not pushed sideways by them. */
.main-menu__wrapper-inner {
    display: flow-root;
}

/* Every inner-page banner is the same height, the title centred in the
   part below the menu bar (which overlaps the banner's top). */
.page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    height: 23rem;
    padding: 37px 0 0;
}

.page-header > .container {
    width: 100%;
}

/* Inner-page banner: any uploaded photo fades into the theme's pale blue on
   the left, so the breadcrumb and title stay readable. */
.page-header-bg {
    background-position: center right;
}

.page-header-bg:before {
    width: 100%;
    background-image: linear-gradient(90deg, #eef0f6 0%, rgba(238, 240, 246, .94) 38%, rgba(238, 240, 246, .55) 66%, rgba(238, 240, 246, .1) 100%);
}

.page-header .thm-breadcrumb li,
.page-header .thm-breadcrumb li a {
    color: var(--bc-ink);
}

.page-header__inner .bc-page-title {
    font-size: 40px;
    color: var(--brote-base);
    font-weight: 700;
    line-height: 50px;
    margin: 0;
}

.bc-h3 {
    font-size: 30px;
    font-weight: 700;
    color: var(--bc-ink);
}

.bc-page {
    padding: 110px 0 120px;
}

.bc-lead {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.bc-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--bc-muted);
}

.bc-prose {
    line-height: 1.8;
}

.bc-prose > * + * {
    margin-top: 1em;
}

.bc-prose h2,
.bc-prose h3 {
    margin-top: 1.4em;
    color: var(--bc-ink);
}

.bc-prose ul {
    padding-left: 1.2em;
}

.bc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bc-radius);
}

.bc-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 45px;
}

.bc-filter a {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bc-base);
    background: var(--bc-surface-2);
    transition: background-color .3s var(--bc-ease), color .3s var(--bc-ease);
}

.bc-filter a:hover,
.bc-filter a.is-active {
    color: #fff;
    background: var(--bc-base);
}

.bc-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 0;
}

.bc-pagination a,
.bc-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    padding: 0 12px;
    border-radius: 50%;
    font-weight: 700;
    color: var(--bc-base);
    background: var(--bc-surface-2);
}

.bc-pagination a:hover,
.bc-pagination .is-active {
    color: #fff;
    background: var(--bc-base);
}

.bc-gallery {
    --bs-gutter-y: 24px;
    margin-top: 30px;
}

.bc-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--bc-radius);
}

.bc-post-meta {
    margin-bottom: 14px;
}

.bc-contact-intro {
    max-width: 820px;
    margin: 50px auto 0;
    text-align: center;
}

.bc-information-spaced {
    margin-top: 4rem;
}

.bc-counter {
    margin-top: 2rem;
}

.bc-error__code {
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: var(--bc-base);
    opacity: .15;
}

.blog-details__img {
    position: relative;
}

/* Footer: the social networks column */
.bc-socials--list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin-top: 6px;
}

.bc-social-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    color: #b1c2f5;
    transition: color .3s var(--bc-ease);
}

.bc-social-link .bc-social {
    --bc-social-size: 44px;
    flex: 0 0 auto;
}

.bc-social-link__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bc-social-link:hover {
    color: #fff;
}

.bc-social-link:hover .bc-social {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 22px -10px var(--bc-social-glow, rgba(29, 43, 79, .7));
}

.bc-credit {
    margin-top: 4px;
    font-size: 14px;
}

.bc-credit a {
    font-weight: 700;
    color: #fff;
}

.bc-credit a:hover {
    color: var(--bc-primary);
}

/* 11. Floating WhatsApp ------------------------------------------------- */
.bc-whatsapp {
    /* right-hand side, above the theme's scroll-to-top; the stain meter
       owns the bottom-left corner */
    position: fixed;
    right: 34px;
    bottom: 104px;
    z-index: 99;
    display: inline-flex;
    align-items: center;
    height: 58px;
    padding: 0 17px;
    border-radius: 999px;
    color: #fff;
    background: var(--bc-whatsapp);
    box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .8);
    transition: padding .45s var(--bc-ease), transform .35s var(--bc-ease);
}

.bc-whatsapp__icon {
    font-size: 26px;
}

.bc-whatsapp__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    transition: max-width .45s var(--bc-ease), margin-left .45s var(--bc-ease);
}

.bc-whatsapp:hover {
    color: #fff;
    transform: translateY(-3px);
}

.bc-whatsapp:hover .bc-whatsapp__label {
    max-width: 120px;
    margin-left: 10px;
}

.bc-whatsapp__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(37, 211, 102, .6);
    animation: bcPulse 2.6s var(--bc-ease) infinite;
    pointer-events: none;
}

@keyframes bcPulse {
    0% { transform: scale(1); opacity: .7; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bc-whatsapp__pulse {
        animation: none;
    }
}

@media (max-width: 575px) {
    .bc-whatsapp {
        right: 16px;
        bottom: 84px;
        height: 52px;
        padding: 0 14px;
    }
}

/* 12. Soap bubbles ------------------------------------------------------
   Hovering a button or scrolling it into view, bestclean.js drops a few bubbles over it; they
   wobble up, catch the light and pop. */
.bc-bubbles {
     position: fixed; 
    z-index: 999991;
    pointer-events: none;
}

.bc-bubble {
    position: absolute;
    top: 30%;
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 16%),
        radial-gradient(circle at 70% 75%, rgba(255, 255, 255, .45) 0 6%, rgba(255, 255, 255, 0) 12%),
        conic-gradient(from 210deg, rgba(115, 178, 52, .3), rgba(80, 200, 255, .3), rgba(186, 120, 255, .3), rgba(255, 170, 200, .28), rgba(115, 178, 52, .3));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .7),
        inset -3px -4px 8px rgba(53, 85, 156, .25),
        0 4px 10px -4px rgba(53, 85, 156, .35);
    animation-name: bcBubble;
    animation-timing-function: cubic-bezier(.33, .1, .45, 1);
    animation-fill-mode: both;
}

@keyframes bcBubble {
    0%   { opacity: 0; transform: translate(0, 0) scale(.2); }
    15%  { opacity: 1; transform: translate(calc(var(--drift) * .2), calc(var(--rise) * .15)) scale(1); }
    50%  { transform: translate(calc(var(--drift) * -.4), calc(var(--rise) * .55)) scale(1.04, .96); }
    85%  { opacity: .95; transform: translate(var(--drift), calc(var(--rise) * .9)) scale(.97, 1.03); }
    100% { opacity: 0; transform: translate(var(--drift), var(--rise)) scale(1.5); }
}

/* the button itself gives a soft, soapy wobble as the bubbles leave it */
.bc-btn-pop {
    animation: bcBtnPop .7s var(--bc-ease);
}

@keyframes bcBtnPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06, .95); }
    65%  { transform: scale(.98, 1.03); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bc-bubble,
    .bc-btn-pop {
        animation: none;
    }
}

/* 99. Motion budget ------------------------------------------------------
   The cursor dot and ring are moved with transforms once per frame
   (brote.js); the theme's "transition: all" made the ring re-animate every
   property on every mouse move. Scroll-in (WOW) animations are capped so
   content never takes 2.5 s to appear. */
.custom-cursor__cursor,
.custom-cursor__cursor-two {
    left: 0;
    top: 0;
    will-change: transform;
}

.custom-cursor__cursor {
    transition: transform .12s ease-out, background-color .2s ease, opacity .2s ease;
}

.custom-cursor__cursor-two {
    transition: width .3s, height .3s, opacity .3s;
}

@media (hover: none) {
    .custom-cursor__cursor,
    .custom-cursor__cursor-two {
        display: none;
    }
}

.wow.animated {
    animation-duration: .8s !important;
}