/* ----------------------------------------------------
 * SUBHAM VENTURES - Main Corporate Stylesheet
 * ---------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* --- Reset & Global Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* overflow-x: clip (not "hidden") deliberately - "hidden" on only one
       axis forces the OTHER axis's "visible" to compute as "auto" per the
       CSS Overflow spec, which silently turns html/body into their own
       internal scroll containers instead of using native viewport
       scrolling - and that breaks position:sticky everywhere (header
       sticky state, stacked cards, etc). "clip" prevents the horizontal
       overflow just the same without triggering that quirk. */
    overflow-x: clip;
    width: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: clip;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-weight: 700;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}

img {
    max-width: 100%;
    height: auto;
}

/* Custom Premium Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-section-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 86, 214, 0.2);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* --- Utility Classes --- */
.section-padding {
    padding: 100px 0;
}

.section-bg {
    background-color: var(--color-section-bg);
}

.text-justify {
    text-align: justify;
}

.badge-premium {
    font-family: var(--font-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(0, 86, 214, 0.06);
    padding: 8px 16px;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 86, 214, 0.1);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
}

.section-title span {
    color: var(--color-primary);
}

.section-desc {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 700px;
    margin-bottom: 50px;
}

/* --- Header / Navigation --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), padding var(--transition-normal);
    padding: 24px 0;
    border-bottom: 1px solid transparent;
}

header.sticky {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 0;
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Brand Logo */
.navbar-brand {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand span {
    color: var(--color-primary);
}

/* Sticky Header specific overrides */
header:not(.sticky) .navbar-brand {
    color: var(--color-text);
}

header:not(.sticky) .nav-link {
    color: var(--color-text);
}

header:not(.sticky) .nav-link::after {
    background-color: var(--color-text);
}

/* Pages whose first section is a dark banner sitting directly under the
   transparent header (about/services/nap/gallery/contact) need white nav
   text/logo before the user scrolls - otherwise dark slate text renders
   on a near-identical dark navy background and becomes unreadable. Once
   the header goes .sticky (white background), the normal dark-text rules
   above apply again regardless of this class. */
body.has-dark-page-banner header:not(.sticky) .navbar-brand,
body.has-dark-page-banner header:not(.sticky) .nav-link {
    color: #fff;
}

body.has-dark-page-banner header:not(.sticky) .nav-link::after {
    background-color: #fff;
}

body.has-dark-page-banner header:not(.sticky) .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

body.has-dark-page-banner header:not(.sticky) .nav-link.active {
    color: #fff;
    opacity: 0.9;
}

/* Homepage: always render the header with a solid white background from
   the very first frame, rather than transparent-over-hero-slider. This
   sidesteps any contrast issues with the rotating hero banners entirely
   and keeps navigation constantly legible while scrolling through the
   slides. header.sticky (added by JS after 50px of scroll) applies the
   same look, so this just makes it the permanent state too. */
body.page-home-solid-header header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 0;
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

body.page-home-solid-header header .navbar-brand,
body.page-home-solid-header header .nav-link {
    color: var(--color-text);
}

body.page-home-solid-header header .nav-link::after {
    background-color: var(--color-text);
}

/* Mega Menu Dropdowns */
.dropdown-menu {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    display: block; /* Managed by CSS classes instead of Bootstrap defaults */
}

.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.dropdown-item:hover {
    color: var(--color-primary);
    background: rgba(0, 86, 214, 0.05);
    transform: translateX(4px);
}

/* --- Hero Banner Section --- */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--color-bg);
    overflow: hidden;
    padding-top: 100px;
}

/* Particles Overlay */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
}

.hero-title span {
    color: var(--color-primary);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    max-width: 600px;
}

/* --- Statistics Counters --- */
.counter-box {
    text-align: center;
    padding: 30px;
}

.counter-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.counter-number span {
    color: var(--color-secondary);
}

.counter-title {
    font-family: var(--font-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* --- Video Play Section --- */
.video-box-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.video-box-wrapper img {
    width: 100%;
    display: block;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: var(--color-bg);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
    z-index: 2;
}

.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    color: var(--color-primary);
}

/* --- Global Presence MAP & LIST --- */
.global-pres-list {
    list-style: none;
}

.global-pres-list li {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 15px;
}

.global-pres-list li i {
    color: var(--color-primary);
    font-size: 1.2rem;
}

.global-pres-list li h5 {
    margin-bottom: 2px;
    font-size: 1.05rem;
    font-weight: 700;
}

.global-pres-list li p {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* --- FAQ & Accordion --- */
.accordion-premium .accordion-item {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-md) !important;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast);
}

.accordion-premium .accordion-item:hover {
    border-color: rgba(0, 86, 214, 0.2);
}

.accordion-premium .accordion-button {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    padding: 20px 24px;
    background-color: transparent;
    border: none;
    box-shadow: none !important;
}

.accordion-premium .accordion-button:not(.collapsed) {
    color: var(--color-primary);
}

.accordion-premium .accordion-button::after {
    background-image: none;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f078';
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.accordion-premium .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.accordion-premium .accordion-body {
    padding: 0 24px 24px 24px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* --- Back to Top --- */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-round);
    background-color: var(--color-primary);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal), background var(--transition-fast);
    z-index: 999;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover {
    background-color: var(--color-secondary);
}

/* --- Footer --- */
footer {
    background-color: var(--color-dark-bg);
    color: rgba(255, 255, 255, 0.7);
    padding-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

footer h4, footer h5 {
    color: var(--color-bg);
    margin-bottom: 24px;
    font-weight: 700;
}

footer a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

footer a:hover {
    color: var(--color-secondary);
    padding-left: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px 0;
    margin-top: 60px;
}

/* --- Timeline on About Page --- */
.timeline-flow {
    position: relative;
    border-left: 2px solid var(--color-border);
    margin: 40px 0;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -41px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-round);
    background-color: var(--color-bg);
    border: 4px solid var(--color-primary);
    z-index: 2;
    transition: transform var(--transition-normal), background-color var(--transition-normal);
}

.timeline-item:hover::before {
    background-color: var(--color-primary);
    transform: scale(1.3);
}

.timeline-date {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 8px;
    transition: transform var(--transition-fast);
}

.timeline-item:hover .timeline-date {
    transform: translateX(4px);
}

/* --- Premium PDF Viewer for NAP Page --- */
.pdf-viewer-container {
    background-color: #525659;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 700px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pdf-toolbar {
    background-color: #323639;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-bg);
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.pdf-toolbar-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdf-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pdf-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-bg);
}

.pdf-btn.active {
    background: var(--color-primary);
    color: var(--color-bg);
}

.pdf-page-indicator {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.pdf-frame-wrapper {
    flex-grow: 1;
    position: relative;
    background: #525659;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.pdf-frame-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Floating Input Forms --- */
.form-floating-premium {
    position: relative;
    margin-bottom: 24px;
}

.form-floating-premium input,
.form-floating-premium textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    background: var(--color-bg);
    outline: none;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.form-floating-premium input:focus,
.form-floating-premium textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 86, 214, 0.08);
}

.form-floating-premium label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    transition: transform var(--transition-fast), top var(--transition-fast), font-size var(--transition-fast), background var(--transition-fast), padding var(--transition-fast);
}

.form-floating-premium textarea ~ label {
    top: 24px;
    transform: none;
}

.form-floating-premium input:focus ~ label,
.form-floating-premium input:not(:placeholder-shown) ~ label,
.form-floating-premium textarea:focus ~ label,
.form-floating-premium textarea:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-bg);
    padding: 0 8px;
    left: 16px;
}

/* ====================================================
 * Utility Text Sizes & Letter Spacing (used sitewide but previously undefined)
 * ==================================================== */
.fs-7 { font-size: 0.85rem; }
.fs-8 { font-size: 0.75rem; }
.fs-9 { font-size: 0.68rem; }
.letter-spacing-1 { letter-spacing: 1px; }

/* ====================================================
 * Homepage Additions: Service Grid (6-up), Process Steps,
 * Partner Logos, Certification Bar
 * ==================================================== */
.service-icon-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
}

.process-step-number {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--color-primary);
    color: #fff;
    flex-shrink: 0;
}

.partner-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-bg);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.partner-logo-box:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transform: translateY(-3px);
}

.cert-badge-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(255,255,255,0.08);
    color: #fff;
    margin: 0 auto 0.75rem;
    border: 1px solid rgba(255,255,255,0.15);
}

/* ====================================================
 * Navbar container vertical breathing room
 * ==================================================== */
.navbar > .container {
    padding-top: 30px;
}

/* ====================================================
 * Mobile Popup Navigation (Offcanvas)
 * ==================================================== */
/* ====================================================
 * Mobile Popup Navigation (Offcanvas)
 * ==================================================== */
#mobileNav.offcanvas-end {
    width: 300px;
}
#mobileNav .navbar-nav {
    gap: 0.25rem;
}
#mobileNav .nav-link {
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
}
#mobileNav .dropdown-menu {
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 1rem;
    background: var(--color-section-bg);
}
#mobileNav .btn-premium {
    width: 100%;
    justify-content: center;
    display: inline-flex;
}

/* ====================================================
 * Hero Banner Slider (Swiper - animated fade transitions)
 * ==================================================== */
.hero-slider-section {
    width: 100%;
    line-height: 0;
}

/* Compensate for the header now being permanently solid/opaque on the
   homepage (see body.page-home-solid-header rules above) instead of
   transparent-over-hero. The header is position:fixed and always covers
   the top ~119px of the viewport; the (non-fixed) top utility bar only
   reserves its own flow space at xl+ (1200px), so the two breakpoints
   need different top-margin amounts to both land on that same 119px. */
body.page-home-solid-header .hero-slider-section {
    margin-top: 119px;
}

@media (min-width: 1200px) {
    body.page-home-solid-header .hero-slider-section {
        margin-top: 76px;
    }
}

.hero-slider {
    width: 100%;
    aspect-ratio: 1881 / 836;
    position: relative;
    overflow: hidden;
}

/* Defensive fallback: guarantees correct layout even if Swiper's bundled
   CSS fails to load/apply (e.g. CDN hiccup, class-name mismatch between
   Swiper versions). Without this, slides can stack vertically instead of
   being absolutely positioned/slid, causing the container to clip to a
   tiny sliver of whichever slide happens to render on top. */
.hero-slider .swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.hero-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-slider-pagination {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 6;
}

.hero-slider-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: 0.6;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.hero-slider-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-primary);
    width: 28px;
    border-radius: 6px;
}

.hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-sm);
}

.hero-slider-arrow:hover {
    background: var(--color-primary);
    color: #fff;
}

.hero-slider-prev { left: 20px; }
.hero-slider-next { right: 20px; }

@media (max-width: 767.98px) {
    .hero-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .hero-slider-pagination {
        bottom: 10px;
    }

    /* Art-directed mobile crop: the banners are wide (2.25:1) with headline
       text on the left and supporting photography on the right. Squishing
       the whole banner to fit a phone's narrow width makes the text
       unreadably small. Instead, give the slider more height and shift the
       visible "window" to favor the left side, where the message lives. */
    .hero-slider {
        aspect-ratio: auto;
        height: 62vw;
        min-height: 260px;
        max-height: 400px;
    }
    .hero-slider .swiper-slide img {
        object-fit: cover;
        object-position: left center;
    }
}

@media (max-width: 420px) {
    .hero-slider {
        height: 78vw;
        min-height: 280px;
    }
}

/* ====================================================
 * Floating Call & WhatsApp Buttons (site-wide)
 * ==================================================== */
.floating-contact-buttons {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.floating-btn {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    font-size: 1.4rem;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    white-space: nowrap;
    animation: floatingBtnEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.floating-btn-call {
    animation-delay: 0.15s;
}

@keyframes floatingBtnEntrance {
    0% { transform: scale(0) translateX(-20px); opacity: 0; }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

.floating-btn-label {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    font-size: 0.9rem;
    font-weight: 600;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-left 0.35s ease;
}

.floating-btn:hover {
    color: #fff;
    width: auto;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.floating-btn:hover .floating-btn-label {
    max-width: 160px;
    opacity: 1;
    margin-left: 10px;
}

.floating-btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.floating-btn-call {
    background: linear-gradient(135deg, var(--color-primary), #003a94);
}

.floating-btn-ping {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25D366;
    opacity: 0.6;
    animation: floatingPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes floatingPing {
    0% { transform: scale(1); opacity: 0.55; }
    75%, 100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 575.98px) {
    .floating-contact-buttons {
        left: 16px;
        bottom: 16px;
        gap: 12px;
    }
    .floating-btn {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }
}

/* ====================================================
 * 1. Grayscale-to-Color Partner Logo Marquee
 * ==================================================== */
.logo-marquee-track {
    display: flex;
    width: max-content;
    animation: logoMarqueeScroll 28s linear infinite;
}

.logo-marquee-track:hover {
    animation-play-state: paused;
}

.logo-marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-marquee-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 70px;
    margin: 0 14px;
    padding: 0 24px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.logo-marquee-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 86, 214, 0.25);
    color: var(--color-primary);
}

@keyframes logoMarqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
    .logo-marquee-item {
        min-width: 140px;
        height: 56px;
        font-size: 0.9rem;
        margin: 0 8px;
    }
}

/* ====================================================
 * 2. Gradient Mesh / Blob Backgrounds (depth for flat sections)
 * ==================================================== */
.mesh-bg-section {
    position: relative;
    isolation: isolate;
}

.mesh-bg-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 86, 214, 0.06), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(253, 185, 19, 0.07), transparent 38%),
        radial-gradient(circle at 75% 85%, rgba(34, 197, 94, 0.06), transparent 42%),
        radial-gradient(circle at 10% 90%, rgba(0, 86, 214, 0.05), transparent 35%);
}

.mesh-bg-dark::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 86, 214, 0.18), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(253, 185, 19, 0.12), transparent 38%),
        radial-gradient(circle at 75% 85%, rgba(34, 197, 94, 0.14), transparent 42%);
}

/* ====================================================
 * 3. Animated Icon Effects (lightweight CSS substitute for Lottie -
 *    no extra runtime dependency, works everywhere, same "alive" feel)
 * ==================================================== */
.icon-anim-spin-slow {
    animation: iconSpinSlow 6s linear infinite;
}

.icon-anim-pulse {
    animation: iconPulseSoft 2.4s ease-in-out infinite;
}

.icon-anim-float {
    animation: iconFloatSoft 3.2s ease-in-out infinite;
}

.icon-anim-swing {
    animation: iconSwing 3s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes iconSpinSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes iconPulseSoft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.85; }
}

@keyframes iconFloatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes iconSwing {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

.service-icon-circle:hover .icon-anim-spin-slow,
.card-hover:hover .icon-anim-spin-slow {
    animation-duration: 1.2s;
}

/* ====================================================
 * 4. Mobile Fixed Bottom CTA Bar
 * ==================================================== */
.mobile-cta-bar {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1040;
        background: #fff;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
        border-top: 1px solid var(--color-border);
    }

    .mobile-cta-bar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 10px 4px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--color-text);
        text-decoration: none;
        border-right: 1px solid var(--color-border);
    }

    .mobile-cta-bar a:last-child {
        border-right: none;
    }

    .mobile-cta-bar a i {
        font-size: 1.1rem;
    }

    .mobile-cta-bar a.mobile-cta-call i { color: var(--color-primary); }
    .mobile-cta-bar a.mobile-cta-whatsapp i { color: #25D366; }
    .mobile-cta-bar a.mobile-cta-quote {
        background: var(--color-primary);
        color: #fff;
    }
    .mobile-cta-bar a.mobile-cta-quote i { color: #fff; }

    /* Push page content and floating widgets up so the fixed bar never overlaps them */
    body {
        padding-bottom: 62px;
    }
    .floating-contact-buttons {
        bottom: 78px;
    }
    #back-to-top {
        bottom: 78px;
        right: 16px;
    }
}

/* ====================================================
 * 5. Scroll Progress Indicator
 * ==================================================== */
#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    z-index: 2000;
    transition: width 0.1s ease-out;
}

/* ====================================================
 * 6. Page Transition Overlay (fade between page loads)
 * ==================================================== */
#page-transition-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

#page-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

body.page-loaded #page-transition-overlay {
    opacity: 0;
}

body.page-enter #page-transition-overlay {
    opacity: 1;
    pointer-events: all;
}

/* ====================================================
 * 7. Service Comparison Table
 * ==================================================== */
.comparison-table {
    border-collapse: separate;
    border-spacing: 0;
}

.comparison-table thead th {
    background: var(--color-dark-bg);
    color: #fff;
    font-weight: 700;
    padding: 20px 16px;
    border: none;
    font-size: 0.95rem;
}

.comparison-table thead th:first-child {
    border-top-left-radius: var(--radius-md);
}

.comparison-table thead th:last-child {
    border-top-right-radius: var(--radius-md);
}

.comparison-table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}

.comparison-table tbody tr:hover td {
    background: rgba(0, 86, 214, 0.03);
}

.comparison-table tbody td i.fa-check-circle {
    font-size: 1.2rem;
}

/* ====================================================
 * Font Utility Classes (referenced sitewide but were
 * never defined - headings/labels using these were
 * silently falling back to the default body font)
 * ==================================================== */
.font-heading {
    font-family: var(--font-heading);
}

.font-accent {
    font-family: var(--font-accent);
}

/* ====================================================
 * Stacked Cards Scroll Section (pin-and-stack effect,
 * pure CSS via position:sticky - no JS/ScrollTrigger
 * dependency, works everywhere)
 * ==================================================== */
.stacked-cards-heading {
    padding: 0 0 40px;
}

.stacked-cards-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 10vh;
}

.stacked-card {
    position: sticky;
    top: 110px;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 48px;
    margin-bottom: 40px;
    min-height: 260px;
    transition: box-shadow var(--transition-normal);
}

.stacked-card:hover {
    box-shadow: 0 25px 60px rgba(0, 86, 214, 0.15);
}

.stacked-card:hover .stacked-card-icon {
    transform: scale(1.08) rotate(-4deg);
}

.stacked-card-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: transform var(--transition-normal);
}

.stacked-card-number {
    display: block;
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--color-primary);
    margin-bottom: 8px;
}

@media (max-width: 767.98px) {
    .stacked-card {
        flex-direction: column;
        padding: 28px;
        gap: 18px;
        top: 90px;
        min-height: auto;
    }
    .stacked-card-icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
    }
}

/* ====================================================
 * Hover polish for previously-static elements
 * (NAP document rows, contact info rows)
 * ==================================================== */
.doc-row-hover {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.doc-row-hover:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(0, 86, 214, 0.25) !important;
}

.contact-info-row {
    transition: transform var(--transition-fast);
}

.contact-info-row:hover {
    transform: translateX(4px);
}