/* Start custom CSS for html, class: .elementor-element-6f124a5 *//* =========================================================
KSR CHARITABLE TRUST
HERO - IMAGE VERSION
========================================================= */
/* REMOVE DEFAULT SPACING */
.ksr-hero,
.ksr-hero * {
box-sizing: border-box;
}
/* =========================================================
HERO
========================================================= */
.ksr-hero {
position: relative;
width: 100%;
height: 90vh;
min-height: 680px;
max-height: 900px;
overflow: hidden;
display: flex;
align-items: center;
background: #06351f;
}
/* =========================================================
ACTUAL IMAGE
========================================================= */
.ksr-hero-image {
position: absolute !important;
z-index: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* =========================================================
OVERLAY
========================================================= */
.ksr-hero-overlay {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
background:
linear-gradient(
90deg,
rgba(3,32,19,0.88) 0%,
rgba(3,45,25,0.70) 35%,
rgba(3,45,25,0.35) 65%,
rgba(3,45,25,0.15) 100%
);
}
/* =========================================================
CONTENT
========================================================= */
.ksr-hero-content {
position: relative;
z-index: 5;
width: min(1180px, 90%);
margin: 0 auto;
padding: 40px 0;
}
/* =========================================================
LABEL
========================================================= */
.ksr-hero-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: #e0b852;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
}
.ksr-hero-label span {
width: 45px;
height: 2px;
background: #dcb653;
}
/* =========================================================
HEADING
========================================================= */
.ksr-hero-content h1 {
max-width: 700px;
margin: 0;
padding: 0;
color: #ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(52px, 6vw, 85px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -2px;
}
.ksr-hero-content h1 strong {
display: block;
color: #e0b852;
font-weight: 400;
}
/* =========================================================
SECOND TITLE
========================================================= */
.ksr-hero-content h2 {
margin:
16px 0 0;
padding: 0;
color: #ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(24px, 3vw, 38px);
font-weight: 400;
line-height: 1.2;
}
/* =========================================================
MAIN MESSAGE
========================================================= */
.ksr-hero-main {
max-width: 680px;
margin:
30px 0 15px;
padding-left: 20px;
border-left:
3px solid #dcb653;
color:
rgba(255,255,255,0.95);
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(17px, 2vw, 21px);
line-height: 1.6;
}
.ksr-hero-main b {
color: #ffffff;
font-weight: 600;
}
/* =========================================================
DESCRIPTION
========================================================= */
.ksr-hero-text {
max-width: 650px;
margin: 0;
padding: 0;
color:
rgba(255,255,255,0.70);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 13px;
line-height: 1.8;
}
/* =========================================================
BUTTONS
========================================================= */
.ksr-hero-buttons {
display: flex;
align-items: center;
gap: 14px;
margin-top: 32px;
}
.ksr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding:
0 24px;
border-radius: 50px;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
text-decoration: none !important;
transition: all .3s ease;
}
/* PRIMARY */
.ksr-btn-primary {
background: #dcb653;
color: #06351f !important;
}
.ksr-btn-primary:hover {
background: #f0cf72;
color: #06351f !important;
transform: translateY(-4px);
}
.ksr-btn-primary span {
font-size: 18px;
transition: transform .3s ease;
}
.ksr-btn-primary:hover span {
transform: translateX(5px);
}
/* OUTLINE */
.ksr-btn-outline {
color: #ffffff !important;
border:
1px solid
rgba(255,255,255,0.65);
background:
rgba(255,255,255,0.06);
}
.ksr-btn-outline:hover {
background: #ffffff;
color: #06351f !important;
border-color: #ffffff;
transform: translateY(-4px);
}
/* =========================================================
CIRCLE
========================================================= */
.ksr-hero-circle {
position: absolute;
z-index: 4;
right: 8%;
top: 50%;
width: 330px;
height: 330px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(4,55,31,0.45);
border:
1px solid
rgba(220,182,83,0.50);
backdrop-filter: blur(5px);
box-shadow:
0 25px 70px
rgba(0,0,0,0.25);
}
.ksr-hero-circle::before {
content: "";
position: absolute;
inset: -14px;
border:
1px solid
rgba(220,182,83,0.28);
border-radius: 50%;
}
.ksr-hero-circle::after {
content: "";
position: absolute;
inset: 17px;
border:
1px solid
rgba(255,255,255,0.12);
border-radius: 50%;
}
.ksr-circle-inner {
position: relative;
z-index: 2;
text-align: center;
}
.ksr-leaf {
width: 55px;
height: 55px;
margin:
0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(220,182,83,0.12);
border:
1px solid
rgba(220,182,83,0.30);
font-size: 25px;
}
.ksr-circle-title {
color: #ffffff;
font-family:
Georgia,
serif;
font-size: 27px;
}
.ksr-circle-gold {
margin-top: 5px;
color: #e0b852;
font-family:
Georgia,
serif;
font-size: 27px;
}
/* =========================================================
SCROLL
========================================================= */
.ksr-scroll {
position: absolute;
z-index: 8;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color:
rgba(255,255,255,0.65);
font-family:
Arial,
sans-serif;
font-size: 7px;
font-weight: 700;
letter-spacing: 3px;
}
.ksr-scroll i {
width: 1px;
height: 30px;
background:
rgba(255,255,255,0.45);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.ksr-hero {
min-height: 650px;
}
.ksr-hero-circle {
right: 4%;
width: 270px;
height: 270px;
}
.ksr-circle-title,
.ksr-circle-gold {
font-size: 22px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.ksr-hero {
height: auto;
min-height: 720px;
padding:
100px 0 100px;
}
.ksr-hero-image {
object-position:
center center !important;
}
.ksr-hero-overlay {
background:
linear-gradient(
180deg,
rgba(2,35,20,0.76),
rgba(3,48,27,0.72)
);
}
.ksr-hero-content {
width: 88%;
padding:
30px 0 70px;
text-align: center;
}
.ksr-hero-label {
justify-content: center;
font-size: 8px;
letter-spacing: 2.5px;
}
.ksr-hero-label span {
width: 28px;
}
.ksr-hero-content h1 {
font-size:
clamp(43px, 13vw, 62px);
line-height: 1.02;
}
.ksr-hero-content h2 {
font-size: 23px;
}
.ksr-hero-main {
margin:
25px auto 15px;
padding:
12px 0 0;
border-left: 0;
border-top:
2px solid #dcb653;
max-width: 430px;
font-size: 16px;
}
.ksr-hero-text {
margin: 0 auto;
max-width: 430px;
font-size: 11px;
}
.ksr-hero-buttons {
flex-direction: column;
justify-content: center;
gap: 10px;
}
.ksr-btn {
width: 215px;
}
.ksr-hero-circle {
display: none;
}
.ksr-scroll {
bottom: 15px;
}
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-3513eab *//* =====================================================
KSR CHARITABLE TRUST - HERO
===================================================== */
.ksr-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
background: #062b1b;
}
/* BACKGROUND IMAGE */
.ksr-hero-bg {
position: absolute;
inset: 0;
background-image:
url("https://YOUR-DOMAIN.COM/wp-content/uploads/2026/08/ksr-hero.jpg");
background-size: cover;
background-position: center;
animation: ksrHeroZoom 18s ease-in-out infinite alternate;
}
@keyframes ksrHeroZoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.08);
}
}
/* DARK GREEN OVERLAY */
.ksr-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(3, 35, 22, 0.97) 0%,
rgba(3, 50, 30, 0.91) 35%,
rgba(3, 50, 30, 0.67) 65%,
rgba(3, 50, 30, 0.25) 100%
);
}
/* SUBTLE LIGHT EFFECT */
.ksr-hero-overlay::after {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: 5%;
top: 15%;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(216,173,74,0.16),
transparent 65%
);
pointer-events: none;
}
/* CONTENT */
.ksr-hero-content {
position: relative;
z-index: 5;
width: min(850px, 90%);
margin-left: 8%;
padding-top: 80px;
animation:
ksrHeroContent 1.2s ease forwards;
}
@keyframes ksrHeroContent {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* LABEL */
.ksr-hero-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
color: #e4c36a;
font-family:
Arial,
sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
}
.ksr-hero-label span {
width: 45px;
height: 1px;
background: #d8ad4a;
}
/* MAIN HEADING */
.ksr-hero h1 {
margin: 0;
color: #fff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(55px, 7vw, 95px);
font-weight: 500;
line-height: 1.02;
letter-spacing: -2px;
}
.ksr-hero h1 strong {
display: block;
color: #e4bd62;
font-weight: 500;
}
/* SECOND HEADING */
.ksr-hero h2 {
margin: 12px 0 0;
color: #fff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(32px, 4vw, 55px);
font-weight: 400;
line-height: 1.2;
}
/* MAIN MESSAGE */
.ksr-hero-main {
max-width: 700px;
margin: 30px 0 0;
color: rgba(255,255,255,0.95);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 23px;
line-height: 1.55;
}
.ksr-hero-main b {
color: #e4bd62;
font-weight: 500;
}
/* DESCRIPTION */
.ksr-hero-text {
max-width: 650px;
margin-top: 14px;
color:
rgba(255,255,255,0.72);
font-family:
Arial,
sans-serif;
font-size: 16px;
line-height: 1.8;
}
/* BUTTON CONTAINER */
.ksr-hero-buttons {
display: flex;
align-items: center;
gap: 15px;
margin-top: 35px;
}
/* BUTTON */
.ksr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding:
15px 27px;
border-radius: 50px;
font-family:
Arial,
sans-serif;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
transition:
all 0.35s ease;
}
/* GOLD BUTTON */
.ksr-btn-primary {
background: #d8ad4a;
color: #082b1c !important;
box-shadow:
0 10px 30px
rgba(216,173,74,0.18);
}
.ksr-btn-primary span {
font-size: 18px;
transition:
transform 0.3s ease;
}
.ksr-btn-primary:hover {
background: #efd17e;
color: #062b1b !important;
transform:
translateY(-4px);
}
.ksr-btn-primary:hover span {
transform:
translateX(5px);
}
/* OUTLINE BUTTON */
.ksr-btn-outline {
color: #fff !important;
border:
1px solid
rgba(255,255,255,0.55);
}
.ksr-btn-outline:hover {
background: #fff;
color: #062b1b !important;
transform:
translateY(-4px);
}
/* =====================================================
DECORATIVE CIRCLE
===================================================== */
.ksr-hero-circle {
position: absolute;
z-index: 3;
right: 9%;
top: 50%;
transform:
translateY(-50%);
width: 360px;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid
rgba(216,173,74,0.55);
border-radius: 50%;
background:
rgba(255,255,255,0.045);
backdrop-filter:
blur(5px);
animation:
ksrFloat 5s ease-in-out infinite;
}
@keyframes ksrFloat {
0%,
100% {
margin-top: 0;
}
50% {
margin-top: -15px;
}
}
.ksr-circle-inner {
width: 275px;
height: 275px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 50%;
background:
rgba(4,42,26,0.82);
border:
1px solid
rgba(255,255,255,0.12);
box-shadow:
0 20px 60px
rgba(0,0,0,0.25);
}
.ksr-leaf {
font-size: 48px;
margin-bottom: 12px;
}
.ksr-circle-title {
color: #fff;
font-family:
Georgia,
serif;
font-size: 25px;
}
.ksr-circle-gold {
color: #e4bd62;
font-family:
Georgia,
serif;
font-size: 25px;
margin-top: 3px;
}
/* =====================================================
SCROLL INDICATOR
===================================================== */
.ksr-scroll {
position: absolute;
z-index: 10;
left: 50%;
bottom: 25px;
transform:
translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
color:
rgba(255,255,255,0.55);
font-family:
Arial,
sans-serif;
font-size: 9px;
letter-spacing: 3px;
}
.ksr-scroll i {
display: block;
width: 1px;
height: 45px;
margin-top: 10px;
background: #d8ad4a;
animation:
ksrScroll 1.5s infinite;
}
@keyframes ksrScroll {
0% {
transform:
scaleY(0);
transform-origin:
top;
}
50% {
transform:
scaleY(1);
transform-origin:
top;
}
100% {
transform:
scaleY(0);
transform-origin:
bottom;
}
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1100px) {
.ksr-hero-circle {
right: 3%;
width: 290px;
height: 290px;
}
.ksr-circle-inner {
width: 225px;
height: 225px;
}
.ksr-circle-title,
.ksr-circle-gold {
font-size: 21px;
}
.ksr-hero-content {
margin-left: 6%;
width: 65%;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 768px) {
.ksr-hero {
min-height: 850px;
align-items: center;
}
.ksr-hero-bg {
background-position:
65% center;
}
.ksr-hero-overlay {
background:
linear-gradient(
90deg,
rgba(3,35,22,0.96),
rgba(3,45,27,0.78)
);
}
.ksr-hero-content {
width: 90%;
margin: 0 auto;
padding-top: 50px;
}
.ksr-hero-label {
font-size: 10px;
letter-spacing: 3px;
}
.ksr-hero h1 {
font-size: 54px;
letter-spacing: -1px;
}
.ksr-hero h2 {
font-size: 32px;
}
.ksr-hero-main {
font-size: 19px;
}
.ksr-hero-text {
font-size: 14px;
line-height: 1.7;
}
.ksr-hero-buttons {
flex-direction: column;
align-items: flex-start;
}
.ksr-hero-circle {
display: none;
}
.ksr-scroll {
display: none;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 480px) {
.ksr-hero {
min-height: 780px;
}
.ksr-hero h1 {
font-size: 45px;
}
.ksr-hero h2 {
font-size: 28px;
}
.ksr-hero-main {
font-size: 17px;
}
.ksr-btn {
padding:
13px 22px;
font-size: 12px;
}
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-b0ee55d *//* =========================================================
KSR CHARITABLE TRUST
PURPOSE / ABOUT SECTION
========================================================= */
.ksr-purpose-section {
position: relative;
width: 100%;
padding:
110px 0 90px;
background:
#f7f8f4;
overflow: hidden;
}
/* =========================================================
DECORATIVE BACKGROUND
========================================================= */
.ksr-purpose-section::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: -220px;
top: -180px;
border-radius: 50%;
background:
rgba(20, 104, 47, 0.05);
pointer-events: none;
}
.ksr-purpose-section::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
left: -180px;
bottom: -180px;
border-radius: 50%;
background:
rgba(220, 182, 83, 0.08);
pointer-events: none;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.ksr-purpose-container {
position: relative;
z-index: 2;
width: min(1180px, 90%);
margin: 0 auto;
display: grid;
grid-template-columns:
1.1fr 0.9fr;
gap: 80px;
align-items: center;
}
/* =========================================================
SECTION LABEL
========================================================= */
.ksr-section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: #1c6b32;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
}
.ksr-section-label span {
display: block;
width: 40px;
height: 2px;
background: #dcb653;
}
/* =========================================================
HEADING
========================================================= */
.ksr-purpose-content h2 {
margin: 0;
color: #082f20;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(42px, 5vw, 68px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -1.5px;
}
.ksr-purpose-content h2 strong {
display: block;
color: #c59b35;
font-weight: 400;
}
/* =========================================================
INTRO
========================================================= */
.ksr-purpose-intro {
margin:
28px 0 18px;
padding-left: 20px;
border-left:
3px solid
#dcb653;
color: #174d31;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 21px;
line-height: 1.55;
}
/* =========================================================
BODY TEXT
========================================================= */
.ksr-purpose-content > p:not(.ksr-purpose-intro) {
max-width: 650px;
margin:
0 0 15px;
color: #59665d;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 15px;
line-height: 1.85;
}
/* =========================================================
BUTTON
========================================================= */
.ksr-purpose-btn {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 18px;
padding:
14px 25px;
border-radius: 50px;
background: #0b5b2b;
color: #ffffff !important;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration: none !important;
transition:
all .3s ease;
}
.ksr-purpose-btn:hover {
background: #dcb653;
color: #082f20 !important;
transform:
translateY(-3px);
}
.ksr-purpose-btn span {
font-size: 18px;
transition:
transform .3s ease;
}
.ksr-purpose-btn:hover span {
transform:
translateX(5px);
}
/* =========================================================
RIGHT VISUAL
========================================================= */
.ksr-purpose-visual {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
MAIN CIRCLE
========================================================= */
.ksr-purpose-circle {
width: 360px;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
#0b5b2b;
box-shadow:
0 25px 60px
rgba(4, 52, 28, 0.18);
position: relative;
}
.ksr-purpose-circle::before {
content: "";
position: absolute;
inset: -14px;
border:
1px solid
rgba(197,155,53,0.55);
border-radius: 50%;
}
.ksr-purpose-circle::after {
content: "";
position: absolute;
inset: 15px;
border:
1px solid
rgba(255,255,255,0.12);
border-radius: 50%;
}
.ksr-purpose-circle-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 29px;
line-height: 1.2;
}
.ksr-purpose-circle-inner strong {
color: #e4bb55;
font-size: 35px;
font-weight: 400;
}
.ksr-circle-small {
margin-bottom: 12px;
color:
rgba(255,255,255,0.65);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 4px;
}
/* =========================================================
FLOATING CARD
========================================================= */
.ksr-purpose-card {
position: absolute;
z-index: 5;
left: 0;
bottom: 20px;
width: 230px;
padding: 25px;
border-radius: 15px;
background: #ffffff;
box-shadow:
0 20px 50px
rgba(0,0,0,0.12);
border:
1px solid
rgba(10,80,40,0.08);
animation:
ksrCardFloat 4s
ease-in-out
infinite;
}
@keyframes ksrCardFloat {
0%,
100% {
transform:
translateY(0);
}
50% {
transform:
translateY(-8px);
}
}
.ksr-purpose-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(216,181,80,0.14);
font-size: 24px;
margin-bottom: 12px;
}
.ksr-purpose-number {
position: absolute;
top: 18px;
right: 20px;
color:
rgba(11,91,43,0.16);
font-family:
Georgia,
serif;
font-size: 30px;
font-weight: 700;
}
.ksr-purpose-card h3 {
margin: 0 0 7px;
color: #0a4728;
font-family:
Georgia,
serif;
font-size: 23px;
font-weight: 500;
}
.ksr-purpose-card p {
margin: 0;
color: #68736c;
font-family:
Arial,
sans-serif;
font-size: 12px;
line-height: 1.6;
}
/* =========================================================
VALUES
========================================================= */
.ksr-purpose-values {
position: relative;
z-index: 5;
width: min(1180px, 90%);
margin:
80px auto 0;
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 0;
border-top:
1px solid
rgba(10,70,38,0.12);
padding-top: 45px;
}
.ksr-purpose-value {
display: flex;
align-items: flex-start;
gap: 18px;
padding:
0 35px;
}
.ksr-purpose-value:first-child {
padding-left: 0;
}
.ksr-purpose-value + .ksr-purpose-value {
border-left:
1px solid
rgba(10,70,38,0.12);
}
/* VALUE ICON */
.ksr-value-icon {
width: 55px;
height: 55px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 23px;
}
.ksr-value-icon.education {
background:
rgba(24,71,132,0.10);
color: #173f78;
}
.ksr-value-icon.health {
background:
rgba(190,40,35,0.10);
color: #bd2f2a;
}
.ksr-value-icon.environment {
background:
rgba(20,111,54,0.10);
color: #146f36;
}
/* VALUE TEXT */
.ksr-purpose-value h3 {
margin: 2px 0 7px;
color: #123d26;
font-family:
Georgia,
serif;
font-size: 22px;
font-weight: 500;
}
.ksr-purpose-value p {
margin: 0;
color: #68736c;
font-family:
Arial,
sans-serif;
font-size: 12px;
line-height: 1.65;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.ksr-purpose-container {
grid-template-columns:
1fr;
gap: 60px;
}
.ksr-purpose-content {
text-align: center;
}
.ksr-section-label {
justify-content: center;
}
.ksr-purpose-intro {
text-align: left;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
.ksr-purpose-content > p:not(.ksr-purpose-intro) {
margin-left: auto;
margin-right: auto;
}
.ksr-purpose-visual {
min-height: 400px;
}
.ksr-purpose-values {
grid-template-columns:
1fr;
gap: 30px;
}
.ksr-purpose-value {
padding: 0 !important;
border-left: none !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.ksr-purpose-section {
padding:
75px 0 65px;
}
.ksr-purpose-container {
width: 88%;
gap: 45px;
}
.ksr-section-label {
font-size: 9px;
letter-spacing: 2px;
}
.ksr-purpose-content h2 {
font-size: 42px;
line-height: 1.08;
}
.ksr-purpose-intro {
font-size: 18px;
margin-top: 22px;
}
.ksr-purpose-content > p:not(.ksr-purpose-intro) {
font-size: 13px;
line-height: 1.75;
}
.ksr-purpose-visual {
min-height: 350px;
}
.ksr-purpose-circle {
width: 270px;
height: 270px;
}
.ksr-purpose-circle-inner {
font-size: 22px;
}
.ksr-purpose-circle-inner strong {
font-size: 27px;
}
.ksr-purpose-card {
left: 0;
bottom: 0;
width: 190px;
padding: 18px;
}
.ksr-purpose-card h3 {
font-size: 18px;
}
.ksr-purpose-card p {
font-size: 11px;
}
.ksr-purpose-values {
margin-top: 55px;
padding-top: 30px;
}
.ksr-purpose-value {
gap: 13px;
}
.ksr-value-icon {
width: 45px;
height: 45px;
font-size: 19px;
}
.ksr-purpose-value h3 {
font-size: 19px;
}
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-5a65168 *//* =========================================================
KSR CHARITABLE TRUST
OUR MISSION SECTION
========================================================= */
.ksr-mission-section {
position: relative;
width: 100%;
padding:
110px 0 80px;
overflow: hidden;
background:
#ffffff;
}
/* =========================================================
BACKGROUND DECORATION
========================================================= */
.ksr-mission-section::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
right: -280px;
top: -220px;
border-radius: 50%;
background:
rgba(15, 102, 45, 0.045);
pointer-events: none;
}
.ksr-mission-section::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
left: -200px;
bottom: -180px;
border-radius: 50%;
background:
rgba(218, 180, 74, 0.07);
pointer-events: none;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.ksr-mission-container {
position: relative;
z-index: 2;
width:
min(1200px, 90%);
margin:
0 auto;
display: grid;
grid-template-columns:
1.15fr 0.85fr;
gap: 60px;
align-items: center;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.ksr-mission-content {
position: relative;
z-index: 3;
}
/* =========================================================
LABEL
========================================================= */
.ksr-mission-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color:
#166632;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
}
.ksr-mission-label span {
width: 42px;
height: 2px;
background:
#dcb653;
}
/* =========================================================
HEADING
========================================================= */
.ksr-mission-content h2 {
margin: 0;
color:
#092f1e;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(42px, 5vw, 68px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -1.5px;
}
.ksr-mission-content h2 strong {
display: block;
color:
#c79d36;
font-weight: 400;
}
/* =========================================================
INTRO
========================================================= */
.ksr-mission-intro {
max-width: 680px;
margin:
27px 0 15px;
padding-left: 20px;
border-left:
3px solid
#dcb653;
color:
#28553b;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 19px;
line-height: 1.65;
}
/* =========================================================
DESCRIPTION
========================================================= */
.ksr-mission-description {
max-width: 680px;
margin:
0 0 28px;
color:
#69756d;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
MISSION CARDS
========================================================= */
.ksr-mission-cards {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 12px;
}
/* =========================================================
CARD
========================================================= */
.ksr-mission-card {
position: relative;
min-height: 220px;
padding:
23px 18px;
overflow: hidden;
border-radius: 14px;
background:
#f7f9f5;
border:
1px solid
rgba(10,70,38,0.08);
transition:
all 0.35s ease;
}
.ksr-mission-card:hover {
transform:
translateY(-7px);
box-shadow:
0 18px 40px
rgba(0,50,25,0.10);
}
/* =========================================================
CARD TOP BORDER
========================================================= */
.ksr-mission-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3px;
}
.education-card::before {
background:
#173f78;
}
.health-card::before {
background:
#c52f2b;
}
.environment-card::before {
background:
#16703a;
}
/* =========================================================
ICON
========================================================= */
.ksr-mission-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 17px;
border-radius: 50%;
font-size: 23px;
}
.education-card .ksr-mission-icon {
background:
rgba(23,63,120,0.10);
}
.health-card .ksr-mission-icon {
background:
rgba(197,47,43,0.10);
}
.environment-card .ksr-mission-icon {
background:
rgba(22,112,58,0.10);
}
/* =========================================================
CARD HEADING
========================================================= */
.ksr-mission-card h3 {
margin:
0 0 8px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 22px;
font-weight: 500;
}
.education-card h3 {
color:
#173f78;
}
.health-card h3 {
color:
#bd302b;
}
.environment-card h3 {
color:
#16703a;
}
/* =========================================================
CARD TEXT
========================================================= */
.ksr-mission-card p {
margin: 0;
color:
#69756d;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
line-height: 1.65;
}
/* =========================================================
NUMBER
========================================================= */
.ksr-mission-number {
position: absolute;
right: 13px;
top: 15px;
color:
rgba(10,60,35,0.10);
font-family:
Georgia,
serif;
font-size: 28px;
font-weight: 700;
}
/* =========================================================
RIGHT PERSON AREA
========================================================= */
.ksr-mission-person {
position: relative;
min-height: 600px;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* =========================================================
PERSON BACKGROUND CIRCLE
========================================================= */
.ksr-person-circle {
position: absolute;
top: 40px;
left: 50%;
transform:
translateX(-50%);
width: 430px;
height: 430px;
border-radius: 50%;
background:
linear-gradient(
145deg,
#eaf4e9,
#dcebdd
);
border:
1px solid
rgba(20,105,52,0.12);
box-shadow:
0 25px 60px
rgba(5,60,30,0.08);
}
/* CIRCLE TEXT */
.ksr-person-circle span {
position: absolute;
top: 65px;
left: 50%;
transform:
translateX(-50%);
color:
rgba(10,75,37,0.22);
font-family:
Arial,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 5px;
}
/* =========================================================
GLOW
========================================================= */
.ksr-person-glow {
position: absolute;
width: 430px;
height: 430px;
top: 35px;
left: 50%;
transform:
translateX(-50%);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(217,181,79,0.16),
transparent 65%
);
filter:
blur(15px);
}
/* =========================================================
PERSON IMAGE
========================================================= */
.ksr-person-image {
position: relative;
z-index: 4;
width: auto;
height: 570px;
max-width: 100%;
object-fit: contain;
object-position:
center bottom;
align-self:
flex-end;
filter:
drop-shadow(
0 18px 20px
rgba(0,0,0,0.12)
);
transition:
transform 0.5s ease;
}
.ksr-mission-person:hover
.ksr-person-image {
transform:
translateY(-8px);
}
/* =========================================================
QUOTE CARD
========================================================= */
.ksr-person-quote {
position: absolute;
z-index: 6;
right: -15px;
bottom: 80px;
width: 230px;
padding:
20px 22px;
border-radius: 14px;
background:
rgba(255,255,255,0.96);
box-shadow:
0 18px 45px
rgba(0,40,20,0.14);
border:
1px solid
rgba(10,70,38,0.08);
}
.quote-mark {
display: block;
height: 25px;
color:
#dcb653;
font-family:
Georgia,
serif;
font-size: 42px;
line-height: 30px;
}
.ksr-person-quote p {
margin:
7px 0 12px;
color:
#264d37;
font-family:
Georgia,
serif;
font-size: 13px;
line-height: 1.55;
}
.quote-line {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background:
#dcb653;
}
.ksr-person-quote small {
color:
#166632;
font-family:
Arial,
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
}
/* =========================================================
BOTTOM STATEMENT
========================================================= */
.ksr-mission-bottom {
position: relative;
z-index: 4;
width:
min(1000px, 88%);
margin:
80px auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.ksr-mission-bottom span {
width: 80px;
height: 1px;
background:
#dcb653;
}
.ksr-mission-bottom p {
margin: 0;
color:
#356047;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 18px;
font-style: italic;
text-align: center;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.ksr-mission-container {
grid-template-columns:
1fr;
gap: 60px;
}
.ksr-mission-content {
text-align: center;
}
.ksr-mission-label {
justify-content: center;
}
.ksr-mission-intro {
text-align: left;
margin-left: auto;
margin-right: auto;
}
.ksr-mission-description {
margin-left: auto;
margin-right: auto;
}
.ksr-mission-cards {
text-align: left;
}
.ksr-mission-person {
min-height: 600px;
width: 100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.ksr-mission-section {
padding:
75px 0 60px;
}
.ksr-mission-container {
width: 88%;
gap: 35px;
}
.ksr-mission-content h2 {
font-size: 41px;
line-height: 1.08;
}
.ksr-mission-intro {
font-size: 17px;
line-height: 1.55;
}
.ksr-mission-description {
font-size: 13px;
line-height: 1.75;
}
.ksr-mission-cards {
grid-template-columns:
1fr;
gap: 10px;
}
.ksr-mission-card {
min-height: auto;
display: flex;
align-items: flex-start;
gap: 15px;
padding: 18px;
}
.ksr-mission-icon {
margin-bottom: 0;
flex-shrink: 0;
}
.ksr-mission-card h3 {
font-size: 20px;
margin-bottom: 5px;
}
.ksr-mission-card p {
font-size: 11px;
}
.ksr-mission-number {
display: none;
}
.ksr-mission-person {
min-height: 520px;
}
.ksr-person-circle {
width: 320px;
height: 320px;
top: 30px;
}
.ksr-person-glow {
width: 320px;
height: 320px;
top: 25px;
}
.ksr-person-image {
height: 500px;
max-width: 90%;
}
.ksr-person-quote {
right: 0;
bottom: 30px;
width: 190px;
padding: 16px;
}
.ksr-person-quote p {
font-size: 11px;
}
.ksr-mission-bottom {
margin-top: 55px;
gap: 12px;
}
.ksr-mission-bottom span {
width: 30px;
}
.ksr-mission-bottom p {
font-size: 14px;
}
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-0861fdb *//* =========================================================
KSR CHARITABLE TRUST
WHAT WE DO SECTION
========================================================= */
.ksr-what-we-do {
position: relative;
width: 100%;
padding:
110px 0 95px;
background:
#f5f8f3;
overflow: hidden;
}
/* =========================================================
BACKGROUND DECORATION
========================================================= */
.ksr-what-we-do::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: -250px;
top: -250px;
border-radius: 50%;
background:
rgba(17, 102, 48, 0.05);
}
.ksr-what-we-do::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
left: -220px;
bottom: -220px;
border-radius: 50%;
background:
rgba(220, 182, 83, 0.07);
}
/* =========================================================
CONTAINER
========================================================= */
.ksr-what-container {
position: relative;
z-index: 2;
width:
min(1200px, 90%);
margin:
0 auto;
}
/* =========================================================
HEADER
========================================================= */
.ksr-what-header {
max-width: 780px;
margin:
0 auto 60px;
text-align: center;
}
/* LABEL */
.ksr-what-label {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 18px;
color:
#176432;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
}
.ksr-what-label span {
width: 38px;
height: 2px;
background:
#dcb653;
}
/* HEADING */
.ksr-what-header h2 {
margin: 0;
color:
#082f1e;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(42px, 5vw, 64px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -1px;
}
.ksr-what-header h2 strong {
display: block;
color:
#c69c38;
font-weight: 400;
}
/* DESCRIPTION */
.ksr-what-header p {
max-width: 680px;
margin:
22px auto 0;
color:
#657169;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
ACTIVITY GRID
========================================================= */
.ksr-activity-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 24px;
}
/* =========================================================
CARD
========================================================= */
.ksr-activity-card {
position: relative;
overflow: hidden;
background:
#ffffff;
border-radius:
18px;
border:
1px solid
rgba(10,70,38,0.08);
box-shadow:
0 8px 30px
rgba(10,60,30,0.06);
transition:
transform .4s ease,
box-shadow .4s ease;
}
.ksr-activity-card:hover {
transform:
translateY(-9px);
box-shadow:
0 22px 50px
rgba(10,60,30,0.13);
}
/* =========================================================
IMAGE
========================================================= */
.ksr-activity-image {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
}
.ksr-activity-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .6s ease;
}
.ksr-activity-card:hover
.ksr-activity-image img {
transform:
scale(1.08);
}
/* IMAGE DARK GRADIENT */
.ksr-activity-image::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 80px;
background:
linear-gradient(
transparent,
rgba(0,0,0,.38)
);
}
/* =========================================================
NUMBER
========================================================= */
.ksr-activity-number {
position: absolute;
z-index: 3;
top: 15px;
right: 15px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(5,55,31,.85);
color:
#e5bd59;
font-family:
Georgia,
serif;
font-size: 14px;
border:
1px solid
rgba(255,255,255,.25);
}
/* =========================================================
CARD CONTENT
========================================================= */
.ksr-activity-content {
position: relative;
padding:
24px 23px 25px;
}
/* ICON */
.ksr-activity-icon {
position: absolute;
right: 22px;
top: -25px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
#ffffff;
box-shadow:
0 6px 20px
rgba(0,0,0,.13);
font-size: 22px;
}
/* TITLE */
.ksr-activity-content h3 {
margin:
0 0 9px;
color:
#103c25;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 24px;
font-weight: 500;
}
/* TEXT */
.ksr-activity-content p {
min-height: 70px;
margin:
0 0 17px;
color:
#68736c;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
line-height: 1.7;
}
/* LINK */
.ksr-activity-content a {
display: inline-flex;
align-items: center;
gap: 8px;
color:
#176432 !important;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
text-decoration: none !important;
letter-spacing: .5px;
}
.ksr-activity-content a span {
font-size: 17px;
transition:
transform .3s ease;
}
.ksr-activity-content a:hover span {
transform:
translateX(5px);
}
/* =========================================================
4TH & 5TH CARDS
========================================================= */
.ksr-activity-card:nth-child(4) {
grid-column:
1 / 2;
}
.ksr-activity-card:nth-child(5) {
grid-column:
2 / 3;
}
/* =========================================================
BOTTOM STATEMENT
========================================================= */
.ksr-action-statement {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
margin-top: 70px;
}
.ksr-action-line {
width: 100px;
height: 1px;
background:
#dcb653;
}
.ksr-action-text {
text-align: center;
}
.ksr-action-text span {
display: block;
margin-bottom: 5px;
color:
#789081;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 3px;
}
.ksr-action-text strong {
color:
#176432;
font-family:
Georgia,
serif;
font-size: 21px;
font-weight: 400;
font-style: italic;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.ksr-activity-grid {
grid-template-columns:
repeat(2, 1fr);
}
.ksr-activity-card:nth-child(4),
.ksr-activity-card:nth-child(5) {
grid-column:
auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.ksr-what-we-do {
padding:
75px 0 65px;
}
.ksr-what-container {
width: 90%;
}
.ksr-what-header {
margin-bottom: 40px;
}
.ksr-what-label {
font-size: 9px;
letter-spacing: 2px;
}
.ksr-what-header h2 {
font-size: 42px;
}
.ksr-what-header p {
font-size: 13px;
line-height: 1.7;
}
.ksr-activity-grid {
grid-template-columns:
1fr;
gap: 18px;
}
.ksr-activity-image {
height: 230px;
}
.ksr-activity-content {
padding:
23px 20px;
}
.ksr-activity-content h3 {
font-size: 22px;
}
.ksr-activity-content p {
min-height: auto;
font-size: 12px;
}
.ksr-action-statement {
margin-top: 50px;
gap: 10px;
}
.ksr-action-line {
width: 30px;
}
.ksr-action-text strong {
font-size: 15px;
}
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-d4e57b0 *//* =========================================================
KSR CHARITABLE TRUST
OUR VISION SECTION
========================================================= */
.ksr-vision-section {
position: relative;
width: 100%;
padding:
115px 0 100px;
overflow: hidden;
background:
#073b24;
color: #ffffff;
}
/* =========================================================
BACKGROUND
========================================================= */
.ksr-vision-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 15% 20%,
rgba(71,150,83,0.18),
transparent 30%
),
radial-gradient(
circle at 85% 75%,
rgba(220,182,83,0.10),
transparent 30%
);
pointer-events: none;
}
.ksr-vision-section::after {
content: "";
position: absolute;
width: 700px;
height: 700px;
left: 50%;
top: 50%;
transform:
translate(-50%, -50%);
border:
1px solid
rgba(255,255,255,0.035);
border-radius: 50%;
box-shadow:
0 0 0 80px
rgba(255,255,255,0.015),
0 0 0 160px
rgba(255,255,255,0.01);
pointer-events: none;
}
/* =========================================================
CONTAINER
========================================================= */
.ksr-vision-container {
position: relative;
z-index: 2;
width:
min(1200px, 90%);
margin:
0 auto;
}
/* =========================================================
HEADER
========================================================= */
.ksr-vision-header {
max-width: 800px;
margin:
0 auto 45px;
text-align: center;
}
/* LABEL */
.ksr-vision-label {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
margin-bottom: 20px;
color:
#e1bb59;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
}
.ksr-vision-label span {
width: 42px;
height: 1px;
background:
#dcb653;
}
/* HEADING */
.ksr-vision-header h2 {
margin: 0;
color:
#ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(44px, 5vw, 68px);
font-weight: 400;
line-height: 1.04;
letter-spacing: -1px;
}
.ksr-vision-header h2 strong {
display: block;
color:
#e1bb59;
font-weight: 400;
}
/* DESCRIPTION */
.ksr-vision-header p {
max-width: 700px;
margin:
22px auto 0;
color:
rgba(255,255,255,0.68);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
MAIN QUOTE
========================================================= */
.ksr-vision-quote {
position: relative;
max-width: 1000px;
margin:
0 auto 60px;
padding:
35px 50px;
text-align: center;
border-top:
1px solid
rgba(220,182,83,0.35);
border-bottom:
1px solid
rgba(220,182,83,0.35);
}
.ksr-quote-mark {
position: absolute;
left: 5px;
top: 18px;
color:
rgba(220,182,83,0.25);
font-family:
Georgia,
serif;
font-size: 80px;
line-height: 1;
}
.ksr-vision-quote h3 {
margin: 0;
color:
#ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(22px, 3vw, 34px);
font-weight: 400;
line-height: 1.5;
}
.ksr-vision-quote h3 span {
margin:
0 8px;
color:
#dcb653;
}
.ksr-quote-line {
display: block;
width: 55px;
height: 2px;
margin:
20px auto 0;
background:
#dcb653;
}
/* =========================================================
VISION GRID
========================================================= */
.ksr-vision-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
}
/* =========================================================
VISION CARD
========================================================= */
.ksr-vision-card {
position: relative;
min-height: 405px;
padding:
35px 30px;
overflow: hidden;
border-radius: 18px;
background:
rgba(255,255,255,0.065);
border:
1px solid
rgba(255,255,255,0.10);
backdrop-filter:
blur(8px);
transition:
transform .4s ease,
background .4s ease,
border-color .4s ease;
}
.ksr-vision-card:hover {
transform:
translateY(-9px);
background:
rgba(255,255,255,0.10);
border-color:
rgba(220,182,83,0.45);
}
/* =========================================================
CARD NUMBER
========================================================= */
.ksr-vision-card-number {
position: absolute;
top: 20px;
right: 23px;
color:
rgba(255,255,255,0.10);
font-family:
Georgia,
serif;
font-size: 42px;
font-weight: 700;
}
/* =========================================================
CARD ICON
========================================================= */
.ksr-vision-icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
border-radius: 50%;
background:
rgba(255,255,255,0.08);
border:
1px solid
rgba(255,255,255,0.12);
font-size: 30px;
transition:
transform .4s ease;
}
.ksr-vision-card:hover
.ksr-vision-icon {
transform:
scale(1.08)
rotate(-4deg);
}
/* =========================================================
CARD TITLE
========================================================= */
.ksr-vision-card h3 {
margin:
0 0 17px;
color:
#ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 27px;
font-weight: 400;
line-height: 1.2;
}
.ksr-vision-card h3 strong {
display: block;
margin-top: 4px;
font-weight: 400;
}
/* EDUCATION */
.ksr-vision-education h3 strong {
color:
#78aeea;
}
/* SERVICE */
.ksr-vision-service h3 strong {
color:
#e6bd5a;
}
/* ENVIRONMENT */
.ksr-vision-environment h3 strong {
color:
#72c77e;
}
/* =========================================================
CARD TEXT
========================================================= */
.ksr-vision-card p {
margin: 0;
color:
rgba(255,255,255,0.62);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
line-height: 1.8;
}
/* =========================================================
CARD LINE
========================================================= */
.ksr-vision-card-line {
width: 45px;
height: 2px;
margin-top: 27px;
background:
#dcb653;
}
/* =========================================================
CARD TAG
========================================================= */
.ksr-vision-tag {
display: block;
margin-top: 12px;
color:
rgba(255,255,255,0.38);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
}
/* =========================================================
BOTTOM DREAM
========================================================= */
.ksr-vision-bottom {
max-width: 900px;
margin:
60px auto 0;
padding:
24px 30px;
display: flex;
align-items: center;
gap: 20px;
border:
1px solid
rgba(220,182,83,0.20);
border-radius: 14px;
background:
rgba(255,255,255,0.035);
}
.ksr-vision-bottom-icon {
width: 55px;
height: 55px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(220,182,83,0.12);
font-size: 25px;
}
.ksr-vision-bottom-content span {
display: block;
margin-bottom: 5px;
color:
#dcb653;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 3px;
}
.ksr-vision-bottom-content p {
margin: 0;
color:
rgba(255,255,255,0.72);
font-family:
Georgia,
serif;
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.ksr-vision-grid {
grid-template-columns:
1fr;
max-width: 650px;
margin:
0 auto;
}
.ksr-vision-card {
min-height: auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.ksr-vision-section {
padding:
75px 0 65px;
}
.ksr-vision-container {
width: 90%;
}
.ksr-vision-label {
font-size: 9px;
letter-spacing: 2px;
}
.ksr-vision-header h2 {
font-size: 42px;
}
.ksr-vision-header p {
font-size: 13px;
line-height: 1.7;
}
.ksr-vision-quote {
margin-bottom: 40px;
padding:
25px 18px;
}
.ksr-quote-mark {
display: none;
}
.ksr-vision-quote h3 {
font-size: 21px;
line-height: 1.6;
}
.ksr-vision-quote h3 span {
margin:
0 3px;
}
.ksr-vision-card {
padding:
27px 23px;
border-radius: 15px;
}
.ksr-vision-icon {
width: 60px;
height: 60px;
margin-bottom: 20px;
font-size: 25px;
}
.ksr-vision-card h3 {
font-size: 24px;
}
.ksr-vision-card p {
font-size: 12px;
line-height: 1.75;
}
.ksr-vision-bottom {
padding:
18px;
gap: 13px;
}
.ksr-vision-bottom-icon {
width: 45px;
height: 45px;
font-size: 20px;
}
.ksr-vision-bottom-content p {
font-size: 12px;
}
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-21a88de *//* =========================================================
KSR CHARITABLE TRUST
IMPACT / OUR JOURNEY
========================================================= */
.ksr-impact-section {
position: relative;
width: 100%;
padding:
115px 0 100px;
overflow: hidden;
background:
#062f1d;
color: #ffffff;
}
/* =========================================================
BACKGROUND
========================================================= */
.ksr-impact-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 20% 20%,
rgba(61,142,75,0.17),
transparent 30%
),
radial-gradient(
circle at 80% 80%,
rgba(220,182,83,0.10),
transparent 30%
);
pointer-events: none;
}
.ksr-impact-bg-circle {
position: absolute;
border-radius: 50%;
border:
1px solid
rgba(255,255,255,0.035);
pointer-events: none;
}
.ksr-impact-bg-one {
width: 500px;
height: 500px;
right: -250px;
top: -250px;
}
.ksr-impact-bg-two {
width: 350px;
height: 350px;
left: -180px;
bottom: -180px;
}
/* =========================================================
CONTAINER
========================================================= */
.ksr-impact-container {
position: relative;
z-index: 2;
width:
min(1200px, 90%);
margin:
0 auto;
}
/* =========================================================
HEADER
========================================================= */
.ksr-impact-header {
max-width: 800px;
margin:
0 auto 60px;
text-align: center;
}
.ksr-impact-label {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
margin-bottom: 20px;
color:
#e0ba58;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 4px;
}
.ksr-impact-label span {
width: 40px;
height: 1px;
background:
#dcb653;
}
.ksr-impact-header h2 {
margin: 0;
color:
#ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(43px, 5vw, 66px);
font-weight: 400;
line-height: 1.05;
}
.ksr-impact-header h2 strong {
display: block;
color:
#dfb957;
font-weight: 400;
}
.ksr-impact-header p {
max-width: 690px;
margin:
22px auto 0;
color:
rgba(255,255,255,0.62);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
COUNTERS
========================================================= */
.ksr-impact-counters {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 1px;
margin-bottom: 90px;
background:
rgba(255,255,255,0.12);
border:
1px solid
rgba(255,255,255,0.10);
border-radius: 18px;
overflow: hidden;
}
.ksr-impact-counter {
position: relative;
min-height: 270px;
padding:
35px 25px;
text-align: center;
background:
rgba(255,255,255,0.035);
transition:
background .35s ease;
}
.ksr-impact-counter:hover {
background:
rgba(255,255,255,0.075);
}
/* =========================================================
ICON
========================================================= */
.ksr-impact-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin:
0 auto 20px;
border-radius: 50%;
background:
rgba(220,182,83,0.10);
border:
1px solid
rgba(220,182,83,0.25);
font-size: 24px;
}
/* =========================================================
NUMBER
========================================================= */
.ksr-counter-number {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 8px;
color:
#ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 54px;
line-height: 1;
}
.ksr-plus {
margin-left: 3px;
color:
#dfb957;
font-size: 30px;
}
/* =========================================================
COUNTER TITLE
========================================================= */
.ksr-impact-counter h3 {
margin:
0 0 8px;
color:
#ffffff;
font-family:
Georgia,
serif;
font-size: 19px;
font-weight: 400;
}
.ksr-impact-counter p {
max-width: 180px;
margin:
0 auto;
color:
rgba(255,255,255,0.48);
font-family:
Arial,
sans-serif;
font-size: 10px;
line-height: 1.6;
}
/* =========================================================
JOURNEY
========================================================= */
.ksr-journey {
position: relative;
padding:
0 0 20px;
}
.ksr-journey-heading {
text-align: center;
margin-bottom: 50px;
}
.ksr-journey-heading > span {
display: block;
margin-bottom: 10px;
color:
#dcb653;
font-family:
Arial,
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 4px;
}
.ksr-journey-heading h3 {
margin: 0;
color:
#ffffff;
font-family:
Georgia,
serif;
font-size:
clamp(30px, 4vw, 45px);
font-weight: 400;
line-height: 1.1;
}
.ksr-journey-heading h3 strong {
color:
#dcb653;
font-weight: 400;
}
/* =========================================================
TIMELINE
========================================================= */
.ksr-journey-items {
position: relative;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 20px;
}
.ksr-journey-line {
position: absolute;
left: 12.5%;
right: 12.5%;
top: 16px;
height: 1px;
background:
rgba(220,182,83,0.35);
}
/* =========================================================
JOURNEY ITEM
========================================================= */
.ksr-journey-item {
position: relative;
text-align: center;
padding-top: 0;
}
/* DOT */
.ksr-journey-dot {
position: relative;
z-index: 3;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
margin:
0 auto 20px;
border-radius: 50%;
background:
#062f1d;
border:
1px solid
#dcb653;
}
.ksr-journey-dot span {
width: 8px;
height: 8px;
border-radius: 50%;
background:
#dcb653;
}
/* CURRENT */
.ksr-journey-current {
box-shadow:
0 0 0 7px
rgba(220,182,83,0.08);
animation:
ksrPulse 2s
infinite;
}
@keyframes ksrPulse {
0%,
100% {
box-shadow:
0 0 0 5px
rgba(220,182,83,0.08);
}
50% {
box-shadow:
0 0 0 12px
rgba(220,182,83,0.03);
}
}
/* YEAR */
.ksr-journey-year {
margin-bottom: 10px;
color:
#dcb653;
font-family:
Arial,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
/* CONTENT */
.ksr-journey-content {
padding:
0 10px;
}
.ksr-journey-content h4 {
margin:
0 0 8px;
color:
#ffffff;
font-family:
Georgia,
serif;
font-size: 19px;
font-weight: 400;
}
.ksr-journey-content p {
margin: 0;
color:
rgba(255,255,255,0.45);
font-family:
Arial,
sans-serif;
font-size: 10px;
line-height: 1.7;
}
/* =========================================================
IMPACT STATEMENT
========================================================= */
.ksr-impact-statement {
max-width: 850px;
margin:
75px auto 0;
padding:
25px 30px;
display: flex;
align-items: center;
gap: 20px;
border:
1px solid
rgba(220,182,83,0.22);
border-radius: 14px;
background:
rgba(255,255,255,0.035);
}
.ksr-impact-statement-icon {
width: 55px;
height: 55px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(220,182,83,0.12);
font-size: 25px;
}
.ksr-impact-statement span {
display: block;
margin-bottom: 5px;
color:
#dcb653;
font-family:
Arial,
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 3px;
}
.ksr-impact-statement p {
margin: 0;
color:
rgba(255,255,255,0.72);
font-family:
Georgia,
serif;
font-size: 17px;
line-height: 1.5;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.ksr-impact-counters {
grid-template-columns:
repeat(2, 1fr);
}
.ksr-journey-items {
grid-template-columns:
repeat(2, 1fr);
gap: 40px 20px;
}
.ksr-journey-line {
display: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.ksr-impact-section {
padding:
75px 0 65px;
}
.ksr-impact-container {
width: 90%;
}
.ksr-impact-label {
font-size: 9px;
letter-spacing: 2px;
}
.ksr-impact-header h2 {
font-size: 42px;
}
.ksr-impact-header p {
font-size: 13px;
line-height: 1.7;
}
.ksr-impact-counters {
grid-template-columns:
1fr;
margin-bottom: 65px;
}
.ksr-impact-counter {
min-height: auto;
padding:
30px 20px;
}
.ksr-counter-number {
font-size: 48px;
}
.ksr-journey-items {
grid-template-columns:
1fr;
gap: 35px;
}
.ksr-journey-heading h3 {
font-size: 32px;
}
.ksr-impact-statement {
padding:
18px;
gap: 13px;
}
.ksr-impact-statement-icon {
width: 45px;
height: 45px;
font-size: 20px;
}
.ksr-impact-statement p {
font-size: 13px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-10e6cac *//* =========================================================
KSR CHARITABLE TRUST
CALL TO ACTION SECTION
========================================================= */
.ksr-cta-section {
position: relative;
width: 100%;
padding:
110px 0 75px;
overflow: hidden;
background:
linear-gradient(
135deg,
#073b24 0%,
#052c1b 55%,
#062719 100%
);
color: #ffffff;
}
/* =========================================================
BACKGROUND
========================================================= */
.ksr-cta-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 75% 50%,
rgba(76,150,80,0.16),
transparent 30%
),
radial-gradient(
circle at 10% 90%,
rgba(220,182,83,0.09),
transparent 25%
);
pointer-events: none;
}
.ksr-cta-bg-shape {
position: absolute;
border-radius: 50%;
border:
1px solid
rgba(255,255,255,0.045);
pointer-events: none;
}
.ksr-cta-shape-one {
width: 600px;
height: 600px;
right: -300px;
top: -220px;
}
.ksr-cta-shape-two {
width: 350px;
height: 350px;
left: -200px;
bottom: -220px;
}
/* =========================================================
CONTAINER
========================================================= */
.ksr-cta-container {
position: relative;
z-index: 2;
width:
min(1180px, 90%);
margin:
0 auto;
display: grid;
grid-template-columns:
1fr 0.85fr;
gap: 70px;
align-items: center;
}
/* =========================================================
LABEL
========================================================= */
.ksr-cta-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color:
#e1bb59;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 4px;
}
.ksr-cta-label span {
width: 42px;
height: 1px;
background:
#dcb653;
}
/* =========================================================
HEADING
========================================================= */
.ksr-cta-content h2 {
max-width: 680px;
margin: 0;
color:
#ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(44px, 5vw, 68px);
font-weight: 400;
line-height: 1.04;
letter-spacing: -1px;
}
.ksr-cta-content h2 strong {
display: block;
color:
#dfb957;
font-weight: 400;
}
/* =========================================================
INTRO
========================================================= */
.ksr-cta-intro {
max-width: 650px;
margin:
28px 0 15px;
padding-left: 20px;
border-left:
3px solid
#dcb653;
color:
rgba(255,255,255,0.86);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 20px;
line-height: 1.6;
}
/* =========================================================
TEXT
========================================================= */
.ksr-cta-text {
max-width: 650px;
margin: 0;
color:
rgba(255,255,255,0.58);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
BUTTONS
========================================================= */
.ksr-cta-buttons {
display: flex;
align-items: center;
gap: 14px;
margin-top: 30px;
}
.ksr-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding:
15px 25px;
border-radius: 50px;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 700;
text-decoration: none !important;
transition:
all .35s ease;
}
/* PRIMARY */
.ksr-cta-primary {
background:
#dcb653;
color:
#07351f !important;
box-shadow:
0 10px 30px
rgba(0,0,0,0.18);
}
.ksr-cta-primary:hover {
background:
#f0cf72;
color:
#07351f !important;
transform:
translateY(-4px);
}
.ksr-cta-primary span {
font-size: 17px;
transition:
transform .3s ease;
}
.ksr-cta-primary:hover span {
transform:
translateX(5px);
}
/* SECONDARY */
.ksr-cta-secondary {
color:
#ffffff !important;
background:
rgba(255,255,255,0.05);
border:
1px solid
rgba(255,255,255,0.45);
}
.ksr-cta-secondary:hover {
background:
#ffffff;
color:
#07351f !important;
transform:
translateY(-4px);
}
/* =========================================================
RIGHT VISUAL
========================================================= */
.ksr-cta-visual {
position: relative;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
MAIN CIRCLE
========================================================= */
.ksr-cta-circle {
position: relative;
width: 370px;
height: 370px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
radial-gradient(
circle,
#17633a 0%,
#0b4a2c 55%,
#06351f 100%
);
border:
1px solid
rgba(220,182,83,0.45);
box-shadow:
0 30px 70px
rgba(0,0,0,0.25);
}
.ksr-cta-circle::before {
content: "";
position: absolute;
inset: -14px;
border:
1px solid
rgba(220,182,83,0.25);
border-radius: 50%;
}
.ksr-cta-circle::after {
content: "";
position: absolute;
inset: 18px;
border:
1px solid
rgba(255,255,255,0.08);
border-radius: 50%;
}
/* =========================================================
CIRCLE CONTENT
========================================================= */
.ksr-cta-circle-inner {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family:
Georgia,
serif;
line-height: 1.1;
}
.ksr-cta-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 17px;
border-radius: 50%;
background:
rgba(220,182,83,0.12);
border:
1px solid
rgba(220,182,83,0.30);
font-size: 25px;
}
.ksr-cta-circle-inner > span {
margin-bottom: 8px;
color:
rgba(255,255,255,0.55);
font-family:
Arial,
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 4px;
}
.ksr-cta-circle-inner strong {
color:
#ffffff;
font-size: 30px;
font-weight: 400;
}
.ksr-cta-circle-inner strong.gold {
color:
#dfb957;
}
/* =========================================================
FLOATING MINI CARDS
========================================================= */
.ksr-cta-mini-card {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
gap: 11px;
width: 185px;
padding:
12px 14px;
border-radius: 12px;
background:
rgba(255,255,255,0.96);
box-shadow:
0 15px 35px
rgba(0,0,0,0.20);
animation:
ksrCtaFloat 4s
ease-in-out
infinite;
}
@keyframes ksrCtaFloat {
0%,
100% {
transform:
translateY(0);
}
50% {
transform:
translateY(-8px);
}
}
.mini-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background:
#eef4ed;
font-size: 18px;
}
.ksr-cta-mini-card strong {
display: block;
color:
#12462a;
font-family:
Georgia,
serif;
font-size: 15px;
font-weight: 500;
}
.ksr-cta-mini-card small {
display: block;
margin-top: 3px;
color:
#718078;
font-family:
Arial,
sans-serif;
font-size: 8px;
}
/* POSITIONS */
.card-one {
left: -10px;
top: 75px;
}
.card-two {
right: -15px;
top: 180px;
animation-delay:
-1.3s;
}
.card-three {
left: 10px;
bottom: 45px;
animation-delay:
-2.4s;
}
/* =========================================================
BOTTOM MESSAGE
========================================================= */
.ksr-cta-bottom {
position: relative;
z-index: 3;
width:
min(800px, 90%);
margin:
75px auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.ksr-cta-bottom span {
width: 70px;
height: 1px;
background:
rgba(220,182,83,0.6);
}
.ksr-cta-bottom p {
margin: 0;
color:
rgba(255,255,255,0.65);
font-family:
Georgia,
serif;
font-size: 17px;
font-style: italic;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.ksr-cta-container {
grid-template-columns:
1fr;
gap: 60px;
}
.ksr-cta-content {
text-align: center;
}
.ksr-cta-label {
justify-content: center;
}
.ksr-cta-intro {
text-align: left;
margin-left: auto;
margin-right: auto;
}
.ksr-cta-text {
margin-left: auto;
margin-right: auto;
}
.ksr-cta-buttons {
justify-content: center;
}
.ksr-cta-visual {
min-height: 470px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.ksr-cta-section {
padding:
75px 0 60px;
}
.ksr-cta-container {
width: 90%;
gap: 35px;
}
.ksr-cta-label {
font-size: 8px;
letter-spacing: 2px;
}
.ksr-cta-content h2 {
font-size: 42px;
}
.ksr-cta-intro {
font-size: 17px;
}
.ksr-cta-text {
font-size: 12px;
line-height: 1.75;
}
.ksr-cta-buttons {
flex-direction: column;
gap: 9px;
}
.ksr-cta-btn {
width: 210px;
padding:
13px 20px;
}
.ksr-cta-visual {
min-height: 420px;
}
.ksr-cta-circle {
width: 285px;
height: 285px;
}
.ksr-cta-circle-inner strong {
font-size: 24px;
}
.ksr-cta-mini-card {
width: 155px;
padding:
9px 10px;
}
.card-one {
left: -5px;
top: 55px;
}
.card-two {
right: -5px;
top: 155px;
}
.card-three {
left: -5px;
bottom: 35px;
}
.ksr-cta-bottom {
margin-top: 50px;
gap: 10px;
}
.ksr-cta-bottom span {
width: 30px;
}
.ksr-cta-bottom p {
font-size: 13px;
text-align: center;
}
}/* End custom CSS */