.hero {
position: relative;
height: 890px;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
.hero-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}  .hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: translateX(-100%);
transition: transform 1.4s cubic-bezier(0.7, 0, 0.3, 1); background-image: var(--bg-desktop); 
} @media (max-width: 768px) {
.hero-bg { background-image: var(--bg-mobile); 
}
}
.hero-slide.active .hero-bg {
transform: translateX(0);
} .hero-slide.exit .hero-bg {
transform: translateX(100%);
transition: transform 1.4s cubic-bezier(0.7, 0, 0.3, 1);
} .hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
} .hero-content {
position: relative;
top: 55%;
left: 45px;
max-width: 944px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 32px;
padding: 48px;
border-radius: 48px;
color: var(--text-white);
background: #E20082CC;
}
:lang(my) .hero-content {
max-width: 1000px;
} .hero-title {
font-weight: 700;
font-style: normal;
font-size: 64px;
letter-spacing: -1%;
line-height: 80px;
opacity: 0;
transform: translateY(100px);
transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.4s ease;
color: var(--text-white);
} :lang(my) .hero-title {
font-size: 48px;
letter-spacing: -0.01em;
}
.hero-slide.active .hero-title {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}  .btn-hero {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
background: transparent;
border: 1px solid var(--text-white);
border-radius: 120px;
color: var(--text-white);
font-size: 16px;
font-weight: 500;
width: fit-content;
transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.4s ease, background 0.3s;
opacity: 0;
transform: translateY(80px);
}
.hero-slide.active .btn-hero {
opacity: 1;
transform: translateY(0);
transition-delay: 0.7s;
}
.btn-hero:hover {
background: rgba(255, 255, 255, 0.3);
} .section-title {
margin-bottom: 12px;
}
.section-p {
max-width: 496px;
margin-bottom: 24px;
} .section-tracker {
padding: 7rem 0;
background: var(--bg-gray);
} .tracker-wraper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}  .section-journey {
padding: 80px 0;
background: var(--bg-white);
}
.journey-content {
max-width: 912px;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
} .tabs-container {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 4rem;
}
.tab-btn {
padding: 0.625rem 2rem;
border-radius: 9999px;
font-weight: 500;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: -1.1%;
border: 2px solid var(--border-light);
color: var(--text-soft);
transition: all 0.3s;
}
.tab-btn.active {
border-color: var(--primary);
color: var(--primary);
}  .methods-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
}
.method-card {
background: var(--bg-white);
border-radius: 24px;
padding: 32px 24px;
border: 1px solid var(--border-light);
box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
display: flex;
flex-direction: column;
text-align: left;
min-width: 0;
}
.method-image-wrapper {
aspect-ratio: 4/3;
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
width: 100%;
} .method-backdrop {
position: absolute;
inset: 0;
margin: auto;
width: 75%;
height: 75%;
background: var(--bg-gray);
border-radius: 50%;
opacity: 1;
transition: transform 0.5s;
}
.method-card:hover .method-backdrop {
transform: scale(1.05);
}
.method-image-wrapper img {
position: relative;
z-index: 1;
width: 90%;
height: auto;
transition: transform 0.5s;
max-width: 259px;
}
.method-card:hover img {
transform: scale(1.05);
}
.method-content-wrapper {
display: flex;
flex-direction: column;
flex: 1;
}
.method-title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
} .method-desc {
flex: 1;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
.method-content-wrapper .primary-btn {
margin-top: 2rem;
width: fit-content;
} .stories {
padding: 100px 0;
background: var(--bg-weak);
} .stories-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.stories-image {
flex: 1;
}
.stories-image img {
width: 100%;
max-width: 520px;
display: block;
}
.stories-content {
flex: 1;
max-width: 605px;
}
.stories-content h2 {
margin-bottom: 22px;
}
.stories-content p {
margin-bottom: 32px;
} .activities {
padding: 100px 0;
background: var(--bg-white);
}
.activities-header {
max-width: 700px;
margin-bottom: 50px;
}
.activities-header h2 {
margin-bottom: 18px;
} .activities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
} .activity-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 24px;
overflow: hidden;
transition: 0.3s ease;
}
.activity-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
} .activity-image {
padding: 14px;
}
.activity-image img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 18px;
display: block;
} .activity-content {
padding: 16px;
}
.activity-date {
font-weight: 500;
font-style: normal;
font-size: 12px;
color: var(--text-soft);
line-height: 16px;
letter-spacing: 0%;
}
.activity-content h3 {
margin: 8px 0 12px;
}  @media (max-width: 1024px) {
.hero-content {
max-width: 750px;
left: 25px;
padding: 36px;
border-radius: 36px;
}
:lang(my) .hero-content {
max-width: 750px;
}
.hero-title {
font-size: 48px;
line-height: 1.15;
}
:lang(my) .hero-title {
font-size: 36px;
}
} @media (max-width: 991px) { .stories {
padding: 8vw 0;
}
.stories-wrapper {
flex-direction: column;
gap: 5vw;
}
.stories-content {
max-width: 100%;
}
.stories-image img {
margin: 0 auto;
} .activities {
padding: 8vw 0;
}
.activities-grid {
grid-template-columns: repeat(2, 1fr);
gap: 3vw;
} .methods-grid {
grid-template-columns: repeat(2, 1fr);
gap: 3vw;
}
} @media (max-width: 768px) {  .hero-content {
top: 65%;
left: 0;
margin: 0 18px;
}
.hero-title {
font-size: 32px;
line-height: 1.15;
}
:lang(my) .hero-title {
font-size: 30px;
}
.btn-hero {
font-size: 16px;
line-height: 20px;
padding: 12px 24px;
align-self: flex-end;
}
.method-card .primary-btn {
justify-self: end;
} .section-tracker {
padding: 10vw 0;
} .tracker-wraper {
grid-template-columns: 1fr;
} .tracker-wraper>div:first-child {
order: 2;
}
.tracker-wraper>div:last-child {
order: 1;
}
.tracker-wraper>div:first-child {
display: flex;
flex-direction: column;
} .tracker-wraper>div:first-child .section-title,
.tracker-wraper>div:first-child .section-p {
width: 100%;
text-align: left;
} .tracker-wraper .primary-btn {
display: flex;
margin-left: auto;
width: fit-content;
} .section-journey {
padding: 10vw 0;
}
.journey-content {
font-size: clamp(14px, 4vw, 18px);
gap: 4vw;
margin-bottom: 5vw;
}
.tabs-container {
justify-content: flex-start;
gap: 2vw;
margin-bottom: 8vw;
}
.tab-btn {
padding: 1.5vw 4vw;
font-size: clamp(13px, 3.5vw, 16px);
} .methods-grid {
grid-template-columns: 1fr;
gap: 4vw;
}
.method-card {
border-radius: 6vw;
padding: 5vw;
}
.method-card .primary-btn {
align-self: flex-end;
}
.method-backdrop {
width: 50%;
height: 50%;
} .stories {
padding: 12vw 0;
}
.stories-content h2 {
line-height: 1.3;
}
.stories-content p {
line-height: 1.6;
} .stories-content .primary-btn {
display: flex;
margin-left: auto;
width: fit-content;
} .activities {
padding: 12vw 0;
} .activities-grid {
grid-template-columns: 1fr;
gap: 5vw;
}
.activity-content {
display: flex;
flex-direction: column;
align-items: flex-start;
} .activities .primary-btn {
align-self: flex-end;
}
} @media (max-width: 480px) {
.hero {
height: 746px;
}
.hero-slide {
padding: 0;
}
.hero-content {
top: 75%;
left: 0;
max-width: 360px;
margin: 0 auto;
padding: 24px;
border-radius: 24px;
gap: 16px;
}
:lang(my) .hero-content {
top: 70%;
max-width: 365px;
}
.hero-title {
font-size: 24px;
line-height: 30px;
}
:lang(my) .hero-title {
font-size: 20px;
}
.btn-hero {
font-size: 14px;
line-height: 20px;
padding: 8px 12px;
align-self: flex-end;
} .method-card {
padding: 6vw;
} .activities-header {
margin-bottom: 8vw;
}
.activity-image img {
height: 55vw;
}
.tab-btn {
padding: 2vw;
font-size: 3.5vw;
}
}
@media (max-width: 360px) {
.hero-content {
top: 65%;
max-width: 300px;
}
}