/*!
Theme Name: labweb
Theme URI: http://underscores.me/
Author: Bhagat Singh
Author URI: https://www.angelwebsludhiana.in
Description: Theme developed by Bhagat Singh
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: labweb
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

labweb is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&display=swap');

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: #fff; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; }
pre { font-family: monospace, monospace; font-size: 1em; background: #eee; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; height: auto; max-width: 100%; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; width: 100%; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template, [hidden] { display: none; }

/*--------------------------------------------------------------
# Base Typography & Elements
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { clear: both; }
p { margin-bottom: 1.5em; }
dfn, cite, em, i { font-style: italic; }
blockquote { margin: 0 1.5em; }
address { margin: 0 0 1.5em; }
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
mark, ins { background: #fff9c0; text-decoration: none; }
big { font-size: 125%; }
ul, ol { margin: 0 0 1.5em 3em; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; }
dt { font-weight: 700; }
dd { margin: 0 1.5em 1.5em; }
embed, iframe, object { max-width: 100%; }
figure { margin: 1em 0; }
table { margin: 0 0 1.5em; width: 100%; }

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button, input[type="button"], input[type="reset"], input[type="submit"] {
	border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); line-height: 1; padding: 0.6em 1em 0.4em;
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; }
button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { border-color: #aaa #bbb #bbb; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
	color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; }
select { border: 1px solid #ccc; }

/*--------------------------------------------------------------
# Default WP Components
--------------------------------------------------------------*/
.main-navigation { display: block; width: 100%; }
.main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; }
.main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; }
.main-navigation ul ul ul { left: -999em; top: 0; }
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { display: block; left: auto; }
.main-navigation ul ul a { width: 200px; }
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; }
.main-navigation li { position: relative; padding:15px 0; }
.main-navigation a { display: block; text-decoration: none; }
.menu-toggle, .main-navigation.toggled ul { display: block; }
@media screen and (min-width: 37.5em) {
	.menu-toggle { display: none; }
	.main-navigation ul { display: flex; }
}
.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; }
.comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; }
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { flex: 1 0 50%; }
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; }
.sticky { display: block; }
.post, .page { margin: 0; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }
.page-links { clear: both; margin: 0 0 1.5em; }
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }
.widget { margin: 0 0 1.5em; }
.widget select { max-width: 100%; }
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }
.custom-logo-link { display: inline-block; }
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text { margin: 0.8075em 0; }
.wp-caption-text { text-align: center; }
.gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; }
.gallery-item { display: inline-block; text-align: center; width: 100%; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }
.gallery-caption { display: block; }
.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; }
.infinity-end.neverending .site-footer { display: block; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
#primary[tabindex="-1"]:focus { outline: 0; }
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }


/* ==========================================================================
   Custom Lab Theme Variables & Global Styles
   ========================================================================== */

:root {
    /* Exact Labtox Colors */
    --brand-blue: #1b5bf9; 
    --brand-green: #65c15c;
    --brand-dark: #0a1019;
    --text-color: #444444; 
    --text-muted: #6b7280;
    --bg-light: #f4f7fb;
    
    /* Premium Fonts */
    --font-heading: 'Jost', sans-serif;
    --font-body: 'Nunito Sans', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .portal-title {
    font-family: var(--font-heading);
    color: var(--brand-dark);
    font-weight: 700;
    margin-top: 0;
}
.site-header .wrapper{max-width:98%;}
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Global Buttons & Utilities
   ========================================================================== */

/* Labtox Style Pill Buttons */
.brand-cta-btn, button, input[type="submit"] {
    display: inline-block;
    background-color: var(--brand-blue);
    color: #ffffff;
    border-radius: 50px !important;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 16px 40px !important;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 2px solid var(--brand-blue);
    text-align: center;
}
.brand-cta-btn:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(27, 91, 249, 0.3);
}

.btn-solid-blue { background-color: var(--brand-blue); border-color: var(--brand-blue); min-width: 200px; }
.btn-outline-blue { background-color: transparent; color: var(--brand-blue); min-width: 200px; }
.btn-outline-blue:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #ffffff; }

.btn-solid-green { background-color: var(--brand-green); border-color: var(--brand-green); }
.btn-outline-green { background-color: transparent; color: var(--brand-green); border-color: var(--brand-green); }
.btn-solid-green:hover, .btn-outline-green:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #ffffff; }

.btn-large-uppercase { font-size: 1.1rem; text-transform: uppercase; font-weight: bold; }

/* Softer, Premium Shadows for cards */
.vr-mv-card, .vr-image-card, .vr-about-images-floated img, .vr-box-shadow {
    box-shadow: 0 15px 40px rgba(10, 16, 25, 0.06) !important;
    border: none !important;
    border-radius: 16px !important;
}

/* Reusable Spacing & Colors */
.vr-padded-section { padding: 100px 0; }
.bg-white { background-color: #ffffff; }
.bg-light { background-color: var(--bg-light); }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.mt-10 { margin-top: 10px; }
.mt-50 { margin-top: 50px; }
.mb-60 { margin-bottom: 60px; }

.text-blue { color: var(--brand-blue); }
.text-green { color: var(--brand-green); }
.text-white { color: #ffffff; }
.text-muted { color: #666; }

.border-blue { border-color: var(--brand-blue); }
.border-green { border-color: var(--brand-green); }
.border-bottom-blue { border-bottom-color: var(--brand-blue) !important; }
.border-bottom-green { border-bottom-color: var(--brand-green) !important; }

/* ==========================================================================
   Premium Responsive Headers
   ========================================================================== */

/*.site-branding { max-width: 100px; }*/
.left-logo img { max-height: 70px; width: auto; transform: rotate(-10deg);}
.site-title { margin: 0; font-size: 1.8rem; font-family: var(--font-heading); }
.site-title a { color: var(--brand-dark); text-decoration: none; }

/* Sticky Inner Page Header */
.site-header, .inner-page-header {
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

/* Base Flexbox Layout */
.header-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; }
.landing-header .right-header-elements { display: flex; align-items: center; gap: 30px; }
.regular-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.regular-header .center-menu { text-align: center; }
.regular-header .right-cta { text-align: right; }

/* Two-Row Header Styles */
.header-top-row { padding: 20px 0; border-bottom: 1px solid #eaeaea; }
.header-contact-elements { display: flex; align-items: center; gap: 35px; }
.header-phone-box { display: flex; align-items: center; gap: 15px; }
.header-phone-box i { font-size: 2.2rem; color: var(--brand-blue); }
.phone-text { display: flex; flex-direction: column; }
.phone-label { font-size: 0.85rem; color: #888; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; margin-bottom: 2px; }
.phone-number { font-size: 1.2rem; color: var(--brand-dark); font-weight: 700; text-decoration: none; font-family: var(--font-heading); transition: color 0.3s ease; }
.phone-number:hover { color: var(--brand-blue); }
.header-bottom-row {  }

/* Desktop Navigation Styling */
.center-menu { flex-grow: 1; display: flex; justify-content: center; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 35px; align-items: center; }
.main-navigation a {
    color: var(--brand-dark); text-decoration: none; font-family: var(--font-heading);
    font-weight: 400; font-size: 15px; transition: color 0.3s ease; position: relative; text-transform: uppercase;
}
.main-navigation a::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--brand-blue); transition: width 0.3s ease;
}
.main-navigation a:hover { color: var(--brand-blue); }
.main-navigation a:hover::after { width: 100%; }

/* Mobile Menu & Toggle */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--brand-dark); padding: 10px; }

@media (max-width: 991px) {
	.header-top-row{padding:0;}
    .menu-toggle { display: block; margin-left: auto; }
    .header-cta, .header-contact-elements { display: none; }
    .header-bottom-row { padding: 0; }
    .two-row-header .wrapper { padding: 0px 20px; }
    .regular-header { grid-template-columns: 1fr 1fr; }
    .regular-header .center-menu { grid-column: 1 / -1; order: 3; margin-top: 20px; }
    
    .main-navigation ul {
        display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%;
        background-color: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.1); padding: 20px; gap: 20px; border-top: 1px solid #eee;
    }
    .main-navigation.vr-active ul { display: flex !important; z-index: 9999; }
    .main-navigation a::after { display: none; }
}

/* ==========================================================================
   Labtox Exact Match: Boxed & Rounded Hero Section
   ========================================================================== */

/* 1. Box the Hero Backgrounds */
.vr-hero-slider, .portal-hero-expanded {
    margin: 30px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
}

/* 2. Inner Pages padding for text clearance */
.portal-hero-expanded { padding-top: 100px !important; padding-bottom: 100px !important; }

/* 3. Transparent Floating Header inside boxed hero */
.absolute-header {
    position: absolute !important;
    top: 30px !important;
    left: 30px !important;
    width: calc(100% - 60px) !important;
    z-index: 9999 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* 4. Force all Header Text to White over Slider */
.absolute-header .site-title a, .absolute-header .phone-label, .absolute-header .phone-number, .absolute-header .main-navigation a, .absolute-header .menu-toggle { color: #ffffff !important; }
.absolute-header .header-phone-box i { color: #00d2ff !important; }
.absolute-header .main-navigation a::after { background-color: #00d2ff !important; }
.absolute-header .main-navigation a:hover { color: #00d2ff !important; }
.absolute-header .header-top-row { border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; }

@media (max-width: 991px) {
    .vr-hero-slider, .portal-hero-expanded { margin: 15px !important; border-radius: 20px !important; }
    .absolute-header { top: 15px !important; left: 15px !important; width: calc(100% - 30px) !important; }
}

/* ==========================================================================
   Premium Hero Slider (Ken Burns)
   ========================================================================== */
.vr-hero-slider {
    width: auto; height: 100vh; min-height: 600px; position: relative; background-color: var(--brand-dark);
}
.slide-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;
    transform: scale(1); transition: transform 8s linear;
}
.swiper-slide-active .slide-bg { transform: scale(1.1); }
.slide-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(14, 30, 64, 0.75), rgba(10, 22, 48, 0.75)); z-index: 1;
}
.slide-content {
    position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: 10px 0px; max-width: 800px;
}
.slide-subtitle { color: #00d2ff; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; display: inline-block; }
.slide-title { color: #ffffff; font-size: 3.5rem; line-height: 1.1; margin-bottom: 25px; }
.slide-desc { color: #e0e0e0; font-size: 1.2rem; line-height: 1.6; margin-bottom: 40px; max-width: 600px; }

/* Staggered Animations */
.slide-content .slide-subtitle, .slide-content .slide-title, .slide-content .slide-desc, .slide-content .slide-buttons {
    opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.swiper-slide-active .slide-subtitle { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.swiper-slide-active .slide-title { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.swiper-slide-active .slide-desc { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.swiper-slide-active .slide-buttons { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }

/* Navigation Arrows */
.swiper-button-next, .swiper-button-prev { color: #ffffff; background: rgba(255,255,255,0.1); width: 50px; height: 50px; border-radius: 50%; transition: all 0.3s ease; }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--brand-blue); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.2rem; }

@media (max-width: 768px) {
    .slide-title { font-size: 2.8rem; }
    .slide-desc { font-size: 1rem; }
}

/* ==========================================================================
   Gateway Box / Split Landing Layout
   ========================================================================== */
.landing-main { background-color: var(--bg-light); min-height: calc(100vh - 100px); display: flex; align-items: center; padding: 60px 0; }
.gateway-wrapper { display: flex; gap: 40px; justify-content: center; width: 100%; }
.gateway-box {
    flex: 1; max-width: 500px; padding: 80px 40px; border-radius: 12px; text-align: center; text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden;
    border-bottom: 6px solid var(--brand-dark);
}
.gateway-box.vet-box { border-bottom-color: var(--brand-green); }
.gateway-box.human-box { border-bottom-color: var(--brand-blue); }

.gateway-box::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17, 17, 17, 0.7); z-index: 1; transition: background 0.3s ease;
}
.gateway-box:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.gateway-box:hover::before { background: rgba(17, 17, 17, 0.5); }
.gateway-box .box-content { position: relative; z-index: 2; }
.gateway-box h2 { color: #ffffff; margin-bottom: 15px; font-size: 2.2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.gateway-box p { margin-bottom: 25px; font-size: 1.1rem; color: #e0e0e0; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.gateway-box .btn-text { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.95rem; }
.vet-box .btn-text { color: var(--brand-green); }
.human-box .btn-text { color: var(--brand-blue); }

@media (max-width: 768px) {
    .gateway-wrapper { flex-direction: column; align-items: center; }
}

/* ==========================================================================
   Portal Pages (Vet & Human Layouts)
   ========================================================================== */
.portal-hero { padding: 80px 20px; color: #ffffff; margin-bottom: 40px; background-attachment: fixed !important; }
.portal-hero .portal-title { font-size: 2.8rem; margin-bottom: 15px; color: #ffffff; }
.portal-hero .portal-subtitle { font-size: 1.2rem; opacity: 0.9; }
.vet-hero { background-color: var(--brand-green); }
.human-hero { background-color: var(--brand-blue); }
.portal-content { padding-bottom: 60px; }

/* Sections Typography */
.vr-section-subheading { font-weight: bold; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 10px; }
.vr-section-heading { font-size: 2.8rem; color: var(--brand-dark); margin: 15px 0 25px; }
.vr-section-text { font-size: 1.1rem; line-height: 1.8; margin-bottom: 30px; }

/* Split & Grid Layouts */
.vr-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.vr-image-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.vr-image-side img { border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); width: 100%; display: block; }

/* Image Cards */
.vr-image-card { background: #ffffff; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.vr-image-card:hover { transform: translateY(-10px); }
.vr-image-card img, .vr-card-img { width: 100%; height: 250px; object-fit: cover; display: block; border-bottom: 4px solid #eee; transition: transform 0.5s ease; }
.vr-image-card:hover img { transform: scale(1.05); }
.vr-image-card .card-content { padding: 30px; position: relative; background: #ffffff; z-index: 2; }
.vr-image-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--brand-dark); }
.vr-image-card p { color: #666; margin-bottom: 20px; line-height: 1.6; }

/* Features & Checklists */
.vr-feature-list { list-style: none; padding: 0; margin: 30px 0;}
.vr-feature-list li { margin-bottom: 15px; display: flex; align-items: flex-start; font-size: 1.05rem; color: #555; line-height: 1.5; }
.vr-feature-list .check-icon { margin-right: 15px; font-weight: bold; }

.vr-cta-banner { padding: 120px 20px; text-align: center; }
.vr-cta-banner h2 { color: #ffffff; font-size: 3rem; margin-bottom: 20px; }
.vr-cta-banner p { color: #dddddd; font-size: 1.2rem; max-width: 700px; margin: 0 auto 40px; line-height: 1.6; }

.vr-card-link { font-weight: bold; text-decoration: none; }
.vr-card-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .vr-split-grid { grid-template-columns: 1fr; text-align: center; }
    .vr-split-grid .vr-text-side ul { text-align: left; display: inline-block; }
}

/* ==========================================================================
   About Page Layouts & Wrap
   ========================================================================== */
.vr-divisions-container { display: flex; gap: 40px; flex-wrap: wrap; }
.vr-division-block { flex: 1; min-width: 300px; }
.vr-division-title { padding-bottom: 10px; margin-bottom: 30px; display: inline-block; border-bottom: 2px solid; }
.vr-mv-grid-vertical { display: flex; flex-direction: column; gap: 30px; }
.vr-about-text-side .vr-feature-list li { align-items: flex-start; }

.clearfix::after { content: ""; clear: both; display: table; }
.vr-about-content-wrap { display: block; }
.vr-about-images-floated { float: left; width: 48%; max-width: 600px; margin-right: 50px; margin-bottom: 30px; position: relative; padding-bottom: 50px; padding-right: 50px; }
.vr-about-content-wrap h2, .vr-about-content-wrap span.vr-section-subheading { clear: none; }

.vr-about-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; }
.vr-about-images-side { position: relative; padding-bottom: 50px; padding-right: 50px; }
.image-wrapper img { border-radius: 12px; width: 100%; height: auto; display: block; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.main-image { width: 85%; position: relative; z-index: 1; }
.sub-image { width: 55%; position: absolute; bottom: 0; right: 0; z-index: 2; border: 10px solid #ffffff; border-radius: 20px; }

.vr-experience-badge {
    position: absolute; top: 40px; right: 10px; background-color: var(--brand-green); color: #ffffff;
    width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; z-index: 3; box-shadow: 0 10px 30px rgba(126, 189, 65, 0.4); /* animation: floatBadge 4s ease-in-out infinite; */
}
.vr-experience-badge .years { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 5px; }
.vr-experience-badge .text { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

@keyframes floatBadge {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.vr-about-checklist { list-style: none; padding: 0; margin: 30px 0; }
.vr-about-checklist li { align-items: flex-start; margin-bottom: 20px; font-size: 1.05rem; color: #555; background: var(--bg-light); padding: 20px; border-radius: 8px; transition: transform 0.3s ease; }
.vr-about-checklist li:hover { transform: translateX(10px); background: #f0f5fa; }
.vr-about-checklist p { margin-bottom: 0; }
.vr-about-checklist .check-icon {
    background-color: var(--brand-blue); color: #ffffff; min-width: 28px; height: 28px; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%; margin-right: 15px; font-size: 0.8rem; margin-top: 2px;
}
.vr-vision-highlight { margin-top: 40px; padding: 30px; border-left: 5px solid var(--brand-green); background-color: #fcfcfc; box-shadow: 0 5px 20px rgba(0,0,0,0.03); border-radius: 0 8px 8px 0; }
.vr-about-page-content { padding-top: 50px; }

@media (max-width: 992px) {
    .vr-about-images-floated { float: none; width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 50px; padding-right: 0; }
    .vr-about-split-grid { grid-template-columns: 1fr; gap: 60px; }
    .vr-about-images-side { padding-right: 0; max-width: 600px; margin: 0 auto; }
}

/* ==========================================================================
   Mission & Vision Cards
   ========================================================================== */
.vr-mv-card {
    background-color: var(--bg-light); padding: 40px 40px 50px; transition: transform 0.3s ease, box-shadow 0.3s ease; border-bottom: 4px solid transparent;
}
.vr-mv-card:hover { transform: translateY(-8px); }
.mv-icon { font-size: 3.5rem; margin-bottom: 20px; display: inline-block; line-height: 1; }
.vr-mv-card h3 { font-size: 1.8rem; color: var(--brand-dark); margin-bottom: 15px; }
.vr-mv-card p { color: #555; font-size: 1.05rem; line-height: 1.7; margin: 0; }

/* ==========================================================================
   Product Archive & Single Details
   ========================================================================== */
.vr-products-section { padding: 80px 0; background-color: var(--bg-light); }
.vr-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; }
.vr-product-card {
    background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; display: flex; flex-direction: column; border-bottom: 4px solid var(--brand-blue);
}
.vr-product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.product-image-wrapper { background: #ffffff; display: flex; align-items: center; justify-content: center; height: 300px; border-bottom: 1px solid #f0f0f0; overflow: hidden; }
.vr-product-image { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.vr-product-card:hover .vr-product-image { transform: scale(1.08); }
.product-info { padding: 30px 20px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.product-title { font-size: 1.4rem; color: var(--brand-dark); margin-bottom: 25px; font-weight: 600; line-height: 1.4; }
.view-more-btn { align-self: center; padding: 12px 35px; border-radius: 50px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; }
.vr-pagination { margin-top: 60px; text-align: center; }
.no-image-placeholder { color: #999; font-style: italic; }

.vr-single-product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; background: #ffffff; padding: 50px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); }
.vr-image-zoom-container { position: relative; overflow: hidden; border-radius: 8px; background: #ffffff; border: 1px solid #eee; cursor: crosshair; }
.vr-zoom-image { width: 100%; height: auto; display: block; transition: transform 0.1s ease-out; transform-origin: center center; pointer-events: none; }
.vr-image-zoom-container:hover .vr-zoom-image { transform: scale(2.2); }
.vr-product-details { padding-top: 20px; }
.vr-product-details .product-title { font-size: 2.5rem; color: var(--brand-dark); margin-bottom: 25px; border-bottom: 3px solid var(--brand-blue); padding-bottom: 15px; display: inline-block; }
.vr-product-details .product-description { font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 40px; }
.pdf-btn { background-color: var(--brand-green); display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; padding: 15px 35px; border-radius: 50px; box-shadow: 0 5px 15px rgba(126, 189, 65, 0.3); color: #fff; text-decoration: none;}
.pdf-btn:hover { background-color: var(--brand-dark); box-shadow: 0 8px 20px rgba(0,0,0,0.15); color: #fff;}

@media (max-width: 900px) {
    .vr-single-product-layout { grid-template-columns: 1fr; padding: 30px; gap: 40px; }
}

/* ==========================================================================
   Contact Page & Form Styling
   ========================================================================== */
.vr-info-boxes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: -80px; margin-bottom: 80px; position: relative; z-index: 10; }
.vr-info-box { background: #ffffff; padding: 50px 30px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); text-align: center; transition: all 0.3s ease; border: 1px solid #f5f5f5; }
.vr-info-box:hover { transform: translateY(-10px); box-shadow: 0 15px 50px rgba(0,0,0,0.12); border-color: var(--brand-blue); }
.vr-info-box .icon-circle { width: 80px; height: 80px; background-color: var(--bg-light); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 25px; color: var(--brand-blue); transition: all 0.3s ease; }
.vr-info-box:hover .icon-circle { background-color: var(--brand-blue); color: #ffffff; }
.vr-info-box h3 { font-size: 1.4rem; color: var(--brand-dark); margin-bottom: 15px; }
.vr-info-box p, .vr-info-box a { color: #666; font-size: 1.05rem; line-height: 1.6; text-decoration: none; transition: color 0.3s; }
.vr-info-box a:hover { color: var(--brand-green); }

.vr-form-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.vr-form-container { background: #ffffff; }
.vr-form-container input[type="text"], .vr-form-container input[type="email"], .vr-form-container input[type="tel"], .vr-form-container textarea {
    width: 100%; padding: 16px 20px; border: 1px solid #eaeaea; border-radius: 8px; margin-bottom: 20px; background-color: #fcfcfc; font-family: inherit; font-size: 1rem; transition: all 0.3s ease;
}
.vr-form-container input:focus, .vr-form-container textarea:focus { outline: none; border-color: var(--brand-blue); background-color: #ffffff; box-shadow: 0 0 0 4px rgba(85, 149, 211, 0.1); }
.vr-form-container input[type="submit"], .vr-form-container button[type="submit"] {
    background-color: var(--brand-blue); color: #ffffff; padding: 16px 45px; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; display: inline-block; margin-top: 10px;
}
.vr-form-container input[type="submit"]:hover, .vr-form-container button[type="submit"]:hover { background-color: var(--brand-dark); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.vr-map-side iframe { box-shadow: 0 10px 40px rgba(0,0,0,0.08); }

.vr-rounded-box { border-radius: 12px; padding: 50px; }
.vr-contact-list-item { margin-bottom: 30px; align-items: center; }
.vr-large-icon { font-size: 1.8rem; margin-right: 20px; }
.vr-contact-label { display: block; color: var(--brand-dark); font-size: 1.2rem; margin-bottom: 5px; }
.vr-contact-detail { color: #666; line-height: 1.6; }
.vr-contact-link { font-size: 1.1rem; }

.vr-custom-form { width: 100%; }
.vr-form-row { display: flex; gap: 20px; }
.vr-form-group { margin-bottom: 25px; flex: 1; }
.vr-form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--brand-dark); font-size: 0.95rem; }
.vr-form-control { width: 100%; padding: 14px 18px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; font-family: var(--font-body); color: #333; background-color: #fafafa; transition: all 0.3s ease; }
.vr-form-control:focus { outline: none; border-color: var(--brand-blue); background-color: #ffffff; box-shadow: 0 0 0 3px rgba(10, 88, 202, 0.1); }
.vr-form-control::placeholder { color: #bbb; }
.vr-form-alert { padding: 15px 20px; border-radius: 8px; margin-bottom: 25px; font-weight: bold; }
.vr-alert-success { background-color: #e8f5e9; color: #2e7d32; border-left: 4px solid #4caf50; }
.vr-alert-error { background-color: #ffebee; color: #c62828; border-left: 4px solid #f44336; }

@media (max-width: 992px) {
    .vr-info-boxes-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: -40px; }
    .vr-form-map-grid { grid-template-columns: 1fr; }
    .vr-map-side iframe { min-height: 400px; margin-top: 40px; }
}
@media (max-width: 768px) {
    .vr-form-row { flex-direction: column; gap: 0; }
}

/* ==========================================================================
   Global Footer Styles
   ========================================================================== */
.site-footer { background-color: var(--brand-dark); color: #e0e0e0; padding-top: 80px; font-size: 0.95rem; }
.footer-widgets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; padding-bottom: 60px; }
.footer-heading { color: #ffffff; font-size: 1.4rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; }
.footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background-color: var(--brand-blue); }
.footer-text { line-height: 1.8; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 15px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.05); color: #ffffff; border-radius: 50%; text-decoration: none; font-weight: bold; transition: all 0.3s ease; }
.social-icon:hover { background-color: var(--brand-blue); transform: translateY(-3px); }
.footer-menu, .footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-menu li { margin-bottom: 15px; }
.footer-menu a { color: #bbbbbb; text-decoration: none; transition: color 0.3s ease, padding-left 0.3s ease; display: inline-block; }
.footer-menu a:hover { color: var(--brand-green); padding-left: 5px; }
.footer-contact-list li { display: flex; align-items: flex-start; margin-bottom: 15px; line-height: 1.6; }
.footer-contact-list .icon { margin-right: 10px; font-size: 1.1rem; }
.footer-contact-list a { color: #bbbbbb; text-decoration: none; transition: color 0.3s ease; }
.footer-contact-list a:hover { color: var(--brand-blue); }
.footer-bottom { background-color: #0a0a0a; padding: 25px 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.footer-bottom p { margin: 0; color: #888888; font-size: 0.9rem; }

/* ==========================================================================
   Premium Product Cards (Inverted Border-Radius "Cutout" Effect)
   ========================================================================== */

/* The Grid (Uses your existing container) */
.vr-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
}

/* The Main Card Container */
.vr-premium-card {
    position: relative;
    height: 420px;
    border-radius: 24px;
    overflow: hidden; /* CRITICAL: This clips the inner inverted corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background-color: var(--brand-dark);
}

.vr-premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* Link Wrapper ensures the whole card is clickable */
.vr-card-link-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Background Image Layer */
.vr-card-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

.vr-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vr-premium-card:hover .vr-card-image {
    transform: scale(1.1); /* Slow cinematic zoom on hover */
}

/* The Dark Blue Gradient Overlay (so white text is readable) */
.vr-card-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 70%;
    background: linear-gradient(to top, rgba(16, 36, 75, 0.95) 0%, rgba(16, 36, 75, 0) 100%);
    z-index: 1;
}

/* Text Content Container */
.vr-card-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: calc(100% - 110px); /* Keeps text safely away from the cutout */
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.vr-card-category {
    color: #00d2ff; /* Labtox Cyan */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.vr-card-title {
    color: #ffffff;
    font-size: 1.6rem;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* -----------------------------------------------------------
   THE MAGIC CUTOUT (Inverted Corners)
   ----------------------------------------------------------- */
.vr-card-cutout {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border-top-left-radius: 30px; /* The main inner curve */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Top Left Inverted Curve */
.vr-card-cutout::before {
    content: "";
    position: absolute;
    bottom: 100%; /* Sits exactly on top of the white box */
    right: 0;
    height: 30px;
    width: 30px;
    background-color: transparent;
    border-bottom-right-radius: 30px;
    box-shadow: 15px 15px 0 15px #ffffff; /* Fills the outer gap with white */
}

/* The Bottom Left Inverted Curve */
.vr-card-cutout::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 100%; /* Sits exactly to the left of the white box */
    height: 15px;
    width: 30px;
    background-color: transparent;
    border-bottom-right-radius: 30px;
    box-shadow: 15px 15px 0 15px #ffffff; /* Fills the outer gap with white */
}

/* The Circular Arrow Button inside the Cutout */
.vr-card-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
    font-size: 1.1rem;
    transition: all 0.4s ease;
    transform: translate(5px, 5px); /* Pushes it perfectly into the corner */
}

/* Button Hover Animation */
.vr-premium-card:hover .vr-card-btn {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff !important;
    transform: translate(5px, 5px) rotate(-45deg); /* Slight tilt exactly like Labtox */
}

/* Fallback styling if there is no image */
.vr-card-bg .no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: #888;
}
/* ==========================================================================
   Front Page Gateway Cutout Modifiers
   ========================================================================== */

/* Resize the premium cards to fit the gateway layout perfectly */
.gateway-premium-card {
    flex: 1; 
    height: 500px; 
    max-width: 550px; 
    margin: 0 auto;
    border: none !important;
}

/* Adjust description text formatting */
.gateway-desc {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 0;
    max-width: 90%;
}

/* CRITICAL: Match the cutout color and shadows to the light grey landing page background */
.gateway-premium-card .vr-card-cutout {
    background-color: var(--bg-light) !important;
}
.gateway-premium-card .vr-card-cutout::before,
.gateway-premium-card .vr-card-cutout::after {
    box-shadow: 15px 15px 0 15px var(--bg-light) !important;
}

/* Custom Hover Colors for the Buttons */
.gateway-human:hover .vr-card-btn {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff !important;
}

.gateway-vet:hover .vr-card-btn {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #ffffff !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .gateway-premium-card {
        width: 100%;
        height: 420px;
		flex:none;
    }
}

/* ==========================================================================
   About Page: Mission & Vision Interactive Cutout Cards
   ========================================================================== */

/* Set a slightly taller base height so there is room to expand */
.mv-reveal-card {
    cursor: pointer;
    height: 480px; 
}

/* Ensure the overlay can smoothly grow to cover the text */
.mv-reveal-card .vr-card-overlay {
    transition: all 0.5s ease;
}

/* Hide the paragraph text by default */
.mv-reveal-card .mv-text-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-top: 0;
}

.mv-reveal-card .mv-text-content p {
    color: #e0e0e0;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Arrow rotation setup */
.mv-reveal-card .mv-arrow {
    transition: transform 0.4s ease;
}

/* -----------------------------------------------------------
   ACTIVE REVEALED STATE (Triggered on Click)
   ----------------------------------------------------------- */

/* Expand the text upwards */
.mv-reveal-card.revealed .mv-text-content {
    max-height: 300px;
    opacity: 1;
    margin-top: 15px;
}

/* Darken the gradient so the text is perfectly readable */
.mv-reveal-card.revealed .vr-card-overlay {
    height: 100%;
    background: linear-gradient(to top, rgba(10, 16, 25, 0.98) 0%, rgba(10, 16, 25, 0.6) 100%);
}

/* Flip the arrow upside down to indicate it can be closed */
.mv-reveal-card.revealed .mv-arrow {
    transform: rotate(180deg);
}

/* Lock the button to its active brand color when open */
.human-mv-card.revealed .vr-card-btn {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff !important;
}

.vet-mv-card.revealed .vr-card-btn {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #ffffff !important;
}

/* ==========================================================================
   Premium Contact Page & Form Styling
   ========================================================================== */

/* --- Left Side: Contact Details --- */
.contact-premium-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

.contact-premium-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.contact-icon-wrapper {
    background: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    color: var(--brand-blue);
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.contact-premium-list li:hover .contact-icon-wrapper {
    background-color: var(--brand-blue);
    color: #ffffff;
    transform: translateY(-3px);
}

.vr-contact-label {
    display: block;
    color: var(--brand-dark);
    font-size: 1.2rem;
    font-family: var(--font-heading);
    margin-bottom: 5px;
    padding-top: 5px;
}

.vr-contact-link {
    color: var(--brand-blue);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    transition: color 0.3s ease;
}

.vr-contact-link:hover {
    color: var(--brand-dark);
}

/* --- Right Side: The Form Card --- */
.vr-contact-form-side {
    padding: 50px;
    border-radius: 24px;
    border-top: 6px solid var(--brand-blue);
    position: relative;
    z-index: 5;
    background-color: #ffffff;
    box-shadow: 0 15px 40px rgba(10, 16, 25, 0.06);
}

.vr-custom-form {
    width: 100%;
}

.vr-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.vr-form-group {
    flex: 1;
    margin-bottom: 20px;
}

.vr-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--brand-dark);
    font-size: 0.95rem;
}

/* Form Inputs */
.vr-form-control {
    width: 100%;
    padding: 16px 20px !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    background-color: #fcfcfc !important;
    font-family: inherit;
    font-size: 1rem;
    color: #333 !important;
    transition: all 0.3s ease;
    resize: vertical;
}

.vr-form-control:focus {
    outline: none;
    border-color: var(--brand-blue) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(27, 91, 249, 0.1) !important;
}

/* Form Alerts (Success/Error) */
.vr-form-alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-weight: bold;
}
.vr-alert-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-left: 4px solid #4caf50;
}
.vr-alert-error {
    background-color: #ffebee;
    color: #c62828;
    border-left: 4px solid #f44336;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .vr-form-row {
        flex-direction: column;
        gap: 0;
    }
    .vr-contact-form-side {
        padding: 30px 20px;
    }
	.two-row-header{display:flex; justify-content:space-between; align-items:center;}
	.header-top-row{width:100%;}
	
}
.main-navigation ul ul {display:block; background:#ffffff;}
.main-navigation ul ul li{padding:10px;}

/* ==========================================================================
   Premium Pagination Styling
   ========================================================================== */
.vr-pagination {
    margin-top: 60px;
    text-align: center;
}

.vr-pagination .nav-links {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.vr-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    background-color: #ffffff;
    color: var(--brand-dark);
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.vr-pagination .page-numbers:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(27, 91, 249, 0.2);
}

.vr-pagination .page-numbers.current {
    background-color: var(--brand-blue);
    color: #ffffff;
    cursor: default;
    box-shadow: 0 10px 20px rgba(27, 91, 249, 0.2);
}

.vr-pagination .dots {
    background: transparent;
    box-shadow: none;
    color: #999;
}

/* ==========================================================================
   Services Page: Split Intro & Big Icon Cards
   ========================================================================== */

/* --- 1. The Split Intro Section --- */
.vr-intro-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.vr-intro-text-side {
    padding-right: 20px;
}

@media (max-width: 991px) {
    .vr-intro-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .vr-intro-text-side {
        padding-right: 0;
    }
}

/* --- 2. The Big Icon Services Grid --- */
.vr-icon-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* The Card Itself */
.vr-icon-service-card {
    background: #f8fafc; /* Subtle, clean grey-blue */
    padding: 50px 40px;
    border-radius: 16px;
    border: 1px solid #edf2f7;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

/* Hover Effect: Lifts up, gets a shadow, and adds a brand border */
.vr-icon-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 16, 25, 0.08);
    border-color: rgba(27, 91, 249, 0.3); /* Soft brand blue border on hover */
    background: #ffffff;
}

/* The Big Icon */
.vr-big-icon-wrapper {
    font-size: 3.5rem;
    color: var(--brand-blue);
    margin-bottom: 25px;
    display: inline-block;
    transition: transform 0.4s ease;
}

.vr-icon-service-card:hover .vr-big-icon-wrapper {
    transform: scale(1.1);
    color: var(--brand-dark); /* Icon turns dark on hover for contrast */
}

/* Typography */
.vr-icon-service-title {
    font-size: 1.5rem;
    color: var(--brand-dark);
    margin-bottom: 15px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.vr-icon-service-desc {
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 1.05rem;
}

/* The Inquire Link */
.vr-icon-service-link {
    display: inline-flex;
    align-items: center;
    color: var(--brand-blue);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.vr-icon-service-link i {
    transition: transform 0.3s ease;
}

.vr-icon-service-link:hover {
    color: var(--brand-dark);
}

.vr-icon-service-link:hover i {
    transform: translateX(5px); /* Arrow slides slightly right on hover */
}

/* ==========================================================================
   Mission & Vision: Two-Box Desktop Layout
   ========================================================================== */

.vr-simple-mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Forces exactly two equal columns */
    gap: 40px; /* Space between the two boxes */
    align-items: stretch; /* Ensures both boxes match heights perfectly */
}

/* Make sure the card itself takes up the full height of the stretched grid item */
.vr-simple-mv-card {
    height: 100%;
    display: flex;
    flex-direction: column;
	background: #f8fafc;
	padding:25px;
}

/* On mobile screens (tablets and phones), stack them vertically */
@media (max-width: 768px) {
    .vr-simple-mv-grid {
        grid-template-columns: 1fr; /* Switches to 1 column */
        gap: 30px;
    }
	.main-navigation ul{gap:2px;}
	.main-navigation li{width:100%; padding:5px 0; border-bottom:1px solid thistle;}
	.slide-content{padding:10px;}
	.main-navigation ul ul li{padding:5px;}
	.vr-hero-slider{min-height:550px; height:60vh;}
}

/* ==========================================================================
   Big Icons for Mission & Vision
   ========================================================================== */

.mv-icon-simple {
    font-size: 4rem; /* Makes the icon much larger */
    margin-bottom: 25px; /* Adds a bit more breathing room below the big icon */
    line-height: 1; /* Keeps the icon box tight */
    display: inline-block;
}

/* ==========================================================================
   Floating WhatsApp Button
   ========================================================================== */

.vr-whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366; /* Official WhatsApp Green */
    color: #ffffff;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    z-index: 9999; /* Ensures it stays above all other content */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: vr-pulse-whatsapp 2s infinite;
}

/* Hover Effect */
.vr-whatsapp-float:hover {
    background-color: #1ebe57;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 12px 25px rgba(37, 211, 102, 0.4);
    animation: none; /* Stops the pulsing when the user hovers over it */
}

/* Gentle Pulse Animation */
@keyframes vr-pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .vr-whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 30px;
    }
}