/* ============================================================
   DVM Techno — Custom Brand Overrides
   All project-specific styles live here.
   Do NOT edit avista-core.css or avista-extra.css directly.
   ============================================================ */


/* ── Hero Copyright — force single vertical column ────────── */
/*
 * writing-mode: vertical-rl means text flows top→bottom.
 * SplitText's line-divs + long text both cause multiple columns.
 * Fix: remove wa_split_up (done in HTML), white-space:nowrap, smaller font.
 */
.as-hero-1-copyright {
    white-space: nowrap;
    font-size:   64px;    /* 10 chars × 64px × line-height 1 ≈ 640px — fits hero height */
    letter-spacing: 0.05em;
}


/* ── Hero Image (PIXI bypass) ─────────────────────────────── */
/*
 * We renamed #wa_liquid_img → #dvm_hero_img so avista-core.js's PIXI
 * liquid-distortion code doesn't intercept and delete the <img> tag.
 * The tilt effect (wa_tilt_elm class) still works. Image shows normally.
 */
#dvm_hero_img {
    position: relative;
    display:  block;
}
#dvm_hero_img img.hero-main-img {
    display:    block;
    max-width:  100%;
    height:     auto;
    visibility: visible !important;
    opacity:    1 !important;
}


/* ── Brand Colours ─────────────────────────────────────────── */
:root {
    --as-clr-pr-1: #7c3cf8;
    --as-clr-pr-3: #e4007c;
    --dvm-orange:  #ff6a00;
    --dvm-gradient: linear-gradient(135deg, #7c3cf8 0%, #e4007c 50%, #ff6a00 100%);
}

::-webkit-scrollbar-thumb {
    background: var(--dvm-gradient);
}


/* ── Header Logo ───────────────────────────────────────────── */
/*
 * DVM logo is a wide horizontal PNG with white background.
 * We position it cleanly inside the header with a white pill container.
 */
.as-header-1-logo.dvm-logo-link {
    position:      absolute;
    top:           50%;
    left:          12px;
    transform:     translateY(-50%);
    padding:       6px 12px;
    background:    #ffffff00;
    border-radius: 8px;
    box-shadow:    0 2px 12px rgba(0,0,0,0.08);
    display:       inline-flex;
    align-items:   center;
    z-index:       2;
}

.as-header-1-area.has-inner-page .as-header-1-logo.dvm-logo-link {
    top:       50%;
    transform: translateY(-50%);
    height:    auto;
    width:     auto;
}

.as-header-1-logo.dvm-logo-link .dvm-logo-img {
    height:     100px;
    width:      auto;
    max-width:  160px;
    display:    block;
    object-fit: contain;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
       (max-width: 767px) {
    .as-header-1-logo.dvm-logo-link {
        left:    8px;
        padding: 4px 8px;
    }
    .as-header-1-logo.dvm-logo-link .dvm-logo-img {
        height:    36px;
        max-width: 130px;
    }
}


/* ── Offcanvas Sidebar Logo ────────────────────────────────── */
.wa-offcanvas-top-logo img {
    max-width:     150px;
    height:        auto;
    background:    #fff;
    padding:       6px 10px;
    border-radius: 6px;
}


/* ── Footer Logo ───────────────────────────────────────────── */
.as-footer-1-logo img {
    max-width:     180px;
    height:        auto;
    background:    #ffffff00;
    padding:       8px 14px;
    border-radius: 8px;
}


/* ── Preloader letter colours ──────────────────────────────── */
.as-preloader-wrap .loader .loader_letter:nth-child(1)  { color: #7c3cf8; }
.as-preloader-wrap .loader .loader_letter:nth-child(2)  { color: #9f3ef4; }
.as-preloader-wrap .loader .loader_letter:nth-child(3)  { color: #c33deb; }
.as-preloader-wrap .loader .loader_letter:nth-child(4)  { color: #e4007c; }
.as-preloader-wrap .loader .loader_letter:nth-child(5)  { color: #e4007c; }
.as-preloader-wrap .loader .loader_letter:nth-child(6)  { color: #ee4400; }
.as-preloader-wrap .loader .loader_letter:nth-child(7)  { color: #f25800; }
.as-preloader-wrap .loader .loader_letter:nth-child(8)  { color: #f56c00; }
.as-preloader-wrap .loader .loader_letter:nth-child(9)  { color: #f87f00; }
.as-preloader-wrap .loader .loader_letter:nth-child(10) { color: #fb9100; }
.as-preloader-wrap .loader .loader_letter:nth-child(11) { color: #ff6a00; }


/* ── Active nav highlight ──────────────────────────────────── */
.as-main-navigation .navbar-nav li.current-menu-item > a {
    color: var(--as-clr-pr-1);
}
.mobile-main-navigation ul li.current-menu-item > a {
    color: var(--as-clr-pr-1);
}


/* ── Floating WhatsApp Button ──────────────────────────────── */
/*
 * Injected directly into document.body (not inside footer container)
 * so no parent overflow/transform can clip it.
 * Placed bottom-LEFT to avoid collision with back-to-top (bottom-right).
 */
.dvm-whatsapp-float {
    position:      fixed;
    bottom:        30px;
    left:          28px;
    right:         auto;
    z-index:       9999;
    display:       flex;
    align-items:   center;
    gap:           10px;
    text-decoration: none;
    cursor:        pointer;
}

/* The green circle button */
.dvm-whatsapp-float .wa-btn {
    width:           58px;
    height:          58px;
    background:      #25D366;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 20px rgba(37, 211, 102, 0.45);
    transition:      transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink:     0;
    position:        relative;
}

.dvm-whatsapp-float .wa-btn i {
    font-size: 30px;
    color:     #fff;
    line-height: 1;
}

/* Pulse ring animation */
.dvm-whatsapp-float .wa-btn::before {
    content:       '';
    position:      absolute;
    inset:         -6px;
    border-radius: 50%;
    border:        3px solid #25D366;
    opacity:       0;
    animation:     waPulse 2s ease-out infinite;
}

@keyframes waPulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    70%  { transform: scale(1.4); opacity: 0;   }
    100% { transform: scale(1.4); opacity: 0;   }
}

/* Hover effects */
.dvm-whatsapp-float:hover .wa-btn {
    transform:  scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

/* Tooltip label — slides in from left (button is on left side now) */
.dvm-whatsapp-float .wa-label {
    background:    #25D366;
    color:         #fff;
    font-family:   var(--as-font-1, sans-serif);
    font-size:     13px;
    font-weight:   600;
    padding:       7px 14px;
    border-radius: 20px;
    white-space:   nowrap;
    box-shadow:    0 3px 12px rgba(0,0,0,0.15);
    opacity:       0;
    transform:     translateX(-10px);
    transition:    opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    order:         1;   /* label appears to the right of the button */
}

/* Re-order flex children: button first, label second */
.dvm-whatsapp-float .wa-btn  { order: 0; }

.dvm-whatsapp-float:hover .wa-label {
    opacity:   1;
    transform: translateX(0);
}

/* Mobile — smaller, no label */
@media (max-width: 767px) {
    .dvm-whatsapp-float {
        bottom: 20px;
        left:   16px;
        right:  auto;
    }
    .dvm-whatsapp-float .wa-btn {
        width:  50px;
        height: 50px;
    }
    .dvm-whatsapp-float .wa-btn i {
        font-size: 26px;
    }
    .dvm-whatsapp-float .wa-label {
        display: none;
    }
}


/* ── Team member image fix — remove inline baseline gap ────── */
/*
 * img default display:inline aligns to text baseline, not container top.
 * This pushes the photo down inside the .member-img box.
 * Fix: block + absolute fill so the image always starts at top:0.
 */
.as-team-1-member .member-img {
    position: relative;   /* wa-p-relative already sets this; safety re-declare */
}
.as-team-1-member .member-img img {
    display:  block;
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    object-fit: cover;
}


/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }