/* ==========================================================================
   Rixson Labs brand override
   --------------------------------------------------------------------------
   Loaded AFTER the theme's style.css so it wins the cascade. We re-map the
   theme's CSS variables to the brand palette and patch the handful of places
   that hard-code the old colours. Edit brand colours here only.

   Brand palette:
     #5a97de  light blue   (accents / gradient start)
     #4d4bde  indigo       (PRIMARY — buttons, links)
     #4d56d4  blue-indigo   (secondary accent)
     #3537b8  deep blue    (gradient end / dark sections)
   ========================================================================== */

:root {
    --ul-primary: #4d4bde;          /* was #2B4DFF */
    --ul-secondary: #3537b8;        /* was #731BB7 (purple) -> deep blue */
    --ul-c4: #1f2a86;               /* was #0A165E dark navy -> deep brand blue */
    --ul-c5: #5a97de;               /* was #635AD9 accent -> light blue */
    --ul-2-primary: #4d56d4;        /* was #7444FD purple -> brand blue */

    /* Blue -> indigo -> deep-blue, no purple */
    --ul-gradient: linear-gradient(105.18deg, #5a97de 0%, #4d4bde 55%, #3537b8 100%);

    /* Extra brand tokens (handy for future custom sections) */
    --brand-light: #5a97de;
    --brand: #4d4bde;
    --brand-alt: #4d56d4;
    --brand-deep: #3537b8;
}

/* --------------------------------------------------------------------------
   Patch the few hard-coded colours in style.css that don't use the variables.
   Selectors below mirror the theme; if a spot is missed it falls back to the
   variables above, so these are belt-and-braces for the prominent areas.
   -------------------------------------------------------------------------- */

/* Primary button: theme used blue -> pink (#C700B1). Re-blend to brand. */
.ul-btn > * {
    background: linear-gradient(90deg, #4d4bde 0%, #3537b8 100%);
}
.ul-btn > *::after {
    background: linear-gradient(90deg, #3537b8 0%, #4d4bde 100%);
}

/* Solutions section: blue -> cyan -> brand light blue */
.ul-solutions {
    background: linear-gradient(90deg, #4d4bde 0%, #5a97de 100%);
}

/* Stats band accent */
.ul-stats {
    background-color: #4d56d4;
}

/* Service-details sidebar link hover bar */
.ul-service-details-sidebar-links a::before {
    background: linear-gradient(90deg, #4d4bde 0%, #3537b8 100%);
}

/* Footer logo: the theme has no size cap on this <img>, so the SVG renders at
   its intrinsic (huge) size. Constrain it to match the header logo. */
.ul-footer-top-logo a img {
    max-width: clamp(150px, 12vw, 200px);
    height: auto;
}

/* Ticker "*" divider icon: recolored SVG; version query busts the browser cache. */
.ul-ticker p::before {
    background: url(../img/ticker-divider.svg?v=2) no-repeat center center !important;
}
/* Alternate ticker colours explicitly (Splide clones slides for the loop,
   which breaks the theme's :nth-child(odd/even) alternation). */
.ul-ticker p.ticker-blue {
    color: #4d4bde !important;
}
.ul-ticker p.ticker-dark {
    color: var(--ul-black) !important;
}

/* Testimonial slider: reviews have different text lengths, so the cards came
   out at different heights. Make every slide stretch to a common height and
   the card fill it, so they line up evenly. */
.ul-inner-testimonial-slider .swiper-wrapper {
    align-items: stretch;
}
.ul-inner-testimonial-slider .swiper-slide {
    height: auto;
    display: flex;
}
.ul-inner-testimonial-slider .swiper-slide .ul-inner-testimony {
    height: 100%;
    width: 100%;
}

/* Contact info cards: keep all three equal width so the Hours card has room. */
@media (min-width: 768px) {
    .ul-contact-info {
        flex: 1 1 0;
        min-width: 0;
    }
}
.ul-contact-info .descr {
    line-height: 1.55;
}
/* Each office's hours on its own line; shrink a touch so the longer Pakistan
   line fits without breaking onto a third line. */
.ul-hours .ul-hours-line {
    display: block;
    white-space: nowrap;
    font-size: 0.92em;
}

/* Services grid: descriptions vary in length, so cards came out uneven.
   Make every card in a row stretch to the same height. */
.ul-inner-services-container .row > .col {
    display: flex;
}
.ul-inner-services-container .ul-inner-service {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Push the image to the bottom so every card's image lines up, regardless of
   how long the description text is. */
.ul-inner-services-container .ul-inner-service-img {
    margin-top: auto;
}

/* Contact page: map (left) + form (right), equal height, stacked on mobile. */
.ul-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 2.5vw, 45px);
    align-items: stretch;          /* both columns share the tallest height */
}
@media (max-width: 991px) {
    .ul-contact-layout {
        grid-template-columns: 1fr;
    }
}

/* Left column: the two office maps stacked, filling the column height. */
.ul-contact-maps {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 26px);
    height: 100%;
}
.ul-contact-map-label {
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--ul-c4, #1f2a86);
}
.ul-contact-map-item {
    display: flex;
    flex-direction: column;
    flex: 1;                       /* two maps split the column evenly */
    min-height: 0;
}
.ul-contact-map-item .ul-contact-map {
    flex: 1;
    min-height: 240px;
}
.ul-contact-maps .ul-contact-map iframe,
.ul-contact-maps .ul-contact-map .ul-gmap {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    display: block;
    overflow: hidden;
}

/* Right column: form fills the full column height. */
.ul-contact-layout .ul-contact-form-2-container {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ul-contact-layout .ul-contact-form-2 {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* let the message textarea grow so the form fills the height evenly */
.ul-contact-layout .ul-contact-form-2 .grid {
    flex: 1;
}
@media (min-width: 992px) {
    .ul-contact-layout .ul-contact-form-2 textarea {
        min-height: 160px;
        height: 100%;
    }
}

/* Blog detail FAQ: tighter accordion items (the theme's default padding is
   tuned for the compact home FAQ and looks oversized in the wide blog column). */
.ul-blog-details-txt .ul-faq-accordion .ul-single-accordion-item {
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
}
.ul-blog-details-txt .ul-faq-accordion .ul-single-accordion-item.open .ul-single-accordion-item__body {
    padding-top: 8px !important;
}

/* Team detail image: source photos are only 300x450, so the theme's full-width
   container over-stretches them and they look blurry. Cap the display width and
   center it so the image renders close to its native size (sharp). */
.ul-team-details-img {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 300 / 450;
}
.ul-team-details-img img {
    height: 100%;
    object-fit: cover;
}

/* reCAPTCHA v3 badge: the footer stacks above it, so lift it and nudge it
   clear of the bottom edge. */
.grecaptcha-badge {
    z-index: 9999 !important;
    bottom: 20px !important;
}

/* Selection highlight to brand */
::selection {
    background-color: #4d4bde;
    color: #fff;
}
::-moz-selection {
    background-color: #4d4bde;
    color: #fff;
}

/* ==========================================================================
   Projects page — AJAX pagination loader overlay
   ========================================================================== */
.ul-projects-wrapper {
    position: relative;
}

/* Reuses the theme's .loader conic spinner, shown over the grid while a page
   loads via AJAX. */
.ul-ajax-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(1px);
    z-index: 5;
    border-radius: 12px;
}
.ul-ajax-loader.is-active {
    display: flex;
}
.ul-ajax-loader .loader {
    width: clamp(60px, 5vw, 90px);
}

/* Disabled prev/next on the first/last page. */
.ul-pagination a.disabled {
    pointer-events: none;
    opacity: 0.45;
}

/* LCP fast-paint: show each banner slider's first slide before Swiper runs.
   Swiper leaves .swiper-slide untransformed and can mark slides
   invisible-blank until it initialises; with the scripts deferred that delay
   lands right on the LCP element. Painting the first slide immediately lets
   the browser show the banner image without waiting for JavaScript. Swiper
   takes over cleanly once it initialises. */
.ul-banner-slider-wrapper .swiper:not(.swiper-initialized) {
    display: block;
}
.ul-banner-slider-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}
.ul-banner-slider-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: 100%;
}
/* Only the first slide is shown pre-init; the rest stay hidden so they do not
   stack and blow out the banner height before Swiper lays them out. */
.ul-banner-slider-wrapper .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}
.ul-banner-slider-wrapper .swiper:not(.swiper-initialized) .swiper-slide:first-child {
    display: block;
}

/* Contextual internal links inside body copy (home about + why-choose-us).
   Brand-coloured with an underline so they read as links, not plain text. */
.ul-about-content-tab-descr a,
.ul-why-choose-us-point-descr a {
    color: var(--ul-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}
.ul-about-content-tab-descr a:hover,
.ul-why-choose-us-point-descr a:hover {
    opacity: 0.75;
}