/*
Theme Name: Prakriti EV
Theme URI: https://autoev.com
Author: Designesia
Author URI: https://designesia.com
Description: Electric Vehicle & EV Dealer WordPress Theme - fully converted from HTML with Gutenberg block support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autoev
Tags: electric-vehicle, automotive, gutenberg, custom-post-types, mega-menu, swiper, dark
*/

/* =========================================================
   Prakriti EV Theme — base overrides & WordPress-specific styles
   The bulk of styling comes from assets/css/ (enqueued).
   ========================================================= */

/* ─── Right-align the main navigation (desktop) ─── */
@media (min-width: 992px) {
    header .de-flex {
        position: relative;
    }

    /* Center the menu on the header without using transform.
       (A transform here would become the containing block for the mega menu's
       position:fixed panel and break its full-width dropdown.) */
    header .de-flex-col.header-col-mid {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
        width: max-content;
        max-width: 100%;
        justify-content: center;
        align-items: center;
    }

    header #mainmenu {
        margin: 0;
    }
}

/* ─── WordPress admin bar: push fixed header down so it doesn't hide behind the bar ─── */
.admin-bar header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar header {
        top: 46px !important;
    }
}

/* =========================================================
   Brand logo sizing (header + footer) — responsive
   ========================================================= */

/* ─── Header logo + experience badge layout ─── */
header #logo {
    display: flex;
    align-items: center;
}

/* Standard header logo height — keeps any uploaded logo consistent regardless of native size */
header #logo .logo-main,
header #logo .logo-scroll,
header #logo .logo-mobile {
    height: 58px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

/* Experience badge — sits to the right of the logo, visible in all header/scroll states */
header #logo .logo-badge {
    height: 58px;
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
    display: inline-block !important;
}

/* Slightly tighter when the header shrinks on scroll */
header.smaller #logo .logo-main,
header.smaller #logo .logo-scroll,
header.smaller #logo .logo-mobile,
header.smaller #logo .logo-badge {
    height: 50px;
}

/* ─── Footer logo ─── */
footer .footer-logo {
    height: 130px;
    width: auto;
    max-width: 420px;
    object-fit: contain;
}

/* ─── Tablet ─── */
@media (max-width: 991px) {

    header #logo .logo-main,
    header #logo .logo-scroll,
    header #logo .logo-mobile,
    header #logo .logo-badge,
    header.smaller #logo .logo-main,
    header.smaller #logo .logo-scroll,
    header.smaller #logo .logo-mobile,
    header.smaller #logo .logo-badge {
        height: 52px;
    }
}

/* ─── Mobile ─── */
@media (max-width: 767px) {

    header #logo .logo-mobile,
    header.smaller #logo .logo-mobile {
        height: 46px;
        max-width: 190px;
    }

    header #logo .logo-badge,
    header.smaller #logo .logo-badge {
        height: 44px;
    }

    header #logo .logo-badge {
        margin-left: 0.5rem !important;
    }

    footer .footer-logo {
        height: 104px;
    }
}

/* ─── Small phones ─── */
@media (max-width: 400px) {

    header #logo .logo-mobile,
    header.smaller #logo .logo-mobile {
        height: 38px;
        max-width: 150px;
    }

    header #logo .logo-badge,
    header.smaller #logo .logo-badge {
        height: 36px;
    }
}

/* ─── Feature cards carousel (Built For Modern Urban Mobility) ─── */
.features-swiper {
    overflow: hidden;
    padding-bottom: 42px;
}

/* Reset the global (Variant & Price) slide styling that would otherwise fade,
   shrink and clip these slides. */
.features-swiper .swiper-slide,
.features-swiper .swiper-slide.swiper-slide-active {
    height: auto;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible;
    border-radius: 0;
}

.features-swiper .swiper-pagination {
    bottom: 0;
}

/* ─── Reset WordPress body/html margin injected by admin bar ─── */
html.admin-bar {
    margin-top: 0 !important;
}

/* ─── Strip WordPress default margins from headings/paragraphs ─── */
.no-bottom,
.no-top {
    margin: 0 !important;
}

/* ─── Prevent WordPress from outputting extra margins on page content ─── */
body.page #content p,
body.page #content h1,
body.page #content h2,
body.page #content h3,
body.page #content h4,
body.page #content h5,
body.page #content h6 {
    margin-top: revert;
    margin-bottom: revert;
}

/* --- Gutenberg block editor alignment --- */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* --- Remove default WordPress margins on full-width pages --- */
.page-template-template-fullwidth #content,
.page-template-template-fullwidth .entry-content {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

/* --- Navigation menu active state --- */
#mainmenu li.current-menu-item>a,
#mainmenu li.current-menu-parent>a,
#mainmenu li.current-menu-ancestor>a {
    color: var(--color-1, #122c5c) !important;
}

/* --- WordPress alignment classes compatibility --- */
.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignleft {
    float: left;
    margin-right: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
}

/* --- Screen reader text --- */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    white-space: nowrap;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* --- Comment form & WP pagination --- */
.wp-pagenavi,
.navigation.pagination {
    text-align: center;
    margin: 40px 0;
}

/* Center the pagination row (Bootstrap makes .pagination display:flex, which ignores text-align) */
.navigation.pagination,
.navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.wp-pagenavi a,
.wp-pagenavi span,
.page-numbers {
    padding: 6px 14px;
    border: 1px solid #ddd;
    margin: 2px;
    display: inline-block;
}

.page-numbers.current {
    background: var(--color-1, #122c5c);
    color: #fff;
    border-color: var(--color-1, #122c5c);
}

/* --- Single model hero: model image sits in the background (right side), text stays readable --- */
.single-vehicle #subheader .jarallax-img {
    object-fit: cover;
    object-position: right center;
    /* keep the vehicle toward the right, like the original layout */
}

/* (The black hero overlay is defined once, site-wide, as the unified
   top-left gradient further down — see ".home-hero, .product-hero,
   .single-vehicle #subheader ::before". No separate overlay here.) */

/* --- Model carousel ("Find Your Perfect Electric Ride" / "Variant & Price"): uniform, well-sized images (no oversize, no scroll) --- */
.vehicle-ride-swiper .swiper-slide img {
    height: 70vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 4px;
    display: block;
}

@media (max-width: 991px) {
    .vehicle-ride-swiper .swiper-slide img {
        height: 50vh;
    }
}

@media (max-width: 767px) {
    .vehicle-ride-swiper .swiper-slide img {
        height: 40vh;
    }
}

/* --- Vehicle CPT archive card hover --- */
.vehicle-card .hover-bg-color {
    opacity: 0;
    transition: opacity .3s;
}

.vehicle-card:hover .hover-bg-color {
    opacity: .1;
}

/* --- Vehicle archive cards: show the FULL vehicle image (no crop), uniform card height --- */
.vehicle-card .bg-grey a img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    /* fit the whole image inside the box, letterbox if needed */
    object-position: center;
}

@media (max-width: 767px) {
    .vehicle-card .bg-grey a img {
        height: 220px;
    }
}

/* --- Hero slider: prevent content taller than the slide from being clipped --- */
.v-center .sw-caption {
    max-height: 100vh;
    overflow: visible;
    box-sizing: border-box;
    padding-top: 60px;
    padding-bottom: 40px;
}

/* Remove the in-row spacers' effect — padding on sw-caption handles spacing instead */
.v-center .swiper-slide .spacer-double,
.v-center .swiper-slide .spacer-single {
    display: none !important;
}

/* Vehicle image: scale to fit the available slide height */
.v-center .slider-extra img.img-fluid {
    max-height: 55vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}

/* --- Hero slider navigation buttons — perfectly left/right aligned --- */
.v-center .swiper-button-prev,
.v-center .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    color: #ffffff;
}

.v-center .swiper-button-prev {
    left: 30px;
}

.v-center .swiper-button-next {
    right: 30px;
}

/* --- "Choose Variant" carousel — uniform image height across all model pages --- */
/* Desktop: 70vh. Tablet & mobile: 50vh. Slides are auto-width, so width follows the image aspect ratio. */
.variant-carousel .swiper-slide img {
    height: 70vh;
    width: auto;
    max-width: none;
    object-fit: contain;
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    .variant-carousel .swiper-slide img {
        height: 50vh;
    }
}

/* --- Single-model hero banner — show the banner cleanly with NO dark overlay --- */
/* Renders the _vehicle_hero_bg image as a real cover background (no jarallax z-index:-100 trick,
   no bg-dark tint). Text sits above it. */
#subheader.model-hero {
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

#subheader.model-hero>.jarallax-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 1;
}

#subheader.model-hero>.container {
    position: relative;
    z-index: 2;
}

/* Light footer (matches home design): dark text on white instead of the
   theme default near-white footer text, which is invisible on white. */
footer.footer-light,
footer.footer-light p,
footer.footer-light .widget,
footer.footer-light .subfooter {
    color: #666666;
}

/* =========================================================
   Mockup Design Overrides (Sky Blue scheme & clean layouts)
   ========================================================= */
:root {
    --primary-color: #122c5c !important;
    --primary-color-rgb: 18, 44, 92 !important;
}

/* Header style overrides */
header.header-light,
header.scroll-light {
    background: #ffffff !important;
    border-bottom: 1px solid #eaeaea !important;
}

/* Force primary color for active menu items */
#mainmenu li.current-menu-item>a {
    color: var(--primary-color) !important;
}

/* Footer white background layout */
footer.footer-light {
    background: #ffffff !important;
    border-top: 1px solid #eaeaea !important;
    padding-top: 80px !important;
}

footer.footer-light h5 {
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    margin-bottom: 20px !important;
}

footer.footer-light a {
    color: #666666 !important;
    transition: color 0.3s;
}

footer.footer-light a:hover {
    color: var(--primary-color) !important;
}

footer.footer-light .subfooter {
    border-top: 1px solid #f1f1f1 !important;
    background: #ffffff !important;
    color: #888888 !important;
    padding: 25px 0 !important;
}

/* FAQ Accordion Styling tweaks */
.accordion.secondary .accordion-section-title {
    background: #fcfcfc !important;
    border: 1px solid #eaeaea !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 15px 20px !important;
    font-weight: 600 !important;
    color: #111 !important;
    position: relative;
    cursor: pointer;
}

.accordion.secondary .accordion-section-title:hover {
    border-color: var(--primary-color) !important;
}

.accordion.secondary .accordion-section-title.active {
    background: #f0f7ff !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.accordion.secondary .accordion-section-content {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    margin-top: -11px !important;
    margin-bottom: 15px !important;
    padding: 20px !important;
}

/* =========================================================
   Homepage (page-home-4) heading scale
   Replaces the per-heading inline font-size/weight/color styles.
   Section-specific overrides (e.g. .proudly-india h2) are defined later and win.
   ========================================================= */
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
    font-family: 'Outfit', sans-serif;
    color: #111;
}

.page h1 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1em;
    color: inherit;
}

.page h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2em;
}

.page h3 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2em;
}

.page h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3em;
}

.page h5 {
    font-size: 16px;
    font-weight: 700;
}

.page h6 {
    font-size: 16px;
    font-weight: 700;
}

/* Headings inside dark (.text-light) sections stay light — inherit the section's white text */
.page .text-light h1,
.page .text-light h2,
.page .text-light h3,
.page .text-light h4,
.page .text-light h5,
.page .text-light h6 {
    color: inherit;
}

/* Special-case headings */
.page .hero-heading {
    text-shadow: none !important;
    letter-spacing: -0.5px;
    line-height: 1.14;
    margin-bottom: 1.5rem;
}

.page .feature-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3em;
    letter-spacing: .3px;
    text-transform: none;
    margin: 0;
}

/* Homepage section headings sit on a single line from the lg breakpoint up, where
   the container is wide enough to hold them. Below 992px they wrap normally —
   forcing one line on a phone would push the text past the viewport edge.
   Heading columns on page-home-4.php are full-width so the text has the whole
   container to sit in; keep new heading columns at col-lg-12 for this to hold. */
@media (min-width:992px) {
    body.home h2 {
        white-space: nowrap;
    }
}

/* Responsive heading sizes */
@media (max-width:991px) {
    .page h1 {
        font-size: 40px;
    }

    .page h2 {
        font-size: 30px;
    }

    .page h3 {
        font-size: 22px;
    }

    .page h4 {
        font-size: 22px;
    }
}

@media (max-width:767px) {
    .page h1 {
        font-size: 40px;
    }

    .page h2 {
        font-size: 26px;
    }

    .page h3 {
        font-size: 20px;
    }

    .page h4 {
        font-size: 20px;
    }

    .page h5 {
        font-size: 15px;
    }

    .page h6 {
        font-size: 15px;
    }
}

@media (max-width:480px) {
    .page h1 {
        font-size: 34px;
    }

    .page h2 {
        font-size: 22px;
    }
}

/* =========================================================
   Homepage (page-home-4.php) — section styles
   (migrated out of inline <style> blocks in the template)
   ========================================================= */

/* --- "Find Your Perfect Electric Ride" carousel: 3 models across, sides blurred --- */
.vehicle-ride-swiper .swiper-slide {
    width: 33.33% !important;
    opacity: .5;
    filter: blur(4px);
    transform: scale(.8);
    transition: opacity .4s ease, filter .4s ease, transform .4s ease;
}

.vehicle-ride-swiper .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1) !important;
}

.vehicle-ride-swiper .swiper-slide img {
    max-height: 76vh !important;
    max-width: 100% !important;
}

.vehicle-ride-swiper .swiper-button-next {
    right: 3% !important;
}

.vehicle-ride-swiper .swiper-button-prev {
    left: 3% !important;
}

@media (max-width: 768px) {
    .vehicle-ride-swiper .swiper-slide {
        width: 72% !important;
        filter: blur(2px);
        transform: scale(.82);
    }

    .vehicle-ride-swiper .swiper-slide img {
        max-height: 42vh !important;
    }

    .vehicle-ride-swiper .swiper-button-next {
        right: 8% !important;
    }

    .vehicle-ride-swiper .swiper-button-prev {
        left: 8% !important;
    }
}

@media (max-width: 480px) {
    .vehicle-ride-swiper .swiper-button-next {
        right: 12% !important;
    }

    .vehicle-ride-swiper .swiper-button-prev {
        left: 12% !important;
    }
}

/* --- Stats counter row (inline icon + number/label) --- */
.stats-inline .stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 0;
}

.stats-inline .stat-ic {
    color: #1a1a1a;
    flex: 0 0 auto;
    line-height: 0;
}

.stats-inline .stat-ic svg,
.stats-inline .stat-ic img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.stats-inline .stat-num {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.1;
}

.stats-inline .stat-label {
    color: #444;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

/* =========================================================
   Homepage testimonial carousel — navigation arrows
   (owl-carousel has nav:true, but the theme hides .owl-nav)
   ========================================================= */
#testimonial-carousel .owl-nav {
    display: block !important;
    margin: 0 !important;
}
#testimonial-carousel .owl-nav .owl-prev,
#testimonial-carousel .owl-nav .owl-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff !important;
    color: var(--primary-color, #122c5c) !important;
    box-shadow: 0 8px 24px rgba(18, 44, 92, .15) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 20;
    transition: background .2s, color .2s, transform .2s;
}
#testimonial-carousel .owl-nav .owl-prev { left: 14px; }
#testimonial-carousel .owl-nav .owl-next { right: 14px; }
#testimonial-carousel .owl-nav .owl-prev:hover,
#testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--primary-color, #122c5c) !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.06);
}
#testimonial-carousel .owl-nav .owl-prev.disabled,
#testimonial-carousel .owl-nav .owl-next.disabled {
    opacity: .4;
    cursor: default;
}

@media (max-width:575px) {
    .stats-inline .row>[class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        scroll-snap-align: start;
    }

    .stats-inline .stat-item {
        justify-content: center;
        padding-left: 0;
        gap: 10px;
    }

    .stats-inline .stat-ic svg,
    .stats-inline .stat-ic img {
        width: 38px;
        height: 38px;
    }

    .stats-inline .stat-num {
        font-size: 24px;
    }

    .stats-inline .stat-label {
        font-size: 12px;
    }
}

/* --- Shared: any .mobile-auto-carousel row becomes a swipeable carousel on phones --- */
@media (max-width:575px) {
    .mobile-auto-carousel {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-auto-carousel::-webkit-scrollbar {
        display: none;
    }

    .mobile-auto-carousel>[class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: center;
    }
}

/* --- "Proudly Built In India" banner (desktop wide / mobile portrait) --- */
/* Section has standard 60px (desktop) / 44px (mobile) vertical padding; the text
   overlay is inset by the same amount so it stays aligned to the image. */
.proudly-india {
    position: relative;
    margin: 0;
    padding: 0px 0;
}

.proudly-india .pi-bg {
    display: block;
    line-height: 0;
    font-size: 0;
}

.proudly-india .pi-bg img {
    display: block;
    width: 100%;
    vertical-align: bottom;
}

.proudly-india .pi-content {
    position: absolute;
    inset: 60px 0;
    display: flex;
    align-items: flex-end;
}

.proudly-india .pi-content>.container {
    width: 100%;
    padding-bottom: 0;
}

.proudly-india .pi-inner {
    max-width: 42%;
}

.proudly-india .pi-badge {
    background: var(--primary-color);
    color: #fff;
    display: inline-block;
    padding: 4px 15px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
}

.proudly-india h2 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin: 14px 0 12px;
    text-shadow: none;
}

/* This heading overlays the background image, so .pi-inner caps it at 42% of the
   container rather than letting it run full-width. Between 992px and 1199px that
   cap is narrower than the heading at 42px, which the single-line rule would clip —
   step the size down across that band so it stays on one line inside the cap. */
@media (min-width:992px) and (max-width:1199px) {
    .proudly-india h2 {
        font-size: 34px;
    }
}

.proudly-india p {
    font-size: 16px;
    color: #fff;
    line-height: 1.6em;
    margin: 0;
    text-shadow: none;
}

@media (max-width:991px) {
    .proudly-india .pi-inner {
        max-width: 55%;
    }

    .proudly-india h2 {
        font-size: 32px;
    }

    .proudly-india p {
        font-size: 14px;
    }
}

@media (max-width:767px) {

    /* Portrait image on phones: text sits at the top, in white for contrast */
    .proudly-india {
        padding: 44px 0 0 0;
    }

    .proudly-india .pi-content {
        inset: 44px 0;
        align-items: flex-start;
    }

    .proudly-india .pi-content>.container {
        padding-top: 26px;
        padding-bottom: 0;
    }

    .proudly-india .pi-inner {
        max-width: 100%;
    }

    .proudly-india h2 {
        font-size: 26px;
        color: #fff;
        text-shadow: none;
    }

    .proudly-india p {
        font-size: 13px;
        color: #fff;
        text-shadow: none;
    }
}

/* Tablet band (768–991px): the wide desktop art can be too short for the
   bottom-pinned white overlay, so guarantee a tall enough (cover) image and
   vertically center the text over it — keeps the white heading readable and
   stops it from spilling above the image into the previous section. */
@media (min-width:768px) and (max-width:991px) {
    .proudly-india .pi-bg img {
        min-height: 320px;
        object-fit: cover;
    }

    .proudly-india .pi-content {
        inset: 0;
        align-items: center;
    }
}

/* --- Unified Section Padding --- */
.section-padding {
    padding: 50px 0;
}

@media (max-width: 991px) {
    .section-padding {
        padding: 30px 0;
    }
}

/* Extra tight bottom spacing for Smarter EVs section */
.smarter-evs.section-padding {
    padding-bottom: 10px;
}

@media (max-width: 991px) {
    .smarter-evs.section-padding {
        padding-bottom: 0px;
        margin-bottom: -20px;
    }
}

.smarter-evs h2 {
    margin: 0;
}

/* Smarter EVs mobile: pull the scooter image flush to the left edge so there
   is no left padding/whitespace beside it (section has overflow:hidden). */
@media (max-width:991px) {
    .smarter-evs .smarter-evs-mobile-img {
        margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
    }

    /* Tighten the gap between "Smarter EVs" and "Proudly Built In India":
       drop Smarter EVs' bottom padding and Proudly's top padding on mobile. */
    .smarter-evs {
        padding-bottom: 0 !important;
    }

    .proudly-india {
        padding-top: 0 !important;
    }
}

/* =========================================================
   Sticky "reveal on scroll up" header
   JS (footer.php) toggles .header-sticky (fixed) and .header-hidden.
   ========================================================= */
header.header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transition: transform .35s ease;
    will-change: transform;
}

/* Slide fully out of view when scrolling down (pill has a top margin, so -140%). */
header.header-sticky.header-hidden {
    transform: translateY(-140%) !important;
}

/* Keep the fixed header below the WP admin bar for logged-in users. */
.admin-bar header.header-sticky {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar header.header-sticky {
        top: 46px !important;
    }
}

/* =========================================================
   Site-wide mobile section-padding tightening
   The theme's large padding utilities (.pt90/.pt80/.pb80/.pt60/.pb60)
   and the home content sections keep their full desktop padding on
   phones/tablets, leaving big vertical whitespace. Scale them down.
   ========================================================= */
.home-sec-pad {
    padding: 90px 0;
}

/* desktop default (replaces inline padding:90px 0) */

@media (max-width: 991px) {

    .pt90,
    .pt80 {
        padding-top: 50px !important;
    }

    .pb80 {
        padding-bottom: 50px !important;
    }

    .pt60 {
        padding-top: 40px !important;
    }

    .pb60 {
        padding-bottom: 40px !important;
    }

    .home-sec-pad {
        padding: 50px 0 !important;
    }
}

@media (max-width: 575px) {

    .pt90,
    .pt80 {
        padding-top: 40px !important;
    }

    .pb80 {
        padding-bottom: 40px !important;
    }

    .pt60 {
        padding-top: 32px !important;
    }

    .pb60 {
        padding-bottom: 32px !important;
    }

    .home-sec-pad {
        padding: 38px 0 !important;
    }
}

/* Dealership landing page — tighten oversized section padding on mobile
   (hero left alone so it still clears the fixed header). */
@media (max-width: 767px) {
    .dl-why {
        padding-top: 45px !important;
    }

    .dl-cards {
        padding-bottom: 45px !important;
    }

    .dl-enquiry {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .dl-faq {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

/* =========================================================
   Single model page (single-vehicle.php) — section styles
   (migrated out of inline <style> blocks in the template)
   ========================================================= */

/* --- Layout-2 hero: the subtitle is absolutely vertically-centered on desktop
   (matches the tall left column). Once the columns stack (≤991px) the card
   collapses and the out-of-flow heading overlaps the eyebrow above it, so put
   it back into normal flow on smaller screens. --- */
@media (max-width:991px) {
    .single-vehicle .abs-middle {
        position: static;
        transform: none;
    }
}

/* --- Layout-1 hero (product-hero): full height on desktop, smaller responsive banner heading --- */
/* Scoped to layout 1's hero only; layout 2/3 use #subheader.model-hero (above). */
.product-hero {
    min-height: 100vh;
}

.product-hero .very-big {
    font-size: 52px;
    line-height: 1.12em;
}

@media (max-width:991px) {
    .product-hero {
        min-height: 80vh;
    }

    .product-hero .very-big {
        font-size: 40px;
    }
}

@media (max-width:575px) {
    .product-hero {
        min-height: 70vh;
    }

    .product-hero .very-big {
        font-size: 30px;
    }

    .product-hero h5 {
        font-size: 15px;
    }
}

/* Per-model PORTRAIT mobile hero banner (meta _vehicle_hero_mobile) */
.product-hero .product-hero-mobile-bg {
    display: none;
}

/* =========================================================
   Beautiful black TOP-LEFT overlay on every white-text hero banner
   (homepage hero + model heroes), at ALL screen sizes. Sits above
   the bg image, below the hero text. Light/dark-text heroes
   (.dl-hero, inner #subheader breadcrumb) are deliberately excluded.
   ========================================================= */
.home-hero,
.product-hero,
.single-vehicle #subheader {
    position: relative;
}

.home-hero::before,
.product-hero::before,
.single-vehicle #subheader::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, .80) 0%,
            rgba(0, 0, 0, .58) 24%,
            rgba(0, 0, 0, .30) 46%,
            rgba(0, 0, 0, .08) 66%,
            rgba(0, 0, 0, 0) 82%);
}

.home-hero>.container,
.product-hero>.container {
    position: relative;
    z-index: 2;
}

/* Mobile overlay (matches reference): a single TOP-DOWN black gradient —
   dark behind the text at the top, fading to transparent by mid-frame so
   the vehicle stays fully visible. Replaces the desktop diagonal on phones. */
@media (max-width: 767px) {
    .home-hero::before,
    .product-hero::before,
    .single-vehicle #subheader::before {
        background: linear-gradient(180deg,
                rgba(0, 0, 0, .72) 0%,
                rgba(0, 0, 0, .48) 28%,
                rgba(0, 0, 0, .26) 50%,
                rgba(0, 0, 0, .10) 68%,
                rgba(0, 0, 0, 0) 82%);
    }
}

@media (max-width: 767px) {
    .product-hero {
        position: relative;
        min-height: 92vh !important;
        align-items: flex-start !important;
        text-align: center;
        /* hero text at the top, centred horizontally on mobile */
    }

    /* full-width, centred hero text column */
    .product-hero .col-lg-7,
    .product-hero .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .product-hero .product-hero-mobile-bg {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* hide the desktop parallax / swiper background on mobile */
    .product-hero .jarallax-img,
    .product-hero .hero-bg-swiper {
        display: none !important;
    }

    .product-hero>.container {
        padding-top: 130px;
        padding-bottom: 0;
        /* push the top-aligned text a bit lower from the top */
    }

    /* smaller, tighter type for a clean mobile look & feel */
    .product-hero h5 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .product-hero .very-big {
        font-size: 26px !important;
        line-height: 1.12em !important;
    }
}

/* --- Detailed Features hotspots over the model image --- */
.model-hotspots {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.model-hotspots>img {
    width: 100%;
}

.model-hotspots .hs-point {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    outline: none;
}

.model-hotspots .hs-dot {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2e83fa;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: pointer;
    position: relative;
}

.model-hotspots .hs-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: #2e83fa;
    opacity: .55;
    animation: hsPulse 1.8s ease-out infinite;
    z-index: -1;
}

@keyframes hsPulse {
    0% {
        transform: scale(1);
        opacity: .55
    }

    100% {
        transform: scale(3);
        opacity: 0
    }
}

.model-hotspots .hs-card {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 230px;
    max-width: 70vw;
    background: #fff;
    color: #111;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .20);
    padding: 12px 14px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease;
    z-index: 6;
    pointer-events: none;
}

.model-hotspots .hs-card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #fff;
}

.model-hotspots .hs-point:hover .hs-card,
.model-hotspots .hs-point:focus .hs-card,
.model-hotspots .hs-point.open .hs-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.model-hotspots .hs-point:hover,
.model-hotspots .hs-point.open {
    z-index: 7;
}

.model-hotspots .hs-area {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 2px;
}

.model-hotspots .hs-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.25;
    margin-bottom: 4px;
}

.model-hotspots .hs-desc {
    font-size: 12.5px;
    color: #555;
    line-height: 1.45;
    margin: 0;
}

@media (max-width:575px) {
    .model-hotspots .hs-dot {
        width: 15px;
        height: 15px;
    }

    .model-hotspots .hs-card {
        width: 190px;
        padding: 10px 12px;
    }

    .model-hotspots .hs-title {
        font-size: 14px;
    }

    .model-hotspots .hs-desc {
        font-size: 12px;
    }
}

/* --- Variant carousel: 3 variants across, sides blurred, tight gap --- */
.variant-carousel .swiper-slide {
    width: 33% !important;
    opacity: .5;
    filter: blur(4px);
    transform: scale(.9);
    transition: opacity .4s ease, filter .4s ease, transform .4s ease;
}

.variant-carousel .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1) !important;
}

.variant-carousel .swiper-slide img {
    max-width: 100% !important;
}

.variant-carousel .swiper-button-next {
    right: 8% !important;
}

.variant-carousel .swiper-button-prev {
    left: 8% !important;
}

@media (max-width:768px) {
    .variant-carousel .swiper-slide {
        width: 72% !important;
        filter: blur(2px);
        transform: scale(.85);
    }
}

/* =========================================================
   Cross-page spacing / responsive fixes
   (careers, history, dealers, timeline)
   ========================================================= */

/* --- Stat counters (.de_count): the eyebrow icon is .absolute .start-0 and
   relies on the counter being a positioning context. Without this the icons
   anchor to the section and pile up at the far-left edge. --- */
.de_count {
    position: relative;
}

/* --- Careers job list: the theme's global `.d-flex{white-space:nowrap}`
   inherits into the card and stops the title + meta from wrapping, pushing
   content past the card on phones. Allow wrapping and stack on small screens. --- */
.de-job-item {
    white-space: normal;
}

@media (max-width:575px) {
    .de-job-item {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .de-job-item .btn-line,
    .de-job-item .btn-main {
        margin-left: 0 !important;
        margin-top: 1rem;
    }
}

/* --- Single dealer info cards: `.de-flex` is justify-content:space-between,
   which shoves the icon and text to opposite edges leaving a dead gap. These
   cards read better left-aligned (the me-3 icon margin then does the spacing). --- */
.de-flex.bg-grey {
    justify-content: flex-start;
}

/* --- History timeline fallback: the markup uses .de-timeline / .de-tl-item /
   .de-tl-year / .de-tl-content, none of which the theme styles — so it renders
   as plain stacked text. Give it a proper vertical timeline. --- */
.de-timeline {
    position: relative;
    margin-top: 30px;
    padding-left: 30px;
    border-left: 2px solid #e6e6e6;
}

.de-timeline .de-tl-item {
    position: relative;
    padding-bottom: 30px;
}

.de-timeline .de-tl-item:last-child {
    padding-bottom: 0;
}

.de-timeline .de-tl-item::before {
    content: "";
    position: absolute;
    left: -39px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.de-timeline .de-tl-year {
    margin-bottom: 4px;
    line-height: 1.1;
}

.de-timeline .de-tl-content h4 {
    margin: 0 0 6px;
}

.de-timeline .de-tl-content p {
    margin: 0;
    color: #555;
    line-height: 1.6em;
}

@media (max-width:767px) {
    .de-timeline {
        padding-left: 24px;
    }

    .de-timeline .de-tl-item::before {
        left: -33px;
    }
}

/* --- Custom Mobile Accordion for "Smarter EVs For Everyday India" --- */
@media (max-width: 991px) {
    .smarter-evs-mobile-title {
        font-size: 22px !important;
        font-weight: 700;
        margin-bottom: 15px !important;
        line-height: 1.3;
        color: #111;
        font-family: 'Outfit', sans-serif;
    }

    .smarter-evs-mobile-accordion {
        border-top: none !important;
        margin-bottom: 10px;
    }

    .smarter-evs-mobile-accordion .accordion-item {
        border: 1px solid #e5e5e5 !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
        padding: 0 15px !important;
        background: #fff;
    }

    .smarter-evs-mobile-accordion .accordion-section-title {
        font-size: 15px !important;
        font-weight: 600;
        padding: 14px 0 !important;
        color: #111;
        border-bottom: none !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-decoration: none;
        font-family: 'Outfit', sans-serif;
        cursor: pointer;
    }

    .smarter-evs-mobile-accordion .accordion-section-title:before {
        font-family: "FontAwesome" !important;
        content: "\f105" !important;
        /* angle-right */
        float: none !important;
        order: 2;
        font-size: 16px !important;
        color: #111 !important;
        width: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .smarter-evs-mobile-accordion .accordion-section-title.active:before {
        content: "\f107" !important;
        /* angle-down */
    }

    .smarter-evs-mobile-accordion .accordion-section-content {
        padding-top: 0 !important;
        padding-bottom: 15px !important;
    }

    .smarter-evs-mobile-accordion .item-num {
        font-size: 14px;
        font-weight: 600;
        color: #111;
        font-family: 'Outfit', sans-serif;
        min-width: 20px;
        display: inline-block;
        margin-top: 1px;
    }

    .smarter-evs-mobile-accordion p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #444;
        margin: 0 !important;
        font-family: 'Outfit', sans-serif;
    }
}

/* Prevent hotspot popup cards from being cut off at the left/right screen edges */
.model-hotspots .hs-point.hs-left .hs-card {
    left: -15px !important;
    transform: translateY(8px) !important;
}

.model-hotspots .hs-point.hs-left:hover .hs-card,
.model-hotspots .hs-point.hs-left.open .hs-card {
    transform: translateY(0) !important;
}

.model-hotspots .hs-point.hs-left .hs-card::after {
    left: 15px !important;
    transform: translateX(-50%) !important;
}

.model-hotspots .hs-point.hs-right .hs-card {
    left: auto !important;
    right: -15px !important;
    transform: translateY(8px) !important;
}

.model-hotspots .hs-point.hs-right:hover .hs-card,
.model-hotspots .hs-point.hs-right.open .hs-card {
    transform: translateY(0) !important;
}

.model-hotspots .hs-point.hs-right .hs-card::after {
    left: auto !important;
    right: 15px !important;
    transform: translateX(50%) !important;
}

/* Custom Pill Header Design */
header .pill-header {
    background-color: #ffffff !important;
    border-radius: 50px !important;
    padding: 6px 12px !important;
    box-shadow: none !important;
    margin-top: 20px !important;
}

header .pill-header .btn-main {
    border-radius: 50px !important;
    padding: 10px 25px !important;
}

header.scroll-light .pill-header {
    margin-top: 10px !important;
}


header.transparent .pill-header #mainmenu>li>a {
    color: #111111 !important;
    font-weight: 600 !important;
}


header {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

header.scroll-light,
header.smaller {
    background-color: transparent !important;
    box-shadow: none !important;
}


header {
    position: absolute !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

header::after,
header::before {
    display: none !important;
    border: none !important;
}


/* Remove margin/padding from hero banners globally */
#top {
    display: none !important;
}


/* Dealership Hero — vertically center content (symmetric padding, no stray top margin) */
.dl-hero {
    margin-top: 0 !important;
    padding-top: 110px !important;
    padding-bottom: 110px !important;
    display: flex !important;
    align-items: center !important;
}

.dl-hero h1 {
    margin-top: 0 !important;
}

#top {
    display: none !important;
}


/* Increase Header Logo Size and Remove Padding */
header #logo {
    padding: 0 !important;
    margin: 0 !important;
}

/* Explicit height keeps the logo crisp at the target size (source is ~120px tall). */
header #logo img.logo-main,
header #logo img.logo-scroll,
header #logo img.logo-mobile {
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    padding: 0 !important;
}

/* Breathing room around the header logo (left / top / bottom) */
header #logo img.logo-main,
header #logo img.logo-scroll,
header #logo img.logo-mobile {
    margin-left: 20px;
    box-sizing: content-box !important;
}

header #logo img.logo-badge {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    padding: 0 !important;
}

/* Vertically centre the hamburger icon within the header pill row (mobile only) */
@media (max-width: 991px) {
    header #menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 50px;              /* match the logo/badge height so it sits on the same axis */
        padding: 0 !important;
        margin-top: 0 !important;
    }
    header #menu-btn:before {
        line-height: 1;
        display: block;
    }
}

@media (min-width: 992px) {

    header #logo img.logo-main,
    header #logo img.logo-scroll,
    header #logo img.logo-mobile {
        height: 80px !important;
        max-height: 60px !important;
    }

    header #logo img.logo-badge {
        height: 66px !important;
        max-height: 66px !important;
    }
}

/* Inner-page breadcrumb bar (About/Contact/Careers/CSR/etc.): push it below the
   absolutely-positioned, taller header so "Home / About Us" isn't hidden behind it. */
section.mt80.bg-grey {
    margin-top: 140px !important;
}

@media (max-width: 991px) {
    section.mt80.bg-grey {
        margin-top: 110px !important;
    }
}

@media (max-width: 767px) {
    section.mt80.bg-grey {
        margin-top: 95px !important;
    }
}

/* ============================================================
   Mobile navigation panel (<=991px)
   The opened hamburger menu previously had no background of its
   own, so it overlapped the hero image on the homepage and showed
   a bare white bleed from the page behind it on inner pages.
   Give it a solid, branded navy card so it reads clearly on every
   page regardless of what sits behind it.
============================================================ */
@media (max-width: 991px) {

    /* Anchor the dropdown to the full-width pill row, not the collapsed
       middle flex column (which is 0px wide on mobile). */
    header .pill-header {
        position: relative !important;
    }

    header .header-col-mid {
        position: static !important;
    }

    /* The menu list becomes a full-width floating navy panel when opened */
    #mainmenu {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        background: #122c5c !important;
        border-radius: 16px !important;
        margin: 0 !important;
        padding: 8px 6px !important;
        box-shadow: 0 18px 45px rgba(18, 44, 92, .28) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
        z-index: 1000;
    }

    /* Force each item to a full-width block row (theme floats them at 0px) */
    #mainmenu>li,
    #mainmenu li {
        float: none !important;
        width: 100% !important;
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    }

    #mainmenu li a {
        width: 100% !important;
        display: block !important;
    }

    #mainmenu li:last-child {
        border-bottom: none !important;
    }

    header.transparent .pill-header #mainmenu>li>a,
    #mainmenu li a,
    #mainmenu>li>a {
        color: #ffffff !important;
        padding: 14px 18px !important;
        font-weight: 600 !important;
    }

    #mainmenu li a:hover,
    #mainmenu li a:focus {
        color: #7fb2ff !important;
    }

    /* Submenu (e.g. Models children): slightly inset, dimmer, no card bg */
    #mainmenu ul,
    #mainmenu ul.mega {
        background: transparent !important;
        box-shadow: none !important;
        padding-left: 12px !important;
    }

    #mainmenu ul li a {
        color: rgba(255, 255, 255, .80) !important;
        font-weight: 500 !important;
        padding: 11px 18px !important;
    }

    /* Dropdown caret/arrow for items with children -> white so it's visible */
    #mainmenu li.has-child:after,
    #mainmenu>li.has-child:after {
        color: #ffffff !important;
        border-color: #ffffff !important;
    }
}

/* ============================================================
   Display heading letter-spacing
   The theme ships the big hero heading class ".very-big" with
   letter-spacing:-3px (and .hero-heading at -0.5px), which jams
   the letters together. Open it up to a light positive tracking
   everywhere these headings are used (homepage, front-page,
   home-2, single vehicle: "Glide Through City. Rule Every Turn.").
============================================================ */
h1.very-big,
.very-big,
.h1.very-big {
    letter-spacing: 0.5px !important;
}

.page .hero-heading,
h1.hero-heading {
    letter-spacing: 0.5px !important;
}

@media (max-width: 991px) {

    h1.very-big,
    .very-big,
    .page .hero-heading {
        letter-spacing: 0.3px !important;
    }
}

/* ============================================================
   Mobile Models mega-menu (<=991px)
   On desktop "Models" opens a wide mega panel of vehicle cards
   (image + title + subtitle). On mobile the theme stacks those
   cards vertically -> ~1250px tall, which overflows the nav panel
   and pushes the items below it ("In the News", "Dealership") out
   of view (the "cut off" bottom). Collapse each card into a
   compact thumbnail + name row so the whole menu fits on screen.
============================================================ */
@media (max-width: 991px) {

    #mainmenu ul.mega {
        width: auto !important;
        min-width: 0 !important;
        padding: 4px 0 !important;
    }

    #mainmenu ul.mega .container,
    #mainmenu ul.mega .sb-menu {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Theme sets .sb-menu to solid white; make it transparent so the navy
       panel shows through and the white model names stay readable. */
    #mainmenu ul.mega .sb-menu {
        background: transparent !important;
        box-shadow: none !important;
    }

    #mainmenu ul.mega .row {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Each card -> a compact, full-width horizontal row */
    #mainmenu ul.mega .row>[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
        padding: 9px 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    }

    #mainmenu ul.mega .row>[class*="col-"]:last-child {
        border-bottom: none !important;
    }

    /* Thumbnail: small fixed square, keeps the model link tappable */
    #mainmenu ul.mega .bg-grey {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-height: 0 !important;
        padding: 4px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    #mainmenu ul.mega .bg-grey a {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    #mainmenu ul.mega .bg-grey img.relative,
    #mainmenu ul.mega .bg-grey>a>img:first-child {
        width: 100% !important;
        max-height: 38px !important;
        height: auto !important;
    }

    /* Hide the decorative badge + hover overlay in the compact list */
    #mainmenu ul.mega .bg-grey img.absolute,
    #mainmenu ul.mega .bg-grey .absolute {
        display: none !important;
    }

    /* Model name = visible label (panel is navy, so force white) */
    #mainmenu ul.mega h4 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }

    /* Drop the subtitle text on mobile to keep rows short */
    #mainmenu ul.mega p {
        display: none !important;
    }
}
/* =========================================================
   About → Our Team: uniform photo framing
   Source photos vary (square, portrait, landscape), so lock
   every card to the same 4:5 frame and crop from the top so
   faces stay in shot.
   ========================================================= */
img.team-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    height: auto;
}

/* ---------------------------------------------------------
   About → Our Team: social/LinkedIn button hover
   Theme base sets .social-icons i:hover{background:#fff;color:#333},
   but Bootstrap's .text-white{color:#fff!important} wins over the
   hover colour -> white glyph on a white chip = invisible on hover.
   Re-assert the inverted state with matching specificity.
   --------------------------------------------------------- */
.social-icons a {
    display: inline-block;
    line-height: 0;
}

.social-icons i.bg-color.text-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    border: 1px solid var(--primary-color);
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.social-icons a:hover i.bg-color.text-white,
.social-icons i.bg-color.text-white:hover {
    background: #ffffff;
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(18, 44, 92, .25);
}

.social-icons a:focus-visible i.bg-color.text-white {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}