/* ==========================================================
HERO - UPDATED IMAGE + BETTER TEXT READABILITY
========================================================== */
.sj-about-hero {
position: relative;
width: 100vw;
min-height: 700px;
height: 82vh;
max-height: 900px;
margin-left: calc(50% - 50vw);
display: flex;
align-items: flex-end;
/* NEW HERO IMAGE + STRONGER LEFT OVERLAY */
background-image:
linear-gradient(
90deg,
rgba(18, 32, 25, 0.94) 0%,
rgba(18, 32, 25, 0.88) 25%,
rgba(18, 32, 25, 0.72) 45%,
rgba(18, 32, 25, 0.40) 68%,
rgba(18, 32, 25, 0.15) 100%
),
linear-gradient(
0deg,
rgba(18, 30, 24, 0.55) 0%,
rgba(18, 30, 24, 0.12) 60%,
rgba(18, 30, 24, 0.12) 100%
),
url("https://surjivan.com/wp-content/uploads/2026/09/DSC01353-scaled.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.sj-about-hero-inner {
width: min(1180px, calc(100% - 64px));
margin: 0 auto;
padding: 220px 0 82px;
}
.sj-about-hero-content {
max-width: 780px;
}
/* SMALL TOP LABEL */
.sj-about-hero-kicker {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
color: #ffffff;
font-family: "Raleway", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.sj-about-hero-kicker::before {
content: "";
width: 36px;
height: 2px;
background: #e1aa3b;
}
/* MAIN ABOUT SURJIVAN HEADING */
.sj-about-hero h1 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(64px, 7vw, 105px);
line-height: 0.96;
font-weight: 400;
letter-spacing: -2px;
text-shadow:
0 3px 18px rgba(0,0,0,0.28),
0 1px 3px rgba(0,0,0,0.25);
}
/* ORANGE ITALIC SECOND LINE */
.sj-about-hero h1 span {
display: block;
margin-top: 16px;
color: #f1a16d;
font-size: 0.53em;
line-height: 1.12;
font-style: italic;
font-weight: 400;
letter-spacing: -1px;
text-shadow:
0 3px 14px rgba(0,0,0,0.38),
0 1px 2px rgba(0,0,0,0.35);
}
/* HERO DESCRIPTION */
.sj-about-hero-subtitle {
max-width: 670px;
margin: 32px 0 0;
color: #ffffff;
font-family: "Playfair Display", Georgia, serif;
font-size: 21px;
line-height: 1.7;
font-weight: 400;
font-style: italic;
text-shadow:
0 2px 10px rgba(0,0,0,0.55),
0 1px 3px rgba(0,0,0,0.45);
}
/* SCROLL INDICATOR */
.sj-about-scroll {
position: absolute;
right: 42px;
bottom: 42px;
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,0.9);
font-family: "Raleway", Arial, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
transform: rotate(-90deg);
transform-origin: right bottom;
}
.sj-about-scroll-line {
width: 46px;
height: 1px;
background: #e1aa3b;
}
/* ==========================================================
MOBILE HERO
========================================================== */
@media only screen and (max-width: 767px) {
.sj-about-hero {
min-height: 650px;
height: 78vh;
/* Keep building visible on mobile */
background-position: 58% center;
background-image:
linear-gradient(
90deg,
rgba(18, 32, 25, 0.90) 0%,
rgba(18, 32, 25, 0.78) 55%,
rgba(18, 32, 25, 0.38) 100%
),
linear-gradient(
0deg,
rgba(18, 30, 24, 0.58) 0%,
rgba(18, 30, 24, 0.12) 70%
),
url("https://surjivan.com/wp-content/uploads/2026/09/DSC01353-scaled.jpg");
}
.sj-about-hero-inner {
width: calc(100% - 36px);
padding: 150px 0 55px;
}
.sj-about-hero-content {
max-width: 100%;
}
.sj-about-hero h1 {
font-size: 57px;
letter-spacing: -1px;
}
.sj-about-hero h1 span {
margin-top: 12px;
font-size: 0.53em;
line-height: 1.18;
}
.sj-about-hero-subtitle {
max-width: 94%;
margin-top: 27px;
font-size: 18px;
line-height: 1.65;
}
.sj-about-scroll {
display: none;
}
}
