/* =========================================================
VVDEE — ABOUT US WIDGET
Standalone HTML Widget
No external dependency
========================================================= */
.vv-about-widget,
.vv-about-widget * {
box-sizing: border-box;
}
.vv-about-widget {
--vv-green-dark: #07543d;
--vv-green: #0b8055;
--vv-green-light: #54c86c;
--vv-lime: #c9f23c;
--vv-yellow: #ffd34d;
--vv-orange: #f7a64a;
--vv-cream: #fff9e9;
--vv-text: #173e34;
--vv-muted: #688078;
width: 100%;
direction: rtl;
font-family: Tahoma, Arial, sans-serif;
color: var(--vv-text);
overflow: hidden;
}
/* =========================================================
HERO
========================================================= */
.vv-about-hero {
position: relative;
overflow: hidden;
padding: 90px 25px 105px;
background:
radial-gradient(circle at 12% 15%, rgba(201,242,60,.18), transparent 23%),
radial-gradient(circle at 88% 8%, rgba(78,181,223,.18), transparent 25%),
linear-gradient(135deg, #064332 0%, #08714d 52%, #0b8b59 100%);
}
.vv-about-hero::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(201,242,60,.06);
left: -250px;
bottom: -260px;
}
.vv-about-hero::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(255,211,77,.05);
right: -140px;
top: -150px;
}
.vv-about-container {
width: min(1180px, 100%);
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Decorative leaves */
.vv-about-leaf {
position: absolute;
width: 75px;
height: 125px;
border-radius: 100% 0 100% 0;
background: linear-gradient(145deg, #82d96d, #08704d);
opacity: .16;
z-index: 1;
}
.vv-about-leaf-1 {
top: 50px;
right: -20px;
transform: rotate(25deg);
}
.vv-about-leaf-2 {
bottom: 35px;
left: -20px;
transform: rotate(-35deg) scale(.75);
}
.vv-about-hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: center;
gap: 65px;
direction: ltr;
}
.vv-about-hero-content {
direction: rtl;
}
.vv-about-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 16px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.09);
color: #f0ffd3;
border-radius: 100px;
font-size: 12px;
font-weight: 800;
backdrop-filter: blur(10px);
}
.vv-about-badge-dot {
width: 9px;
height: 9px;
background: var(--vv-lime);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(201,242,60,.12);
}
.vv-about-title {
margin: 22px 0 0;
color: #fff;
font-size: clamp(38px, 5vw, 66px);
line-height: 1.18;
font-weight: 900;
letter-spacing: -2px;
}
.vv-about-title-highlight {
color: var(--vv-lime);
position: relative;
display: inline-block;
}
.vv-about-title-highlight::after {
content: "";
position: absolute;
right: 4px;
left: 4px;
height: 7px;
bottom: -8px;
border-radius: 20px;
background: var(--vv-yellow);
transform: rotate(-2deg);
}
.vv-about-description {
max-width: 620px;
margin: 27px 0 0;
color: #e0f1e8;
font-size: 16px;
line-height: 2.15;
}
.vv-about-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.vv-about-btn {
min-height: 51px;
padding: 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 16px;
text-decoration: none !important;
font-size: 13px;
font-weight: 900;
transition: .25s ease;
}
.vv-about-btn-primary {
color: #234b32 !important;
background: var(--vv-yellow);
box-shadow: 0 12px 30px rgba(255,211,77,.17);
}
.vv-about-btn-primary:hover {
transform: translateY(-3px);
}
.vv-about-btn-secondary {
color: #fff !important;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.2);
}
.vv-about-btn-secondary:hover {
background: rgba(255,255,255,.14);
}
/* =========================================================
HERO ILLUSTRATION
========================================================= */
.vv-about-visual {
position: relative;
min-height: 450px;
direction: rtl;
}
.vv-about-visual-main {
position: absolute;
width: 410px;
height: 410px;
max-width: 100%;
right: 50%;
top: 50%;
transform: translate(50%,-50%) rotate(3deg);
border-radius: 43% 57% 48% 52% / 50% 43% 57% 50%;
background:
radial-gradient(circle at 30% 25%, rgba(201,242,60,.35), transparent 8%),
radial-gradient(circle at 70% 75%, rgba(255,211,77,.22), transparent 15%),
linear-gradient(145deg, #3db870, #08704d 55%, #064331);
border: 2px solid rgba(255,255,255,.16);
box-shadow: 0 30px 80px rgba(0,30,22,.25);
overflow: hidden;
}
.vv-about-visual-main::before {
content: "";
position: absolute;
inset: 25px;
border: 1px dashed rgba(255,255,255,.18);
border-radius: inherit;
}
/* Sun */
.vv-about-sun {
position: absolute;
width: 100px;
height: 100px;
right: 70px;
top: 45px;
border-radius: 50%;
background: var(--vv-yellow);
box-shadow: 0 0 0 18px rgba(255,211,77,.08);
}
/* Tree */
.vv-about-tree {
position: absolute;
width: 250px;
height: 280px;
right: 60px;
bottom: -15px;
}
.vv-about-tree-trunk {
position: absolute;
width: 48px;
height: 190px;
right: 98px;
bottom: 0;
border-radius: 25px 25px 8px 8px;
background: #70462d;
transform: rotate(6deg);
}
.vv-about-tree-crown {
position: absolute;
width: 150px;
height: 150px;
right: 47px;
top: 5px;
border-radius: 50%;
background: #168453;
box-shadow:
-53px 43px 0 -14px #25a35d,
54px 38px 0 -12px #5fc66b,
0 -35px 0 -19px #77d56d;
}
/* Character */
.vv-about-character {
position: absolute;
width: 135px;
height: 155px;
left: 38px;
bottom: 42px;
transform: rotate(-5deg);
}
.vv-about-character-body {
position: absolute;
width: 100px;
height: 100px;
left: 18px;
bottom: 0;
border-radius: 50%;
background: var(--vv-yellow);
border: 4px solid #e9a63b;
}
.vv-about-character-face {
position: absolute;
width: 106px;
height: 87px;
left: 15px;
top: 3px;
border-radius: 50%;
background: #fff4c0;
border: 4px solid #e9a63b;
}
.vv-about-eye {
position: absolute;
width: 13px;
height: 19px;
top: 30px;
border-radius: 50%;
background: #173e34;
}
.vv-about-eye-1 {
left: 24px;
}
.vv-about-eye-2 {
right: 24px;
}
.vv-about-smile {
position: absolute;
width: 34px;
height: 17px;
left: 33px;
top: 49px;
border-bottom: 4px solid #173e34;
border-radius: 0 0 30px 30px;
}
.vv-about-floating {
position: absolute;
z-index: 4;
padding: 13px 16px;
border-radius: 17px;
background: rgba(255,255,255,.94);
color: var(--vv-text);
box-shadow: 0 15px 35px rgba(0,0,0,.16);
font-size: 11px;
font-weight: 800;
}
.vv-about-floating strong {
color: var(--vv-green);
}
.vv-about-floating-1 {
top: 90px;
right: -5px;
}
.vv-about-floating-2 {
bottom: 70px;
left: -8px;
}
/* =========================================================
INTRO
========================================================= */
.vv-about-intro {
position: relative;
padding: 95px 25px 90px;
background: var(--vv-cream);
}
.vv-about-section-heading {
max-width: 720px;
margin: 0 auto 50px;
text-align: center;
}
.vv-about-kicker {
margin-bottom: 12px;
color: var(--vv-green);
font-size: 13px;
font-weight: 900;
}
.vv-about-section-title {
margin: 0;
color: var(--vv-text);
font-size: clamp(28px,4vw,44px);
line-height: 1.4;
font-weight: 900;
}
.vv-about-section-description {
margin: 16px auto 0;
color: var(--vv-muted);
font-size: 14px;
line-height: 2;
}
/* =========================================================
CONTENT TYPES
========================================================= */
.vv-about-content-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 16px;
}
.vv-about-content-card {
position: relative;
min-height: 235px;
padding: 25px 21px;
border-radius: 27px;
border: 1px solid rgba(8,112,77,.09);
overflow: hidden;
transition: .3s ease;
}
.vv-about-content-card:hover {
transform: translateY(-7px);
}
.vv-about-content-card:nth-child(1) {
background: linear-gradient(145deg,#e2f5d9,#fff);
}
.vv-about-content-card:nth-child(2) {
background: linear-gradient(145deg,#fff0c8,#fff);
}
.vv-about-content-card:nth-child(3) {
background: linear-gradient(145deg,#d9f2e8,#fff);
}
.vv-about-content-card:nth-child(4) {
background: linear-gradient(145deg,#dceefa,#fff);
}
.vv-about-icon-box {
width: 57px;
height: 57px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
background: rgba(255,255,255,.8);
box-shadow: 0 6px 20px rgba(30,90,65,.07);
}
.vv-about-icon-box svg {
width: 28px;
height: 28px;
stroke: var(--vv-green);
}
.vv-about-content-card:nth-child(2) .vv-about-icon-box svg {
stroke: #e89a32;
}
.vv-about-content-card:nth-child(4) .vv-about-icon-box svg {
stroke: #3186b4;
}
.vv-about-content-card h3 {
margin: 0 0 9px;
color: var(--vv-text);
font-size: 17px;
font-weight: 900;
}
.vv-about-content-card p {
margin: 0;
color: #657970;
font-size: 12px;
line-height: 2;
}
.vv-about-card-number {
position: absolute;
left: 12px;
bottom: -20px;
color: rgba(8,112,77,.045);
font-size: 85px;
font-weight: 900;
direction: ltr;
}
/* =========================================================
MISSION
========================================================= */
.vv-about-mission {
position: relative;
overflow: hidden;
padding: 95px 25px;
background:
radial-gradient(circle at 80% 20%, rgba(201,242,60,.16), transparent 22%),
linear-gradient(135deg,#07533d,#087b51 55%,#0a8d59);
}
.vv-about-mission-grid {
display: grid;
grid-template-columns: .85fr 1.15fr;
align-items: center;
gap: 70px;
direction: ltr;
}
.vv-about-mission-copy {
direction: rtl;
}
.vv-about-mission-copy .vv-about-kicker {
color: var(--vv-lime);
}
.vv-about-mission-copy h2 {
margin: 0;
color: #fff;
font-size: clamp(30px,4vw,48px);
line-height: 1.4;
font-weight: 900;
}
.vv-about-mission-copy h2 span {
color: var(--vv-lime);
}
.vv-about-mission-copy p {
margin: 20px 0 0;
color: #d9eee3;
font-size: 14px;
line-height: 2.2;
}
.vv-about-checks {
display: grid;
gap: 12px;
margin-top: 27px;
}
.vv-about-check {
display: flex;
align-items: center;
gap: 11px;
color: #f4fff8;
font-size: 13px;
font-weight: 700;
}
.vv-about-check-mark {
width: 29px;
height: 29px;
flex: 0 0 29px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--vv-lime);
color: #07543d;
font-size: 15px;
font-weight: 900;
}
/* Mission visual */
.vv-about-mission-art {
position: relative;
min-height: 350px;
direction: rtl;
}
.vv-about-mission-circle {
position: absolute;
width: 310px;
height: 310px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.13);
}
.vv-about-mission-center {
position: absolute;
width: 205px;
height: 205px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--vv-yellow);
color: var(--vv-green-dark);
box-shadow: 0 20px 55px rgba(0,0,0,.18);
font-size: 37px;
font-weight: 900;
}
.vv-about-orbit-icon {
position: absolute;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 17px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(10px);
}
.vv-about-orbit-icon svg {
width: 25px;
height: 25px;
stroke: #fff;
}
.vv-about-orbit-1 {
top: 3px;
left: 50%;
transform: translateX(-50%);
}
.vv-about-orbit-2 {
right: 3px;
top: 50%;
transform: translateY(-50%);
}
.vv-about-orbit-3 {
bottom: 3px;
left: 50%;
transform: translateX(-50%);
}
.vv-about-orbit-4 {
left: 3px;
top: 50%;
transform: translateY(-50%);
}
/* =========================================================
STATS
========================================================= */
.vv-about-stats {
padding: 70px 25px;
background: #fff;
}
.vv-about-stats-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
overflow: hidden;
border: 1px solid #e6eee9;
border-radius: 29px;
box-shadow: 0 15px 45px rgba(12,70,50,.07);
}
.vv-about-stat {
position: relative;
min-height: 155px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.vv-about-stat:not(:last-child)::after {
content: "";
position: absolute;
width: 1px;
height: 65%;
left: 0;
top: 17.5%;
background: #e6eee9;
}
.vv-about-stat-number {
color: var(--vv-green);
font-size: 37px;
line-height: 1;
font-weight: 900;
direction: ltr;
}
.vv-about-stat-label {
margin-top: 10px;
color: #708078;
font-size: 12px;
font-weight: 700;
}
/* =========================================================
VALUES
========================================================= */
.vv-about-values {
padding: 95px 25px;
background:
radial-gradient(circle at 8% 20%, rgba(201,242,60,.14), transparent 18%),
#edf8ee;
}
.vv-about-values-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 18px;
}
.vv-about-value {
min-height: 205px;
padding: 27px;
border-radius: 27px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(8,112,77,.09);
transition: .3s ease;
}
.vv-about-value:hover {
transform: translateY(-5px);
background: #fff;
}
.vv-about-value-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.vv-about-value-icon {
width: 51px;
height: 51px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: var(--vv-green-dark);
}
.vv-about-value-icon svg {
width: 24px;
height: 24px;
stroke: #fff;
}
.vv-about-value-number {
color: #91a49c;
font-size: 11px;
font-weight: 900;
direction: ltr;
}
.vv-about-value h3 {
margin: 20px 0 8px;
font-size: 16px;
font-weight: 900;
}
.vv-about-value p {
margin: 0;
color: #6a7c75;
font-size: 12px;
line-height: 2;
}
/* =========================================================
FINAL CTA
========================================================= */
.vv-about-final {
padding: 90px 25px 100px;
background: var(--vv-cream);
}
.vv-about-final-box {
position: relative;
overflow: hidden;
min-height: 290px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
padding: 52px 60px;
border-radius: 39px;
background:
radial-gradient(circle at 85% 20%, rgba(201,242,60,.19), transparent 22%),
linear-gradient(135deg,#07533d,#087f53);
box-shadow: 0 25px 60px rgba(8,90,60,.17);
}
.vv-about-final-box::before {
content: "";
position: absolute;
width: 230px;
height: 230px;
border-radius: 50%;
left: -110px;
bottom: -140px;
background: rgba(255,211,77,.10);
}
.vv-about-final-content {
position: relative;
z-index: 2;
}
.vv-about-final-content .vv-about-kicker {
color: var(--vv-lime);
}
.vv-about-final-content h2 {
margin: 4px 0 10px;
color: #fff;
font-size: clamp(27px,4vw,41px);
line-height: 1.45;
font-weight: 900;
}
.vv-about-final-content p {
margin: 0;
color: #d8eee1;
font-size: 13px;
line-height: 2;
}
.vv-about-final-button {
position: relative;
z-index: 2;
flex: 0 0 auto;
min-width: 170px;
min-height: 55px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 23px;
border-radius: 17px;
background: var(--vv-yellow);
color: var(--vv-green-dark) !important;
text-decoration: none !important;
font-size: 13px;
font-weight: 900;
transition: .25s ease;
}
.vv-about-final-button:hover {
transform: translateY(-3px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1000px) {
.vv-about-hero-grid {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.vv-about-description {
margin-left: auto;
margin-right: auto;
}
.vv-about-buttons {
justify-content: center;
}
.vv-about-visual {
width: min(470px,100%);
margin: 0 auto;
}
.vv-about-content-grid {
grid-template-columns: repeat(2,1fr);
}
.vv-about-mission-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.vv-about-mission-copy {
text-align: center;
}
.vv-about-checks {
width: fit-content;
margin-left: auto;
margin-right: auto;
text-align: right;
}
}
@media (max-width: 720px) {
.vv-about-hero,
.vv-about-intro,
.vv-about-mission,
.vv-about-values,
.vv-about-final {
padding-left: 15px;
padding-right: 15px;
}
.vv-about-hero {
padding-top: 60px;
padding-bottom: 65px;
}
.vv-about-title {
font-size: 39px;
}
.vv-about-description {
font-size: 14px;
}
.vv-about-visual {
min-height: 350px;
transform: scale(.88);
margin-top: -15px;
margin-bottom: -20px;
}
.vv-about-visual-main {
width: 350px;
height: 350px;
}
.vv-about-sun {
width: 82px;
height: 82px;
right: 55px;
}
.vv-about-content-grid {
grid-template-columns: 1fr;
}
.vv-about-content-card {
min-height: 200px;
}
.vv-about-stats {
padding-left: 15px;
padding-right: 15px;
}
.vv-about-stats-grid {
grid-template-columns: repeat(2,1fr);
}
.vv-about-stat:nth-child(2)::after {
display: none;
}
.vv-about-stat:nth-child(1),
.vv-about-stat:nth-child(2) {
border-bottom: 1px solid #e6eee9;
}
.vv-about-values-grid {
grid-template-columns: 1fr;
}
.vv-about-final-box {
padding: 38px 25px;
flex-direction: column;
text-align: center;
border-radius: 30px;
}
.vv-about-final-button {
width: 100%;
}
}
@media (max-width: 430px) {
.vv-about-title {
font-size: 34px;
}
.vv-about-buttons {
flex-direction: column;
}
.vv-about-btn {
width: 100%;
}
.vv-about-visual {
transform: scale(.76);
margin-top: -45px;
margin-bottom: -60px;
}
.vv-about-stats-grid {
grid-template-columns: 1fr;
}
.vv-about-stat {
min-height: 125px;
}
.vv-about-stat:not(:last-child)::after {
width: 70%;
height: 1px;
top: auto;
bottom: 0;
left: 15%;
}
.vv-about-stat:nth-child(1),
.vv-about-stat:nth-child(2) {
border-bottom: 0;
}
.vv-about-mission-art {
min-height: 300px;
transform: scale(.88);
}
}