/* ------------------------------------------------------------------
   Mourvi Technology brand overrides on top of the Bizgen theme.
   Loaded after assets/css/style.css so rules here win.
------------------------------------------------------------------ */

/* ============ Brand palette v2 ============
   The stock Bizgen palette is a single flat blue (#3358D3) used unchanged
   by every demo of this theme, which is exactly why the site reads as
   "generic template" rather than Mourvi's own brand. Every button, icon,
   link and active state already keys off var(--color-primary), so
   deepening it to a richer, more distinctive indigo -- and pairing it with
   the amber already used for star ratings, promoted here to a proper
   secondary accent -- re-tints the whole site from one place. */
:root {
    --color-primary: #1F3FCB;
    --mv-navy: #0B1442;
    --mv-accent: #FF8F3C;
}

.rts-btn.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--mv-navy) 140%);
}
.rts-btn.btn-primary:hover {
    background: var(--mv-navy);
}

/* Pill-style section kicker (e.g. Services page) hardcodes the old blue at
   low opacity -- match the new primary so it doesn't look mistinted. */
.rts-section-title .subtitle-three {
    background: rgba(31, 63, 203, 0.08);
}

/* Solid color-wash overlay on the CTA photo block, previously hardcoded to
   the old blue regardless of the --color-primary variable. */
.rts-cta-wrapper-three .cta-image-area::after {
    background: var(--color-primary);
}

/* The breadcrumb banner used at the top of every inner page (AboutUs,
   Services, Portfolio, Testimonials, Pricing, Features, Contact, Register)
   sets its heading to white text but the theme never gives it a darkening
   overlay -- contrast against the photo depends entirely on luck, and on
   lighter photos the heading is nearly unreadable. Add one, matching the
   pattern the theme already uses on its CTA sections. */
.rts-breadcrumb-area {
    position: relative;
}
.rts-breadcrumb-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 38, 0.55);
}
.rts-breadcrumb-area .container {
    position: relative;
    z-index: 1;
}

/* Extra legibility insurance for any white ("cw") heading/body text sitting
   on a photo background -- a soft shadow keeps it readable even where the
   photo itself is light, without needing per-image tuning. */
.cw {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* ============ Home hero -- editorial slider ============
   Replaces the old full-bleed dark swiper banner with a lighter, asymmetric
   hero slider (bold type + a single supporting photo + scroll cue) in the
   spirit of modern portfolio/agency sites, still rotating between slides
   via Swiper (initialized in main.js as .mv-hero-slider, autoHeight so
   slides of different copy length don't need matched heights). */
html {
    scroll-behavior: smooth;
}
.mv-hero {
    position: relative;
    background: linear-gradient(180deg, #EEF1FC 0%, #FFFFFF 100%);
    overflow: hidden;
}
.mv-hero .swiper-slide {
    padding: 170px 0 90px;
}
.mv-hero .mv-hero-pagination {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-bottom: 30px;
}
.mv-hero .mv-hero-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #D5DAF0;
    opacity: 1;
    transition: all .3s;
}
.mv-hero .mv-hero-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary);
    width: 26px;
    border-radius: 5px;
}
.mv-hero-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(27, 31, 59, .12);
    z-index: 5;
    transition: all .3s;
}
.mv-hero-arrow:hover {
    background: var(--color-primary);
    color: #fff;
}
.mv-hero-arrow.mv-hero-prev { left: 20px; }
.mv-hero-arrow.mv-hero-next { right: 20px; }
@media (max-width: 1300px) {
    .mv-hero-arrow { display: none; }
}
.mv-hero::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -140px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 63, 203, 0.12) 0%, rgba(31, 63, 203, 0) 70%);
    pointer-events: none;
}
.mv-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}
.mv-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 24px;
}
.mv-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mv-accent);
    box-shadow: 0 0 0 4px rgba(255, 143, 60, .18);
}
.mv-hero-content .title {
    font-size: 62px;
    line-height: 1.1;
    font-weight: var(--f-bold);
    color: var(--color-heading);
    margin-bottom: 24px;
}
.mv-hero-content .title span {
    color: var(--color-primary);
}
.mv-hero-content .desc {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-body);
    max-width: 520px;
    margin-bottom: 40px;
}
.mv-hero-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}
.mv-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-heading);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-heading);
    transition: all .3s;
}
.mv-hero-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    gap: 12px;
}
.mv-hero-stats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 16px;
}
.mv-hero-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid #E7E9F3;
}
.mv-hero-stats > div:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}
.mv-hero-stats span {
    font-size: 28px;
    font-weight: var(--f-bold);
    color: var(--color-heading);
}
.mv-hero-visual {
    position: relative;
}
.mv-hero-visual-card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(27, 31, 59, .15);
    aspect-ratio: 1 / 1.05;
}
.mv-hero-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mv-hero-visual-badge {
    position: absolute;
    left: -20px;
    bottom: -20px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 20px 40px rgba(27, 31, 59, .12);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-heading);
    display: flex;
    align-items: center;
    gap: 10px;
}
.mv-hero-visual-badge i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.mv-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-body);
    text-decoration: none;
    animation: mv-bounce 2s infinite;
}
.mv-hero-scroll i {
    font-size: 14px;
    color: var(--mv-accent);
}
@keyframes mv-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}
@media (max-width: 991px) {
    .mv-hero { padding: 140px 0 80px; }
    .mv-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .mv-hero-content .desc { margin-left: auto; margin-right: auto; }
    .mv-hero-actions { justify-content: center; }
    .mv-hero-stats { justify-content: center; }
    .mv-hero-visual { max-width: 420px; margin: 0 auto; }
    .mv-hero-visual-badge { left: 50%; transform: translateX(-50%); bottom: -16px; }
}
@media (max-width: 767px) {
    .mv-hero-content .title { font-size: 38px; }
    .mv-hero-stats > div { padding-right: 24px; margin-right: 24px; }
}

/* A gentle lift-on-hover for the card grids used across Home/AboutUs/
   Services/Features/Pricing gives them a more tactile, premium feel;
   the theme's own :hover rule already changes the shadow but doesn't move
   the card, so this is additive rather than overriding anything. */
.rts-service-area .rts-service-wrapper-three .single-item,
.rts-service-area .rts-service-wrapper-four .single-item,
.rts-why-choose-area .why-choose-item,
.rts-contact-stats-area .single-contact-stats {
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}
.rts-service-area .rts-service-wrapper-three .single-item:hover,
.rts-service-area .rts-service-wrapper-four .single-item:hover,
.rts-why-choose-area .why-choose-item:hover,
.rts-contact-stats-area .single-contact-stats:hover {
    transform: translateY(-6px);
}

/* The Mourvi logo has dark text, so give it a light chip wherever the
   theme places it on a dark background (footer, offcanvas, dark topbar). */
.rts-footer-area .footer-widget-content > a.logo,
.rts-offcanvas-area .logo {
    display: inline-block;
    background: #ffffff;
    padding: 10px 18px;
    border-radius: 10px;
}

.rts-footer-area .footer-widget-content > a.logo img,
.rts-offcanvas-area .logo img {
    max-width: 170px;
}

.rts-header-inner-area .header-main-inner-area .logo img {
    max-width: 165px;
}

/* The theme only stretches the (invisible) Bootstrap column to match its
   tallest sibling -- the visible card never fills that height, so cards
   with shorter copy end up visibly smaller. Make the column a flex
   container and let the card fill it, giving every card in a row the
   same height regardless of how much text it has. */
.rts-service-wrapper-three .row > [class*="col-"] {
    display: flex;
}

.rts-service-wrapper-three .single-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Font Awesome icons standing in for the theme's bespoke SVG icon set --
   give them a consistent, legible size wherever an icon wrapper expects
   a graphic. */
.single-item > .icon i,
.why-choose-item .icon i,
.content-item-wrapper .single-item .icon i,
.rts-contact-info-area .contact-info-item .icon i,
.faq-counter-area .icon i {
    font-size: 30px;
    color: var(--color-primary);
    line-height: 1;
}

.icon-number-area .icon i {
    font-size: 30px;
    color: var(--color-primary);
    line-height: 1;
    transition: all 0.4s;
}

.rts-service-area .service-item .icon-number-area .icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rts-service-area .service-item:hover .icon-number-area .icon i {
    color: #ffffff;
}

/* Stat / counter thumbs in the theme expect a photographic circle image;
   swap in a soft brand-tinted icon badge instead. */
.single-contact-stats .thumb,
.single-counter .thumb {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(31, 63, 203, 0.08);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-contact-stats .thumb i {
    font-size: 34px;
    color: var(--color-primary);
}

/* Simple star-rating rows used on the Testimonials page */
.stars-area {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.stars-area li i {
    color: #FF8F3C;
    font-size: 14px;
}

/* Utility badge used in a couple of Register/Contact side panels */
.mv-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(31, 63, 203, 0.08);
    color: var(--color-primary);
    font-weight: var(--f-semi-bold);
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 30px;
    margin-bottom: 16px;
}

/* Registration/Contact form built with ASP.NET tag helpers reuses the
   theme's .rts-contact-form input styling, keep validation text legible */
.rts-contact-form .text-danger,
.single-input .text-danger {
    display: block;
    color: #FF0003;
    font-size: 13px;
    margin-top: 6px;
}

.rts-contact-form select.single-select {
    width: 100%;
    height: 60px;
    border: 1px solid #E7E7E7;
    border-radius: 6px;
    padding: 0 20px;
    background: #F7F7F7;
    color: var(--color-body);
    font-size: 16px;
}

/* Notyf toast + validation summary already ship their own styling;
   just make sure they float above the sticky header */
.notyf {
    z-index: 99999;
}

/* Second panel next to the Register form inside .rts-maps-contact-area
   (the theme only styles a single 60/40 split for form+map) */
.rts-maps-contact-area .rts-contact-wrapper.mv-register-info {
    width: 40%;
}

@media (max-width: 991px) {
    .rts-maps-contact-area .rts-contact-wrapper.mv-register-info {
        width: 100%;
        padding: 50px;
    }
}

@media (max-width: 575px) {
    .rts-maps-contact-area .rts-contact-wrapper.mv-register-info {
        padding: 30px;
    }
}

.rts-maps-contact-area .rts-contact-wrapper.mv-register-info .widget-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rts-maps-contact-area .rts-contact-wrapper.mv-register-info .widget-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 14px;
    font-size: 15px;
}

.rts-maps-contact-area .rts-contact-wrapper.mv-register-info .widget-info-list li i {
    color: var(--color-primary);
    margin-top: 4px;
}

/* ============ Redesign pass v2 -- visible branding overhaul ============
   Recoloring var(--color-primary) alone didn't read as a redesign because
   the surfaces and shapes people actually notice hadn't changed: the top
   bar and footer were still the theme's flat neutral charcoal (not blue at
   all), buttons were still stock rectangles, and the current page's nav
   link had no distinct state whatsoever. This pass changes those directly. */

/* Top bar + footer were flat var(--color-heading) (near-black gray) --
   make Mourvi's dark surfaces an actual navy gradient so the brand color
   shows up on every single page, not just in a few accent details. */
.rts-header-inner-area .header-top-inner-area,
.rts-footer-area {
    background: linear-gradient(120deg, var(--mv-navy) 0%, #16225C 100%);
}
.rts-header-inner-area .header-top-inner-area .top-social a:hover {
    color: var(--mv-accent);
}

/* A branded gradient edge under the header instead of it blending straight
   into the white page. */
.rts-header-inner-area .header-main-inner-area {
    position: relative;
}
.rts-header-inner-area .header-main-inner-area::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--mv-accent));
}
.rts-sticky-header.sticky.rts-header-inner-area .header-main-inner-area {
    box-shadow: 0 12px 30px rgba(11, 20, 66, .12);
}

/* The theme ships zero styling for the current page's nav link -- every
   page looked identical in the menu no matter where you were. Give it an
   actual color + underline mark. */
.main-nav-area > ul > li > a.active {
    color: var(--color-primary);
    position: relative;
}
.main-nav-area > ul > li > a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 3px;
    border-radius: 2px;
    background: var(--mv-accent);
}

/* Pill-shaped CTA buttons with a circular icon chip that lights up amber on
   hover, replacing the theme's plain rectangular button everywhere it's
   used (header, hero, section CTAs). */
.rts-btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border-radius: 50px;
    padding: 14px 10px 14px 28px;
}
.rts-btn.btn-primary i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    margin-left: 0;
    transition: all .35s;
}
.rts-btn.btn-primary:hover i {
    background: var(--mv-accent);
    transform: rotate(0deg) translateX(2px);
}

/* Section kickers ("subtitle") were plain uppercase text trailing off into
   a thin line -- turn them into the same branded pill chip already used on
   the Services page (subtitle-three) with an accent dot, so every section
   intro on every page carries one consistent, clearly-designed mark
   instead of bare text. */
.rts-section-title .subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(31, 63, 203, 0.08);
    padding: 8px 18px 8px 14px;
    border-radius: 100px;
}
.rts-section-title .subtitle::before {
    position: static;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mv-accent);
    transform: none;
    flex-shrink: 0;
}

/* ============ Portfolio cards -- browser-mockup case studies ============
   The theme's project component was built for full-bleed art photography:
   a color-wash overlay + title panel that only appear on :hover, with the
   image force-cropped to a fixed height. That's the wrong shape for our
   content -- real client website screenshots -- because (a) the title is
   invisible by default and never appears at all on touch devices (no
   hover), and (b) a plain cropped screenshot with no context reads as a
   raw image dump, not a case study. This replaces it with an always-visible
   caption plus a browser-chrome frame around each screenshot so it reads
   as a curated project mockup, with a genuine "Visit Live Site" link. */
.mv-portfolio-intro {
    margin-bottom: 20px;
}
.mv-portfolio-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(11, 20, 66, .07);
    transition: transform .4s ease, box-shadow .4s ease;
}
.mv-portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 46px rgba(11, 20, 66, .16);
}
.mv-portfolio-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #E9ECF7;
    border-bottom: 1px solid #ECEEF7;
}
.mv-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: #F3F4F9;
}
.mv-browser-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #D5D8E6;
}
.mv-portfolio-thumb img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: top center;
    transition: transform .6s ease;
}
.mv-portfolio-card:hover .mv-portfolio-thumb img {
    transform: scale(1.06);
}
.mv-portfolio-visit {
    position: absolute;
    inset: 0;
    top: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(11, 20, 66, .72);
    color: #fff;
    font-weight: var(--f-semi-bold);
    font-size: 15px;
    opacity: 0;
    transition: opacity .35s ease;
}
.mv-portfolio-card:hover .mv-portfolio-visit {
    opacity: 1;
}
.mv-portfolio-visit i {
    transform: rotate(0deg);
}
.mv-portfolio-body {
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}
.mv-portfolio-tag {
    display: inline-flex;
    align-self: flex-start;
    background: rgba(31, 63, 203, 0.08);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: var(--f-semi-bold);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 5px 12px;
    border-radius: 100px;
}
.mv-portfolio-title {
    margin: 0;
    font-size: 20px;
}
.mv-portfolio-title a {
    color: var(--color-heading);
    transition: color .3s ease;
}
.mv-portfolio-title a:hover {
    color: var(--color-primary);
}
@media (max-width: 575px) {
    .mv-portfolio-thumb img {
        height: 200px;
    }
}