/* ==========================================================================
   Custom styles — overrides and additions on top of style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero section
   -------------------------------------------------------------------------- */
.rv-34-banner-tags {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
    .rv-34-banner-tags {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Scrolling logos / partner section
   -------------------------------------------------------------------------- */
.rv-34-partner {
    overflow: hidden;
    background: var(--rv-white, #fff);
    border-top: 1px solid #f0f0f0;
}

.rv-34-partner-marquee {
    overflow: hidden;
}

.rv-34-partner-track {
    display: flex;
    gap: 4rem;
    align-items: center;
    width: max-content;
    animation: partner-marquee 30s linear infinite;
}

.rv-34-partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.partner-logo {
    height: 48px;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter .3s, opacity .3s;
}

.partner-logo:hover {
    filter: grayscale(0);
    opacity: 1;
}

.partner-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #aaa;
    white-space: nowrap;
}

@keyframes partner-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-16.6667%); }
}

/* --------------------------------------------------------------------------
   Custom animated cursor
   -------------------------------------------------------------------------- */
.cursor,
.cursor-follower {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s;
}

body.cursor-visible .cursor,
body.cursor-visible .cursor-follower {
    opacity: 1;
}

.cursor {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, opacity 0.3s;
}

.cursor.active {
    transform: translate(-50%, -50%) scale(0);
}

.cursor-follower {
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff;
    mix-blend-mode: difference;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.3s;
}

.cursor-follower.active {
    transform: scale(2);
    background-color: #ffffff;
    border-color: transparent;
    mix-blend-mode: difference;
}

@media (max-width: 991px) {
    .cursor,
    .cursor-follower {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Services section — "View All Services" button on light background
   -------------------------------------------------------------------------- */
.rv-34-service .rv-34-btn {
    background-color: #050505;
    border-color: #050505;
    color: #ffffff;
}
.rv-34-service .rv-34-btn:hover {
    background-color: #14b8a6;
    border-color: #14b8a6;
    color: #050505;
}

/* --------------------------------------------------------------------------
   Services inner page — Font Awesome icon size to match template SVG (76px)
   -------------------------------------------------------------------------- */
.rv-14-service__icon i {
    font-size: 76px;
    line-height: 1;
    display: block;
    color: #020208;
    transition: color 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.rv-inner-service:hover .rv-14-service__icon i {
    color: #14b8a6;
}

.rv-inner-service .rv-14-service__btn {
    margin-top: 28px;
}

@media screen and (max-width: 991px) {
    .rv-31-footer,
    .rv-34-footer {
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   About page — "What Makes Us Different" bullet list matches paragraph style
   -------------------------------------------------------------------------- */
.rv-31-abt-info-1__item-text .rv-14-service__features li {
    font-size: 15px;
    font-family: var(--inter);
    font-weight: 500;
    color: #0A2540;
    opacity: 0.6;
    margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Service card overlay — keep side margins (visual frame) but reduce
   top/bottom padding at narrower viewports so the "Learn More" button
   doesn't overflow. Side margins stay so the green box has a frame.
   Flexbox + margin-top:auto keeps the button pinned to the bottom.
   -------------------------------------------------------------------------- */
.rv-34-service-item__overlay {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rv-34-service-item__overlay .rv-34-view-link {
    margin-top: auto;
    flex-shrink: 0;
}

@media (max-width: 1199px) {
    .rv-34-service-item__overlay {
        padding-top: 0;
        padding-bottom: 10px;
    }
}

/* --------------------------------------------------------------------------
   Service cards — equal height within each row + vertical gap between rows.
   Bootstrap .row is already a flex container (align-items: stretch by default),
   so columns reach the same height. height:100% makes the card fill that height.
   row-gap restores the vertical spacing that margin-bottom lost with height:100%.
   -------------------------------------------------------------------------- */
.rv-34-service-item {
    height: 100%;
}

.rv-34-service .row {
    row-gap: 24px;
}

/* --------------------------------------------------------------------------
   Project detail — reduce top spacing (breadcrumb already adds pb-120)
   -------------------------------------------------------------------------- */
.rv-project-details.rv-section-spacing {
    padding-top: 40px;
}

@media screen and (max-width: 1399px) {
    .rv-project-details.rv-section-spacing {
        padding-top: 30px;
    }
}

@media screen and (max-width: 991px) {
    .rv-project-details.rv-section-spacing {
        padding-top: 20px;
    }
}

/* --------------------------------------------------------------------------
   Project detail — hero image (square vs landscape mode)
   -------------------------------------------------------------------------- */
.rv-project-details__cover--square {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
}

.rv-project-details__cover--wide {
    border-radius: 12px;
    overflow: hidden;
}

.rv-project-details__hero-img {
    display: block;
    height: 520px;
    width: auto;
}

@media (max-width: 1199px) {
    .rv-project-details__hero-img { height: 460px; }
}
@media (max-width: 991px) {
    .rv-project-details__hero-img { height: 360px; }
}
@media (max-width: 767px) {
    .rv-project-details__hero-img { height: 260px; }
}
@media (max-width: 479px) {
    .rv-project-details__hero-img { height: 180px; }
}

.rv-project-details__cover--wide .rv-project-details__hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 520;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Project detail — feature & solution images
   -------------------------------------------------------------------------- */
.rv-project-details__feature-img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

/* Solution image — capped portrait screenshot, centered in its column so it
   doesn't dominate the row and the paragraph can sit at the top (next to it). */
.rv-project-details__solution-img {
    display: block;
    max-height: 520px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    border-radius: 8px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .rv-project-details__solution-img {
        margin-top: 10px;
    }
}

/* Sticky wrapper — image starts at the top of the Challenge block and stays
   pinned (below the fixed header) while scrolling through Challenge + Solution. */
.rv-project-details__sticky-img {
    position: sticky;
    top: 110px;
}

@media (max-width: 991px) {
    .rv-project-details__sticky-img {
        position: static;
    }
}

/* Prev/Next project nav — when only one arrow is shown (first or last project)
   there is nothing to separate, so hide the centre divider line. This matters
   most on mobile, where the divider is a stray horizontal line. */
.rv-project-details-bottom-navs--single::before {
    display: none;
}