/*
* VitalSpring Main Stylesheet
*
* Theme Name: VitalSpring
* Theme URI: https://muhammadabid.com/themes/vitalspring
* Author: Muhammad Abid
* Author URI: https://muhammadabid.com
* Description: Main CSS file containing all styles for the VitalSpring theme.
* Version: 1.0.0
* Text Domain: vitalspring
*/
:root {
--vs-color-primary: #0B4619;
--vs-color-primary-light: #166D3B;
--vs-color-secondary: #D4AF37;
--vs-color-secondary-dark: #B5952F;
--vs-color-text: #2C3E50;
--vs-color-heading: #1A252F;
--vs-color-background: #F9FBF9;
--vs-color-white: #FFFFFF;
--vs-color-border: #E5E7EB;
--vs-font-heading: 'Playfair Display', serif;
--vs-font-body: 'Inter', sans-serif;
--vs-spacing-xs: 0.5rem;
--vs-spacing-sm: 1rem;
--vs-spacing-md: 2rem;
--vs-spacing-lg: 4rem;
--vs-spacing-xl: 8rem;
--vs-radius-sm: 4px;
--vs-radius-md: 8px;
--vs-radius-lg: 16px;
--vs-radius-full: 9999px;
}
/* Reset & Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: var(--vs-font-body);
color: var(--vs-color-text);
background-color: var(--vs-color-background);
line-height: 1.6;
margin: 0;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--vs-font-heading);
color: var(--vs-color-heading);
margin-top: 0;
margin-bottom: var(--vs-spacing-sm);
font-weight: 700;
}
a {
color: var(--vs-color-primary);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--vs-color-secondary);
}
/* Utilities */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--vs-spacing-sm);
}
.text-center {
text-align: center;
}
.align-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#page,
.site {
display: flex;
flex-direction: column;
flex: 1;
}
main,
.site-main {
flex: 1 0 auto;
}
.site-footer {
flex-shrink: 0;
}
/* Basic Layouts - See Advanced Header section below */
.site-footer {
background: var(--vs-color-primary);
color: var(--vs-color-white);
padding: var(--vs-spacing-lg) 0;
margin-top: var(--vs-spacing-lg);
}
.site-footer a {
color: var(--vs-color-secondary);
}
/* ==================
WooCommerce Styles
================== */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
background-color: var(--vs-color-primary);
color: var(--vs-color-white);
font-family: var(--vs-font-heading);
padding: 12px 24px;
border-radius: var(--vs-radius-md);
transition: all 0.3s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background-color: var(--vs-color-secondary);
color: var(--vs-color-heading);
}
/* Product Grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: #fff;
padding: var(--vs-spacing-sm);
border-radius: var(--vs-radius-md);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-5px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--vs-font-heading);
color: var(--vs-color-primary);
padding-top: var(--vs-spacing-xs);
}
.woocommerce ul.products li.product .price {
font-family: var(--vs-font-body);
font-weight: 600;
color: var(--vs-color-secondary-dark);
}
/* Single Product */
.woocommerce div.product .product_title {
font-size: 2.5rem;
color: var(--vs-color-primary);
}
.woocommerce div.product .price {
font-size: 1.5rem;
color: var(--vs-color-secondary);
}
/* Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-top-color: var(--vs-color-primary);
}
.woocommerce-message::before {
color: var(--vs-color-primary);
}
/* ==========================================================================
ADVANCED HEADER - TOP BAR
========================================================================== */
.vs-topbar {
background: var(--vs-topbar-bg, #0B4619);
color: var(--vs-topbar-color, #fff);
padding: 8px 0;
font-size: 13px;
}
.vs-topbar__content {
display: flex;
justify-content: space-between;
align-items: center;
}
.vs-topbar__left {
display: flex;
gap: 20px;
}
.vs-topbar__item {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
opacity: 0.9;
transition: opacity 0.3s ease;
}
.vs-topbar__item:hover {
opacity: 1;
color: inherit;
}
.vs-topbar__item svg {
flex-shrink: 0;
}
.vs-topbar__social {
display: flex;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.vs-topbar__social a {
color: inherit;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.vs-topbar__social a:hover {
opacity: 1;
}
/* ==========================================================================
ADVANCED HEADER - MAIN HEADER
========================================================================== */
.vs-header {
background: var(--vs-header-bg, #fff);
padding: 0;
position: relative;
z-index: 1000;
transition: all 0.3s ease;
}
.vs-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.vs-header__brand {
flex-shrink: 0;
}
.vs-header__logo img {
width: var(--vs-logo-width, 180px);
max-width: 100%;
height: auto;
display: block;
}
.vs-header__site-title {
font-family: var(--vs-font-heading, 'Playfair Display', serif);
font-size: 1.75rem;
font-weight: 700;
color: var(--vs-color-primary, #0B4619);
text-decoration: none;
}
.vs-header__site-title:hover {
color: var(--vs-menu-hover, #0B4619);
}
/* Navigation */
.vs-header__nav {
flex: 1;
display: flex;
justify-content: flex-end;
width: 100%;
}
/* Menu Alignment - Force Container */
body .vs-header--menu-left .vs-header__nav {
justify-content: flex-start !important;
}
body .vs-header--menu-center .vs-header__nav {
justify-content: center !important;
}
body .vs-header--menu-right .vs-header__nav {
justify-content: flex-end !important;
}
/* Menu Alignment - Force List Items (Double Safety) */
body .vs-header--menu-left .vs-menu {
margin-right: auto !important;
margin-left: 0 !important;
}
body .vs-header--menu-center .vs-menu {
margin-left: auto !important;
margin-right: auto !important;
}
body .vs-header--menu-right .vs-menu {
margin-left: auto !important;
margin-right: 0 !important;
}
.vs-menu {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.vs-menu>li {
position: relative;
}
.vs-menu>li>a {
display: block;
padding: 10px 16px;
color: var(--vs-menu-color, #1a1a1a);
font-weight: 500;
font-size: 15px;
text-decoration: none;
transition: color 0.3s ease;
}
.vs-menu>li>a:hover,
.vs-menu>li.current-menu-item>a {
color: var(--vs-menu-hover, #0B4619);
}
/* Premium Hover Effect */
.vs-menu>li>a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 6px;
left: 50%;
background-color: var(--vs-menu-hover, #0B4619);
transition: all 0.3s ease;
transform: translateX(-50%);
opacity: 0;
}
.vs-menu>li:hover>a::after,
.vs-menu>li.current-menu-item>a::after {
width: 70%;
opacity: 1;
}
/* Dropdown */
.vs-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: #fff;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
padding: 10px 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.vs-menu>li:hover>.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.vs-menu .sub-menu a {
display: block;
padding: 10px 20px;
color: #333;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease;
}
.vs-menu .sub-menu a:hover {
background: #f5f5f5;
color: var(--vs-menu-hover, #0B4619);
}
/* Header Actions */
.vs-header__actions {
display: flex;
align-items: center;
gap: 12px;
}
.vs-header__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--vs-menu-color, #1a1a1a);
cursor: pointer;
transition: all 0.3s ease;
}
.vs-header__icon:hover {
background: #f5f5f5;
color: var(--vs-menu-hover, #0B4619);
}
.vs-header__cart {
position: relative;
text-decoration: none;
}
.vs-header__cart-count {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
background: var(--vs-cta-bg, #D4AF37);
color: #000;
font-size: 11px;
font-weight: 600;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.vs-header__cta {
display: inline-flex;
align-items: center;
padding: 10px 24px;
background: var(--vs-cta-bg, #D4AF37);
color: var(--vs-cta-color, #000000);
font-weight: 600;
font-size: 14px;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
}
.vs-header__cta:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
color: #000;
}
/* Hamburger */
.vs-header__hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.vs-header__hamburger span {
display: block;
width: 100%;
height: 2px;
background: var(--vs-menu-color, #1a1a1a);
transition: all 0.3s ease;
}
/* ==========================================================================
HEADER STYLE 3 - TRANSPARENT
========================================================================== */
.vs-header--transparent {
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
}
.vs-header--transparent .vs-menu>li>a,
.vs-header--transparent .vs-header__icon,
.vs-header--transparent .vs-header__site-title {
color: #fff;
}
.vs-header--transparent .vs-header__hamburger span {
background: #fff;
}
.vs-header--transparent.is-sticky .vs-menu>li>a,
.vs-header--transparent.is-sticky .vs-header__icon,
.vs-header--transparent.is-sticky .vs-header__site-title {
color: var(--vs-menu-color, #1a1a1a);
}
.vs-header--transparent.is-sticky .vs-header__hamburger span {
background: var(--vs-menu-color, #1a1a1a);
}
/* ==========================================================================
STICKY HEADER
========================================================================== */
.vs-header--sticky {
position: sticky;
top: 0;
}
.vs-header--sticky.is-sticky {
background: var(--vs-sticky-bg, #fff);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
padding: 10px 0;
}
.vs-header--sticky.is-sticky .vs-header__logo img {
max-width: calc(var(--vs-logo-width, 180px) * 0.8);
}
/* ==========================================================================
SEARCH OVERLAY
========================================================================== */
.vs-search-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(11, 70, 25, 0.95);
/* Theme Color */
backdrop-filter: blur(10px);
padding: 100px 20px;
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.3s ease;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.vs-search-overlay.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.vs-search-overlay__inner {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.vs-search-form {
display: flex;
gap: 10px;
}
.vs-search-form__input {
flex: 1;
background: transparent;
border: none;
border-bottom: 2px solid #fff;
padding: 15px 0;
font-size: 24px;
color: #fff;
outline: none;
}
.vs-search-form__input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.vs-search-form__btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
}
.vs-search-close {
position: absolute;
top: -60px;
right: 0;
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.vs-search-close:hover {
opacity: 1;
}
/* Force Blog Layout Columns */
@media (min-width: 768px) {
.blog .site-main .row>.col-md-8,
.archive .site-main .row>.col-md-8,
.search .site-main .row>.col-md-8 {
width: 66.666667% !important;
flex: 0 0 auto !important;
}
.blog .sidebar-area,
.archive .sidebar-area,
.search .sidebar-area {
width: 33.333333% !important;
flex: 0 0 auto !important;
}
}
/* ==========================================================================
MOBILE MENU
========================================================================== */
.vs-mobile-menu {
position: fixed;
top: 0;
right: -320px;
width: 320px;
max-width: 100%;
height: 100%;
background: #fff;
z-index: 10000;
transition: right 0.3s ease;
display: flex;
flex-direction: column;
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
}
.vs-mobile-menu.is-active {
right: 0;
}
.vs-mobile-menu__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #eee;
}
.vs-mobile-menu__title {
font-weight: 600;
font-size: 18px;
}
.vs-mobile-menu__close {
background: none;
border: none;
cursor: pointer;
padding: 5px;
color: #333;
}
.vs-mobile-menu__nav {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.vs-mobile-nav {
list-style: none;
margin: 0;
padding: 0;
}
.vs-mobile-nav li {
border-bottom: 1px solid #f0f0f0;
}
.vs-mobile-nav a {
display: block;
padding: 14px 0;
color: #333;
font-weight: 500;
text-decoration: none;
transition: color 0.3s ease;
}
.vs-mobile-nav a:hover {
color: var(--vs-menu-hover, #0B4619);
}
.vs-mobile-nav .sub-menu {
list-style: none;
padding-left: 20px;
margin: 0;
}
.vs-mobile-nav .sub-menu a {
font-weight: 400;
font-size: 14px;
padding: 10px 0;
}
.vs-mobile-menu__cta {
display: block;
margin: 20px;
padding: 14px 20px;
background: var(--vs-cta-bg, #D4AF37);
color: #000;
text-align: center;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
}
.vs-mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.vs-mobile-overlay.is-active {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
HEADER RESPONSIVE
========================================================================== */
@media (max-width: 991px) {
.vs-header__nav {
display: none;
}
.vs-header__hamburger {
display: flex;
}
.vs-header--style-2 .vs-header__inner {
justify-content: space-between;
}
.vs-header--style-2 .vs-header__brand {
order: 1;
margin: 0;
}
.vs-header--style-2 .vs-header__actions {
position: relative;
}
.vs-header__cta {
display: none;
}
}
@media (max-width: 576px) {
.vs-topbar__content {
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
gap: 10px;
}
.vs-topbar__left {
flex-direction: row;
gap: 8px;
}
.vs-topbar__item {
font-size: 11px;
}
.vs-topbar__item svg {
width: 12px;
height: 12px;
}
.vs-topbar__right {
display: none;
}
.vs-header__logo img {
max-width: 140px;
}
}
/* ==========================================================================
ELEMENTOR WIDGETS - HERO SLIDER
========================================================================== */
.vs-hero-slider {
position: relative;
overflow: hidden;
width: 100%;
min-height: 500px;
height: 80vh;
}
.vs-hero-slides {
position: relative;
width: 100%;
height: 100%;
}
.vs-hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.vs-hero-slide.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
}
.vs-hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(11, 70, 25, 0.6);
pointer-events: none;
z-index: 1;
}
.vs-hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
padding: 40px 20px;
animation: vsFadeInUp 0.8s ease-out;
}
@keyframes vsFadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vs-hero-title {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 700;
margin: 0 0 20px;
line-height: 1.2;
}
.vs-hero-subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
margin: 0 0 30px;
line-height: 1.6;
}
.vs-hero-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.vs-hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
}
.vs-hero-btn--primary {
background: var(--vs-color-secondary);
color: #000;
border: 2px solid var(--vs-color-secondary);
}
.vs-hero-btn--primary:hover {
background: transparent;
color: var(--vs-color-secondary);
}
.vs-hero-btn--secondary {
background: transparent;
border: 2px solid #fff;
color: #fff;
}
.vs-hero-btn--secondary:hover {
background: #fff;
color: var(--vs-color-primary);
}
.vs-hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--vs-color-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
}
.vs-hero-arrow:hover {
background: var(--vs-color-secondary);
color: #000;
}
.vs-hero-arrow--prev {
left: 20px;
}
.vs-hero-arrow--next {
right: 20px;
}
.vs-hero-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.vs-hero-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
background: transparent;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}
.vs-hero-dot.is-active,
.vs-hero-dot:hover {
background: #fff;
}
/* ==========================================================================
ELEMENTOR WIDGETS - PRODUCT GRID
========================================================================== */
.vs-products-grid {
display: grid;
gap: 24px;
}
.vs-products-grid--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.vs-products-grid--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.vs-products-grid--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.vs-products-grid--cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.vs-products-grid--cols-6 {
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 992px) {
.vs-products-grid--cols-4,
.vs-products-grid--cols-5,
.vs-products-grid--cols-6 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.vs-products-grid--cols-3,
.vs-products-grid--cols-4,
.vs-products-grid--cols-5,
.vs-products-grid--cols-6 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.vs-products-grid {
grid-template-columns: 1fr;
}
}
.vs-product-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.vs-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.vs-product-card__image {
position: relative;
overflow: hidden;
}
.vs-product-card__image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.4s ease;
}
.vs-product-card:hover .vs-product-card__image img {
transform: scale(1.05);
}
.vs-product-card__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
}
.vs-product-card__badge--sale {
background: #ef4444;
color: #fff;
}
.vs-product-card__content {
padding: 16px;
}
.vs-product-card__title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 8px;
line-height: 1.4;
}
.vs-product-card__title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.vs-product-card__title a:hover {
color: var(--vs-color-secondary);
}
.vs-product-card__rating {
margin-bottom: 8px;
}
.vs-product-card__price {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 12px;
}
.vs-product-card__price del {
color: #94a3b8;
font-weight: 400;
font-size: 0.9em;
}
.vs-product-card__price ins {
text-decoration: none;
}
.vs-product-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: #fff;
background: var(--vs-color-primary);
border-radius: 8px;
transition: all 0.3s ease;
}
.vs-product-card__btn:hover {
background: var(--vs-color-secondary);
color: #000;
}
.vs-no-products {
text-align: center;
padding: 40px;
color: #475569;
}
/* ==========================================================================
ELEMENTOR WIDGETS - TESTIMONIALS
========================================================================== */
.vs-testimonials-grid {
display: grid;
gap: 24px;
}
.vs-testimonials-grid--cols-1 {
grid-template-columns: 1fr;
}
.vs-testimonials-grid--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.vs-testimonials-grid--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.vs-testimonials-grid--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px) {
.vs-testimonials-grid--cols-3,
.vs-testimonials-grid--cols-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.vs-testimonials-grid {
grid-template-columns: 1fr;
}
}
.vs-testimonials-slider {
position: relative;
}
.vs-testimonials-slider .vs-testimonial-card {
display: none;
}
.vs-testimonials-slider .vs-testimonial-card.is-active {
display: block;
animation: vsFadeIn 0.5s ease;
}
@keyframes vsFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.vs-testimonial-card {
position: relative;
background: #fff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.vs-testimonial-card__quote {
position: absolute;
top: 20px;
right: 20px;
opacity: 0.5;
}
.vs-testimonial-card__rating {
display: flex;
gap: 4px;
margin-bottom: 16px;
color: var(--vs-color-secondary);
}
.vs-testimonial-card__content {
font-size: 1rem;
line-height: 1.7;
margin: 0 0 20px;
font-style: italic;
}
.vs-testimonial-card__author {
display: flex;
align-items: center;
gap: 14px;
}
.vs-testimonial-card__avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.vs-testimonial-card__name {
font-size: 1rem;
font-weight: 600;
margin: 0 0 2px;
}
.vs-testimonial-card__title {
font-size: 0.875rem;
}
.vs-testimonials-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: var(--vs-color-primary);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
}
.vs-testimonials-arrow:hover {
background: var(--vs-color-secondary);
color: #000;
}
.vs-testimonials-arrow--prev {
left: -22px;
}
.vs-testimonials-arrow--next {
right: -22px;
}
@media (max-width: 768px) {
.vs-testimonials-arrow--prev {
left: 0;
}
.vs-testimonials-arrow--next {
right: 0;
}
}
.vs-testimonials-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 24px;
}
.vs-testimonials-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: #cbd5e1;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}
.vs-testimonials-dot.is-active,
.vs-testimonials-dot:hover {
background: var(--vs-color-primary);
}
/* ==========================================================================
HERO SLIDER LEFT VARIANT
========================================================================== */
.vs-hero-left .vs-hero-content {
text-align: left;
align-items: flex-start;
max-width: 1100px;
padding-left: 5%;
margin-left: 0;
margin-right: auto;
}
.vs-hero-left .vs-hero-title {
margin-left: 0;
margin-right: auto;
}
.vs-hero-left .vs-hero-subtitle {
margin-left: 0;
margin-right: auto;
}
.vs-hero-left .vs-hero-buttons {
justify-content: flex-start;
}
/* Mobile responsive for Left Variant */
@media (max-width: 768px) {
.vs-hero-left .vs-hero-content {
text-align: center;
padding-left: 20px;
margin: 0 auto;
}
.vs-hero-left .vs-hero-buttons {
justify-content: center;
}
.vs-hero-left .vs-hero-title {
margin: 0 0 20px;
}
.vs-hero-left .vs-hero-subtitle {
margin: 0 0 30px;
}
}
/* Mobile Topbar Inline Fix */
@media (max-width: 992px) {
.vs-topbar__content {
flex-direction: row !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 15px !important;
padding: 5px 0;
}
.vs-topbar__left {
flex-direction: row !important;
gap: 15px !important;
margin-bottom: 0 !important;
}
.vs-topbar__item {
display: inline-flex !important;
}
}
/* ==========================================================================
ADVANCED FOOTER
========================================================================== */
.site-footer {
background-color: var(--vs-footer-bg, #0B4619);
color: var(--vs-footer-text, #fff);
margin-top: 0;
padding: 0;
}
/* Footer Grid */
.vs-footer-widgets {
padding: 60px 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.vs-grid {
display: grid;
gap: 30px;
}
.vs-grid-1 {
grid-template-columns: 1fr;
}
.vs-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.vs-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.vs-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px) {
.vs-grid-3,
.vs-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.vs-grid-2,
.vs-grid-3,
.vs-grid-4 {
grid-template-columns: 1fr;
}
}
/* Widget Styling inside Footer */
.site-footer .widget {
margin-bottom: 30px;
}
.site-footer .widget-title {
color: var(--vs-footer-heading, #D4AF37);
font-size: 1.25rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
font-family: var(--vs-font-heading);
}
.site-footer .widget-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 2px;
background-color: var(--vs-color-secondary);
}
.site-footer .widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .widget ul li {
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--vs-footer-text);
}
.site-footer .widget ul li:last-child {
border-bottom: none;
}
.site-footer a {
color: var(--vs-footer-text, #fff);
opacity: 0.8;
text-decoration: none;
transition: all 0.3s ease;
}
.site-footer a:hover {
color: var(--vs-color-secondary);
opacity: 1;
padding-left: 5px;
}
/* Copyright Bar */
.vs-copyright-bar {
background-color: var(--vs-copyright-bg, #083312);
color: var(--vs-copyright-text, #ccc);
padding: 20px 0;
font-size: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.vs-copyright-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.vs-copyright-social {
display: flex;
gap: 15px;
align-items: center;
}
.vs-copyright-social a {
display: flex;
align-items: center;
justify-content: center;
color: var(--vs-copyright-text, #ccc);
transition: all 0.3s ease;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
opacity: 1;
}
.vs-copyright-social a:hover {
background: var(--vs-color-secondary);
color: #000;
transform: translateY(-3px);
padding-left: 0;
}
/* Footer Menu */
.vs-footer-menu {
display: flex;
align-items: center;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
justify-content: center;
}
.vs-footer-menu li a {
color: var(--vs-copyright-text, #ccc);
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.vs-footer-menu li a:hover {
color: var(--vs-color-secondary);
}
@media (max-width: 768px) {
.vs-copyright-content {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 20px;
}
}
/* ==========================================================================
CONTACT INFO WIDGET
========================================================================== */
.vs-contact-info-widget {
margin-bottom: 20px;
}
.vs-contact-info-list {
list-style: none;
margin: 0;
padding: 0;
}
.vs-contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
line-height: 1.5;
}
.vs-contact-item:last-child {
margin-bottom: 0;
}
.vs-contact-item a {
display: flex;
align-items: flex-start;
color: inherit;
text-decoration: none;
transition: all 0.3s ease;
}
.vs-contact-item a:hover {
color: var(--vs-color-secondary, #D4AF37);
}
.vs-contact-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
margin-right: 4px;
opacity: 0.9;
}
.vs-contact-icon svg {
width: 18px;
height: 18px;
}
.vs-contact-text {
flex: 1;
font-size: 14px;
opacity: 0.9;
}
.vs-contact-whatsapp .vs-contact-icon {
color: #25D366;
}
.vs-contact-whatsapp a:hover .vs-contact-icon {
color: #128C7E;
}
/* Footer specific styles */
.site-footer .vs-contact-info-list {
color: var(--vs-footer-text, #fff);
}
.site-footer .vs-contact-item a {
color: var(--vs-footer-text, #fff);
}
.site-footer .vs-contact-item a:hover {
color: var(--vs-color-secondary, #D4AF37);
}
/* ==============================================
MA HERO SLIDER WIDGET
============================================== */
.ma-hero-slider {
position: relative;
min-height: auto !important;
display: flex;
align-items: flex-start;
overflow: hidden;
padding: 100px 0 100px !important;
}
.ma-hero-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 10;
width: 100%;
}
.ma-hero-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
@media (min-width: 1024px) {
.ma-hero-row {
flex-direction: row;
gap: 80px;
}
}
/* Background Blobs */
.ma-hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
}
.ma-hero-blob--1 {
top: 0;
right: 0;
width: 384px;
height: 384px;
margin-right: -96px;
margin-top: -96px;
}
.ma-hero-blob--2 {
bottom: 0;
left: 0;
width: 320px;
height: 320px;
margin-left: -96px;
margin-bottom: -96px;
}
/* Content Area */
.ma-hero-content {
text-align: center;
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 1024px) {
.ma-hero-content {
flex: 1;
text-align: left;
}
}
/* Badge */
.ma-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 9999px;
border: 1px solid rgba(16, 185, 129, 0.2);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
align-self: center;
}
@media (min-width: 1024px) {
.ma-hero-badge {
align-self: flex-start;
}
}
.ma-hero-badge__dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: ma-pulse 2s infinite;
}
@keyframes ma-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Heading */
.ma-hero-heading {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.1;
margin: 0;
}
@media (min-width: 768px) {
.ma-hero-heading {
font-size: 3.5rem;
}
}
@media (min-width: 1024px) {
.ma-hero-heading {
font-size: 4rem;
}
}
.ma-hero-heading__highlight {
font-style: italic;
}
.ma-hero-description {
font-size: 1.125rem;
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
@media (min-width: 768px) {
.ma-hero-description {
font-size: 1.25rem;
}
}
@media (min-width: 1024px) {
.ma-hero-description {
margin: 0;
}
}
.ma-hero-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding-top: 16px;
}
@media (min-width: 640px) {
.ma-hero-buttons {
flex-direction: row;
justify-content: center;
}
}
@media (min-width: 1024px) {
.ma-hero-buttons {
justify-content: flex-start;
}
}
.ma-hero-btn {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 1.125rem;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ma-hero-btn--primary {
padding: 20px 40px;
border-radius: 16px;
}
.ma-hero-btn--primary:hover {
transform: scale(1.05) translateY(-3px);
}
.ma-hero-btn__icon {
transition: transform 0.3s ease;
}
.ma-hero-btn--primary:hover .ma-hero-btn__icon {
transform: translateX(4px);
}
.ma-hero-btn--secondary {
color: #334155;
gap: 8px;
}
.ma-hero-btn--secondary:hover {
color: #059669;
}
.ma-hero-btn__play {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.ma-hero-btn--secondary:hover .ma-hero-btn__play {
border-color: #a7f3d0;
background-color: #ecfdf5;
}
.ma-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
padding-top: 32px;
opacity: 0.7;
}
@media (min-width: 1024px) {
.ma-hero-trust {
justify-content: flex-start;
}
}
.ma-hero-trust__item {
display: flex;
flex-direction: column;
}
.ma-hero-trust__value {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
}
.ma-hero-trust__label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.02em;
color: #64748b;
}
.ma-hero-trust__divider {
width: 1px;
height: 40px;
background-color: #e2e8f0;
}
.ma-hero-image {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
@media (min-width: 1024px) {
.ma-hero-image {
flex: 1;
margin: 0;
}
}
.ma-hero-image__container {
position: relative;
width: 100%;
max-width: 450px;
aspect-ratio: 4 / 5;
margin: 0 auto;
}
.ma-hero-image__blob {
position: absolute;
inset: 0;
opacity: 0.2;
transform: scale(1.1);
animation: ma-blob 7s infinite alternate;
}
@keyframes ma-blob {
0% {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
100% {
border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
}
}
.ma-hero-image__wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f1f5f9;
border-radius: 2.5rem;
border: 12px solid #ffffff;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.ma-hero-image__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(0%);
transition: all 0.7s ease;
}
.ma-hero-image__wrapper:hover .ma-hero-image__img {
filter: grayscale(0%);
}
.ma-hero-floating-card {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 20px 24px;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
gap: 16px;
}
.ma-hero-floating-card__avatars {
display: flex;
margin-right: -8px;
}
.ma-hero-floating-card__avatar {
width: 32px;
height: 32px;
border-radius: 50% !important;
border: 2px solid #ffffff;
margin-right: -8px;
object-fit: cover;
display: inline-block;
background-color: #e2e8f0;
}
.ma-hero-floating-card__avatar--1 {
background-color: #60a5fa;
}
.ma-hero-floating-card__avatar--2 {
background-color: #34d399;
}
.ma-hero-floating-card__avatar--3 {
background-color: #fbbf24;
}
.ma-hero-floating-card__text {
font-size: 12px;
font-weight: 700;
color: #1e293b;
margin: 0 0 0 12px;
}
.ma-hero-decoration {
position: absolute;
top: -24px;
right: -24px;
width: 80px;
height: 80px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(12deg);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
z-index: 20;
}
.ma-hero-decoration svg {
width: 40px;
height: 40px;
}
@media (max-width: 767px) {
.ma-hero-slider {
min-height: auto;
padding: 80px 0 0;
}
.ma-hero-blob {
display: none;
}
.ma-hero-decoration {
width: 60px;
height: 60px;
top: -16px;
right: -8px;
}
.ma-hero-decoration svg {
width: 28px;
height: 28px;
}
.ma-hero-floating-card {
bottom: 12px;
left: 12px;
right: 12px;
padding: 12px 16px;
}
}
/* ==============================================
MA SERVICES WIDGET
============================================== */
.ma-services-section {
position: relative;
width: 100%;
}
.ma-services-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.ma-services-header {
text-align: center;
margin-bottom: 60px;
}
.ma-services-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.ma-services-badge::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
animation: ma-pulse 2s infinite;
}
@keyframes ma-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.ma-services-title {
font-size: clamp(28px, 5vw, 48px);
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
}
.ma-services-subtitle {
font-size: 18px;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.ma-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.ma-service-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s ease;
will-change: transform;
}
.ma-service-card--left {
flex-direction: row;
align-items: flex-start;
}
.ma-service-card--center {
text-align: center;
}
.ma-service-card--glass {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.ma-service-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s ease,
color 0.3s ease;
}
.ma-service-card__content {
flex: 1;
}
.ma-service-card__title {
font-size: 20px;
font-weight: 600;
margin: 0;
transition: color 0.3s ease;
}
.ma-service-card__desc {
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.ma-service-icon img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
.ma-service-arrow {
display: inline-flex;
align-items: center;
margin-top: 16px;
font-weight: 600;
transition: transform 0.3s ease, color 0.3s ease;
}
.ma-service-card:hover .ma-service-arrow {
transform: translateX(4px);
}
.ma-service-item-badge {
position: absolute;
top: 12px;
right: 12px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
letter-spacing: 0.05em;
}
.ma-services-cta-wrap {
text-align: center;
margin-top: 50px;
}
.ma-services-cta {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: background-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.ma-services-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(5, 150, 105, 0.25);
}
.ma-services-cta svg {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.ma-services-cta:hover svg {
transform: translateX(4px);
}
@media (max-width: 1024px) {
.ma-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.ma-services-grid {
grid-template-columns: 1fr;
}
.ma-services-header {
margin-bottom: 40px;
}
}
/* ==============================================
MA SERVICE CARDS WIDGET
============================================== */
.ma-cards-grid {
display: grid;
gap: 30px;
}
@media (min-width: 768px) {
.ma-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.ma-cards-grid.ma-cards-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.ma-cards-grid.ma-cards-col-4 {
grid-template-columns: repeat(4, 1fr);
}
}
.ma-card-style-overlay {
position: relative;
height: 650px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(6, 97, 114, 0.2);
cursor: pointer;
text-decoration: none;
display: block;
}
.ma-card-style-overlay .ma-card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ma-card-style-overlay .ma-card-content {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(6, 97, 114, 0.9) 25%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px;
transition: background 0.4s ease;
}
.ma-card-style-overlay:hover .ma-card-image {
transform: scale(1.1);
}
.ma-card-style-overlay:hover .ma-card-content {
background: linear-gradient(to top, rgba(6, 97, 114, 1) 45%, rgba(6, 97, 114, 0.4) 100%);
}
.ma-card-style-overlay .ma-card-title {
color: #f7c145;
font-size: 2rem;
margin: 0 0 12px 0;
font-weight: 700;
}
.ma-card-style-overlay .ma-card-desc {
color: #ffffff;
font-size: 1.1rem;
opacity: 0.95;
margin: 0;
line-height: 1.5;
}
.ma-card-style-floating {
background: #ffffff;
border-radius: 0 60px 0 60px;
padding: 35px;
border: 1px solid #e1e8e9;
box-shadow: 12px 12px 0px #f7c145;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
text-decoration: none;
height: 100%;
}
.ma-card-style-floating .ma-card-img-wrap {
height: 240px;
border-radius: 0 45px 0 45px;
overflow: hidden;
margin-bottom: 25px;
flex-shrink: 0;
}
.ma-card-style-floating .ma-card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.ma-card-style-floating:hover {
transform: translate(-8px, -8px);
box-shadow: 18px 18px 0px #066172;
}
.ma-card-style-floating:hover .ma-card-image {
transform: scale(1.05);
}
.ma-card-style-floating .ma-card-title {
color: #066172;
font-size: 1.8rem;
margin: 0 0 12px 0;
font-weight: 700;
}
.ma-card-style-floating .ma-card-desc {
color: #44555a;
line-height: 1.7;
font-size: 1.05rem;
margin: 0;
}
.ma-card-style-reveal {
position: relative;
height: 650px;
border-radius: 40px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
cursor: pointer;
text-decoration: none;
display: block;
}
.ma-card-style-reveal .ma-card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.ma-card-style-reveal .ma-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(6, 97, 114, 0.95), rgba(6, 97, 114, 0.2), transparent);
opacity: 0.95;
transition: opacity 0.3s ease;
}
.ma-card-style-reveal .ma-card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 32px;
color: #ffffff;
z-index: 10;
}
.ma-card-style-reveal .ma-card-badge {
display: inline-block;
color: #f7c145;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.ma-card-style-reveal .ma-card-title {
color: #ffffff;
font-size: 2.5rem;
margin: 0 0 12px 0;
font-weight: 700;
line-height: 1;
font-style: italic;
}
.ma-card-style-reveal .ma-card-desc-wrap {
max-height: 200px;
transition: all 0.5s ease;
}
.ma-card-style-reveal .ma-card-desc {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 20px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ma-card-style-reveal .ma-card-btn {
display: inline-block;
background: #f7c145;
color: #066172;
padding: 10px 24px;
border-radius: 12px;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.ma-card-style-reveal .ma-card-btn:hover {
background: #ffffff;
}
.ma-card-style-reveal .ma-card-line {
width: 40px;
height: 4px;
background: #f7c145;
margin-top: 16px;
transition: width 0.7s ease;
}
.ma-card-style-reveal:hover .ma-card-image {
transform: scale(1.1);
}
.ma-card-style-reveal:hover .ma-card-line {
width: 100%;
}
/* ==============================================
MA ADVANCED HEADINGS WIDGET
============================================== */
.ma-adv-heading {
position: relative;
margin-bottom: 30px;
}
.ma-heading-modern {
padding-left: 20px;
border-left: 4px solid var(--vs-color-secondary);
}
.ma-heading-modern .ma-adv-subtitle {
display: block;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 700;
color: var(--vs-color-secondary);
margin-bottom: 8px;
}
.ma-heading-modern .ma-adv-title {
font-family: var(--vs-font-heading, sans-serif);
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
color: var(--vs-color-heading);
margin: 0;
}
.ma-heading-modern .ma-adv-desc {
margin-top: 16px;
color: var(--vs-color-text);
font-size: 1.1rem;
max-width: 600px;
}
.ma-heading-elegant {
text-align: center;
}
.ma-heading-elegant .ma-adv-subtitle {
display: block;
font-family: var(--vs-font-heading, serif);
font-size: 1.2rem;
font-style: italic;
color: var(--vs-color-secondary);
margin-bottom: 12px;
}
.ma-heading-elegant .ma-adv-title {
font-family: var(--vs-font-heading, serif);
font-size: 3rem;
font-weight: 700;
line-height: 1.1;
color: var(--vs-color-heading);
margin: 0;
}
.ma-heading-elegant .ma-adv-separator {
display: inline-block;
width: 80px;
height: 3px;
background-color: var(--vs-color-secondary);
margin: 20px 0;
position: relative;
}
.ma-heading-elegant .ma-adv-separator::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: #fff;
border: 2px solid var(--vs-color-secondary);
border-radius: 50%;
}
.ma-heading-elegant .ma-adv-desc {
margin: 0 auto;
color: var(--vs-color-text);
font-size: 1.1rem;
max-width: 700px;
}
.ma-text-highlight {
color: var(--vs-color-secondary);
font-style: italic;
}
.ma-heading-architectural {
text-align: center;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
.ma-heading-architectural .ma-adv-line-top,
.ma-heading-architectural .ma-adv-line-bottom {
height: 1px;
width: 100%;
background: linear-gradient(to right, transparent, var(--vs-color-secondary), transparent);
margin: 24px 0;
}
.ma-heading-architectural .ma-adv-title {
font-family: var(--vs-font-heading, serif);
font-size: 4.5rem;
font-weight: 400;
color: var(--vs-color-heading);
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
}
.ma-heading-architectural .ma-adv-subtitle {
display: block;
color: var(--vs-color-text);
opacity: 0.5;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
margin-top: 16px;
}
.ma-heading-stroke {
text-align: center;
}
.ma-heading-stroke .ma-adv-title {
font-family: var(--vs-font-heading, serif);
font-size: 6rem;
font-weight: 400;
line-height: 1;
color: var(--vs-color-heading);
transition: letter-spacing 0.7s ease;
margin: 0;
}
.ma-heading-stroke:hover .ma-adv-title {
letter-spacing: 0.05em;
}
.ma-text-stroke {
-webkit-text-stroke: 1px var(--vs-color-heading);
color: transparent;
font-style: italic;
transition: color 0.3s ease;
}
.ma-heading-stroke:hover .ma-text-stroke {
color: var(--vs-color-heading);
}
.ma-heading-stroke .ma-adv-meta-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 32px;
}
.ma-heading-stroke .ma-adv-line-grad {
width: 32px;
height: 2px;
background-color: var(--vs-color-secondary);
}
.ma-heading-stroke .ma-adv-subtitle {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--vs-color-heading);
margin: 0;
}
@media (max-width: 768px) {
.ma-heading-architectural .ma-adv-title {
font-size: 2.5rem;
}
.ma-heading-stroke .ma-adv-title {
font-size: 3rem;
}
.ma-heading-stroke .ma-adv-meta-wrap {
margin-top: 20px;
}
}
.ma-card-style-glass {
position: relative;
height: 650px;
border-radius: 30px;
overflow: hidden;
background: #066172;
box-shadow: 0 20px 40px rgba(6, 97, 114, 0.15);
cursor: pointer;
text-decoration: none;
display: block;
}
.ma-card-style-glass .ma-card-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.75;
transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ma-card-style-glass .ma-card-glass-content {
position: absolute;
bottom: 25px;
left: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
padding: 30px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.25);
color: white;
transition: 0.4s ease;
z-index: 2;
}
.ma-card-style-glass .ma-card-title {
margin: 0 0 12px;
color: #f7c145;
font-size: 1.8rem;
letter-spacing: 0.5px;
font-weight: 700;
}
.ma-card-style-glass .ma-card-desc {
font-size: 1.05rem;
line-height: 1.6;
opacity: 0.95;
margin: 0;
color: #ffffff;
}
.ma-card-style-glass:hover .ma-card-image {
transform: scale(1.1);
opacity: 1;
}
.ma-card-style-glass:hover .ma-card-glass-content {
background: rgba(6, 97, 114, 0.85);
transform: translateY(-10px);
border-color: #f7c145;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
/* ==============================================
MA MISSION SECTION WIDGET
============================================== */
.ma-mission-wrap {
padding: 100px 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
.ma-mission-overlay {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.ma-mission-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
background: #ffffff;
padding: 30px;
border-radius: 40px;
box-shadow: 0 30px 60px rgba(6, 97, 114, 0.08);
position: relative;
z-index: 2;
overflow: hidden;
max-width: 1420px;
margin: 0 auto;
}
.ma-mission-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: var(--vs-color-secondary);
}
.ma-mission-image {
position: relative;
border-radius: 30px;
overflow: hidden;
height: 500px;
}
.ma-mission-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.ma-mission-image:hover img {
transform: scale(1.05);
}
.ma-mission-content {
padding-right: 20px;
}
.ma-mission-content h2 {
font-family: var(--vs-font-heading, serif);
font-size: 2.8rem;
color: var(--vs-color-primary);
margin: 0 0 25px;
line-height: 1.2;
}
.ma-mission-text {
font-family: var(--vs-font-heading, serif);
font-size: 1.35rem;
color: var(--vs-color-text);
line-height: 1.8;
font-style: italic;
position: relative;
padding-left: 30px;
border-left: 3px solid #96dadd;
}
.ma-mission-btn {
margin-top: 40px;
display: inline-block;
background-color: var(--vs-color-primary);
color: #ffffff;
padding: 15px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
border: 2px solid var(--vs-color-primary);
}
.ma-mission-btn:hover {
background-color: transparent;
color: var(--vs-color-primary);
border-color: var(--vs-color-secondary);
}
@media (max-width: 992px) {
.ma-mission-container {
grid-template-columns: 1fr;
padding: 20px;
gap: 20px;
}
.ma-mission-image {
height: auto;
}
.ma-mission-content {
text-align: center;
padding-right: 0;
}
.ma-mission-content h2 {
font-size: 2rem;
}
.ma-mission-text {
padding-left: 0;
border-left: none;
font-size: 1.1rem;
}
}
/* ==============================================
MA STATS SECTION WIDGET
============================================== */
.ma-stats-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 60px;
padding: 60px 0;
}
.ma-stats-content {
flex: 1;
min-width: 300px;
}
.ma-stats-grid-wrap {
flex: 1;
min-width: 300px;
}
.ma-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.ma-stats-title {
font-family: var(--vs-font-heading, serif);
font-size: 3rem;
line-height: 1.1;
color: var(--vs-color-primary);
margin: 0 0 30px;
}
.ma-stats-quote {
font-family: var(--vs-font-heading, serif);
font-size: 1.1rem;
line-height: 1.6;
color: var(--vs-color-text);
font-style: italic;
border-left: 4px solid var(--vs-color-secondary);
padding-left: 24px;
margin-bottom: 40px;
}
.ma-stats-btn {
display: inline-block;
padding: 14px 32px;
background-color: var(--vs-color-primary);
color: #ffffff;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.ma-stats-btn:hover {
background-color: var(--vs-color-secondary);
transform: translateY(-2px);
color: #ffffff;
}
.ma-stat-card {
padding: 30px;
border-radius: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.ma-stat-card:hover {
transform: translateY(-5px);
}
.ma-stat-number {
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
color: var(--vs-color-primary);
margin-bottom: 8px;
font-family: var(--vs-font-heading, sans-serif);
display: flex;
align-items: center;
gap: 4px;
width: 100%;
}
.ma-align-left .ma-stat-card {
align-items: flex-start;
text-align: left;
}
.ma-align-left .ma-stat-number {
justify-content: flex-start;
}
.ma-align-center .ma-stat-card {
align-items: center;
text-align: center;
}
.ma-align-center .ma-stat-number {
justify-content: center;
}
.ma-align-right .ma-stat-card {
align-items: flex-end;
text-align: right;
}
.ma-align-right .ma-stat-number {
justify-content: flex-end;
}
.ma-stat-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: var(--vs-color-text);
opacity: 0.7;
}
.ma-stat-style-floating .ma-stat-card {
background: #ffffff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 1px solid #f0f0f0;
}
.ma-stat-style-floating .ma-stat-card:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.ma-stat-style-glass .ma-stat-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
}
.ma-stat-style-glass .ma-stat-number {
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ma-stat-style-glass .ma-stat-label {
color: rgba(255, 255, 255, 0.9);
}
.ma-stat-style-glass .ma-stat-card:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 768px) {
.ma-stats-wrap {
flex-direction: column;
gap: 40px;
}
.ma-stats-grid {
gap: 20px;
}
}
/* --- Back to Top Styles --- */
#vitalspring-btt {
position: fixed !important;
bottom: 30px;
right: 30px;
z-index: 99999;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
#vitalspring-btt.show {
display: flex !important;
animation: premiumPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
#vitalspring-btt svg {
width: 40px !important;
height: 40px !important;
fill: none;
stroke: currentColor;
stroke-width: 1.0;
stroke-linecap: round;
stroke-linejoin: round;
}
.vs-btt-style-1 {
width: 45px;
height: 45px;
background: var(--vs-color-primary);
border-radius: 50%;
justify-content: center;
align-items: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
position: relative;
border: none;
}
.vs-progress-circle {
position: absolute;
top: 50%;
left: 50%;
width: 45px;
height: 45px;
transform: translate(-50%, -50%) rotate(-90deg);
pointer-events: none;
z-index: 1;
}
.vs-progress-track {
fill: none;
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 4;
}
.vs-progress-fill {
fill: none;
stroke: var(--vs-color-secondary);
stroke-width: 4;
transition: stroke-dashoffset 0.1s linear;
}
.vs-btt-style-1:hover {
transform: translateY(-5px);
background: var(--vs-color-primary-light);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.vs-btt-style-1 svg {
color: var(--vs-color-secondary);
z-index: 2;
width: 20px !important;
height: 20px !important;
}
.vs-btt-style-7 {
background: linear-gradient(180deg, var(--vs-color-primary) 0%, var(--vs-color-heading) 100%);
color: var(--vs-color-white);
font-size: 0.6rem;
letter-spacing: 1.5px;
text-transform: uppercase;
writing-mode: vertical-rl;
align-items: center;
justify-content: center;
clip-path: polygon(50% 0%, 100% 12%, 100% 100%, 0 100%, 0 12%);
border-radius: 0 0 6px 6px;
box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.15);
}
.vs-btt-style-7::before {
content: '';
position: absolute;
top: 2px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 3px;
background: var(--vs-color-secondary);
border-radius: 50%;
box-shadow: 0 0 6px var(--vs-color-secondary);
}
.vs-btt-style-7 svg {
width: 18px !important;
height: 18px !important;
color: var(--vs-color-secondary);
transition: transform 0.3s ease;
}
.vs-btt-style-7 span {
font-weight: 600;
}
.vs-btt-style-7:hover {
padding-top: 18px;
background: var(--vs-color-heading);
box-shadow: -8px 8px 25px rgba(0, 0, 0, 0.2);
}
.vs-btt-style-7:hover svg {
animation: arrowUpBounce 0.8s infinite alternate;
}
@keyframes arrowUpBounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-8px);
}
}
@keyframes premiumPop {
0% {
transform: scale(0) translateY(50px);
opacity: 0;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
/* =========================================
Blog Styling
========================================= */
.blog-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.03);
margin-bottom: 30px;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.blog-card-image {
position: relative;
overflow: hidden;
height: 280px;
}
/* Related Posts Section - Grid Fix */
.vs-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3 Columns */
gap: 24px;
}
/* Tablet: 2 Columns */
@media (max-width: 991px) {
.vs-related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: 1 Column */
/* Mobile: 1 Column */
@media (max-width: 767px) {
.vs-related-grid {
grid-template-columns: 1fr;
}
.vs-related-title {
font-size: 14px !important;
line-height: 1.3;
}
}
.vs-related-thumb {
height: 180px;
/* Slightly reduced for better fit */
background: #f0f0f0;
}
.vs-related-thumb img {
transition: transform 0.5s ease;
}
.vs-related-card:hover .vs-related-thumb img {
transform: scale(1.05);
}
.vs-related-title a {
transition: color 0.3s ease;
}
.vs-related-card:hover .vs-related-title a {
color: var(--vs-primary-color) !important;
}
/* View All Button */
.vs-view-all-btn {
color: var(--vs-color-primary, #0B4619) !important;
border-color: var(--vs-color-primary, #0B4619) !important;
font-size: 13px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.vs-view-all-btn:hover {
background: var(--vs-color-primary, #0B4619) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(11, 70, 25, 0.2);
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img {
transform: scale(1.05);
}
.blog-card-content {
padding: 30px;
}
.entry-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.3;
}
.entry-title a {
color: var(--vs-heading-color, #1A252F);
text-decoration: none;
transition: color 0.3s ease;
}
.entry-title a:hover {
color: var(--vs-primary-color, #0B4619);
}
.entry-meta {
font-size: 0.9rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
margin-bottom: 20px;
}
.entry-content {
color: var(--vs-text-color, #2C3E50);
font-size: 1.05rem;
line-height: 1.7;
}
.sidebar-area .widget {
margin-bottom: 30px;
}
.sidebar-area .widget-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
position: relative;
color: var(--vs-heading-color, #1A252F);
}
.sidebar-area .widget-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 50px;
height: 2px;
background: var(--vs-primary-color, #0B4619);
}
.sidebar-area .widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-area .widget ul li {
padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-area .widget ul li:last-child {
border-bottom: none;
}
.sidebar-area .widget ul li a:hover {
color: var(--vs-primary-color, #0B4619);
padding-left: 5px;
}
/* Search Form */
.widget_search .widget-title,
.widget_block_search .widget-title,
.wp-block-search__label {
display: none !important;
}
.sidebar-area .widget_search form,
.sidebar-area .wp-block-search__inside-wrapper {
position: relative;
width: 100%;
display: block;
}
/* Hide the default button */
.sidebar-area .wp-block-search__button,
.sidebar-area .search-submit {
display: none !important;
}
/* Premium Input Style with Icon */
.sidebar-area .wp-block-search__input,
.sidebar-area .search-field {
width: 100%;
padding: 16px 20px 16px 55px;
/* Extra left padding for icon */
border: 2px solid #f0f0f0;
border-radius: 50px;
/* Modern Pill Shape */
background: #f9f9f9 url('data:image/svg+xml;utf8,') no-repeat 25px center;
background-size: 18px;
font-size: 15px;
color: var(--vs-heading-color);
transition: all 0.3s ease;
box-shadow: none;
outline: none;
}
.sidebar-area .wp-block-search__input:focus,
.sidebar-area .search-field:focus {
background-color: #fff;
border-color: var(--vs-primary-color);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.sidebar-area .wp-block-search__input::placeholder,
.sidebar-area .search-field::placeholder {
color: #aaa;
font-weight: 500;
}
.widget_recent_entries li {
display: block !important;
}
.widget_recent_entries li a {
display: block;
font-weight: 600 !important;
margin-bottom: 5px;
}
.widget_recent_entries li .post-date {
display: block;
font-size: 0.85rem;
color: #999;
}
.vs-search-results {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
list-style: none;
padding: 0;
margin: 10px 0 0;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.vs-search-results.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.vs-search-results li {
border-bottom: 1px solid #f5f5f5;
padding: 0 !important;
}
.vs-search-results li:last-child {
border-bottom: none;
}
.vs-search-results li a {
display: flex !important;
align-items: center;
padding: 12px 15px;
text-decoration: none;
color: var(--vs-heading-color);
font-size: 14px;
font-weight: 500;
}
.vs-search-results li a:hover {
background: #f9f9f9;
color: var(--vs-primary-color);
}
.vs-search-results li img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
margin-right: 12px;
}
/* --- Mobile Sidebar Toggle --- */
#mobile-sidebar-toggle {
display: block;
width: fit-content;
background: var(--vs-primary-color);
color: #fff;
padding: 10px 20px;
border-radius: 50px;
font-weight: 600;
border: none;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: none;
/* Hidden on desktop by default via d-md-none class */
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
}
@media (max-width: 768px) {
#mobile-sidebar-toggle {
display: flex;
}
/* Off-Canvas Sidebar */
.sidebar-area.sticky-sidebar {
position: fixed;
top: 0;
right: -300px;
/* Hidden by default */
width: 280px;
height: 100vh;
background: #fff;
z-index: 1000;
padding: 60px 20px 20px;
/* Top padding for close button area */
overflow-y: auto;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
}
.wrapper .sidebar-area {
position: initial !important;
/* Override sticky info desktop */
}
.sidebar-area.is-active {
right: 0;
/* Slide in */
}
/* Close Button Placeholder (Pseudo-element) */
/* Close Button Placeholder (Pseudo-element) - REMOVED to prevent duplicate */
.sidebar-area.is-active::before {
content: none !important;
display: none !important;
}
/* Overlay */
.vs-sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
backdrop-filter: blur(2px);
animation: fadeIn 0.3s;
}
body.vs-sidebar-open {
overflow: hidden;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.vs-newsletter-widget input[type="email"] {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
margin-bottom: 10px;
background: #f9f9f9;
}
.vs-newsletter-widget input[type="email"]:focus {
background: #fff;
border-color: var(--vs-primary-color);
outline: none;
}
.vs-social-widget-icons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.vs-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f5f5f5;
color: #333;
font-size: 16px;
transition: all 0.3s ease;
}
.vs-social-icon:hover {
color: #fff;
transform: translateY(-3px);
}
.vs-social-icon.facebook:hover {
background: #3b5998;
}
.vs-social-icon.twitter:hover {
background: #1da1f2;
}
.vs-social-icon.instagram:hover {
background: #e1306c;
}
.vs-social-icon.linkedin:hover {
background: #0077b5;
}
.vs-social-icon.youtube:hover {
background: #ff0000;
}
.tagcloud a {
display: inline-block;
padding: 6px 12px;
margin: 0 5px 8px 0;
background: #f5f5f5;
color: #555;
font-size: 13px !important;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid #eee;
}
.tagcloud a:hover {
background: var(--vs-primary-color);
color: #fff;
border-color: var(--vs-primary-color);
transform: translateY(-2px);
}
.sidebar-area select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
background: #f9f9f9 url('data:image/svg+xml;utf8,') no-repeat right 15px center;
appearance: none;
-webkit-appearance: none;
font-size: 14px;
color: #333;
cursor: pointer;
}
.sidebar-area select:focus {
background-color: #fff;
border-color: var(--vs-primary-color);
outline: none;
}
.widget_calendar table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.widget_calendar caption {
caption-side: top;
text-align: center;
font-weight: 700;
color: var(--vs-heading-color);
margin-bottom: 10px;
font-size: 16px;
}
.widget_calendar th {
background: #f5f5f5;
padding: 8px 0;
text-align: center;
color: #333;
font-size: 13px;
}
.widget_calendar td {
padding: 8px 0;
text-align: center;
border: 1px solid #eee;
color: #666;
font-size: 13px;
}
.widget_calendar td#today {
background: var(--vs-primary-color);
color: #fff;
font-weight: bold;
}
.single-post .row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section-padding {
padding-top: 60px;
padding-bottom: 60px;
}
.single-post .col-md-8 {
width: 65%;
max-width: 65%;
flex: 0 0 65%;
}
.single-post .col-md-4 {
width: 32%;
max-width: 32%;
flex: 0 0 32%;
}
@media (max-width: 768px) {
.single-post .col-md-8,
.single-post .col-md-4 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.section-padding {
padding-top: 0;
/* Removed as requested */
padding-bottom: 40px;
}
}
.entry-content,
.blog-card-content {
overflow-wrap: break-word;
word-wrap: break-word;
max-width: 100%;
}
.single-post-card .blog-card-image img {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 20px;
display: block;
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
#mobile-sidebar-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
margin: 20px 0 20px auto;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: var(--vs-heading-color, #1A252F);
font-family: var(--vs-font-heading, sans-serif);
transition: all 0.3s ease;
z-index: 10;
}
#mobile-sidebar-toggle svg {
width: 24px;
height: 24px;
stroke: var(--vs-primary-color, #0B4619);
stroke-width: 2px;
transition: all 0.3s ease;
}
#mobile-sidebar-toggle:hover {
color: var(--vs-primary-color, #0B4619);
transform: translateX(5px);
}
#mobile-sidebar-toggle:hover svg {
stroke: var(--vs-secondary-color, #D4AF37);
}
/* Desktop Styles - Hide Mobile Elements & Sticky Logic */
@media (min-width: 769px) {
#mobile-sidebar-toggle {
display: none !important;
}
html body .vs-sidebar-close {
display: none !important;
}
/* Desktop Sticky Sidebar */
.sidebar-area.sticky-sidebar {
position: -webkit-sticky;
position: sticky;
top: 120px;
/* Adjusted for header height */
z-index: 100;
align-self: flex-start;
height: auto !important;
/* Override mobile 100vh */
width: 100%;
/* Override mobile 320px */
border-left: none;
/* Remove mobile border */
box-shadow: none;
/* Remove mobile shadow */
background: transparent;
/* Remove mobile bg */
}
}
/* Mobile Styles - Sidebar Implementation */
@media (max-width: 768px) {
.single-post .col-md-8,
.single-post .col-md-4 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.section-padding {
padding-top: 0;
padding-bottom: 40px;
}
/* Off-Canvas Sidebar Container */
.sidebar-area.sticky-sidebar,
.sidebar-area {
position: fixed;
top: 0;
right: -320px;
width: 320px;
height: 100vh;
background: #ffffff;
z-index: 10000;
/* High Z-index */
overflow: visible !important;
padding: 0 !important;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
border-left: 1px solid #e2e8f0;
display: block !important;
}
.wrapper .sidebar-area {
position: initial !important;
}
.sidebar-area.is-active {
right: 0;
}
/* Scrollable Inner Wrapper */
.vs-sidebar-scroller {
height: 100%;
overflow-y: auto;
padding: 40px 24px;
}
/* Close Button Mobile Implementation */
/* Default: Hidden */
html body .vs-sidebar-close {
display: none !important;
}
/* Active: Visible - Only when sidebar is open */
html body .sidebar-area.is-active .vs-sidebar-close {
display: flex !important;
position: absolute !important;
top: 16px !important;
left: -48px !important;
width: 48px !important;
height: 48px !important;
background: #ffffff !important;
border: none !important;
border-radius: 12px 0 0 12px !important;
padding: 0 !important;
cursor: pointer !important;
color: #475569 !important;
align-items: center !important;
justify-content: center !important;
z-index: 10001 !important;
box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.05) !important;
opacity: 1 !important;
visibility: visible !important;
}
body .vs-sidebar-close:hover {
color: var(--vs-primary-color) !important;
transform: none !important;
}
body .vs-sidebar-close svg {
width: 24px !important;
height: 24px !important;
stroke-width: 2px !important;
}
/* Widget Typography Force */
body .sidebar-area #secondary .widget-title,
body .sidebar-area #secondary h2,
body .sidebar-area #secondary h3,
.sidebar-area .widget-title,
.sidebar-area h2,
.sidebar-area h3 {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
margin-bottom: 12px !important;
padding-bottom: 0 !important;
border-bottom: none !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
}
body .sidebar-area .widget-title::after,
body .sidebar-area h2::after,
body .sidebar-area h3::after {
display: none !important;
}
.sidebar-area .widget:last-child {
border-bottom: none;
}
.sidebar-area .widget {
margin-bottom: 24px !important;
/* Force reduced spacing between widgets */
padding-bottom: 24px !important;
}
/* Overlay styles */
.vs-sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
z-index: 9990;
backdrop-filter: blur(5px);
animation: fadeIn 0.3s forwards;
}
body.vs-sidebar-open {
overflow: hidden;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
/* Global Search Widget Styles - Desktop & Mobile */
.widget_search .wp-block-search__input,
.widget_search input[type="search"],
.vs-search-form input {
padding: 10px 16px 10px 40px !important;
height: 44px !important;
font-size: 14px;
border-radius: 12px;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
color: #1e293b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 12px center;
background-size: 16px;
}
.widget_search .wp-block-search__input:focus,
.widget_search input[type="search"]:focus {
background-color: #fff;
border-color: var(--vs-primary-color);
outline: none;
box-shadow: 0 0 0 2px rgba(11, 70, 25, 0.1);
}
.widget_search .wp-block-search__button {
display: none;
}
/* Trending Posts Widget Styles */
.vs-trending-item {
position: relative;
transition: transform 0.2s ease;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 16px;
margin-bottom: 16px !important;
display: flex !important;
align-items: center !important;
/* Center vertically */
}
.vs-trending-item:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0 !important;
}
.vs-trending-item:hover .vs-trending-thumb img {
transform: scale(1.05);
}
.vs-trending-thumb {
width: 70px !important;
height: 70px !important;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
flex: 0 0 70px !important;
/* Fixed Flex Support */
margin-right: 16px !important;
background: #f1f5f9;
}
.vs-trending-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition: transform 0.3s ease;
}
.vs-trending-title {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.vs-trending-title a {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: var(--vs-heading-color, #0f172a);
transition: color 0.2s ease;
display: block;
margin-bottom: 2px !important;
padding: 0 !important;
}
.vs-trending-title a:hover {
color: var(--vs-primary-color);
}
.vs-trending-meta {
letter-spacing: 0.05em;
}
.vs-tag-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
background: #f1f5f9;
color: #64748b;
padding: 2px 8px;
border-radius: 100px;
margin-right: 4px;
text-decoration: none;
transition: all 0.2s;
}
.vs-tag-badge:hover {
background: var(--vs-primary-color);
color: #fff;
}
/* Custom Categories Widget Styles */
.vs-categories-list {
list-style: none;
padding: 0;
margin: 0;
}
.vs-cat-item {
border-bottom: 1px solid #f1f5f9;
}
.vs-cat-item:last-child {
border-bottom: none;
}
.vs-cat-item a:hover {
color: var(--vs-primary-color);
padding-left: 8px;
}
.vs-cat-count {
background-color: #f8fafc !important;
color: #94a3b8 !important;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border: 1px solid #f1f5f9;
margin-left: 10px;
/* Space from text */
min-width: 24px;
text-align: center;
transition: all 0.3s ease;
}
.vs-cat-item a:hover .vs-cat-count {
background-color: var(--vs-color-primary, #0B4619) !important;
color: #ffffff !important;
border-color: var(--vs-color-primary, #0B4619) !important;
transform: translateX(-4px);
/* Subtle shift to counter the link padding shift */
}
.sidebar-area .widget {
margin-bottom: 20px !important;
}
.sidebar-area ul,
.sidebar-area ol {
margin-top: 0 !important;
padding-top: 0 !important;
}
.sidebar-area li {
margin-top: 0 !important;
}
/* Ensure trending meta is close */
.vs-trending-meta {
margin-top: 4px !important;
}
/* Newsletter Widget Styles */
.vs-newsletter-widget p {
font-size: 14px;
color: #475569;
line-height: 1.5;
margin-bottom: 12px;
}
.vs-newsletter-form input[type="email"] {
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
font-size: 14px;
color: #0f172a;
outline: none;
transition: all 0.2s ease;
}
.vs-newsletter-form input[type="email"]:focus {
border-color: var(--vs-primary-color);
box-shadow: 0 0 0 3px rgba(11, 70, 25, 0.1);
}
.vs-newsletter-form .vs-btn {
display: inline-block;
width: 100%;
padding: 12px 20px;
background-color: var(--vs-primary-color);
color: #ffffff;
font-weight: 600;
font-size: 14px;
border: none;
border-radius: 8px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.2s ease;
margin-top: 8px;
}
.vs-newsletter-form .vs-btn:hover {
background-color: #0f4c2e;
/* Darker shade of primary */
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Social Widget Styles */
.vs-social-widget-icons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vs-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #f1f5f9;
color: #64748b;
border-radius: 50%;
transition: all 0.3s ease;
}
.vs-social-icon svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.vs-social-icon:hover {
transform: translateY(-2px);
color: #fff;
}
/* Social Network Colors on Hover */
.vs-social-icon.facebook:hover {
background-color: #1877f2;
}
.vs-social-icon.twitter:hover {
background-color: #000000;
}
.vs-social-icon.instagram:hover {
background-color: #e4405f;
}
.vs-social-icon.linkedin:hover {
background-color: #0077b5;
}
.vs-social-icon.youtube:hover {
background-color: #ff0000;
}
/* PREMIUM COMMENT FORM STYLES */
#respond {
background: #ffffff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
margin-top: 60px;
border: 1px solid #f1f5f9;
}
#reply-title {
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 700;
color: var(--vs-heading-color, #0f172a);
margin-bottom: 32px !important;
position: relative;
padding-bottom: 16px;
}
#reply-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--vs-primary-color);
border-radius: 2px;
}
.comment-notes,
.logged-in-as {
font-size: 14px;
color: #64748b;
margin-bottom: 24px;
}
.comment-form p {
margin-bottom: 24px;
}
.comment-form label {
display: block;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
color: #334155;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 16px 20px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
font-size: 15px;
color: #1e293b;
transition: all 0.2s ease;
outline: none;
font-family: 'Inter', sans-serif;
}
.comment-form input:focus,
.comment-form textarea:focus {
background: #ffffff;
border-color: var(--vs-primary-color);
box-shadow: 0 0 0 4px rgba(11, 70, 25, 0.1);
}
.comment-form textarea {
min-height: 180px;
resize: vertical;
}
.form-submit {
margin-top: 32px;
}
.form-submit input#submit {
background-color: var(--vs-primary-color);
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 16px 40px;
border: none;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(11, 70, 25, 0.2);
}
.form-submit input#submit:hover {
background-color: #0f4c2e;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(11, 70, 25, 0.3);
}
.comment-form-cookies-consent {
display: flex;
align-items: center;
gap: 12px;
}
.comment-form-cookies-consent input {
width: 20px;
height: 20px;
accent-color: var(--vs-primary-color);
margin-bottom: 0;
}
.comment-form-cookies-consent label {
margin-bottom: 0;
font-size: 14px;
text-transform: none;
font-weight: 500;
color: #64748b;
}
.vs-social-share-box {
display: flex;
align-items: center;
border-top: 1px solid #f1f5f9;
border-bottom: 1px solid #f1f5f9;
padding: 20px 0;
}
.vs-share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #f1f5f9;
color: #64748b;
transition: all 0.3s ease;
}
.vs-share-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.vs-share-btn:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.vs-share-btn.facebook:hover {
background-color: #1877f2;
}
.vs-share-btn.twitter:hover {
background-color: #000000;
}
.vs-share-btn.linkedin:hover {
background-color: #0077b5;
}
.vs-share-btn.link-copy:hover {
background-color: var(--vs-color-primary, #0B4619) !important;
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.vs-share-btn.whatsapp:hover {
background-color: #25d366;
}
.vs-share-buttons {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
/* HIGH-END "WOODMART" STYLE: Centered Author Box */
.vs-author-box-centered {
background: #fdfdfd;
border: 1px solid #f1f1f1;
padding: 56px 40px;
border-radius: 4px;
margin-bottom: 0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vs-author-box-centered:hover {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
background: #ffffff;
border-color: transparent;
}
.vs-author-box-centered .vs-author-avatar img {
border: 4px solid #ffffff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
width: 100px;
height: 100px;
transition: transform 0.4s ease;
}
.vs-author-box-centered:hover .vs-author-avatar img {
transform: scale(1.05);
}
.vs-author-name {
color: #242424;
font-family: 'Playfair Display', serif;
font-size: 20px;
margin-top: 16px;
margin-bottom: 8px;
}
.vs-author-bio {
color: #777;
font-size: 15px;
line-height: 1.8;
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
}
.vs-author-link {
display: inline-block;
color: #333;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid #e1e1e1;
padding-bottom: 2px;
margin-top: 16px;
transition: all 0.3s ease;
}
.vs-author-link:hover {
color: var(--vs-primary-color);
border-bottom-color: var(--vs-primary-color);
}
/* HIGH-END META ROW (Tags + Share) */
.vs-meta-row {
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 40px !important;
}
/* Refined Tags Styling */
.vs-meta-tags a {
display: inline-block;
background: #f7f7f7;
border: none;
color: #555;
padding: 8px 16px;
border-radius: 4px;
margin-right: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
transition: all 0.3s ease;
}
.vs-meta-tags a:hover {
background: #333;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Refined Share Icons per Mockup */
.vs-share-label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #333;
/* Darker, bolder text */
margin-right: 15px !important;
}
.vs-share-btn {
width: 40px;
height: 40px;
background: #f5f8fa;
/* Light grey/blue background from Woodmart */
border: none;
/* No border in mockup */
color: #333;
/* Dark icon */
border-radius: 50%;
margin-left: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.vs-share-btn svg {
width: 16px;
height: 16px;
stroke-width: 0;
/* solid fill */
}
/* Hover States: White text on Brand Color */
/* Woodmart typically keeps the shape circular and just fills the color */
.vs-share-btn:hover {
color: #fff;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.vs-share-btn.facebook:hover {
background-color: #3b5998;
}
.vs-share-btn.twitter:hover {
background-color: #000000;
}
.vs-share-btn.linkedin:hover {
background-color: #0077b5;
}
@media (max-width: 767px) {
.vs-social-share-box {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
/* Allow simple wrapping if screen is tiny */
width: 100%;
justify-content: flex-start;
margin-top: 15px;
gap: 5px;
/* Control gap */
}
.vs-share-label {
white-space: nowrap !important;
margin-right: 5px !important;
/* Reduce margin */
margin-bottom: 0 !important;
font-size: 10px !important;
/* Smaller text */
width: auto;
}
.vs-share-buttons {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 5px !important;
/* Reduce gap between buttons */
}
.vs-share-btn {
width: 32px !important;
/* Smaller buttons on mobile */
height: 32px !important;
margin-left: 0 !important;
/* Reset margin, use gap */
flex-shrink: 0;
}
.vs-share-btn svg {
width: 14px;
height: 14px;
}
}
.vs-share-btn.whatsapp:hover {
background-color: #25d366;
}
/* Premium Post Meta Section (Below Featured Image) */
.vs-premium-meta {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
margin-top: 24px !important;
margin-bottom: 24px !important;
padding-bottom: 24px !important;
border-bottom: 1px solid #f1f1f1 !important;
}
.vs-premium-meta .vs-meta-avatar img {
width: 48px;
height: 48px;
border-radius: 12px !important;
/* Soft square as per screenshot */
object-fit: cover;
}
.vs-premium-meta .vs-meta-author {
display: flex !important;
align-items: center !important;
margin-right: 24px !important;
padding-right: 24px !important;
border-right: 1px solid #e1e1e1 !important;
}
.vs-premium-meta .border-end {
border-right: 1px solid #e1e1e1 !important;
}
.vs-premium-meta .vs-meta-date,
.vs-premium-meta .vs-meta-views {
margin-right: 24px !important;
padding-right: 24px !important;
border-right: 1px solid #e1e1e1 !important;
}
/* Mobile Responsiveness for Meta Section */
/* Mobile Responsiveness for Meta Section */
@media (max-width: 767px) {
.vs-premium-meta {
flex-direction: row !important;
/* Force Inline */
align-items: center !important;
flex-wrap: wrap !important;
gap: 15px;
/* Use gap for spacing */
}
.vs-premium-meta .vs-meta-author,
.vs-premium-meta .vs-meta-date,
.vs-premium-meta .vs-meta-views {
border-right: 1px solid #e1e1e1 !important;
/* Keep separators */
margin-right: 0 !important;
/* Use gap instead */
padding-right: 15px !important;
margin-bottom: 0 !important;
/* Remove bottom spacing */
width: auto !important;
/* Prevent full width */
}
.vs-premium-meta .border-end {
display: none !important;
/* Hide extra separators if layout shifts */
}
/* Remove border from last item in row */
.vs-premium-meta>div:last-child {
border-right: none !important;
padding-right: 0 !important;
}
}
/* Force Block Stacking for Author Info to Fix Layout */
.vs-meta-author-info span {
display: block !important;
line-height: 1.4;
}
.vs-meta-avatar {
margin-right: 16px !important;
/* Force space between avatar and name */
}
/* Reading Progress Bar */
/* Reading Progress Bar - Refined */
#vs-progress-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 3px !important;
/* Thinner line */
z-index: 999999 !important;
background: transparent !important;
pointer-events: none !important;
}
/* Hardcoded Offset for WordPress Admin Bar */
.admin-bar #vs-progress-container {
top: 32px !important;
}
@media screen and (max-width: 782px) {
.admin-bar #vs-progress-container {
top: 46px !important;
}
}
#vs-progress-bar {
height: 100% !important;
/* Use Theme Option Color Variable strictly */
background: var(--vs-color-primary, #0B4619) !important;
width: 0%;
transition: width 0.1s linear !important;
box-shadow: none !important;
}
/* Premium/* Premium Post Navigation - Grid Layout Refinement */
.vs-nav-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
/* Explicit gap matching user request for separation */
align-items: stretch;
/* Equal height */
}
@media (max-width: 767px) {
.vs-nav-grid {
grid-template-columns: 1fr;
/* Stack on mobile */
gap: 20px;
/* Keep gap vertical */
}
}
.vs-nav-card {
display: flex !important;
align-items: center;
background: #ffffff;
border: 1px solid #e5e5e5;
text-decoration: none !important;
padding: 5px;
border-radius: 8px;
gap: 15px;
height: 100%;
/* Fill grid height */
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.vs-nav-card:hover {
background: #ffffff;
border-color: var(--vs-primary-color);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.vs-nav-thumb img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 6px;
display: block;
}
.vs-nav-thumb {
flex-shrink: 0;
}
.vs-nav-content {
flex: 1;
min-width: 0;
}
/* Nav Label */
.vs-nav-label {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #999;
margin-bottom: 5px;
}
/* Button */
.vs-nav-btn {
display: inline-block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
background: var(--vs-color-primary, #0B4619);
padding: 5px 30px;
border-radius: 4px;
transition: background 0.3s ease, transform 0.3s ease;
}
.vs-nav-card:hover .vs-nav-btn {
background: #111;
}
/* Prev/Next Specifics */
.next-post {
justify-content: flex-end;
text-align: right;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
/* Standard property for compatibility */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =========================================
Table of Contents (Premium Card Style)
========================================= */
.vs-toc-container {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}
.vs-toc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
cursor: pointer;
}
.vs-toc-title-wrapper {
display: flex;
align-items: center;
}
.vs-toc-icon {
margin-right: 15px;
flex-shrink: 0;
}
.vs-toc-title {
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: #1f2937;
}
.vs-toc-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
margin-left: auto;
transition: transform 0.2s ease;
}
.vs-toc-toggle:hover {
background: transparent;
opacity: 0.7;
border: none;
}
.vs-toc-toggle svg {
color: #9CA3AF;
transition: transform 0.3s ease;
width: 24px;
height: 24px;
}
.vs-toc-container.collapsed .vs-toc-toggle svg {
transform: rotate(180deg);
}
.vs-toc-container.collapsed .vs-toc-list {
display: none;
}
.vs-toc-list {
margin: 0;
padding: 0;
counter-reset: vs-toc-counter;
}
.vs-toc-item {
margin-bottom: 15px;
list-style: none;
position: relative;
counter-increment: vs-toc-counter;
}
.vs-toc-item a {
font-size: 16px;
color: #374151 !important;
/* Dark Gray */
font-weight: 700;
/* Bold title */
text-decoration: none;
display: flex;
align-items: center;
transition: all 0.2s ease;
padding-left: 0;
/* Reset */
}
.vs-toc-item a:hover {
color: var(--vs-color-primary, #0B4619) !important;
transform: translateX(5px);
}
.vs-toc-item a::before {
content: counter(vs-toc-counter, decimal-leading-zero) ".";
color: var(--vs-color-primary, #0B4619);
font-weight: 800;
font-size: 16px;
margin-right: 12px;
min-width: 30px;
}
/* Sub-items (H3) - Indent and Style */
.vs-toc-h3 {
padding-left: 30px;
}
.vs-toc-h3 a {
font-size: 15px;
font-weight: 500;
color: #6B7280 !important;
}
/* =========================================
Load More Button
========================================= */
.vs-load-more-container {
margin-top: 50px;
margin-bottom: 50px;
}
#vs-load-more-btn {
min-width: 200px;
padding: 14px 40px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 50px;
transition: all 0.3s ease;
}
#vs-load-more-btn.loading {
opacity: 0.8;
pointer-events: none;
}
.vs-btn-outline {
background: transparent !important;
border: 2px solid var(--vs-color-primary, #0B4619) !important;
color: var(--vs-color-primary, #0B4619) !important;
}
.vs-btn-outline:hover {
background: var(--vs-color-primary, #0B4619) !important;
color: #fff !important;
}
/* =========================================
Standard TOC Layout (Stacked)
========================================= */
.vs-toc-layout {
display: block;
margin-bottom: 30px;
}
/* Ensure content images don't overflow */
.vs-toc-content-body img,
.vs-toc-content-body iframe {
max-width: 100%;
height: auto;
}
/* =========================================
PREMIUM POPUP SEARCH STYLES (EXACT MATCH)
========================================= */
:root {
--vs-popup-teal: #066172;
--vs-popup-gold: #f7c145;
--vs-popup-soft-blue: #96dadd;
--vs-popup-bg-pale: #c3d6d9;
--vs-popup-overlay-bg: rgba(255, 255, 255, 0.85);
}
.vs-search-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vs-popup-overlay-bg);
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
z-index: 10000;
display: flex;
justify-content: center;
padding-top: 15vh;
padding-left: 24px;
padding-right: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.vs-search-overlay.is-active {
opacity: 1;
visibility: visible;
}
/* Close Button */
.vs-search-close-btn {
position: absolute;
top: 40px;
right: 40px;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #e2e8f0;
background: transparent;
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.vs-search-close-btn:hover {
background: #fef2f2;
color: #ef4444;
border-color: #fee2e2;
transform: rotate(90deg) scale(1.1);
}
.vs-search-container {
width: 100%;
max-width: 800px;
transform: translateY(20px);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.vs-search-overlay.is-active .vs-search-container {
transform: translateY(0);
}
/* Input Section */
.vs-search-input-wrapper {
position: relative;
margin-bottom: 3rem;
}
.vs-search-icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: var(--vs-popup-teal);
opacity: 0.2;
pointer-events: none;
}
.vs-search-input-premium {
width: 100%;
background: transparent;
border: none;
border-bottom: 4px solid #f1f5f9;
padding: 24px 24px 24px 64px;
font-size: clamp(2.25rem, 5vw, 3.75rem);
/* text-4xl to 6xl */
font-weight: 900;
color: var(--vs-popup-teal) !important;
outline: none !important;
transition: all 0.3s;
font-family: 'Inter', sans-serif;
height: auto !important;
border-color: var(--vs-popup-bg-pale) !important;
}
.vs-search-input-premium:focus {
outline: none;
}
.vs-search-input-premium::placeholder {
color: rgba(6, 97, 114, 0.3);
}
.vs-search-hint {
margin-top: 16px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
/* tracking-widest */
color: #94a3b8;
/* text-slate-400 */
display: flex;
align-items: center;
gap: 8px;
}
.vs-kbd {
background-color: #f1f5f9;
padding: 4px 8px;
border-radius: 4px;
color: #475569;
}
/* Grid Layout */
.vs-search-suggestions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
animation: vsFadeUp 0.7s ease .2s backwards;
}
@media(min-width: 768px) {
.vs-search-suggestions-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
}
.vs-suggestion-title {
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--vs-popup-teal);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 8px;
}
.vs-title-accent {
width: 24px;
height: 2px;
background: var(--vs-popup-gold);
border-radius: 9999px;
display: inline-block;
}
/* Trending Tags matches "Trending Topics" design */
.vs-tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vs-tag-pill {
padding: 8px 16px;
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
color: #475569;
/* text-slate-600 */
transition: all 0.2s;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
text-decoration: none !important;
}
.vs-tag-pill:hover {
background-color: var(--vs-popup-teal);
color: #fff;
border-color: var(--vs-popup-teal);
}
/* Quick Links matches "Quick Suggestions" design */
.vs-quick-links {
list-style: none;
padding: 0;
margin: 0;
}
.vs-quick-links li {
margin-bottom: 1rem;
}
.vs-quick-link-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 700;
color: #475569;
/* text-slate-600 */
transition: all 0.2s;
text-decoration: none !important;
}
.vs-quick-link-item:hover {
color: var(--vs-popup-teal);
}
.vs-quick-icon {
width: 32px;
height: 32px;
background: #f1f5f9;
/* bg-slate-100 */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
/* text-slate-400 */
transition: all 0.2s;
}
.vs-quick-link-item:hover .vs-quick-icon {
background: #f0fdfa;
/* bg-teal-50 */
color: #0f766e;
/* text-teal-700 approx */
}
@keyframes vsFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* AJAX Results - Styled to match list items */
.vs-search-results-premium {
display: none;
margin-top: 2rem;
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
max-height: 500px;
overflow-y: auto;
}
.vs-search-results-premium.has-results {
display: block;
}
.vs-search-results-premium .vs-search-item {
padding: 15px 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #f1f5f9;
text-decoration: none !important;
transition: background 0.2s;
}
.vs-search-results-premium .vs-search-item:hover {
background: #f8fafc;
}
.vs-search-results-premium .vs-search-thumb {
width: 50px;
height: 50px;
border-radius: 8px;
margin-right: 15px;
object-fit: cover;
}
.vs-search-results-premium h4 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #1e293b;
}
/* WhatsApp Widget Styles */
:root {
--wa-main-teal: #066172;
--wa-gold-accent: #f7c145;
--wa-green: #25D366;
--wa-bg-pale: #c3d6d9;
}
#whatsapp-widget-container {
position: relative;
z-index: 9999;
}
/* Floating Trigger Button */
.wa-floating-btn {
position: fixed;
bottom: 40px;
right: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 9999;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.wa-floating-anim {
animation: wa-float-anim 3s ease-in-out infinite;
}
@keyframes wa-float-anim {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
/* Tooltip Label */
.wa-tooltip {
background-color: #fff;
padding: 6px 16px;
border-radius: 12px;
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
color: #64748b;
/* slate-500 */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
opacity: 0;
transform: translateY(8px);
transition: all 0.3s ease;
white-space: nowrap;
}
.wa-floating-btn:hover .wa-tooltip {
opacity: 1;
transform: translateY(0);
}
/* Icon Container */
.wa-icon-box {
position: relative;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.wa-pulse-ring {
position: absolute;
width: 100%;
height: 100%;
background: var(--wa-green);
border-radius: 1.75rem;
animation: wa-pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
z-index: -1;
}
@keyframes wa-pulse-ring {
0% {
transform: scale(0.8);
opacity: 0.7;
}
80%,
100% {
transform: scale(1.6);
opacity: 0;
}
}
.wa-icon-bg {
width: 100%;
height: 100%;
border-radius: 1.75rem;
background-color: var(--wa-green);
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 20px 50px rgba(37, 211, 102, 0.4);
transition: all 0.5s ease;
}
.wa-floating-btn:hover .wa-icon-bg {
transform: scale(1.1) rotate(12deg);
}
.wa-floating-btn:active .wa-icon-bg {
transform: scale(0.95);
}
/* Popup Container */
#wa-team-popup {
position: fixed;
bottom: 128px;
/* bottom-32 */
right: 40px;
/* right-10 */
width: 340px;
background-color: #fff;
border-radius: 3.5rem;
box-shadow: 0 40px 80px rgba(6, 97, 114, 0.25);
overflow: hidden;
z-index: 10000;
border: 1px solid #f1f5f9;
/* slate-100 */
transform-origin: bottom right;
}
.wa-hidden {
display: none !important;
}
.wa-animate-pop {
animation: wa-popup-anim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes wa-popup-anim {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Popup Header */
.wa-popup-header {
padding: 40px 40px 24px 40px;
/* p-10 pb-6 */
}
.wa-header-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.wa-title {
font-size: 1.5rem;
/* text-2xl */
font-weight: 900;
letter-spacing: -0.05em;
color: var(--wa-main-teal);
margin: 0;
}
.wa-status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #22c55e;
/* green-500 */
animation: wa-pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wa-pulse-dot {
0%,
100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
.wa-subtitle {
font-size: 10px;
color: #94a3b8;
/* slate-400 */
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.6;
margin: 0;
}
/* Members List */
.wa-members-list {
padding: 0 32px 16px 32px;
/* px-8 pb-4 */
max-height: 350px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
/* space-y-3 */
}
/* Hide scrollbar */
.wa-members-list::-webkit-scrollbar {
display: none;
}
.wa-members-list {
-ms-overflow-style: none;
scrollbar-width: none;
}
.wa-member-link {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
border-radius: 2rem;
background-color: #f8fafc;
/* slate-50 */
border: 1px solid transparent;
transition: all 0.2s ease;
text-decoration: none;
}
.wa-member-link:hover {
background-color: #f0fdfa;
/* teal-50 */
border-color: #ccfbf1;
/* teal-100 */
}
/* Member Avatar */
.wa-avatar-box {
width: 56px;
/* w-14 */
height: 56px;
/* h-14 */
border-radius: 1rem;
/* rounded-2xl */
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 900;
font-size: 1.25rem;
/* text-xl */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
position: relative;
background-color: var(--wa-main-teal);
flex-shrink: 0;
}
.wa-member-link:hover .wa-avatar-box {
transform: rotate(6deg);
}
.wa-member-link:nth-child(even):hover .wa-avatar-box {
transform: rotate(-6deg);
}
.wa-wa-icon {
position: absolute;
bottom: -4px;
right: -4px;
width: 24px;
height: 24px;
border-radius: 8px;
background-color: var(--wa-green);
border: 2px solid white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
/* Member Info */
.wa-member-info {
flex: 1;
}
.wa-member-name {
font-size: 0.875rem;
/* text-sm */
font-weight: 900;
color: #0f172a;
/* slate-900 */
line-height: 1;
margin: 0 0 6px 0;
}
.wa-member-status {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.025em;
display: block;
}
.wa-status-green {
color: #16a34a;
}
/* green-600 */
.wa-status-slate {
color: #94a3b8;
font-style: italic;
letter-spacing: 0.1em;
}
/* slate-400 */
/* Popup Footer */
.wa-popup-footer {
padding: 16px 32px 32px 32px;
/* p-8 pt-4 */
border-top: 1px solid #f8fafc;
/* border-slate-50 */
background-color: rgba(248, 250, 252, 0.3);
/* bg-slate-50/30 */
text-align: center;
}
.wa-close-btn {
width: 100%;
padding: 16px 0;
border-radius: 1rem;
/* rounded-2xl */
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #94a3b8;
/* slate-400 */
background: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.wa-close-btn:hover {
color: var(--wa-main-teal);
/* teal-700 approx */
background-color: #f0fdfa;
/* teal-50 */
}
.wa-close-btn:active {
transform: scale(0.95);
}