* {
margin: 0;
padding: 0;
max-width: 100%;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
/* =========================
BLACK
========================= */
--ves-black: #0B0B0B;
--ves-black-rich: #111111;
--ves-black-soft: #181818;
--ves-black-card: #151515;
--ves-black-deep: #070707;
/* =========================
METALLIC GOLD
========================= */
--ves-gold: #D4AF37;
--ves-gold-dark: #AA771C;
--ves-gold-light: #E6C75A;
--ves-gold-soft: #C9A832;
/* =========================
GOLD GRADIENTS
========================= */
--ves-gradient-gold:
linear-gradient(135deg,
#AA771C 0%,
#D4AF37 35%,
#E6C75A 50%,
#D4AF37 70%,
#AA771C 100%);
--ves-gradient-gold-horizontal:
linear-gradient(90deg,
#AA771C 0%,
#D4AF37 45%,
#E6C75A 55%,
#AA771C 100%);
/* =========================
SILVER / PLATINUM
========================= */
--ves-platinum: #E0E0E0;
--ves-silver: #B8B8B8;
--ves-silver-dark: #808080;
--ves-silver-light: #F1F1F1;
/* =========================
WHITE
========================= */
--ves-white: #FFFFFF;
--ves-white-soft: rgba(255, 255, 255, 0.90);
--ves-white-muted: rgba(255, 255, 255, 0.65);
/* =========================
TEXT
========================= */
--ves-text-primary: #FFFFFF;
--ves-text-secondary: #E0E0E0;
--ves-text-muted: #B8B8B8;
--ves-text-disabled: #808080;
/* =========================
GOLD TRANSPARENCIES
========================= */
--ves-gold-05: rgba(212, 175, 55, 0.05);
--ves-gold-08: rgba(212, 175, 55, 0.08);
--ves-gold-10: rgba(212, 175, 55, 0.10);
--ves-gold-15: rgba(212, 175, 55, 0.15);
--ves-gold-20: rgba(212, 175, 55, 0.20);
--ves-gold-30: rgba(212, 175, 55, 0.30);
--ves-gold-40: rgba(212, 175, 55, 0.40);
--ves-gold-50: rgba(212, 175, 55, 0.50);
--ves-gold-70: rgba(212, 175, 55, 0.70);
/* =========================
BORDERS
========================= */
--ves-border-dark:
rgba(255, 255, 255, 0.08);
--ves-border-light:
rgba(255, 255, 255, 0.15);
--ves-border-gold:
rgba(212, 175, 55, 0.25);
--ves-border-gold-hover:
rgba(212, 175, 55, 0.60);
/* =========================
SHADOWS
========================= */
--ves-shadow-small:
0 5px 20px rgba(0, 0, 0, 0.25);
--ves-shadow-medium:
0 10px 35px rgba(0, 0, 0, 0.35);
--ves-shadow-large:
0 20px 60px rgba(0, 0, 0, 0.50);
--ves-shadow-gold:
0 10px 35px rgba(212, 175, 55, 0.18);
--ves-shadow-gold-strong:
0 15px 45px rgba(212, 175, 55, 0.28);
/* =========================
GOLD GLOW
========================= */
--ves-glow-gold:
0 0 25px rgba(212, 175, 55, 0.20);
--ves-glow-gold-strong:
0 0 40px rgba(212, 175, 55, 0.30);
/* =========================
SILVER GRADIENT
========================= */
--ves-gradient-silver:
linear-gradient(135deg,
#F1F1F1 0%,
#E0E0E0 35%,
#808080 100%);
/* =========================
FONT
========================= */
--ves-font-primary: 'Manrope', Arial, Helvetica, sans-serif;
}
body {
font-family: var(--ves-font-primary);
background: var(--ves-black-deep);
color: var(--ves-text-secondary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
/* =========================================================
VANGUARD ELITE SECURITY
HERO SECTION
========================================================= */
.ves-hero {
position: relative;
margin-top: 68px;
min-height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
color: var(--ves-text-primary);
/*
DARK LEFT
IMAGE VISIBLE ON RIGHT
*/
background-image:
linear-gradient(90deg,
rgba(11, 11, 11, 0.98) 0%,
rgba(11, 11, 11, 0.94) 18%,
rgba(11, 11, 11, 0.78) 35%,
rgba(11, 11, 11, 0.48) 55%,
rgba(11, 11, 11, 0.18) 75%,
rgba(11, 11, 11, 0.05) 100%),
url("../assets/hero_img.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* =========================================================
DARK OVERLAY
========================================================= */
.ves-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(to bottom,
rgba(11, 11, 11, 0.10) 0%,
rgba(11, 11, 11, 0.18) 50%,
rgba(7, 7, 7, 0.65) 100%);
}
/* =========================================================
GOLD AMBIENT GLOW
========================================================= */
.ves-hero::after {
content: "";
position: absolute;
width: 600px;
height: 600px;
top: -300px;
right: -200px;
border-radius: 50%;
background:
rgba(212, 175, 55, 0.10);
filter: blur(120px);
pointer-events: none;
z-index: 2;
}
/* =========================================================
BACKGROUND GRADIENT
========================================================= */
.ves-bg-gradient {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(135deg,
var(--ves-black) 0%,
var(--ves-black-rich) 50%,
var(--ves-black-deep) 100%);
}
/* =========================================================
GOLD GLOW
========================================================= */
.ves-red-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(120px);
}
.ves-glow-top {
width: 600px;
height: 600px;
top: -240px;
right: -180px;
background:
rgba(212, 175, 55, 0.08);
}
.ves-glow-bottom {
width: 500px;
height: 500px;
bottom: -250px;
left: -200px;
background:
rgba(170, 119, 28, 0.08);
}
/* =========================================================
BACKGROUND GRID
========================================================= */
.ves-grid {
position: absolute;
inset: 0;
opacity: 0.035;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.45) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(255, 255, 255, 0.45) 1px,
transparent 1px);
background-size: 70px 70px;
}
/* =========================================================
HERO IMAGE WRAP
========================================================= */
.ves-hero-image-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 52%;
pointer-events: none;
}
/* =========================================================
HERO IMAGE
========================================================= */
.ves-hero-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
opacity: 0.72;
}
/* =========================================================
LEFT IMAGE OVERLAY
========================================================= */
.ves-image-overlay-left {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(to right,
var(--ves-black) 0%,
rgba(11, 11, 11, 0.96) 15%,
rgba(11, 11, 11, 0.80) 32%,
rgba(11, 11, 11, 0.48) 52%,
rgba(11, 11, 11, 0.15) 75%,
rgba(11, 11, 11, 0) 100%);
}
/* =========================================================
BOTTOM IMAGE OVERLAY
========================================================= */
.ves-image-overlay-bottom {
position: absolute;
inset: 0;
z-index: 3;
background:
linear-gradient(to top,
var(--ves-black) 0%,
rgba(11, 11, 11, 0.45) 22%,
rgba(11, 11, 11, 0.10) 55%,
transparent 80%);
}
/* =========================================================
CONTENT CONTAINER
========================================================= */
.ves-hero-container {
position: relative;
z-index: 10;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding:
112px 32px 112px;
}
.ves-hero-content {
max-width: 760px;
}
/* =========================================================
EYEBROW
========================================================= */
.ves-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
}
.ves-eyebrow-line {
width: 40px;
height: 2px;
flex-shrink: 0;
background:
var(--ves-gold);
}
.ves-eyebrow p {
margin: 0;
color:
var(--ves-gold-light);
font-family:
var(--ves-font-primary);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* =========================================================
HEADING
========================================================= */
.ves-hero-title {
margin: 0;
color:
var(--ves-text-primary);
font-family:
var(--ves-font-primary);
font-size:
clamp(48px, 6vw, 88px);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.04em;
}
.ves-hero-title span {
display: block;
/*
METALLIC GOLD TEXT
*/
background:
var(--ves-gradient-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* =========================================================
DESCRIPTION
========================================================= */
.ves-hero-description {
max-width: 650px;
margin: 28px 0 0;
color:
var(--ves-text-secondary);
font-family:
var(--ves-font-primary);
font-size: 18px;
line-height: 1.75;
}
/* =========================================================
BUTTONS
========================================================= */
.ves-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
}
.ves-btn {
min-height: 54px;
padding: 0 28px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
font-family:
var(--ves-font-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius:
var(--ves-radius-sm);
transition:
background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* =========================================================
PRIMARY BUTTON
========================================================= */
.ves-btn-primary {
color:
var(--ves-black);
background:
var(--ves-gradient-gold);
border:
1px solid var(--ves-gold);
box-shadow:
var(--ves-shadow-gold);
}
.ves-btn-primary:hover {
color:
var(--ves-black);
background:
var(--ves-gradient-gold-horizontal);
border-color:
var(--ves-gold-light);
transform:
translateY(-2px);
box-shadow:
var(--ves-shadow-gold-strong);
}
/* =========================================================
SECONDARY BUTTON
========================================================= */
.ves-btn-secondary {
color:
var(--ves-white);
background:
rgba(11, 11, 11, 0.25);
border:
1px solid rgba(255, 255, 255, 0.30);
backdrop-filter:
blur(6px);
}
.ves-btn-secondary:hover {
color:
var(--ves-gold-light);
background:
var(--ves-gold-10);
border-color:
var(--ves-gold);
transform:
translateY(-2px);
box-shadow:
var(--ves-shadow-gold);
}
/* =========================================================
ARROW
========================================================= */
.ves-btn-arrow {
width: 17px;
height: 17px;
transition:
transform 0.3s ease;
}
.ves-btn-primary:hover .ves-btn-arrow {
transform:
translateX(4px);
}
/* =========================================================
STATISTICS
========================================================= */
.ves-stats {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 28px;
max-width: 760px;
margin-top: 62px;
padding-top: 30px;
border-top:
1px solid var(--ves-border-light);
}
.ves-stat {
min-width: 0;
}
/* =========================================================
STAT NUMBER
========================================================= */
.ves-stat-number {
display: flex;
align-items: baseline;
color:
var(--ves-white);
font-family:
var(--ves-font-primary);
font-size: 38px;
font-weight: 800;
line-height: 1;
}
.ves-counter {
white-space: nowrap;
}
/* =========================================================
STAT GOLD ACCENT
========================================================= */
.ves-stat-accent {
margin-left: 2px;
color:
var(--ves-gold);
}
/* =========================================================
STAT DESCRIPTION
========================================================= */
.ves-stat p {
margin: 8px 0 0;
color:
var(--ves-text-muted);
font-family:
var(--ves-font-primary);
font-size: 10px;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* =========================================================
BOTTOM LABEL
========================================================= */
.ves-bottom-label {
position: absolute;
z-index: 20;
left: 50%;
bottom: 24px;
transform:
translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
color:
rgba(255, 255, 255, 0.40);
font-family:
var(--ves-font-primary);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.30em;
text-transform: uppercase;
white-space: nowrap;
}
.ves-bottom-label span {
width: 32px;
height: 1px;
background:
var(--ves-gold);
}
/* =========================================================
VANGUARD ELITE SECURITY
RESPONSIVE HERO
========================================================= */
/* =========================================================
LARGE TABLET / SMALL DESKTOP
1100px and below
========================================================= */
@media (max-width: 1100px) {
.ves-hero {
min-height: 90vh;
background-position:
62% center;
}
.ves-hero-container {
padding-left: 40px;
padding-right: 40px;
}
.ves-hero-content {
max-width: 680px;
}
.ves-hero-title {
font-size: clamp(46px,
7vw,
76px);
}
.ves-hero-description {
max-width: 600px;
font-size: 17px;
}
.ves-stats {
max-width: 680px;
gap: 20px;
}
.ves-stat-number {
font-size: 34px;
}
}
/* =========================================================
TABLET
900px and below
========================================================= */
@media (max-width: 900px) {
.ves-hero {
min-height: 850px;
margin-top: 0px;
background-position:
65% center;
}
.ves-hero-container {
padding:
100px 32px;
}
.ves-hero-content {
max-width: 620px;
}
.ves-hero-title {
font-size:
clamp(44px,
8vw,
68px);
}
.ves-hero-description {
font-size: 16px;
line-height: 1.7;
}
.ves-stats {
max-width: 620px;
gap: 18px;
}
.ves-stat-number {
font-size: 32px;
}
}
/* =========================================================
MOBILE
768px and below
========================================================= */
@media (max-width: 768px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.container,
.row,
section,
header,
footer {
max-width: 100%;
}
img,
video,
iframe {
max-width: 100%;
height: auto;
}
.ves-hero {
min-height: auto;
display: flex;
align-items: flex-end;
background-image:
/* Main vertical gradient */
linear-gradient(to bottom,
rgba(11, 11, 11, 0.05) 0%,
rgba(11, 11, 11, 0.15) 20%,
rgba(11, 11, 11, 0.35) 40%,
rgba(11, 11, 11, 0.80) 68%,
var(--ves-black) 88%,
var(--ves-black) 100%),
/* url("../assets/home_page_mobile.png"); */
url("../assets/hero_img.PNG");
background-position:
center top;
background-size:
auto 65%,
auto 65%;
background-repeat:
no-repeat;
background-color:
var(--ves-black);
}
/* =====================================================
DARK OVERLAY
===================================================== */
.ves-hero::before {
background:
linear-gradient(to bottom,
rgba(11, 11, 11, 0.02) 0%,
rgba(11, 11, 11, 0.08) 25%,
rgba(11, 11, 11, 0.30) 45%,
rgba(11, 11, 11, 0.75) 70%,
var(--ves-black) 100%);
}
/* =====================================================
HIDE DESKTOP IMAGE LAYER
===================================================== */
.ves-hero-image-wrap {
display: none;
}
/* =====================================================
CONTENT
===================================================== */
/* .ves-hero-container {
width: 100%;
padding:
360px 24px 85px;
} */
.ves-hero-content {
max-width: 100%;
}
/* =====================================================
EYEBROW
===================================================== */
.ves-eyebrow {
margin-bottom: 22px;
gap: 10px;
}
.ves-eyebrow-line {
width: 32px;
}
.ves-eyebrow p {
font-size: 11px;
letter-spacing:
0.18em;
}
/* =====================================================
HEADING
===================================================== */
.ves-hero-title {
font-size:
clamp(44px,
10vw,
64px);
line-height:
1.03;
letter-spacing:
-0.035em;
}
/* =====================================================
DESCRIPTION
===================================================== */
.ves-hero-description {
max-width: 100%;
margin-top: 22px;
font-size: 16px;
line-height: 1.7;
}
/* =====================================================
BUTTONS
===================================================== */
.ves-hero-actions {
margin-top: 30px;
gap: 12px;
}
.ves-btn {
min-height: 52px;
padding:
0 22px;
font-size: 11px;
}
/* =====================================================
STATISTICS
===================================================== */
.ves-stats {
grid-template-columns:
repeat(2,
minmax(0, 1fr));
gap:
28px 20px;
max-width: 100%;
margin-top: 48px;
padding-top: 26px;
}
.ves-stat-number {
text-align: center;
align-items: center;
justify-content: center;
font-size: 32px;
}
.ves-stat p {
font-size: 9px;
letter-spacing:
0.10em;
text-align: center;
}
/* =====================================================
BOTTOM LABEL
===================================================== */
.ves-bottom-label {
display: none;
}
}
/* =========================================================
SMALL MOBILE
480px and below
========================================================= */
@media (max-width: 480px) {
.ves-hero {
background-position:
center top;
background-size:
auto 78%,
auto 78%;
}
/* =====================================================
CONTENT
===================================================== */
.ves-hero-container {
padding:
300px 20px 65px;
}
/* =====================================================
EYEBROW
===================================================== */
.ves-eyebrow {
margin-bottom: 18px;
gap: 8px;
}
.ves-eyebrow-line {
width: 26px;
height: 2px;
}
.ves-eyebrow p {
font-size: 11px;
letter-spacing:
0.15em;
}
/* =====================================================
HEADING
===================================================== */
.ves-hero-title {
font-size: 43px;
line-height: 1.03;
letter-spacing:
-0.025em;
}
/* =====================================================
DESCRIPTION
===================================================== */
.ves-hero-description {
margin-top: 20px;
font-size: 15px;
line-height: 1.7;
}
/* =====================================================
BUTTONS
===================================================== */
.ves-hero-actions {
flex-direction: column;
width: 100%;
margin-top: 27px;
}
.ves-btn {
width: 100%;
min-height: 52px;
}
/* =====================================================
STATISTICS
===================================================== */
.ves-stats {
grid-template-columns:
repeat(2,
minmax(0, 1fr));
margin-top: 40px;
padding-top: 24px;
gap:
24px 12px;
}
.ves-stat-number {
font-size: 27px;
}
.ves-stat p {
margin-top: 7px;
font-size: 8px;
line-height: 1.5;
letter-spacing:
0.07em;
}
}
/* =========================================================
VERY SMALL MOBILE
375px and below
========================================================= */
@media (max-width: 375px) {
.ves-hero {
background-size:
auto 55%,
auto 55%;
}
.ves-hero-container {
padding:
285px 18px 55px;
}
.ves-hero-title {
font-size: 38px;
}
.ves-hero-description {
font-size: 14px;
line-height: 1.65;
}
.ves-stat-number {
font-size: 25px;
}
.ves-stat p {
font-size: 7.5px;
}
}
/* about sections css */
/* =========================================================
VANGUARD ELITE
ABOUT SECTION
BLACK + METALLIC GOLD THEME
========================================================= */
.ves-about-section {
width: 100%;
max-width: 100%;
background: var(--ves-black);
padding: 96px 0;
overflow: hidden;
}
.ves-about-container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding-left: 40px;
padding-right: 40px;
}
.ves-about-grid {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: center;
}
/* =========================================================
IMAGE
========================================================= */
.ves-about-image-box {
position: relative;
width: 100%;
height: 500px;
min-width: 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--ves-border-gold);
background: var(--ves-black-card);
box-shadow: var(--ves-shadow-medium);
}
.ves-about-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image: url('../assets/hero_about.png');
background-size: cover;
background-position: center;
transition: transform 0.7s ease;
}
.ves-about-image-box:hover .ves-about-image {
transform: scale(1.05);
}
/* =========================================================
IMAGE OVERLAY
========================================================= */
.ves-about-image-box::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(7, 7, 7, 0.05) 40%,
rgba(7, 7, 7, 0.55) 100%);
pointer-events: none;
}
/* =========================================================
BADGE
========================================================= */
.ves-about-badge {
position: absolute;
left: 24px;
bottom: 24px;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
max-width: calc(100% - 48px);
padding: 10px 16px;
background: var(--ves-black-rich);
border: 1px solid var(--ves-border-gold);
border-radius: 5px;
box-shadow: var(--ves-shadow-gold);
}
.ves-about-badge-icon {
flex-shrink: 0;
font-size: 18px;
color: var(--ves-gold);
}
.ves-about-badge-text {
font-size: 13px;
font-weight: 700;
line-height: 1.3;
color: var(--ves-white);
white-space: normal;
}
/* =========================================================
CONTENT
========================================================= */
.ves-about-content {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* =========================================================
LABEL
========================================================= */
.ves-about-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.ves-about-label-line {
width: 32px;
height: 3px;
flex-shrink: 0;
background: var(--ves-gradient-gold-horizontal);
border-radius: 10px;
}
.ves-about-label-text {
color: var(--ves-gold);
font-size: 13px;
font-weight: 700;
font-family: var(--ves-font-primary);
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* =========================================================
TITLE
========================================================= */
.ves-about-title {
width: 100%;
max-width: 650px;
margin: 0 0 24px;
color: var(--ves-text-primary);
font-family: var(--ves-font-primary);
font-size: clamp(32px, 4vw, 48px);
line-height: 1.12;
font-weight: 700;
}
/* GOLD WORDING EFFECT
========================================================= */
.ves-about-title::first-line {
color: var(--ves-white);
}
/* =========================================================
TEXT
========================================================= */
.ves-about-text {
width: 100%;
max-width: 650px;
margin: 0 0 24px;
color: var(--ves-text-muted);
font-family: var(--ves-font-primary);
font-size: 16px;
line-height: 1.75;
}
.ves-about-text-last {
margin-bottom: 32px;
}
/* =========================================================
STATISTICS
========================================================= */
.ves-about-stats {
width: 100%;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 24px;
padding-top: 24px;
border-top:
1px solid var(--ves-border-dark);
}
.ves-about-stat {
min-width: 0;
}
.ves-about-stat-number {
margin-bottom: 4px;
color: var(--ves-gold);
font-size: 36px;
line-height: 1.1;
font-weight: 700;
text-shadow:
0 0 20px rgba(212, 175, 55, 0.15);
}
.ves-about-stat-label {
color: var(--ves-text-muted);
font-size: 13px;
line-height: 1.4;
font-weight: 700;
}
/* =========================================================
STAT HOVER
========================================================= */
.ves-about-stat {
transition: transform 0.3s ease;
}
.ves-about-stat:hover {
transform: translateY(-3px);
}
.ves-about-stat:hover .ves-about-stat-number {
color: var(--ves-gold-light);
text-shadow:
0 0 25px rgba(212, 175, 55, 0.30);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.ves-about-container {
padding-left: 32px;
padding-right: 32px;
}
.ves-about-grid {
gap: 32px;
}
.ves-about-image-box {
height: 450px;
}
.ves-about-title {
font-size: 36px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.ves-about-section {
width: 100%;
max-width: 100%;
padding: 70px 0;
overflow: hidden;
}
.ves-about-container {
width: 100%;
max-width: 100%;
margin: 0;
padding-left: 20px;
padding-right: 20px;
}
.ves-about-grid {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
}
/* =====================================================
MOBILE IMAGE
===================================================== */
.ves-about-image-box {
width: 100%;
max-width: 100%;
height: 400px;
min-width: 0;
border-radius: 10px;
}
/* =====================================================
MOBILE BADGE
===================================================== */
.ves-about-badge {
left: 16px;
right: 16px;
bottom: 16px;
width: auto;
max-width:
calc(100% - 32px);
padding: 9px 12px;
}
.ves-about-badge-text {
font-size: 12px;
}
/* =====================================================
MOBILE CONTENT
===================================================== */
.ves-about-content {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* =====================================================
MOBILE LABEL
===================================================== */
.ves-about-label {
margin-bottom: 14px;
}
.ves-about-label-line {
width: 26px;
height: 3px;
}
.ves-about-label-text {
font-size: 11px;
letter-spacing: 0.10em;
}
/* =====================================================
MOBILE HEADING
===================================================== */
.ves-about-title {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
font-size: 32px;
line-height: 1.15;
}
/* =====================================================
MOBILE TEXT
===================================================== */
.ves-about-text {
width: 100%;
max-width: 100%;
font-size: 15px;
line-height: 1.7;
margin-bottom: 20px;
}
.ves-about-text-last {
margin-bottom: 28px;
}
/* =====================================================
MOBILE STATISTICS
===================================================== */
.ves-about-stats {
width: 100%;
max-width: 100%;
gap: 16px;
padding-top: 20px;
border-top:
1px solid var(--ves-border-dark);
}
.ves-about-stat-number {
font-size: 30px;
text-align: center;
}
.ves-about-stat-label {
font-size: 12px;
text-align: center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.ves-about-container {
padding-left: 16px;
padding-right: 16px;
}
.ves-about-image-box {
height: 350px;
}
.ves-about-title {
font-size: 29px;
}
.ves-about-text {
font-size: 14px;
}
.ves-about-stat-number {
font-size: 27px;
}
}
/* =========================================================
VANGUARD ELITE
FOOTER
BLACK + METALLIC GOLD
========================================================= */
/*
/* =========================================================
TABLET
========================================================= */
/* =========================================================
MOBILE
========================================================= */
/* =========================================================
SMALL MOBILE
========================================================= */
/* ---------------------------------------------------------------------- */
.ves-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* ===== BUTTONS ===== */
.ves-btn-gold {
display: inline-block;
background: var(--ves-gold);
color: var(--ves-black-deep);
font-weight: 700;
font-size: 0.95rem;
padding: 14px 34px;
border-radius: 6px;
border: none;
letter-spacing: 0.3px;
transition: all 0.25s ease;
box-shadow: var(--ves-shadow-gold);
cursor: pointer;
}
.ves-btn-gold:hover {
background: var(--ves-gold-light);
transform: translateY(-2px);
box-shadow: var(--ves-shadow-gold-strong);
}
.ves-btn-outline {
display: inline-block;
background: transparent;
color: var(--ves-white);
font-weight: 600;
font-size: 0.95rem;
padding: 12px 32px;
border-radius: 6px;
border: 1.5px solid var(--ves-gold);
transition: all 0.25s ease;
cursor: pointer;
letter-spacing: 0.3px;
}
.ves-btn-outline:hover {
background: var(--ves-gold-15);
border-color: var(--ves-gold-light);
color: var(--ves-white);
transform: translateY(-2px);
}
/* ===== SECTION HEADINGS ===== */
.ves-section-title {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ves-white);
margin-bottom: 0.5rem;
}
.ves-section-sub {
color: var(--ves-text-muted);
font-size: 1.1rem;
font-weight: 400;
max-width: 640px;
}
.ves-gold-accent {
color: var(--ves-gold);
}
/* ===== STATS ===== */
/* .ves-stats {
background: var(--ves-black-rich);
border-top: 1px solid var(--ves-border-dark);
border-bottom: 1px solid var(--ves-border-dark);
padding: 40px 0;
} */
/* .ves-stats-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 10px;
} */
/* .ves-stat-item {
text-align: center;
flex: 1 0 80px;
} */
/* .ves-stat-number {
font-size: 2.6rem;
font-weight: 800;
color: var(--ves-white);
letter-spacing: -0.02em;
} */
/* .ves-stat-number.gold {
color: var(--ves-gold);
}
.ves-stat-label {
font-size: 0.85rem;
color: var(--ves-text-muted);
font-weight: 500;
letter-spacing: 0.3px;
margin-top: 4px;
} */
/* ===== INTRO ===== */
.ves-intro {
padding: 80px 0;
background: var(--ves-black-deep);
}
.ves-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.ves-intro-text p {
color: var(--ves-text-muted);
margin: 20px 0 28px;
font-size: 1.05rem;
line-height: 1.8;
}
.ves-intro-image {
background: var(--ves-black-soft);
border-radius: 12px;
aspect-ratio: 4/3;
background-image: url('../assets/index2.webp');
/* background-image: url('data:image/svg+xml;utf8,'); */
background-size: cover;
background-position: center;
border: 1px solid var(--ves-border-light);
}
.ves-intro-image2 {
background: var(--ves-black-soft);
border-radius: 12px;
aspect-ratio: 4/3;
background-image: url('../assets/index3.PNG');
/* background-image: url('data:image/svg+xml;utf8,'); */
background-size: cover;
background-position: center;
border: 1px solid var(--ves-border-light);
}
/* ===== SERVICES ===== */
.ves-services {
padding: 80px 0;
background: var(--ves-black-rich);
}
.ves-services-header {
margin-bottom: 48px;
}
.ves-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.ves-service-card {
background: var(--ves-black-card);
padding: 28px 20px;
border-radius: 10px;
border: 1px solid var(--ves-border-dark);
transition: all 0.3s ease;
}
.ves-service-card:hover {
transform: translateY(-6px);
border-color: var(--ves-gold-30);
box-shadow: var(--ves-shadow-gold);
}
.ves-service-card i {
font-size: 2rem;
color: var(--ves-gold);
margin-bottom: 16px;
}
.ves-service-card h4 {
color: var(--ves-white);
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 8px;
}
.ves-service-card p {
color: var(--ves-text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.ves-service-link {
display: inline-block;
margin-top: 14px;
font-weight: 600;
color: var(--ves-gold);
font-size: 0.85rem;
border-bottom: 1px solid transparent;
transition: 0.2s;
}
.ves-service-link:hover {
border-bottom-color: var(--ves-gold);
}
/* ===== ADVANCED SOLUTIONS ===== */
.ves-advanced {
padding: 80px 0;
background: var(--ves-black-deep);
border-top: 1px solid var(--ves-border-dark);
}
.ves-advanced-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.ves-advanced-list {
display: grid;
gap: 24px;
margin-top: 20px;
}
.ves-advanced-item h4 {
color: var(--ves-white);
font-weight: 700;
font-size: 1.1rem;
}
.ves-advanced-item h4 i {
color: var(--ves-gold);
margin-right: 10px;
}
.ves-advanced-item p {
color: var(--ves-text-muted);
font-size: 0.95rem;
margin-left: 28px;
}
.ves-advanced-image {
background: var(--ves-black-soft);
border-radius: 12px;
aspect-ratio: 4/3;
background-image: url('../assets/our.JPEG');
/* background-image: url('data:image/svg+xml;utf8,'); */
background-size: cover;
border: 1px solid var(--ves-border-light);
transform: scale(1.03);
}
.ves-advanced-image2 {
background: var(--ves-black-soft);
border-radius: 12px;
aspect-ratio: 4/3;
background-image: url('../assets/diffrence.JPEG');
/* background-image: url('data:image/svg+xml;utf8,'); */
background-size: cover;
border: 1px solid var(--ves-border-light);
}
/* ===== INDUSTRIES ===== */
.ves-industries {
padding: 80px 0;
background: var(--ves-black-rich);
}
.ves-industries-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.ves-industry-item {
background: var(--ves-black-card);
padding: 22px 16px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
border: 1px solid var(--ves-border-dark);
transition: 0.25s;
cursor: default;
}
.ves-industry-item:hover {
border-color: var(--ves-gold-30);
background: var(--ves-gold-05);
}
.ves-industry-item i {
font-size: 2rem;
color: var(--ves-gold);
margin-bottom: 10px;
}
.ves-industry-item span {
color: var(--ves-white);
font-weight: 600;
font-size: 0.95rem;
}
/* ===== WHY VANGUARD ===== */
.ves-why {
padding: 80px 0;
background: var(--ves-black-deep);
border-top: 1px solid var(--ves-border-dark);
}
.ves-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.ves-why-image {
background: var(--ves-black-soft);
border-radius: 12px;
aspect-ratio: 3/4;
background-image: url('../assets/inspection.webp');
/* background-image: url('data:image/svg+xml;utf8,'); */
background-size: cover;
border: 1px solid var(--ves-border-light);
}
.ves-why-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
margin: 20px 0 30px;
}
.ves-why-points li {
list-style: none;
color: var(--ves-text-secondary);
font-weight: 500;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 10px;
}
.ves-why-points li i {
color: var(--ves-gold);
font-size: 1rem;
}
.ves-why-quote {
font-size: 1.2rem;
color: var(--ves-white);
font-weight: 400;
border-left: 3px solid var(--ves-gold);
padding-left: 20px;
margin: 20px 0;
font-style: italic;
}
/* ===== TRAINING ===== */
.ves-training {
padding: 80px 0;
background: var(--ves-black-rich);
border-top: 1px solid var(--ves-border-dark);
}
.ves-training-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.ves-training-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 30px;
margin: 24px 0;
}
.ves-training-list li {
color: var(--ves-text-secondary);
list-style: none;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
}
.ves-training-list li i {
color: var(--ves-gold);
}
/* ===== COMPLIANCE ===== */
.ves-compliance {
padding: 70px 0;
background: var(--ves-black-deep);
border-top: 1px solid #eee;
}
.ves-compliance-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.ves-compliance-item {
background: var(--ves-black-card);
padding: 18px 20px;
border-radius: 8px;
border: 1px solid var(--ves-border-dark);
color: var(--ves-text-secondary);
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
}
.ves-compliance-item i {
color: var(--ves-gold);
width: 20px;
}
/* ===== CLIENTS ===== */
.ves-clients {
padding: 60px 0;
background: var(--ves-black-rich);
border-top: 1px solid var(--ves-border-dark);
}
.ves-clients-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px 60px;
margin: 30px 0 20px;
color: var(--ves-text-muted);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.5px;
opacity: 0.7;
}
/* ===== FINAL CTA ===== */
.ves-final-cta {
padding: 80px 0;
background: var(--ves-black-rich);
border-top: 1px solid var(--ves-gold-20);
text-align: center;
position: relative;
}
.ves-final-cta h2 {
font-size: 2.8rem;
font-weight: 800;
color: var(--ves-white);
}
.ves-final-cta p {
color: var(--ves-text-muted);
max-width: 600px;
margin: 16px auto 32px;
font-size: 1.1rem;
}
.ves-final-cta .ves-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
/* ===== AOS OVERRIDES ===== */
[data-aos] {
pointer-events: none;
}
[data-aos].aos-animate {
pointer-events: auto;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.ves-intro-grid,
.ves-advanced-grid,
.ves-why-grid,
.ves-training-grid {
grid-template-columns: 1fr;
}
.ves-services-grid,
.ves-industries-grid {
grid-template-columns: repeat(2, 1fr);
}
.ves-compliance-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 720px) {
.ves-services-grid,
.ves-industries-grid,
.ves-compliance-grid {
grid-template-columns: 1fr 1fr;
text-align: center;
}
.ves-why-points {
grid-template-columns: 1fr;
}
.ves-training-list {
grid-template-columns: 1fr;
}
.ves-stats-grid {
justify-content: center;
}
.ves-stat-item {
flex: 0 0 40%;
}
}
@media (max-width: 480px) {
.ves-section-title {
font-size: 1.8rem;
}
.ves-services-grid,
.ves-industries-grid {
grid-template-columns: 1fr;
}
.ves-compliance-grid {
grid-template-columns: 1fr;
}
}
::-webkit-scrollbar {
width: 4px;
background: var(--ves-black-deep);
}
::-webkit-scrollbar-thumb {
background: var(--ves-gold-30);
border-radius: 12px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ves-gold-50);
}
/* .ves-footer-contact {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 22px;
}
.ves-footer-contact-link {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
color: var(--ves-text-muted);
font-size: 13px;
line-height: 1.5;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.02em;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.ves-footer-contact-icon {
color: var(--ves-gold);
font-size: 15px;
}
.ves-footer-contact-link:hover {
color: var(--ves-gold-light);
transform: translateX(3px);
} */
/* =========================================================
MOBILE CONTACT
========================================================= */
/* @media (max-width: 767px) {
.ves-footer-contact {
margin-top: 18px;
gap: 12px;
}
.ves-footer-contact-link {
font-size: 12px;
}
}
*/