/* Muvaar site styles.
   Loaded after the theme's bootstrap.min.css, style.min.css and responsive.css
   (see templates/partials/head-css.html), so rules here override the theme. */

html:not([data-bs-theme="dark"]) .muvaar-logo-dark { display: none; }
html[data-bs-theme="dark"] .muvaar-logo-light { display: none; }
/* Logo sizes. The SVG only has a viewBox (no width/height), so with max-width:100% in the
   shrink-to-fit header it collapsed to 0x0 -- give it an explicit size instead.
   The logo files' viewBox is trimmed to the artwork, so these widths are the visible
   wordmark width (+25% over the previous sizes: 112 -> 122px etc.). */
:root {
    --muvaar-logo-w: 122px;        /* header, desktop + tablet */
    --muvaar-logo-w-sm: 105px;     /* header, phones (<= 575px) */
    --muvaar-logo-w-menu: 142px;   /* logo inside the opened mobile menu */
    --muvaar-logo-w-footer: 186px; /* footer */
}
.theme-main-menu .top-header .logo img {
    width: var(--muvaar-logo-w);
    max-width: none;
    max-height: none !important;
    height: auto;
}
@media (max-width: 575.98px) {
    .theme-main-menu .top-header .logo img { width: var(--muvaar-logo-w-sm); }
}
.footer-one .footer-intro img {
    width: var(--muvaar-logo-w-footer);
    max-width: none;
    height: auto;
}
.theme-main-menu .navbar-collapse .logo img {
    width: var(--muvaar-logo-w-menu);
    max-width: none;
    height: auto;
}
/* Loading screen: the small dot that orbits the loader icon (theme default is blue #380CFA).
   #FCBA04 is the yellow in the Muvaar logo. */
.ctn-preloader .icon span:after {
    background: #FCBA04;
    box-shadow: 0 0 10px rgba(252, 186, 4, .6);
}
/* Partner logo tiles stay white in both themes so monochrome brand marks stay legible */
.muvaar-partner-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 14px;
    min-height: 160px;
    padding: 28px 24px;
    box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.1);
}
/* Every logo (any proportions, svg or raster) fits the same box without distortion */
.muvaar-partner-logo {
    width: 100%;
    max-width: 190px;
    height: 72px;
    object-fit: contain;
}
/* Text tile for partners without a logo file yet. Tiles stay white in dark mode, so the
   text colour is set explicitly instead of inheriting the (light) dark-mode body colour. */
.muvaar-partner-name {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    color: #1D1D1D;
}
.muvaar-partner-name small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    color: rgba(29, 29, 29, .65);
}
@media (max-width: 575.98px) {
    .muvaar-partner-tile { min-height: 130px; padding: 20px 14px; }
    .muvaar-partner-logo { height: 56px; }
    .muvaar-partner-name { font-size: 22px; }
}
/* Plain text client-highlight cards (no icon graphic, unlike card-style-four) */
.muvaar-client-card {
    background: #fff;
    border-radius: 24px;
    padding: 36px 34px;
    box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.1);
}
.muvaar-client-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}
.muvaar-client-card p {
    font-size: 16px;
    line-height: 1.6em;
    margin-bottom: 0;
    color: rgba(0, 0, 0, .65);
}
html[data-bs-theme="dark"] .muvaar-client-card {
    background: #1D1B1B;
}
html[data-bs-theme="dark"] .muvaar-client-card p {
    color: rgba(255, 255, 255, .7);
}
/* Side-by-side images share one height on desktop only (>= 375px); extra is cropped, not stretched */
@media (min-width: 375px) {
    .muvaar-img-equal {
        height: clamp(380px, 30vw, 460px);
        object-fit: cover;
    }
}

/* Dark mode: service slider arrows are white (and flip to dark on the white hover circle) */
html[data-bs-theme="dark"] .block-feature-fifteen .slider-arrows li .icon-dark { opacity: 0; }
html[data-bs-theme="dark"] .block-feature-fifteen .slider-arrows li .icon-white { opacity: 1; }
html[data-bs-theme="dark"] .block-feature-fifteen .slider-arrows li:hover .icon-dark { opacity: 1; }
html[data-bs-theme="dark"] .block-feature-fifteen .slider-arrows li:hover .icon-white { opacity: 0; }

/* Homepage service slider: shadows so each card stands apart (light + dark).
   .slick-list clips overflow, so give it room above/below for the shadow
   (negative margins keep the section's layout unchanged). */
.service-slider-one .slick-list {
    padding: 30px 0 70px !important; /* !important: Slick centerMode sets padding inline */
    margin: -30px 0 -70px;
}
/* Uniform card height: slides stretch to the tallest card, cards fill their slide */
.service-slider-one .slick-track {
    display: flex !important;
}
.service-slider-one .slick-slide {
    float: none;
    height: auto;
}
.service-slider-one .slick-slide > div,
.service-slider-one .slick-slide .item,
.service-slider-one .slick-slide .card-style-four {
    height: 100%;
}
.service-slider-one .card-style-four,
.service-section-one .card-style-four {
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 4px 14px rgba(30, 30, 30, .08),
                0 22px 44px -14px rgba(30, 30, 30, .25);
    transition: transform .3s ease, box-shadow .3s ease;
}
/* Services page grid: cards in a row match height (minus the mt-30 top margin) */
.service-section-one .col-lg-4 > .card-style-four {
    height: calc(100% - 30px);
}
.service-slider-one .card-style-four:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 18px rgba(30, 30, 30, .10),
                0 30px 54px -14px rgba(30, 30, 30, .32);
}
html[data-bs-theme="dark"] .service-slider-one .card-style-four,
html[data-bs-theme="dark"] .service-section-one .card-style-four {
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55),
                0 22px 44px -12px rgba(0, 0, 0, .85),
                inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-bs-theme="dark"] .service-slider-one .card-style-four:hover {
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .6),
                0 30px 54px -12px rgba(0, 0, 0, .95),
                inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Loading screen wordmark: scale with the screen so "MUVAAR" stays on one line on phones.
   The theme's fixed 60px letters + 12px spacing are wider than a 375px screen and wrapped. */
.ctn-preloader .txt-loading {
    max-width: 100%;
    padding: 0 16px;
    white-space: nowrap;
    text-align: center;
}
.ctn-preloader .txt-loading .letters-loading {
    font-size: clamp(28px, 12vw, 60px);
    letter-spacing: .2em;
}
/* No trailing gap after the last letter, so the word sits centred under the icon */
.ctn-preloader .txt-loading .letters-loading:last-child {
    letter-spacing: 0;
}

/* Dark mode: the theme leaves .bg-grey light (#f1f1f1) while headings turn white, which made
   the contact page's "Questions?" heading invisible. Use the same dark panel colour as the cards. */
html[data-bs-theme="dark"] .bg-grey {
    background: #1D1B1B;
}