/*
Theme Name: Vivet Biomedical
Description: Vivet Biomedical Solutions theme for Elementor. Activating it creates the 5 pages, header and footer as editable Elementor content and sets the brand colours and fonts.
Author: Vivet Biomedical Solutions
Version: 1.0.8
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vivet
*/
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%;height:auto}
a{text-decoration:none}
.vv-fallback-header,.vv-fallback-footer{max-width:1152px;margin:0 auto;padding:16px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vv-fallback-header ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.vv-fb-title{font-weight:800;font-size:18px;color:#143065}
.vv-main{max-width:1152px;margin:0 auto;padding:32px 16px}


:root{
  --vv-navy:#143065;      /* Primary   */
  --vv-sky:#32B3E6;       /* Secondary */
  --vv-ink:#172641;       /* Text      */
  --vv-teal:#57A292;      /* Accent    */
  --vv-muted:#576478;
  --vv-border:#D1E1E9;
  --vv-tint:#E8F2F7;
  --vv-font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vv-grad:linear-gradient(115deg,var(--vv-navy) 0%,var(--vv-sky) 55%,var(--vv-teal) 100%);
  --vv-grad-soft:linear-gradient(115deg,#DBF3FF 0%,#D1F2F8 55%,#D9F6F1 100%);
  --vv-grad-bright:linear-gradient(100deg,var(--vv-sky) 0%,var(--vv-teal) 100%);
  --vv-grad-dark:radial-gradient(130% 100% at 100% 0%,rgba(87,162,146,.4),transparent 62%),linear-gradient(155deg,#0C1D4C 0%,#002B5A 45%,#004751 100%);
}

/* ---- Feed the theme into Elementor Global Colors & Fonts ---- */
body,body[class*="elementor-kit-"]{
  --e-global-color-primary:#143065!important;
  --e-global-color-secondary:#32B3E6!important;
  --e-global-color-text:#172641!important;
  --e-global-color-accent:#57A292!important;
  --e-global-typography-primary-font-family:'Manrope'!important;
  --e-global-typography-secondary-font-family:'Manrope'!important;
  --e-global-typography-text-font-family:'Manrope'!important;
  --e-global-typography-accent-font-family:'Manrope'!important;
}
body{
  font-family:var(--vv-font);color:var(--vv-ink);
  background:
    radial-gradient(1100px 620px at 88% -8%,rgba(50,179,230,.20),transparent 62%),
    radial-gradient(1000px 640px at -6% 104%,rgba(87,162,146,.18),transparent 60%),
    linear-gradient(168deg,#F2F7FF 0%,#F1F8FB 48%,#EFF8F5 100%) fixed;
}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-family:var(--vv-font)}
html{scroll-behavior:smooth}

/* ---- 3-colour gradients (navy > sky > teal) ---- */
.vv-grad{background-image:var(--vv-grad)!important}
.vv-soft{background-image:var(--vv-grad-soft)!important}
.vv-card-dark{background-image:var(--vv-grad-dark)!important}
.vv-btn-grad .elementor-button{background-image:var(--vv-grad)!important;border:0}
.vv-btn-bright .elementor-button{background-image:var(--vv-grad-bright)!important}
.vv-icon-grad .elementor-icon{background-image:var(--vv-grad)!important}
.vv-gradtext{background-image:var(--vv-grad-bright);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---- Cards, buttons & hover effects ---- */
.vv-lift{transition:transform .2s ease,box-shadow .2s ease}
.vv-lift:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,48,101,.18)}
.vv-scale .elementor-button{transition:transform .2s ease}
.vv-scale .elementor-button:hover{transform:scale(1.03)}
.vv-btn-outline .elementor-button:hover{background:var(--vv-tint)!important}
.vv-btn-ghost .elementor-button:hover{background:rgba(255,255,255,.12)!important}
.vv-btn-link .elementor-button:hover{text-decoration:underline}

/* ---- Header / footer ---- */
.vv-header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vv-footer a{transition:color .15s}.vv-footer a:hover{color:#fff!important}

/* ---- Product images: whole product visible ---- */
.vv-card-dark img{display:block;width:100%;object-fit:contain}

/* ---- Forms (Elementor Form widget) ---- */
.elementor-field-group .elementor-field:focus{box-shadow:0 0 0 3px rgba(50,179,230,.35)!important;outline:none}

/* ---- Mobile polish ---- */
@media(max-width:767px){.vv-header{padding-left:12px;padding-right:12px}}

/* ---- Product category filter (active button) ---- */
.vv-filter .elementor-button{cursor:pointer;transition:background .15s,color .15s}
.vv-filter.vv-active .elementor-button{background:#143065!important;background-image:none!important;color:#fff!important;border-color:#143065!important}
.vv-filter.vv-active .elementor-button .elementor-button-text{color:#fff!important}

/* ---- Header menu: one line, hover / click effects ---- */
.vv-header .elementor-icon-list-icon{display:none}
.vv-nav .elementor-icon-list-items{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:2px}
.vv-nav .elementor-icon-list-item{margin:0!important;padding:0!important}
.vv-nav .elementor-icon-list-text{white-space:nowrap;padding:0!important}
.vv-header .elementor-icon-list-item>a{padding:9px 14px;border-radius:999px;transition:background .2s,box-shadow .2s,transform .15s;-webkit-user-drag:none;user-select:none}
.vv-header .elementor-icon-list-item>a .elementor-icon-list-text{transition:color .2s}
.vv-header .elementor-icon-list-item>a:hover,.vv-header .elementor-icon-list-item>a:focus-visible{background:#E8F2F7;box-shadow:inset 0 -2px 0 #32B3E6;outline:none}
.vv-header .elementor-icon-list-item>a:hover .elementor-icon-list-text,.vv-header .elementor-icon-list-item>a:focus-visible .elementor-icon-list-text{color:#143065!important}
.vv-header .elementor-icon-list-item>a:active{transform:scale(.95);background:linear-gradient(115deg,#143065 0%,#32B3E6 55%,#57A292 100%);box-shadow:none}
.vv-header .elementor-icon-list-item>a:active .elementor-icon-list-text{color:#fff!important}
.vv-header .elementor-nav-menu--main .elementor-item{transition:background .2s,transform .15s}
.vv-header .elementor-nav-menu--main .elementor-item:active{transform:scale(.95)}
.vv-header .elementor-button{transition:transform .15s,box-shadow .2s,background .2s;-webkit-user-drag:none;white-space:nowrap}
.vv-header .elementor-button:hover{transform:translateY(-1px)}
.vv-header .elementor-button:active{transform:scale(.96)}
.vv-header a,.vv-header img{-webkit-user-drag:none}
@media(max-width:1024px){.vv-nav .elementor-icon-list-items{flex-wrap:wrap}}

/* ---- Enquiry form (shortcode) ---- */
.vv-wa-form{position:relative;font-family:Manrope,system-ui,sans-serif;color:#172641}
.vv-wa-form .vv-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.vv-wa-form .vv-field{margin-bottom:16px}.vv-wa-form .vv-row .vv-field{margin-bottom:0}
.vv-wa-form label{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:#172641}
.vv-wa-form input,.vv-wa-form select,.vv-wa-form textarea{width:100%;border:1px solid #D1E1E9;background:#F9FCFE;border-radius:12px;padding:12px 16px;font:inherit;font-size:14px;color:#172641;outline:none}
.vv-wa-form input:focus,.vv-wa-form select:focus,.vv-wa-form textarea:focus{box-shadow:0 0 0 3px rgba(50,179,230,.35)}
.vv-wa-form textarea{resize:vertical}
.vv-wa-form button{width:100%;margin-top:8px;border:0;cursor:pointer;border-radius:999px;padding:14px 24px;font:inherit;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(115deg,#143065 0%,#32B3E6 55%,#57A292 100%);transition:transform .15s,box-shadow .2s}
.vv-wa-form button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(20,48,101,.25)}
.vv-wa-form button:active{transform:scale(.98)}
.vv-wa-form .vv-wa-ok{display:none;margin-top:16px;padding:12px 16px;border-radius:12px;background:#E5F1F7;font-size:14px;font-weight:600;color:#143065}
.vv-wa-form .vv-note{margin:12px 0 0;text-align:center;font-size:12px;color:#576478}
@media(max-width:640px){.vv-wa-form .vv-row{grid-template-columns:1fr}}

/* ---- Enquiry form inside a brand-gradient box ---- */
.vv-wa-form{
  background:radial-gradient(120% 90% at 100% 0%,rgba(50,179,230,.38),transparent 60%),linear-gradient(135deg,#143065 0%,#1B5E94 52%,#2F7F7C 100%);
  padding:36px;border-radius:24px;box-shadow:0 18px 40px rgba(20,48,101,.28);color:#fff;overflow:hidden}
.vv-wa-form label{color:#fff}
.vv-wa-form input,.vv-wa-form select,.vv-wa-form textarea{background:#fff;border:1px solid rgba(255,255,255,.65);color:#172641}
.vv-wa-form input::placeholder,.vv-wa-form textarea::placeholder{color:#7a8798}
.vv-wa-form input:focus,.vv-wa-form select:focus,.vv-wa-form textarea:focus{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.vv-wa-form button{background:#fff;color:#143065;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.vv-wa-form button:hover{background:#E8F2F7;box-shadow:0 12px 26px rgba(0,0,0,.25)}
.vv-wa-form .vv-wa-ok{background:#fff;color:#143065}
.vv-wa-form .vv-note{color:rgba(255,255,255,.88)}
/* when the form sits inside a white card (Enquiry page), drop the card so only the gradient box shows */
.e-con:has(> .elementor-widget-shortcode .vv-wa-form){padding:0!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
@media(max-width:640px){.vv-wa-form{padding:22px;border-radius:20px}}

/* ---- Cards that should keep their own height instead of stretching beside a taller neighbour ---- */
.vv-start{align-self:start!important}