/* =====================================================
CONSOLIDATED RESPONSIVE STYLES
All @media queries from:
main.css · about.css · donate.css
vision-center.css · impact-stories.css
Organized from largest → smallest breakpoint.
===================================================== */
/* =====================================================
BOOTSTRAP CONTAINER EXTENSIONS (min-width)
===================================================== */
@media (min-width: 1600px) {
.container {
max-width: 1500px;
}
}
@media (min-width: 1800px) {
.container {
max-width: 1600px;
}
}
/* =====================================================
1700px AND BELOW
===================================================== */
@media only screen and (max-width: 1700px) {
.benefit-padding {
--bs-gutter-x: 2.5rem;
}
h1 {
font-size: 52px;
}
.hero-box h1 {
line-height: 53px;
}
.card-title {
font-size: 24px;
}
.hero-box p {
line-height: 32px;
margin-bottom: 25px;
}
.tab-card h3 {
font-size: 37px;
}
.stat-card h3 {
font-size: 35px;
}
.overlay-text h3 {
font-size: 35px;
}
.overlay-text p {
margin-bottom: 0;
max-width: 257px;
line-height: 24px;
}
.testimonial-content p {
line-height: 36px;
}
.do-padding {
--bs-gutter-x: 2rem;
}
.service-card .overlay h5 {
font-size: 26px;
}
}
/* =====================================================
1600px AND BELOW
===================================================== */
@media only screen and (max-width: 1600px) {
.section {
padding: 80px 0;
}
h2 {
font-size: clamp(28px, 4vw, 40px);
}
.stats-strip-slide {
padding: 0px 8px;
}
.stats-strip-icon i {
font-size: 24px;
}
.stats-strip {
padding: 8px 0;
}
.quote-icon {
top: 21px;
right: 21px;
}
.testimonial-content {
padding: 63px 80px 60px 38px;
}
.cta-image img {
max-height: 414px;
object-fit: contain;
position: absolute;
bottom: -189px;
}
.padding-4 {
padding-left: 50px;
}
.padding-5 {
padding-left: 50px;
}
.main-footer ul li a {
font-size: 18px;
}
.stat-card {
height: 268px;
}
.testimonial-content p {
margin-bottom: 18px;
}
.testimonial-img img {
height: 100%;
}
.service-card .overlay h5 {
font-size: 25px;
}
}
/* =====================================================
1500px AND BELOW
===================================================== */
@media only screen and (max-width: 1500px) {
.padding-2 {
padding-left: 20px;
}
}
/* =====================================================
1400px AND BELOW
===================================================== */
@media only screen and (max-width: 1400px) {
h1 {
font-size: 45px;
}
h2 {
font-size: 40px;
}
.tab-card {
padding: 47px 64px 127px 43px;
}
.tab-image img {
object-fit: cover;
position: absolute;
left: 90px;
right: 0;
bottom: -310px;
width: 68%;
}
.tech-strip-item {
padding: 21px 21px;
}
.padding-4 {
padding-left: 40px;
}
.padding-5 {
padding-left: 40px;
}
.padding-2 {
padding-left: 15px;
}
.padding-3 {
padding-left: 25px;
}
.stat-card h3 {
font-size: 30px;
}
.stat-card p {
line-height: 24px;
}
.tab-card h3 {
font-size: 35px;
}
}
/* =====================================================
1300px AND BELOW
===================================================== */
@media only screen and (max-width: 1300px) {
.tab-card h3 {
font-size: 33px;
}
.tab-card h3.safety-header {
max-width: 400px;
}
.benefit-padding {
--bs-gutter-x: 2rem;
}
}
/* =====================================================
1230px AND BELOW
===================================================== */
@media only screen and (max-width: 1230px) {
.main-footer h5 {
font-size: 20px;
}
.do-padding {
--bs-gutter-x: 1.5rem;
}
.benefit-padding {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
.main-footer ul li a {
font-size: 16px;
}
.padding-5 {
padding-left: 32px;
}
.cta-image img {
bottom: -209px;
max-height: 437px;
width: 640px;
}
}
/* =====================================================
1200px AND BELOW
===================================================== */
@media only screen and (max-width: 1200px) {
.detail-small {
max-width: 430px;
}
.filter-btn {
font-size: 13px;
}
.what-we-do-section .section-head {
margin-bottom: 32px;
}
.tech-strip-num .odometer {
font-size: 29px;
}
.benefit-section .section-head {
margin-bottom: 10px;
}
.vc-cta-block {
min-height: 240px;
}
.do-padding {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
.info-heading {
margin-bottom: 13px;
}
.awards-left ul li p br {
display: none;
}
.vc-cta-content {
padding: 42px 10px 42px 34px;
}
.cta-cec-2 {
background-position: center;
}
.cta-cec-1 {
background-position: center;
}
.capability-strip__stat {
font-size: 2rem;
}
.team-padding {
--bs-gutter-x: 2rem;
--bs-gutter-y: 2rem;
}
.info-panel {
padding: 28px 0px 28px 28px;
color: #fff;
height: 100%;
}
.main-footer {
padding: 60px 0 30px;
}
.stat-image-card.small {
height: 228px;
}
.tab-card {
padding: 47px 64px 67px 43px;
height: 360px;
}
.padding-2 {
padding-left: 12px;
}
.padding-4 {
padding-left: 12px;
}
.padding-5 {
padding-left: 12px;
}
.footer-top {
--bs-gutter-y: 2.5rem;
}
.padding-3 {
padding-left: 20px;
}
.main-footer h5 {
margin-bottom: 26px;
}
.main-footer ul li {
margin-bottom: 20px;
}
.stat-card {
height: 228px;
}
.stat-image-card.small img {
object-position: top;
}
h1 {
font-size: 44px;
}
.tab-card p {
margin-top: 10px;
line-height: 29px;
margin-bottom: 0;
}
.tab-card h3.safety-header {
max-width: 330px;
}
.tab-image img {
left: 80px;
right: 0;
bottom: -290px;
width: 73%;
}
.tab-card h3 {
font-size: 31px;
}
/* About timeline - 1199px */
.au-timeline-card {
flex: 0 0 680px;
gap: 28px;
}
.au-tc-img {
flex: 0 0 320px;
height: 320px;
}
.au-timeline-slider {
padding-left: max(1rem, calc((100vw - 960px) / 2 + 12px));
scroll-padding-left: max(1rem, calc((100vw - 960px) / 2 + 12px));
padding-right: 40px;
gap: 32px;
}
}
/* =====================================================
991.98px AND BELOW (vision-center breakpoint)
===================================================== */
@media (max-width: 991.98px) {
.youtube-section .row.align-items-center .col-md-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.youtube-section .row.align-items-center .col-md-6:first-child {
margin-bottom: 28px;
}
}
/* =====================================================
991px AND BELOW (Tablet / Mobile header switch)
===================================================== */
@media only screen and (max-width: 991px) {
a.navbar-brand img {
width: 120px;
}
.mobile-logo img {
width: 130px;
}
.main-header {
padding: 15px 0;
}
.hero-box {
padding: 0px;
}
.detail-small {
max-width: 100%;
}
.hero-section.inner-page-hero .hero-content-wrapper {
align-items: start;
padding-top: 30px;
padding-bottom: 30px;
}
.hero-content-wrapper {
align-items: start;
padding-top: 50px;
}
.hero-section.inner-page-hero.donate-page .hero-content-wrapper {
height: 100%;
align-items: end;
padding-top: 0;
padding-bottom: 80px;
}
.tech-hero {
padding-top: 78px;
align-items: end;
padding-bottom: 30px;
}
.ivc-intro {
text-align: center;
}
.ivc-intro p {
margin: 0 auto;
}
.tech-initiative-icon {
width: 56px;
height: 56px;
}
.tech-initiative-card {
flex-direction: column;
}
.gi-contact-addr br {
display: none;
}
.gi-contact-list {
display: flex;
flex-direction: row;
gap: 20px;
}
.ivc-intro .ivc-stat-row {
display: flex;
gap: 40px;
flex-wrap: wrap;
margin-top: 36px;
justify-content: center;
}
.au-journey-section p br {
display: none;
}
.story-padding {
--bs-gutter-x: 2.5rem;
}
.hospital-partners-slider {
padding-bottom: 55px;
}
.awards-left {
padding-top: 30px;
}
.form-panel {
padding: 0px 30px 30px 30px;
}
.main-contact-details {
display: flex;
gap: 50px;
}
.ctc-pointer {
padding: 13px 0;
}
.info-heading {
margin-bottom: 14px;
font-size: 2rem;
}
.info-panel {
padding: 36px 26px 36px 26px;
}
.section {
padding: 60px 0;
}
.testimonialSwiper {
padding-bottom: 0;
}
.benefit-padding {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
.do-padding {
margin-top: 0;
}
.section-head {
margin-bottom: 25px;
}
h2 {
font-size: 35px;
}
.testimonial-content h4 {
font-size: 25px;
}
.cta-image img {
bottom: -164px;
max-height: 329px;
}
.testimonial-img img {
height: 359px;
}
.hero-section {
padding: 0px 0 0px 0;
/* height: auto; */
}
.tab-card h3 {
font-size: 28px;
}
.padding-4 {
padding-left: 12px;
padding-top: 0;
}
.main-footer p {
margin-bottom: 11px;
}
.padding-5 {
padding-left: 12px;
padding-top: 0;
}
.testimonial-content p {
line-height: 31px;
}
.hero-box p {
line-height: 27px;
margin-bottom: 20px;
}
.vc-dual-cta-section .cta-cec-1,
.vc-dual-cta-section .cta-vc-1,
.vc-dual-cta-section .cta-cc-1,
.vc-dual-cta-section .cta-as-1 {
margin-right: 0;
}
.vc-dual-cta-section .cta-cec-2,
.vc-dual-cta-section .cta-vc-2,
.vc-dual-cta-section .cta-cc-2,
.vc-dual-cta-section .cta-as-2 {
margin-left: 0;
}
.vc-sc-card h3 br {
display: none;
}
.banner-btn {
padding: 13px 25px;
font-size: 14px;
}
.hero-box h1 {
line-height: 27px;
}
h1 {
font-size: 35px;
}
/* About - 991px */
.au-timeline-card {
flex: 0 0 560px;
gap: 22px;
}
.au-tc-img {
flex: 0 0 260px;
height: 280px;
}
.au-tc-year {
font-size: 64px;
}
.au-timeline-slider {
padding-left: max(1rem, calc((100vw - 720px) / 2 + 12px));
scroll-padding-left: max(1rem, calc((100vw - 720px) / 2 + 12px));
padding-right: 30px;
gap: 24px;
}
.au-story-img {
min-height: 300px;
max-height: 400px;
}
.au-team-name {
font-size: 20px !important;
}
/* Donate - 991px */
.dn-form-card {
padding: 32px 28px 28px;
}
.dn-form-section {
margin-top: -60px;
}
/* Vision Center - 991px */
.vc-sc-card {
top: calc(80px + var(--card-index, 0) * 14px);
margin-bottom: 14px;
max-height: max-content;
}
.vc-cta-block {
border-radius: 20px !important;
}
.vc-sc-text {
padding: 40px 36px 32px 40px;
order: 1;
}
.vc-sc-img {
padding: 20px 20px 0 20px;
order: -1;
}
.vc-sc-img img {
min-height: 220px;
border-radius: 12px;
}
.vc-donations-card {
margin-bottom: 20px;
}
.vc-cta-content {
padding: 44px 16px 40px 32px;
}
.vc-cta-person {
width: 160px;
}
/* Impact Stories - 991px */
.page-hero {
padding: 130px 0 40px;
text-align: start;
}
.page-hero h1 {
max-width: 100%;
}
.page-hero .hero-sub {
max-width: 100%;
}
.hero-stats-strip {
justify-content: center;
gap: 32px;
}
.filter-section {
top: 62px;
}
.story-hero-section {
padding: 120px 0 50px;
}
.story-hero-img-wrap {
height: 320px;
margin-bottom: 32px;
}
.story-sidebar {
position: static;
margin-bottom: 32px;
}
}
/* =====================================================
800px AND BELOW
===================================================== */
@media only screen and (max-width: 800px) {
.service-card {
border-radius: 18px;
overflow: hidden;
height: 300px;
cursor: pointer;
}
.tab-card h3.safety-header {
max-width: 280px;
}
.gi-contact-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.accordion-body p {
max-width: 590px;
}
.cta-image img {
bottom: -180px;
max-height: 320px;
}
.tab-image img {
left: 10px;
right: 0;
bottom: -300px;
width: 91%;
}
.tab-card h3 {
font-size: 24px;
}
}
/* =====================================================
991.98px AND BELOW - REPORTS SLIDER NAVIGATION
The slider runs to ~39 slides, so pagination dots are
unusable at these widths. Dots are replaced by the
prev/next arrows, moved out of the card area and
centred as a pair underneath the slider.
===================================================== */
@media (max-width: 991.98px) {
/* Side gutters are no longer needed; the bottom band
makes room for the centred arrow pair. */
.vc-reports-slider-wrap {
padding: 0 0 52px;
}
/* Was 40px to clear the dots; 28px still clears the
card's resting box-shadow. */
.vc-reports-swiper {
padding-bottom: 28px !important;
}
.vc-reports-pagination {
display: none !important;
}
.vc-reports-arrow {
display: flex !important;
top: auto;
bottom: 0;
transform: none;
}
/* 40px buttons, 16px apart, straddling the centre line. */
.vc-reports-prev {
left: calc(50% - 48px);
right: auto;
}
.vc-reports-next {
left: calc(50% + 8px);
right: auto;
}
}
/* =====================================================
767px AND BELOW (iPad portrait / small tablet)
===================================================== */
@media (max-width: 767px) {
.section {
padding: 60px 0;
}
.hero-section.inner-page-hero::before {
background: transparent !important;
}
.au-story-img img {
width: 100%;
/* height: auto; */
object-fit: cover;
display: block;
min-height: 220px;
max-height: 300px;
}
.our-vision-text {
padding-left: 0;
}
.tech-section-head h2 {
max-width: 340px;
}
.tech-process.tech-reaches h2 {
max-width: 340px;
margin: 0 auto 16px auto;
}
.tech-supporters h2 {
margin: 0 auto 16px auto;
}
.tech-institutions h2 {
margin: 0 auto 16px auto;
}
.gi-newsletter-btn {
text-align: center !important;
}
.tech-intro-feature strong {
font-size: 20px;
}
.testimonial-section .section-head p {
margin-bottom: 0;
}
.dmp-section .section-head {
margin-bottom: 30px;
}
.tech-hero-outline-btn {
font-size: 13px;
padding: 13px 18px;
}
.tech-intro-features {
grid-template-columns: 1fr;
}
.tech-hero-btns .banner-btn {
padding: 11px 18px;
font-size: 13px;
display: inline-flex;
}
.gi-form-panel {
padding: 28px 30px;
}
.accordion-button {
padding: 1rem 1rem 1rem 1rem;
}
.accordion-body {
padding: 1rem 1rem 1.2rem 1rem;
}
.vc-report-cover {
height: 260px !important;
}
.ivc-img-wrap img {
height: 340px;
}
.gi-info-panel {
padding: 34px 30px;
}
.youtube-section img {
margin-bottom: 0;
}
.gi-donate-sub br {
display: none;
}
.accordion-button:not(.collapsed) {
padding: 1.5rem 1rem 1.5rem 1rem;
}
.testimonial-prev,
.testimonial-next {
display: none !important;
}
.testimonialSwiper {
padding-bottom: 0px;
}
/* Hero banner - taller, text at bottom */
.hero-section {
min-height: 85vh;
padding: 0;
display: flex;
align-items: flex-end;
}
.hero-content-wrapper {
padding-top: 30px;
align-items: start;
padding-bottom: 30px;
}
.hero-section .row>[class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
.hero-box {
border-radius: 12px;
margin: 0 4px;
}
.hero-box--compact h1 {
font-size: 24px;
}
/* CTA */
.cta-content {
text-align: center;
padding-top: 0px;
}
.cta-content p {
max-width: none;
margin-left: auto;
margin-right: auto;
}
.cta-section .row {
flex-direction: column;
}
.cta-section .col-12,
.cta-section [class*="col-"] {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.section.logoSlider .cta-btn {
display: block;
width: fit-content;
margin: 24px auto 0;
}
.testimonial-img img {
border-bottom-left-radius: 0px;
}
.main-footer p.copyright {
margin-bottom: 0px;
margin-top: 15px;
}
.cta-image img {
bottom: -144px;
max-height: 301px;
right: -30px;
position: unset;
}
.accordion-item {
margin-bottom: 10px;
}
.accordion-button .accordion-question {
font-size: 18px;
max-width: 470px;
}
.testimonial-content {
padding: 46px 80px 60px 38px;
}
.tab-card {
padding: 47px 34px 67px 43px;
}
.tab-card p {
max-width: 380px;
}
.tab-card h3.safety-header {
max-width: 380px;
}
.tab-image img {
left: unset;
right: -10px;
bottom: -230px;
width: 27%;
}
.custom-tabs .nav-link {
min-width: 200px;
}
.custom-tabs {
margin-top: 15px;
gap: 15px;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 16px;
justify-content: start !important;
}
/* Footer */
.main-footer .footer-top [class*="col-"] {
margin-bottom: 20px;
text-align: start;
}
.footer-top {
--bs-gutter-y: 1.5rem;
}
.padding-3 {
padding-left: 8px;
}
.main-footer .footer-top [class*="col-"]:last-child {
margin-bottom: 0;
}
.main-footer ul li {
margin-bottom: 16px;
}
.main-footer h5 {
margin-bottom: 16px;
}
.footer-bottom>[class*="col-"] {
text-align: center !important;
}
.social-icons {
margin-bottom: 10px;
}
.social-icons a {
margin: 0 5px;
}
/* Stats strip */
.stats-strip {
padding: 22px 0;
}
.stats-strip-item {
padding: 10px 10px;
}
.stats-strip h3 {
font-size: 20px;
}
.stats-strip-icon i {
font-size: 26px;
}
/* Blind Capital */
.blind-capital-left {
margin-bottom: 0px;
}
.blind-capital-right h3 {
font-size: 20px;
}
/* Awards */
.awards-left {
text-align: start;
margin-bottom: 30px;
}
.awards-left h2 {
font-size: 30px;
}
.awards-left h3 {
font-size: 18px;
}
/* Good Vision */
.good-vision-content {
padding: 40px 15px;
}
.good-vision-content h2 {
font-size: 30px;
}
.good-vision-desc br {
display: none;
}
.good-vision-image {
position: relative;
width: 100%;
min-height: 300px;
}
/* Our Vision */
.our-vision-images {
margin-bottom: 30px;
}
.our-vision-subtitle {
margin-bottom: 30px;
}
/* Health Logo */
.health-logo {
padding: 15px 10px;
}
.health-logo img {
max-height: 70px;
}
/* About team */
.au-story-img {
min-height: 240px;
max-height: 320px;
margin-bottom: 24px;
}
.au-timeline-card {
flex: 0 0 82vw;
flex-direction: column;
gap: 0;
}
.au-tc-img {
flex: none;
width: 100%;
height: 220px;
border-radius: 12px 12px 0 0;
}
.au-tc-text {
padding: 0px 4px 10px;
}
.au-tc-year {
font-size: 52px;
}
.au-timeline-slider {
padding-left: 20px;
scroll-padding-left: 20px;
padding-right: 20px;
gap: 20px;
}
.au-team-img {
height: 240px;
}
.au-team-card {
padding: 10px 10px 16px;
}
.au-team-name {
font-size: 18px !important;
}
.au-tc-year--range {
font-size: 38px;
}
.au-partners-row {
gap: 24px 36px;
}
.au-partner-logo {
font-size: 14px;
}
/* Donate */
.dn-form-section {
margin-top: -40px;
}
.dn-form-card {
padding: 24px 20px 22px;
}
.dn-amount-presets {
gap: 8px;
}
.dn-preset {
flex: 1 1 calc(33.333% - 8px);
height: 46px;
padding: 0 8px;
font-size: 14px;
}
.dn-impact-card {
height: 280px;
}
.dn-country-trigger {
padding: 0 8px 0 10px;
font-size: 13px;
}
/* Vision Center - stacking cards, phone tuning.
Same sticky mechanism as desktop, but its own offsets: the cards are
620-705px tall here (the copy drives it), so the pin has to sit high
or the bottom of a pinned card would never come into view. 24px base
with an 8px step per card, against 88px + 18px on desktop.
The sticky header hides on scroll-down, so it does not fight the pin
while the stack is actually being scrolled through. */
.vc-sc-card {
position: sticky;
top: calc(24px + var(--card-index, 0) * 8px) !important;
margin-bottom: 20px;
border-radius: 14px;
max-height: max-content;
}
.vc-sc-text p {
color: rgba(255, 255, 255, 0.82);
line-height: 1.5;
margin-bottom: 18px;
}
.vc-sc-text h3 {
font-size: 30px;
margin-bottom: 12px;
}
.vc-sc-text {
padding: 32px 28px 24px 28px;
order: 1;
}
.vc-sc-img {
padding: 16px 16px 0 16px;
order: -1;
}
.vc-sc-img img {
min-height: 200px;
}
.vc-cta-block,
.vc-cta-block--alt {
border-radius: 16px;
min-height: 260px;
}
.vc-cta-content {
padding: 36px 12px 32px 26px;
}
.vc-cta-content h2 {
max-width: none;
}
.vc-cta-person {
width: 130px;
}
.vc-unique-list li span {
font-size: 16px;
}
.service-card.vc-measure-card {
height: 380px;
}
/* Impact Stories */
.page-hero {
padding: 120px 0 50px;
}
.hero-stats-strip {
gap: 20px;
}
.hero-stat-num {
font-size: 28px;
}
.filter-section {
top: 56px;
padding: 14px 0;
}
.filter-bar {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 2px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar {
display: none;
}
.filter-count {
display: none;
}
.story-hero-img-wrap {
height: 260px;
}
.story-hero-meta-row {
gap: 12px;
}
.story-at-glance {
margin-bottom: 32px;
}
.story-nav-btn .nav-story-name {
display: none;
}
.related-section {
padding: 60px 0;
}
}
/* =====================================================
700px AND BELOW
===================================================== */
@media (max-width: 700px) {
.testimonial-content {
padding: 46px 60px 35px 22px;
}
.cta-image img {
bottom: -160px;
max-height: 239px;
right: -49px;
}
.quote-icon img {
width: 72px;
}
}
/* =====================================================
MOBILE MENU - layout helper (not breakpoint-specific)
===================================================== */
.mainMenu {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* =====================================================
600px AND BELOW
===================================================== */
@media (max-width: 600px) {
.form-panel {
padding: 0px 25px 36px 25px;
}
.main-contact-details {
display: flex;
gap: 0;
flex-direction: column;
}
.hero-box h1 {
max-width: 91% !important;
}
.tab-image img {
left: unset;
right: -10px;
bottom: -230px;
width: 32%;
}
.testimonial-content {
padding: 26px 40px 35px 22px;
}
.offcanvas.offcanvas-top.mobile-menu .contact-btn,
.offcanvas.offcanvas-top.mobile-menu .donate-btn {
width: 50%;
justify-content: center;
}
p {
line-height: 26px;
}
h3 {
font-size: 22px;
}
}
/* =====================================================
575px AND BELOW
===================================================== */
@media (max-width: 575px) {
/* Donate */
.dn-form-section {
margin-top: 0;
}
.dn-form-card {
border-radius: 12px;
padding: 20px 16px 18px;
}
.dn-freq-btn {
font-size: 13px;
height: 40px;
}
.dn-preset {
flex: 1 1 calc(50% - 8px);
height: 42px;
font-size: 13px;
}
.dn-amount-input-wrap {
height: auto;
}
.dn-impact-card {
height: 220px;
}
/* Impact Stories */
.story-hero-img-pill {
gap: 10px;
padding: 10px 14px;
}
.story-hero-img-pill .pill-divider {
display: none;
}
.story-card-img {
height: 200px;
}
}
/* =====================================================
560px AND BELOW
===================================================== */
@media (max-width: 560px) {
.testimonial-content {
padding: 40px 25px 30px 22px;
}
.quote-icon {
top: 15px;
right: 15px;
}
}
/* =====================================================
500px AND BELOW
===================================================== */
@media (max-width: 500px) {
.tab-card {
height: auto;
}
.feature-list {
margin: 0 0 11px 0;
}
.ctc-pointer {
font-size: 0.875rem;
line-height: 18px;
}
.info-panel {
padding: 36px 26px 16px 26px;
}
.tab-image img {
left: unset;
right: -10px;
bottom: -230px;
width: 36%;
}
.tab-card p {
margin-bottom: 16px;
}
.testimonial-img img {
height: 100%;
}
.tab-card {
padding: 47px 34px 197px 43px;
}
}
/* =====================================================
460px AND BELOW
===================================================== */
@media (max-width: 460px) {
.tab-card {
padding: 47px 30px 197px 30px;
}
.testimonial-content {
padding: 50px 20px 30px 20px;
}
.quote-icon img {
width: 62px;
}
.stat-image-card {
height: 228px;
}
.tab-image img {
width: 44%;
}
}
/* =====================================================
375px AND BELOW (Small phones)
===================================================== */
@media (max-width: 375px) {
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 20px;
}
p {
line-height: 22px;
}
.hero-box h1 {
line-height: 1.3;
margin-bottom: 12px;
max-width: 100%;
}
.hero-box p {
line-height: 24px;
}
.banner-btn {
font-size: 14px;
padding: 11px 20px;
}
.benefit-card {
padding: 12px 12px 25px 12px;
}
.card-title {
font-size: 20px;
}
.accordion-button .accordion-question {
font-size: 16px;
max-width: 100%;
}
.main-footer h5 {
margin-bottom: 16px;
}
.section {
padding: 50px 0;
}
.testimonial-content {
padding: 40px 15px 25px 15px;
}
.quote-icon img {
width: 50px;
}
.tab-card {
padding: 30px 20px 180px 20px;
}
.tab-card h3 {
font-size: 20px;
}
.tab-card p {
line-height: 22px;
}
.offcanvas.offcanvas-top.mobile-menu .contact-btn,
.offcanvas.offcanvas-top.mobile-menu .donate-btn {
width: 100%;
margin-bottom: 8px;
}
.section-title,
.section-subtext {
word-break: break-word;
hyphens: auto;
}
/* About */
.au-story-img {
min-height: 200px;
max-height: 260px;
}
.au-team-img {
height: 200px;
}
.au-team-name {
font-size: 16px !important;
}
.au-team-linkedin {
width: 28px;
height: 28px;
font-size: 15px;
}
/* Donate */
.dn-form-card {
padding: 16px 12px 16px;
}
.dn-preset {
flex: 1 1 calc(50% - 6px);
height: 40px;
font-size: 12px;
padding: 0 6px;
}
/* Vision Center */
.vc-cta-block,
.vc-cta-block--alt {
border-radius: 12px;
min-height: 220px;
}
.vc-cta-content {
padding: 28px 10px 24px 18px;
}
.vc-cta-content h2 {
font-size: 18px;
}
.vc-cta-person {
width: 100px;
}
.service-card.vc-measure-card {
height: 300px;
}
.vc-img-rounded {
min-height: 200px;
}
.vc-report-cover {
height: 180px;
}
/* Impact Stories */
.page-hero {
padding: 100px 0 40px;
}
.story-card-img {
height: 180px;
}
.filter-section {
position: static;
}
.hero-stat-num {
font-size: 22px;
}
.hero-stat-label {
font-size: 12px;
}
}
/* =====================================================
320px AND BELOW (very small devices)
===================================================== */
@media (max-width: 320px) {
h1 {
font-size: 22px;
}
h2 {
font-size: 18px;
}
p {
line-height: 20px;
}
.hero-box {
padding: 16px 12px;
}
.section {
padding: 40px 0;
}
.banner-btn {
font-size: 13px;
padding: 10px 16px;
}
}
/* =====================================================
RESPONSIVE FIX GUIDE - ALL SECTION FIXES
Source: RESPONSIVE-FIX-GUIDE.md
Applied: 2026-04-15
===================================================== */
/* =====================================================
§2 - SECTION PADDING (mobile-first scale-up)
===================================================== */
@media (min-width: 768px) {
.section {
padding: 70px 0;
}
}
@media (min-width: 1200px) {
.section {
padding: 80px 0;
}
}
/* =====================================================
§3 - HEADER & NAVIGATION
===================================================== */
@media (max-width: 767px) {
.header-buttons {
display: none;
}
.main-header .container {
padding-left: 15px;
padding-right: 15px;
}
.logo img {
max-height: 40px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.main-nav .nav-link {
font-size: 13px;
padding: 20px 12px;
}
.hero-section.inner-page-hero::before {
background: transparent !important;
}
.our-vision-text {
padding-left: 12px;
}
.tech-testimonial-role {
font-size: 18px;
}
.tech-initiative-list li {
font-size: 14px;
}
.dropdown-menu-custom {
left: 50%;
min-width: 200px;
}
}
/* =====================================================
§4 - HERO SECTION
===================================================== */
@media (max-width: 575px) {
.hero-section {
height: auto;
min-height: 100vh;
min-height: 91svh;
}
.hero-box h1 {
font-size: 28px;
line-height: 1.25;
max-width: 100%;
margin-bottom: 16px;
}
.hero-box p {
line-height: 1.5;
}
.banner-btn {
padding: 12px 20px;
font-size: 16px;
display: inline-block;
width: 100%;
text-align: center;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.hero-box h1 {
font-size: 32px;
line-height: 1.3;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hero-box h1 {
font-size: 40px;
line-height: 1.25;
}
}
/* =====================================================
§5 - STATS STRIP
===================================================== */
@media (max-width: 575px) {
.stats-strip {
padding: 18px 0;
}
.stats-strip h3 {
font-size: 20px;
}
.stats-strip-icon i {
font-size: 24px;
}
}
/* =====================================================
§6 - BLIND CAPITAL SECTION
===================================================== */
@media (max-width: 767px) {
.blind-capital-left {
padding-left: 0;
padding: 0;
}
.blind-capital-left ul li {
font-size: 16px;
gap: 12px;
flex-direction: row;
align-items: center
}
.what-we-do-section .section-head {
margin-bottom: 28px;
}
.list-icon {
width: 40px;
height: 40px;
min-width: 40px;
}
.list-icon i {
font-size: 20px;
}
.blind-capital-images {
flex-direction: column;
min-height: auto;
gap: 10px;
}
.blind-capital-img-bottom img {
height: 150px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.blind-capital-left {
padding-left: 20px;
}
.blind-capital-images {
min-height: 350px;
}
}
/* =====================================================
§7 - AWARDS SECTION
===================================================== */
@media (max-width: 767px) {
.awards-left h3 {
font-size: 18px;
}
.awards-left ul li {
font-size: 16px;
align-items: start;
}
.awards-vertical-slider-wrap {
height: 300px;
width: 100%;
flex: auto;
}
.awards-slide-content {
padding: 20px 20px;
}
.awards-slide-title {
font-size: 20px;
}
.awards-slider-outer {
flex-direction: column;
gap: 16px;
}
.awards-pagination-dots {
flex-direction: row;
justify-content: center;
}
}
/* =====================================================
§8 - BENEFIT / SERVICE CARDS
===================================================== */
@media (max-width: 575px) {
.service-card {
height: 300px;
border-radius: 14px;
}
.service-card .overlay h5 {
font-size: 20px;
}
.benefit-padding {
--bs-gutter-x: 1rem;
}
.do-padding {
--bs-gutter-x: 1rem;
}
.card-title {
font-size: 24px;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.service-card {
height: 350px;
}
.benefit-padding {
--bs-gutter-x: 1.5rem;
}
.do-padding {
--bs-gutter-x: 1.5rem;
}
}
/* =====================================================
§9 - EYEGLASSES / TABS SECTION
===================================================== */
@media (max-width: 575px) {
.custom-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.custom-tabs .nav-link {
padding: 10px 20px;
font-size: 14px;
margin: 0;
}
.tab-card {
padding: 30px 20px 40px 20px;
border-radius: 14px;
}
.tab-card h3 {
font-size: 24px;
max-width: 100%;
}
.tab-card p {
line-height: 1.5;
}
.tab-image {
display: none;
}
.eyeglasses-section .section-title {
max-width: 100%;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.tab-card {
padding: 35px 30px 60px 30px;
}
.tab-card h3 {
font-size: 30px;
}
.tab-image img {
width: 80%;
left: 40px;
bottom: -200px;
}
.custom-tabs .nav-link {
padding: 12px 30px;
font-size: 15px;
}
}
/* =====================================================
§10 - STATS SECTION
===================================================== */
@media (max-width: 575px) {
.stat-card {
padding: 20px;
}
.stat-card h3 {
font-size: 28px;
}
.stat-card .icon img {
width: 45px;
height: 45px;
}
.overlay-text h3 {
font-size: 28px;
}
.stat-image-card {
min-height: 220px;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.stat-card h3 {
font-size: 32px;
}
.stat-image-card {
min-height: 250px;
}
}
/* =====================================================
§11 - GOOD VISION / CTA SECTION
===================================================== */
@media (max-width: 575px) {
.good-vision-content {
padding: 40px 20px;
}
.good-vision-content h2 {
font-size: 26px;
}
.good-vision-buttons {
flex-direction: column;
gap: 12px;
}
.gv-donate-btn,
.gv-vision-btn {
padding: 14px 24px;
font-size: 15px;
text-align: center;
width: 100%;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.good-vision-content {
padding: 50px 20px 50px 0;
}
.good-vision-content h2 {
font-size: 32px;
}
}
/* =====================================================
§12 - OUR VISION / COMPARISON SLIDER
===================================================== */
@media (max-width: 575px) {
.vision-comparison {
min-height: 250px;
}
.our-vision-text h3 {
font-size: 24px;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.vision-comparison {
min-height: 300px;
}
}
/* =====================================================
§13 - HOSPITAL PARTNERS SECTION
===================================================== */
@media (max-width: 575px) {
.hospital-partners-section {
padding: 40px 0;
}
.partner-logo,
.university-logo {
height: 80px;
padding: 10px;
}
}
/* =====================================================
§14 - FAQ SECTION
===================================================== */
@media (max-width: 575px) {
.accordion-button {
padding: 1rem 1rem;
}
.accordion-button:not(.collapsed) {
padding: 1.2rem 1rem;
}
.accordion-body {
padding: 1rem 1rem 1.2rem;
}
.accordion-button .accordion-question {
font-size: 20px;
}
}
/* =====================================================
§15 - TESTIMONIAL SECTION
===================================================== */
@media (max-width: 767px) {
.testimonial-content {
padding: 30px 20px;
}
.testimonial-content h4 {
font-size: 24px;
}
.testimonial-content p {
line-height: 1.6;
}
.testimonial-img {
height: 250px;
}
.testimonial-img img {
border-radius: 28px 28px 0 0;
border-bottom-left-radius: 0;
}
.testimonial-img img {
height: 100%;
}
.quote-icon {
top: 15px;
right: 20px;
font-size: 50px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.testimonial-content {
padding: 40px 30px;
}
}
/* =====================================================
§16 - CTA SECTION
===================================================== */
@media (max-width: 767px) {
.cta-section {
text-align: center;
}
.cta-image {
display: none;
}
.cta-content h2 {
font-size: 26px;
}
.cta-content p {
max-width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.cta-image img {
max-height: 460px;
bottom: -220px;
}
}
/* =====================================================
§17 - FOOTER
===================================================== */
@media (max-width: 767px) {
.main-footer {
padding: 50px 0 40px;
text-align: center;
}
.main-footer h5 {
font-size: 24px;
}
.main-footer ul li a {
font-size: 18px;
}
.main-footer h5 {
margin-bottom: 20px;
margin-top: 0;
}
.main-footer ul li {
margin-bottom: 20px;
}
.social-icons {
justify-content: center;
}
.social-icons a {
margin-left: 5px;
margin-right: 5px;
}
.footer-bottom {
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.padding-2,
.padding-3,
.padding-4,
.padding-5 {
padding-left: 0;
}
}
/* =====================================================
§18 - CONTACT CARD / FORM
===================================================== */
@media (max-width: 767px) {
.info-panel {
padding: 24px 20px;
}
.form-panel {
padding: 0 20px 24px;
}
.info-heading {
font-size: 1.8rem;
}
.contact-card {
border-radius: 14px;
}
.form-card {
padding: 24px 20px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.info-panel {
padding: 30px 0 0px 30px;
}
}
/* =====================================================
§19 - ABOUT PAGE - TIMELINE
===================================================== */
@media (max-width: 575px) {
.au-timeline-card {
flex: 0 0 85vw;
flex-direction: column;
gap: 20px;
}
.au-tc-img {
flex: 0 0 auto;
height: 220px;
width: 100%;
}
.au-tc-year {
font-size: 33px;
}
.au-tc-year--range {
font-size: 36px;
}
.au-tc-subtitle {
font-size: 15px;
}
.au-tc-list li {
font-size: 16px;
}
.au-timeline-slider {
padding-left: 20px;
scroll-padding-left: 20px;
gap: 20px;
padding-right: 20px;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.au-timeline-card {
flex: 0 0 80vw;
}
.au-tc-img {
flex: 0 0 280px;
height: 300px;
}
.au-tc-year {
font-size: 30px;
}
}
/* =====================================================
§20 - TEAM CARDS
===================================================== */
@media (max-width: 575px) {
.au-team-img {
height: 250px;
}
.au-team-name {
font-size: 20px !important;
}
}
/* =====================================================
§21 - DONATE FORM CARD
===================================================== */
@media (max-width: 575px) {
.dn-form-section {
margin-top: -50px;
}
.dn-form-card {
padding: 24px 20px;
border-radius: 12px;
}
.dn-amount-presets {
gap: 8px;
}
.dn-preset {
height: 44px;
padding: 0 16px;
font-size: 14px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.dn-form-card {
padding: 32px 28px;
}
}
/* =====================================================
§22 - VISION CENTER STACKING CARDS
===================================================== */
@media (max-width: 767px) {
.vc-sc-text {
padding: 20px 20px 30px 20px;
}
.vc-sc-text h3 {
font-size: 24px;
}
/* position/top intentionally not set here - the phone stacking rule
further up owns them, and the short-viewport fallback at the end of
this file turns the stack off where a pinned card would not fit. */
.vc-sc-card {
max-height: none;
}
.vc-sc-img {
padding: 15px 15px 0px;
}
.vc-sc-img img {
max-height: 250px;
min-height: auto;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.vc-sc-text {
padding: 36px 30px;
}
}
/* =====================================================
§23 - MEASURE / HAPPENINGS CARDS
===================================================== */
@media (max-width: 575px) {
.service-card.vc-measure-card {
height: 300px;
}
.service-card.vc-happenings {
height: 180px;
}
.vc-measure-overlay h5 {
font-size: 22px !important;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.service-card.vc-measure-card {
height: 440px;
}
}
/* =====================================================
§24 - DUAL CTA BLOCKS
===================================================== */
@media (max-width: 767px) {
.vc-cta-block,
.vc-cta-block--alt {
border-radius: 14px;
min-height: auto;
flex-direction: column;
}
.cta-btn.red {
margin-bottom: 0;
}
.cta-btn.blue {
margin-bottom: 0;
}
.vc-cta-content {
padding: 30px 20px;
}
.vc-cta-content h2 {
max-width: 100%;
margin-bottom: 17px;
}
.faq-section .accordion-body p,
.faq-section .accordion-body ul {
max-width: 100%;
}
.hap-award-img {
min-height: 260px;
}
.benefit-section.life-benfit .section-head {
padding-right: 0;
}
.vc-cta-person {
width: 100%;
max-height: 200px;
justify-content: center;
}
.vc-measure-overlay {
padding: 20px 16px !important;
}
.vc-cta-person img {
max-height: 200px;
width: auto;
}
}
/* =====================================================
§25 - IMPACT STORIES / PAGE HERO
===================================================== */
@media (max-width: 575px) {
.page-hero {
padding: 110px 0 50px;
}
.page-hero h1 {
font-size: 28px;
max-width: 100%;
}
.hero-stats-strip {
gap: 24px;
margin-top: 30px;
}
.hero-stat-num {
font-size: 28px;
}
.hero-stat-label {
font-size: 14px;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.page-hero {
padding: 130px 0 60px;
}
.page-hero h1 {
font-size: 36px;
}
}
/* =====================================================
§26 - FILTER BAR
===================================================== */
@media (max-width: 767px) {
.filter-bar {
flex-wrap: wrap;
gap: 8px;
}
.filter-btn {
padding: 8px 16px;
font-size: 14px;
}
.filter-count {
width: 100%;
margin-left: 0;
margin-top: 8px;
font-size: 15px;
}
.filter-section {
top: 60px;
}
}
/* =====================================================
§27 - STORY CARDS
===================================================== */
@media (max-width: 575px) {
.story-card-img {
height: 240px;
}
.story-card-body {
padding: 16px 18px 20px;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.story-card-img {
height: 280px;
}
}
/* =====================================================
§28 - STORY DETAIL PAGE
===================================================== */
@media (max-width: 767px) {
.story-hero-section {
padding: 110px 0 40px;
}
.mobile-menu>li>a:hover::after,
.mobile-toggle:hover::after {
display: none;
}
.story-hero-img-wrap {
height: 280px;
border-radius: 14px;
}
.hero-box.hero-box--compact h1 br {
display: none;
}
.story-hero-img-pill {
padding: 8px 14px;
gap: 12px;
flex-wrap: wrap;
}
.gv-vision-btn.border-btn {
font-size: 14px;
}
.vc-cta-btn.donate-btn {
margin-bottom: 0;
}
.vc-cta-btn.red {
margin-bottom: 0;
}
.related-section .related-sub {
margin-bottom: 0;
}
.btn.cta-btn.vc-cta-btn.net {
margin-bottom: 0;
}
.vc-cta-btn.cta-btn {
margin-bottom: 0;
}
.story-hero-meta-row {
gap: 12px;
}
.story-hero-meta-item {
font-size: 14px;
}
.story-at-glance .glance-title {
font-size: 20px;
}
.story-sidebar {
position: static;
margin-top: 0;
margin-bottom: 0;
}
.care-section {
padding: 60px 0;
}
.glance-value {
font-size: 16px;
}
.glance-label {
font-size: 16px !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.story-hero-section {
padding: 120px 0 50px;
}
.story-hero-img-wrap {
height: 350px;
}
}
/* =====================================================
§29 - LOGO SLIDERS
===================================================== */
@media (max-width: 575px) {
.c-logo {
height: 65px;
padding: 6px 16px;
}
.c-logo img {
max-width: 100px !important;
}
.logoSlider h3.logoTitle {
font-size: 20px;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.c-logo {
height: 75px;
padding: 8px 22px;
}
.c-logo img {
max-width: 120px !important;
}
}
/* =====================================================
GLOBAL LOW-VISION SAFETY NET
Catch-all for small-text patterns across the site
===================================================== */
.mobile-submenu li a,
.filter-count,
.hero-stat-label,
.category-badge,
.page-hero .hero-label,
.vc-eyebrow,
.custom-check-text,
.dn-label-note,
.dn-check-label,
.vc-download-link,
.glance-label,
.story-card-name-overlay .location {
font-size: max(14px, 14px);
font-size: 18px;
font-weight: 600;
}
/* =====================================================
INNER PAGE HERO - 700px RESPONSIVE OVERRIDES
Keeps 700px on tablet+, gracefully shrinks on mobile.
Double-class specificity (.hero-section.inner-page-hero)
beats generic .hero-section breakpoint rules.
===================================================== */
/* Tablet: preserve 700px, cancel any large padding rules */
@media (max-width: 1700px) {
.hero-section.inner-page-hero {
padding: 0;
}
}
@media (max-width: 991px) {
.hero-section.inner-page-hero {
height: 600px;
min-height: 600px;
max-height: 600px;
padding: 0 0 0px 0;
}
.page-hero {
padding: 80px 0 20px;
align-items: end;
}
.story-hero-section {
min-height: 700px;
padding: 100px 0 40px;
}
}
/* =====================================================
HORIZONTAL OVERFLOW FIX - MOBILE
Prevents any element from pushing the page wider
than the viewport on small screens.
===================================================== */
@media (max-width: 767px) {
/* clip, not hidden: hidden makes html/body a scroll container, which
breaks position:sticky on .main-header. clip stops the same sideways
scroll without creating one. */
html,
body {
overflow-x: clip !important;
width: 100%;
max-width: 100vw;
}
/* Exceptions: fixed-width inline elements that should not be clamped */
img,
svg,
canvas,
video,
iframe {
max-width: 100%;
height: auto;
}
/* Swiper sliders: clip at the section boundary */
.swiper,
.swiper-wrapper,
.swiper-slide {
max-width: 100vw;
}
.swiper.team-slider {
max-width: 80vw;
}
/* Logo marquee: ensure the wrapper clips the animation */
.c-logos-container,
.c-logos-container-1,
.c-logos-container-mobile {
overflow: hidden;
width: 100%;
}
}
/* Mobile: let height breathe - fixed 700px is too tall for small screens */
@media (max-width: 767px) {
.hero-section.inner-page-hero {
height: auto;
/* min-height: 480px; */
max-height: none;
padding: 0;
align-items: center;
}
.page-hero {
height: auto;
min-height: 480px;
padding: 160px 0 30px;
align-items: end;
}
.story-hero-section {
min-height: auto;
padding: 90px 0 40px;
}
}
@media (max-width: 575px) {
.hero-section.inner-page-hero {
/* min-height: 340px; */
}
.page-hero {
min-height: 480px;
padding: 176px 0 30px;
text-align: start;
}
.story-hero-section {
padding: 80px 0 30px;
}
}
/* =====================================================
RESPONSIVE AUDIT - COMPREHENSIVE FIXES
Applied: 2026-04-16
Covers all breakpoints from 1700px → 320px.
All rules are scoped to max-width breakpoints so
desktop layout is never affected.
===================================================== */
/* =====================================================
A. TYPOGRAPHY - paragraph base fix
clamp(20px,2.2vw,24px) resolves to 20px on narrow
viewports, which is still very large. Cap it more
aggressively as viewport shrinks.
===================================================== */
/* Tablet and below: looser leading (the 18px step is set at the end of this file) */
@media (max-width: 991px) {
p {
line-height: 1.65;
}
}
/* Large mobile: tighten the leading back up */
@media (max-width: 767px) {
p {
line-height: 1.6;
}
/* university-collab-text uses h2 clamp which is huge on mobile */
.university-collab-text {
font-size: clamp(20px, 5vw, 28px);
line-height: 1.3;
margin-bottom: 16px;
}
/* accordion question - 24px base is too large */
.accordion-button .accordion-question {
line-height: 1.4;
}
/* our-vision-subtitle - 22px italic on full-width col is oversized */
.our-vision-subtitle {
margin-bottom: 24px;
}
}
/* Small mobile: tighten further */
@media (max-width: 575px) {
p {
line-height: 1.55;
}
.university-collab-text {
font-size: 18px;
}
}
/* Very small phones: absolute floor */
@media (max-width: 400px) {
p {
line-height: 1.5;
}
}
/* =====================================================
B. HERO BOX - line-height and sizing
Desktop: line-height: 52px (fixed px - breaks at
small sizes because h1 font-size drops below 52px).
===================================================== */
/* Tablet */
@media (max-width: 991px) {
.hero-box h1 {
line-height: 1.2;
font-size: clamp(28px, 5vw, 45px);
margin-bottom: 14px;
max-width: 100%;
}
}
/* Large mobile */
@media (max-width: 767px) {
.hero-box h1 {
font-size: 35px;
line-height: 1.2;
max-width: 54%;
margin-bottom: 12px;
}
.hero-section.inner-page-hero.donate-page .hero-content-wrapper {
height: 100%;
align-items: end;
padding-top: 0;
padding-bottom: 80px;
}
.hero-section.inner-page-hero .hero-content-wrapper {
height: 100%;
align-items: start;
padding-top: 30px;
}
.hero-section.inner-page-hero .hero-content-wrapper .hero-box p {
margin-bottom: 16px;
}
.hero-box h1 br {
display: none;
}
.health-institutions-title {
margin-bottom: 25px;
}
.hero-box p {
line-height: 1.5;
margin-bottom: 17px;
max-width: 300px;
}
/* Banner button - full width for easy tap */
.banner-btn {
display: inline-flex;
width: auto;
text-align: center;
padding: 7px 16px;
font-size: 14px;
}
}
/* Small mobile */
@media (max-width: 575px) {
.hero-box h1 {
line-height: 1.2;
margin-bottom: 10px;
}
.hero-box {
border-radius: 10px;
}
}
/* Very small phones */
@media (max-width: 400px) {
.hero-box h1 {
line-height: 1.2;
max-width: 100% !important;
}
.youtube-section img {
height: 260px !important;
}
.vc-cta-content h2 {
font-size: 22px;
max-width: 86%;
}
.banner-btn {
font-size: 14px;
padding: 12px 16px;
}
}
/* =====================================================
C. HERO SECTION HEIGHT / LAYOUT
Homepage hero is 100vh - fine.
Stats strip sits inside hero and can overflow on
very small screens.
===================================================== */
/* Prevent stats-strip from adding extra overflow on very small screens */
@media (max-width: 400px) {
.stats-strip {
padding: 14px 0;
}
.stats-strip h3 {
font-size: 18px;
}
.stats-strip p {
line-height: 1.4;
}
.stats-strip-icon i {
font-size: 22px;
}
}
/* =====================================================
D. BLIND CAPITAL SECTION
.blind-capital-left has padding-left: 40px desktop,
only zeroed at 767px - dead space at 768–991px.
===================================================== */
@media (max-width: 991px) {
.blind-capital-left {
padding-left: 16px;
padding-top: 28px;
}
.blind-capital-left h3 {
font-size: 18px;
}
.blind-capital-images {
min-height: 340px;
}
}
/* =====================================================
BLIND CAPITAL - LEFT IMAGE MATCHES THE COPY BESIDE IT
The row is .align-items-center, so the image column is
only as tall as its own content and the wrapper's
min-height:450px inflates the box without the ![]()
following (a % height cannot resolve against an auto
height, so the image fell back to its natural 320px and
left a gap under it). Stretching the row gives the column
a definite height, which lets height:100% resolve all the
way down to the image. Below 992px the columns stack, so
each one stretches to its own line and the image simply
keeps its natural height.
===================================================== */
@media (max-width: 1100px) {
.blind-capital-section .row {
align-items: stretch !important;
}
.blind-capital-img-single {
height: 100%;
min-height: 0;
}
}
@media (max-width: 767px) {
.blind-capital-left {
padding-left: 0;
padding-top: 24px;
}
.blind-capital-images {
min-height: 260px;
gap: 8px;
}
.blind-capital-img-single {
min-height: auto;
}
.blind-capital-img-bottom img {
height: 120px;
}
}
@media (max-width: 575px) {
.blind-capital-images {
flex-direction: column;
min-height: auto;
gap: 8px;
}
.blind-capital-img-large,
.blind-capital-img-small {
flex: none;
width: 100%;
height: 200px;
}
.blind-capital-img-bottom img {
height: 100px;
}
}
/* =====================================================
E. GOOD VISION SECTION
.good-vision-content padding: 80px 40px 80px 0 is
excessive at tablet; at mobile cols stack so the
right padding becomes a left margin instead.
===================================================== */
@media (max-width: 1200px) {
.good-vision-content {
padding: 60px 20px 60px 0;
}
}
@media (max-width: 991px) {
.good-vision-content {
padding: 48px 20px 40px 20px;
}
.good-vision-content h2 {
font-size: clamp(24px, 4vw, 34px);
}
}
@media (max-width: 767px) {
/* The portrait art (good-vision-mb.jpg) carries the face and glasses
across the TOP ~40% and fades to flat navy below, so the copy is
bottom-aligned into that navy band. The top padding clears the
photo; flex-end keeps the block pinned down if the copy reflows. */
.good-vision-content {
justify-content: flex-end;
padding: 340px 0px 60px 0px;
}
.good-vision-content h2 {
font-size: clamp(30px, 6vw, 28px);
}
.awards-left ul li p {
text-align: start;
}
.good-vision-desc {
line-height: 1.6;
}
.cta-vc-1 {
background-position: center;
}
.cta-vc-2 {
background-position: center;
}
.hospital-partners-slider .swiper-button-prev,
.hospital-partners-slider .swiper-button-next {
display: none;
}
/* Remove manual
inside desc paragraphs visually */
.good-vision-desc br {
display: none;
}
h2 {
font-size: 30px;
}
.good-vision-buttons {
flex-direction: row;
gap: 10px;
margin-top: 16px;
}
.blind-capital-left h3 {
font-size: 20px;
}
.gv-donate-btn,
.gv-vision-btn {
width: auto;
text-align: center;
padding: 10px 21px;
font-size: 14px;
display: inline-flex;
}
}
/* =====================================================
F. OUR VISION SECTION - comparison slider height
min-height: 400px - too tall on mobile when col is
full-width; browser must scroll to see the content
below it.
===================================================== */
@media (max-width: 991px) {
.vision-comparison {
min-height: 560px;
margin-bottom: 0;
}
.our-vision-text {
padding-top: 20px;
}
.our-vision-text h3 {
font-size: clamp(20px, 3.5vw, 24px);
}
.hospital-partners-slider .swiper-button-prev,
.hospital-partners-slider .swiper-button-next {
display: none;
}
.our-vision-text p {
line-height: 1.6;
}
}
@media (max-width: 767px) {
.vision-comparison {
min-height: 380px;
margin-bottom: 24px;
}
.our-vision-cta {
display: inline-flex;
text-align: center;
width: auto;
}
}
@media (max-width: 575px) {
.vision-comparison {
min-height: 220px;
}
}
@media (max-width: 400px) {
.vision-comparison {
min-height: 180px;
}
.vc-sc-img {
padding: 15px 20px 0px;
}
}
/* =====================================================
G. SERVICE CARDS (What We Do grid)
Height 420px desktop → 300px at 800px, but there's
no intermediate step for 575-800px range. Cards
look cramped at 600-800px.
===================================================== */
@media (max-width: 800px) and (min-width: 576px) {
.service-card {
height: 340px;
}
}
@media (max-width: 575px) {
.service-card {
height: 280px;
}
.service-card .overlay h5 {
max-width: 100%;
}
}
@media (max-width: 400px) {
.service-card {
height: 240px;
}
}
/* =====================================================
H. EYEGLASSES / CUSTOM TABS
At 767px the tabs switch to nowrap + overflow-x,
but at 575px another block wraps them again - these
two rules conflict. Resolve: keep scroll on mobile,
allow wrap only on XS if enough space.
===================================================== */
/* 575-767px: scrollable, don't wrap */
@media (max-width: 767px) and (min-width: 576px) {
.custom-tabs {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start !important;
padding-bottom: 12px;
gap: 10px;
}
.custom-tabs .nav-link {
white-space: nowrap;
padding: 10px 24px;
font-size: 14px;
}
}
/* Under 576px: allow wrapping to 2 columns */
@media (max-width: 575px) {
.custom-tabs {
flex-wrap: wrap;
overflow-x: visible;
justify-content: center !important;
gap: 8px;
padding-bottom: 0;
}
.custom-tabs .nav-link {
flex: 1 1 calc(50% - 8px);
min-width: 120px;
padding: 9px 12px;
font-size: 13px;
text-align: center;
white-space: normal;
margin: 0;
}
}
@media (max-width: 400px) {
.custom-tabs .nav-link {
flex: 1 1 100%;
font-size: 13px;
}
}
/* =====================================================
I. TAB CARD (eyeglasses section)
Desktop: height implicitly set by content + large
bottom padding (127px) for the absolute-positioned
image. On mobile the image should be hidden and
bottom padding reduced.
===================================================== */
@media (max-width: 991px) {
.tab-card {
padding: 36px 30px 50px 36px;
height: auto;
}
.tab-card h3 {
font-size: clamp(22px, 3.5vw, 28px);
max-width: 100%;
}
.tab-card p {
line-height: 1.55;
}
}
@media (max-width: 767px) {
.tab-card {
padding: 28px 22px 36px 26px;
}
.tab-card h3 {
font-size: 22px;
}
.tab-card p {
max-width: 100%;
}
.cta-section .cta-btn.donate-btn {
margin-bottom: 0;
display: inline;
}
.youtube-section.section img {
height: 250px!important;
}
.story-read-btn {
font-size: 17px;
}
/* Hide the decorative tab image on mobile - it positions absolutely
and creates unwanted height / overflow */
.tab-image {
display: none;
}
}
@media (max-width: 575px) {
.tab-card {
padding: 22px 18px 28px 20px;
border-radius: 14px;
}
.tab-card h3 {
font-size: 20px;
margin-bottom: 8px;
}
.tab-card p {
margin-top: 8px;
}
}
@media (max-width: 400px) {
.tab-card {
padding: 18px 14px 22px 16px;
}
.tab-card h3 {
font-size: 18px;
}
}
/* =====================================================
J. STATS SECTION CARDS
stat-card height set to fixed values (268px, 228px)
in breakpoints - on mobile with full-width cols the
fixed height creates too much empty space.
===================================================== */
@media (max-width: 991px) {
.stat-card {
height: auto;
min-height: 160px;
padding: 20px;
}
.stat-card h3 {
font-size: 28px;
}
.stat-image-card {
min-height: 220px;
}
.overlay-text h3 {
font-size: 28px;
}
.overlay-text p {
max-width: 200px;
line-height: 1.4;
}
}
@media (max-width: 767px) {
.stat-card {
height: auto;
min-height: auto;
padding: 18px;
}
.stat-card h3 {
font-size: 26px;
}
.stat-card .icon img {
width: 40px;
height: 40px;
}
.stat-image-card {
min-height: 200px;
}
.overlay-text h3 {
font-size: 24px;
}
.overlay-text p {
max-width: 180px;
}
}
@media (max-width: 575px) {
.stat-card h3 {
font-size: 24px;
}
.stat-image-card {
min-height: 180px;
}
.overlay-text h3 {
font-size: 22px;
}
.overlay-text p {
max-width: 160px;
}
}
@media (max-width: 400px) {
.stat-card h3 {
font-size: 22px;
}
.overlay-text h3 {
font-size: 20px;
}
}
/* =====================================================
K. TESTIMONIAL SECTION
Fixed-height testimonial-img on mobile can cut off
images; quote-icon with absolute position can bleed.
===================================================== */
@media (max-width: 991px) {
.testimonial-card {
border-radius: 20px;
}
.testimonial-content {
padding: 40px 30px 36px 30px;
}
.testimonial-content h4 {
font-size: 22px;
}
.testimonial-content p {
line-height: 1.6;
margin-bottom: 16px;
}
.quote-icon {
top: 16px;
right: 20px;
}
.quote-icon img {
width: 56px;
}
}
@media (max-width: 767px) {
.testimonial-img {
height: 220px;
}
.testimonial-content {
height: 350px;
}
.testimonial-img img {
height: auto;
object-fit: cover;
border-radius: 20px 20px 0 0;
border-bottom-left-radius: 0;
}
.testimonial-content {
padding: 28px 20px 24px 20px;
}
.testimonial-content h4 {
font-size: 20px;
}
.testimonial-content p {
line-height: 1.55;
margin-bottom: 12px;
}
.quote-icon {
top: 12px;
right: 14px;
}
.quote-icon img {
width: 44px;
}
}
@media (max-width: 575px) {
.testimonial-content {
padding: 22px 16px 20px 16px;
}
.testimonial-content h4 {
font-size: 18px;
}
.testimonial-content p {
line-height: 1.5;
}
.quote-icon img {
width: 36px;
}
}
@media (max-width: 400px) {
.testimonial-content {
padding: 18px 14px 16px 14px;
}
.testimonial-content h4 {
font-size: 16px;
}
}
/* =====================================================
L. CTA SECTION
Already has some mobile fixes; add tablet-specific
and make CTA button full-width on very small screens.
===================================================== */
@media (max-width: 991px) {
.cta-content h2 {
font-size: clamp(22px, 4vw, 30px);
}
.cta-content p {
max-width: 100%;
}
}
@media (max-width: 767px) {
.cta-content h2 {
font-size: clamp(30px, 5vw, 30px);
}
.cta-btn {
display: inline-block;
margin-bottom: 10px;
}
}
@media (max-width: 575px) {
.cta-btn {
display: block;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
}
@media (max-width: 400px) {
.cta-btn {
font-size: 13px;
padding: 10px 14px;
}
}
/* =====================================================
M. FOOTER
80px top padding stays until 767px - tablet
(768-991) needs a smaller value.
===================================================== */
@media (max-width: 991px) and (min-width: 768px) {
.main-footer {
padding: 56px 0 32px;
}
.main-footer h5 {
font-size: 20px;
margin-bottom: 24px;
}
.main-footer ul li a {
font-size: 16px;
}
.padding-2,
.padding-3,
.padding-4,
.padding-5 {
padding-left: 0;
}
}
@media (max-width: 400px) {
.main-footer {
padding: 36px 0 24px;
}
.main-footer h5 {
margin-bottom: 14px;
}
.main-footer p {
margin-bottom: 10px;
}
.social-icons a {
width: 32px;
height: 32px;
font-size: 14px;
}
}
/* =====================================================
N. CONTACT SECTION - INFO PANEL & FORM
.ctc-pointer font-size: 1.25rem base; on very small
screens this is tight. Also contact-detail spacing.
===================================================== */
@media (max-width: 767px) {
.info-heading {
font-size: clamp(20px, 5vw, 26px);
margin-bottom: 16px;
}
.ctc-pointer {
font-size: 1rem;
padding: 12px 0;
}
.contact-detail {
margin-bottom: 16px;
}
}
@media (max-width: 575px) {
.info-heading {
font-size: 24px;
}
.form-card {
padding: 20px 16px;
}
}
@media (max-width: 400px) {
.info-heading {
font-size: 18px;
}
.info-panel {
padding: 24px 16px 20px 16px;
}
.form-panel {
padding: 0 16px 20px 16px;
}
.submit-btn {
width: 100%;
font-size: 13px;
}
}
/* =====================================================
O. SECTION HEADING / SECTION HEAD
section-head margin-bottom: 40px; on mobile this is
too much gap before the content.
===================================================== */
@media (max-width: 991px) {
.section-head {
margin-bottom: 28px;
}
}
@media (max-width: 767px) {
.section-head {
margin-bottom: 20px;
}
.section-subtext {
line-height: 1.6;
}
}
@media (max-width: 575px) {
.section-head {
margin-bottom: 16px;
}
}
@media (max-width: 400px) {
.section-head {
margin-bottom: 22px;
}
}
/* =====================================================
P. BENEFIT CARDS (Bright Sight section)
card-title: 30px and card-text: 20px are very large
on mobile when col goes full-width.
===================================================== */
@media (max-width: 991px) {
.card-title {
font-size: 22px;
}
}
@media (max-width: 767px) {
.card-title {
font-size: 20px;
}
.benefit-card {
padding: 12px 12px 24px 12px;
}
.benefit-card img {
height: 200px;
}
}
@media (max-width: 575px) {
.card-title {
font-size: 18px;
}
}
@media (max-width: 400px) {
.card-title {
font-size: 16px;
}
}
/* =====================================================
Q. HOSPITAL PARTNERS / UNIVERSITY SECTION
University columns stack to col-6 - logos stay OK.
Partner card paragraph text can be clamped.
===================================================== */
@media (max-width: 575px) {
.partner-logo,
.university-logo {
height: 80px;
padding: 12px;
}
.hospital-partners-section {
padding: 36px 0;
}
}
@media (max-width: 400px) {
.partner-logo,
.university-logo {
height: 70px;
padding: 10px;
}
}
/* =====================================================
R. GET INVOLVED PAGE - specific responsive fixes
gi-newsletter-form stacks on mobile.
ivc-stat-num & hap-stat-num on small screens.
===================================================== */
@media (max-width: 767px) {
/* Newsletter form */
.gi-newsletter-form {
flex-direction: column;
align-items: stretch;
}
.gi-quote-banner blockquote br {
display: none;
}
.au-journey-section .section-subtext br {
display: none;
}
.gi-newsletter-input {
min-width: 0;
width: 100%;
}
.gi-newsletter-btn {
width: max-content;
justify-content: center;
margin: 0 auto;
}
/* IVC stat row */
.ivc-intro .ivc-stat-row {
gap: 20px;
}
.ivc-stat-num {
font-size: 33px;
}
.gi-chal-stat-num {
font-size: 30px;
}
.gi-chal-stat-block .gi-chal-icon {
margin-bottom: 0;
}
.gi-chal-stat-block {
padding: 27px 30px;
}
.ivc-stat-label {
font-size: 17px;
}
/* Impact strip */
.gi-impact-num {
font-size: clamp(28px, 7vw, 40px);
}
.gi-impact-label {
font-size: 14px;
}
/* Tagline band */
.gi-tagline-band {
padding: 32px 0;
}
.gi-tagline-band h2 {
font-size: clamp(20px, 5vw, 28px);
}
/* Quote banner */
.gi-quote-banner {
padding: 36px 0;
}
.gi-newsletter {
padding: 48px 0;
}
}
@media (max-width: 575px) {
.gi-card-img {
height: 170px;
}
.gi-card-body {
padding: 16px 16px 18px;
}
.gi-card-body h3 {
font-size: 17px;
}
.gi-card-btn {
padding: 10px 20px;
font-size: 13px;
}
.gi-tagline-band h2 {
font-size: 20px;
}
}
@media (max-width: 400px) {
.gi-card-img {
height: 150px;
}
.gi-chal-stats-row {
gap: 20px;
}
.gi-newsletter-input {
padding: 12px 14px;
font-size: 14px;
}
.gi-newsletter-btn {
padding: 12px 20px;
font-size: 13px;
}
.ivc-stat-num {
font-size: 22px;
}
}
/* =====================================================
S. HAPPENINGS PAGE - specific responsive fixes
hap-stat-row gap; award/prog/news cards.
===================================================== */
@media (max-width: 767px) {
.hap-stat-row {
gap: 20px;
margin-top: 18px;
}
.hap-stat-num {
font-size: clamp(22px, 5vw, 30px);
}
.hap-stat-label {
font-size: 12px;
}
.award-card {
padding: 20px 16px;
}
.award-card h5 {
font-size: 15px;
}
.prog-card {
padding: 24px 18px;
}
.prog-card h5 {
font-size: 20px;
}
.news-card-img {
height: 170px;
}
}
@media (max-width: 575px) {
.hap-stat-row {
gap: 14px;
}
.hap-stat-num {
font-size: 20px;
}
.news-card-img {
height: 150px;
}
.news-card-body {
padding: 14px;
}
.award-card {
padding: 16px 12px;
}
}
@media (max-width: 400px) {
.hap-stat-row {
flex-direction: column;
gap: 10px;
}
.hap-stat-num {
font-size: 18px;
}
}
/* =====================================================
T. LOGO SLIDER (marquee)
c-logo height: 90px - OK on desktop, but on very
small screens logos can look squished.
===================================================== */
@media (max-width: 400px) {
.c-logo {
height: 60px;
padding: 6px 14px;
}
.c-logo img {
max-width: 80px !important;
}
.logoSlider h3.logoTitle {
font-size: 16px;
}
}
/* =====================================================
U. VIDEO SECTION
video-slider-prev / next buttons overlap content on
very small screens.
===================================================== */
@media (max-width: 575px) {
.video-slider-prev,
.video-slider-next {
width: 36px;
height: 36px;
}
.video-slider-prev i,
.video-slider-next i {
font-size: 18px;
}
}
@media (max-width: 400px) {
.video-slider-prev {
left: 8px;
}
.video-slider-next {
right: 8px;
}
}
/* =====================================================
V. ABOUT PAGE - story & team section
au-story-img min-height: 380px on desktop is too
tall when col goes full-width on mobile.
===================================================== */
@media (max-width: 991px) {
.au-story-img {
min-height: 280px;
max-height: 380px;
}
}
@media (max-width: 767px) {
.au-story-img {
min-height: 220px;
max-height: 300px;
margin-bottom: 0px;
}
}
@media (max-width: 575px) {
.au-story-img {
min-height: 180px;
max-height: 250px;
}
}
@media (max-width: 400px) {
.au-story-img {
min-height: 150px;
max-height: 200px;
}
.au-team-img {
height: 180px;
}
.au-team-name {
font-size: 15px !important;
}
.au-tc-year {
font-size: 40px;
}
.au-tc-year--range {
font-size: 30px;
}
}
/* =====================================================
W. IMPACT STORIES PAGE - filter & story cards
===================================================== */
@media (max-width: 400px) {
.filter-btn {
padding: 7px 12px;
font-size: 12px;
}
.story-hero-content h1 {
font-size: 22px;
}
.hero-stat-num {
font-size: 20px;
}
.hero-stat-label {
font-size: 11px;
}
.story-at-glance {
padding: 16px;
}
.glance-label {
font-size: 12px;
}
.related-section {
padding: 40px 0;
}
}
/* =====================================================
X. SECTION BASE PADDING - cap for very small devices
===================================================== */
@media (max-width: 400px) {
.hospital-partners-section {
padding: 30px 0;
}
.stats-strip {
padding: 12px 0;
}
}
/* =====================================================
Y. GLOBAL CONTAINER GUTTERS - tighten on very small
===================================================== */
/* =====================================================
Z. MOBILE MENU OFFCANVAS
On very small screens the menu nav links at 20px
font-size are large; bottom buttons should stack.
===================================================== */
@media (max-width: 400px) {
.mobile-menu>li>a,
.mobile-toggle {
font-size: 17px;
padding: 15px 0;
}
.mobile-submenu li a {
font-size: 14px;
padding: 10px 0;
}
.offcanvas.offcanvas-top.mobile-menu .contact-btn,
.offcanvas.offcanvas-top.mobile-menu .donate-btn {
width: 100%;
margin-bottom: 8px;
font-size: 13px;
justify-content: center;
}
}
/* =====================================================
END OF RESPONSIVE AUDIT FIXES - 2026-04-16
===================================================== */
/* =====================================================
WHAT WE DO - DO-CARDS-ROW RESPONSIVE
===================================================== */
/* Tablet / small laptop: five cards go 3 + 2.
flex-grow is 0 so the two left over keep the same width as the three
above them instead of stretching to half the row each, and
justify-content centres that short second row. The basis is the exact
third of the row once the two 16px gaps are taken out. */
@media (max-width: 1100px) {
.do-cards-row {
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.do-card-col {
flex: 0 0 calc((100% - 32px) / 3);
max-width: calc((100% - 32px) / 3);
min-width: 0;
}
}
/* Phones: one card per row, full width.
The one-third basis set at 1100px above is replaced outright.
A full-width card also needs more height, or the 16:9-ish box reads as
a letterbox strip - the height scales with the viewport so it stays
roughly square on a small phone and does not get excessively tall on a
wide one. Scoped to .do-card-col so the shared .service-card used by
the vision-centre measure grid and the happenings cards is untouched. */
@media (max-width: 767px) {
.do-cards-row {
gap: 16px;
}
.do-card-col {
flex: 0 0 100%;
max-width: 100%;
min-width: 0;
}
.do-card-col .service-card {
height: clamp(340px, 112vw, 490px);
}
}
/* Main nav - "GoodVision Glasses" is longer than any other item and was
wrapping to a second line across most desktop widths (~992px–1550px).
Rather than rely only on squeezing nav-link spacing, the header's three
columns (logo / nav / buttons) are also re-split here to give the nav
more of the row - logo and buttons both keep enough width for their
own content (checked at 992px, the narrowest point this applies).
!important is used defensively since the existing breakpoint rules
above did not reliably win the cascade at these widths. */
@media (min-width: 992px) and (max-width: 1560px) {
.main-header .col-lg-2.col-md-4.col-6 {
flex: 0 0 13%;
max-width: 13%;
}
.main-header .col-lg-7.d-none.d-lg-block {
flex: 0 0 65%;
max-width: 65%;
}
.main-header .col-lg-3.col-md-8.col-6.text-end {
flex: 0 0 22%;
max-width: 22%;
}
}
/* Tiered nav-link spacing within 992px–1560px, via custom properties on
.main-nav rather than competing !important declarations - the available
width grows a lot across this range (verified: ~305px of unused slack at
1440px with a single flat tight value), so spacing eases up in three
steps instead of staying maximally tight the whole way. Each tier's
values are checked against its own narrowest edge. Consumed by the base
.main-nav .nav-link / .main-nav .nav rules in main.css. */
@media (min-width: 992px) and (max-width: 1199px) {
.main-nav {
--nav-link-padding-x: 3px;
--nav-link-font-size: 12px;
--nav-gap: 4px;
}
}
@media (min-width: 1200px) and (max-width: 1439px) {
.main-nav {
--nav-link-padding-x: 8px;
--nav-link-font-size: 13px;
--nav-gap: 10px;
}
}
/* No upper bound: the Bootstrap container caps out well before 1920px,
so available nav width plateaus rather than keeps growing - the
original unmodified spacing (20px padding) was still too tight for
"GoodVision Glasses" even at very wide viewports; confirmed these
values keep working at 1920px+ too. */
@media (min-width: 1440px) {
.main-nav {
--nav-link-padding-x: 12px;
--nav-link-font-size: 14px;
--nav-gap: 18px;
}
}
/* =========================================
MEANINGFUL BUSINESS 100 SECTION - RESPONSIVE
========================================= */
@media only screen and (max-width: 1200px) {
.mb100-content {
padding: 40px 30px;
}
.mb100-footer {
gap: 28px;
}
}
@media only screen and (max-width: 991px) {
.mb100-content {
padding: 35px 25px;
}
.mb100-hashtag {
margin-bottom: 20px;
}
.mb100-desc {
margin-bottom: 30px;
}
.mb100-photo {
min-height: 320px;
}
}
@media (max-width: 767px) {
.mb100-card {
border-radius: 15px;
}
.mb100-content {
padding: 30px 20px;
}
.mb100-person {
margin-bottom: 18px;
}
.mb100-desc {
margin-bottom: 28px;
}
.mb100-footer {
gap: 24px;
justify-content: center;
}
.mb100-photo {
min-height: 20px;
height: 357px;
}
.mb100-photo img {
object-position: center 20%;
}
}
@media (max-width: 575px) {
.mb100-content {
padding: 28px 18px;
}
.mb100-footer {
flex-direction: column;
align-items: center;
gap: 22px;
}
.mb100-photo {
min-height: 240px;
}
}
@media (max-width: 375px) {
.mb100-mark-ring {
width: 40px;
height: 40px;
}
.mb100-mark-mb {
font-size: 14px;
}
.mb100-mark-num {
font-size: 22px;
}
.mb100-badge-title {
font-size: 12px;
letter-spacing: 0.1em;
}
}
/* ============================================================
BODY COPY SCALE - 20px / regular
------------------------------------------------------------
Body copy has exactly two sizes, both at weight 400:
desktop (>=1101px) .... 20px - base `p` rule in main.css
everything else (<=1100px) 16px - media block at the end of this file
No other rule anywhere sets font-size or font-weight on a paragraph,
so nothing here has to fight specificity.
Only sub-heading classes that sit on non- elements still need
pinning to the same scale - that is all this block does now.
============================================================ */
.hap-award-sub,
.au-tc-subtitle {
font-size: 20px;
font-weight: 400;
}
/* ---- Below 1100px: body copy steps down to 16px ----
A single step, not a ladder: 16px applies from 1100px all the way
down to the smallest phone. Weight stays 400 at every size.
This is the last paragraph font-size rule in the cascade, so it wins
over the base `p` rule in main.css on source order alone. */
@media (max-width: 1100px) {
/* Global inherited size - base is 20px in main.css. Covers everything
that has no explicit size of its own (li, td, div, span, labels…). */
body {
font-size: 16px;
}
p {
font-size: 16px;
}
/* Section subtext that sits on non-
elements - kept in step so
it never renders larger than the body copy around it. */
.hap-award-sub,
.au-tc-subtitle {
font-size: 16px;
}
}
/* ---- ABOUT - VISION & MISSION STACK ----
Everything else scales fluidly via clamp() in main.css; the only real
breakpoint is stacking the icon above the text on phones. */
@media (max-width: 767px) {
.au-mv-card {
flex-direction: column;
}
}
/* Very narrow phones - claw back horizontal padding for the text */
@media (max-width: 360px) {
.au-mv-card {
padding: 22px 18px;
}
.au-mv-taglines {
display: block;
}
.au-mv-tag {
display: inline-block;
margin: 0 6px 8px 0;
}
}
/* =====================================================
STATS STRIP - CONTINUOUS MARQUEE (BELOW 1200px)
Applies only to .stats-strip--marquee (opted in by adding the class
to a page's .stats-strip - currently home, get-involved, happenings,
impact-stories).
JS fills the track with two identical blocks and sets
--stats-marquee-duration, so translating the track by -50%
lands exactly on the start of the second block: the loop
point is pixel-identical and never jumps.
===================================================== */
@keyframes statsStripMarquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(calc(-1 * var(--stats-marquee-distance, 50%)), 0, 0);
}
}
@media (max-width: 1199.98px) {
.stats-strip--marquee {
--stats-marquee-item: 200px;
--stats-marquee-gap: 12px;
overflow: hidden;
}
.stats-strip--marquee.is-marquee .stats-strip-slider {
width: 100%;
overflow: hidden;
}
.stats-strip--marquee.is-marquee .swiper-wrapper {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
width: max-content;
max-width: none;
height: auto;
transform: translate3d(0, 0, 0);
transition: none !important;
animation: statsStripMarquee var(--stats-marquee-duration, 30s) linear infinite;
animation-delay: var(--stats-marquee-delay, 0s);
/* Opaque background keeps subpixel text antialiasing on the moving
layer - a transparent layer makes the text shimmer as it scrolls. */
background: #009FE1;
backface-visibility: hidden;
}
.stats-strip--marquee.is-marquee .stats-strip-slide {
flex: 0 0 auto;
width: var(--stats-marquee-item);
max-width: var(--stats-marquee-item);
margin-right: var(--stats-marquee-gap);
height: auto;
transition: none !important;
}
/* Only the very last slide of the whole track has no divider - the
seam between the two blocks keeps its separator. */
.stats-strip--marquee.is-marquee .stats-strip-slide:last-child {
border-right: 0;
}
/* Hold a finger on the strip (or tab into it) to stop the scroll. */
.stats-strip--marquee.is-marquee:active .swiper-wrapper,
.stats-strip--marquee.is-marquee:focus-within .swiper-wrapper {
animation-play-state: paused;
}
}
@media (hover: hover) and (max-width: 1199.98px) {
.stats-strip--marquee.is-marquee:hover .swiper-wrapper {
animation-play-state: paused;
}
}
@media (max-width: 991.98px) {
.stats-strip--marquee {
--stats-marquee-item: 190px;
}
}
@media (max-width: 767.98px) {
.stats-strip--marquee {
--stats-marquee-item: 178px;
--stats-marquee-gap: 10px;
}
}
@media (max-width: 575.98px) {
.stats-strip--marquee {
--stats-marquee-item: 186px;
}
}
@media (max-width: 400px) {
.stats-strip--marquee {
--stats-marquee-item: 172px;
--stats-marquee-gap: 8px;
}
}
/* Respect reduced-motion: stop the scroll, let the strip be swiped instead. */
@media (prefers-reduced-motion: reduce) and (max-width: 1199.98px) {
.stats-strip--marquee.is-marquee .swiper-wrapper {
animation: none;
will-change: auto;
}
.stats-strip--marquee.is-marquee .stats-strip-slider {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.stats-strip--marquee.is-marquee .stats-strip-slider::-webkit-scrollbar {
display: none;
}
}
/* =====================================================
INNER BANNER - PER-BREAKPOINT ARTWORK
Every inner-page banner is now a that swaps in a
separately cropped file below 991px and again below 767px.
The desktop files are ~1920x700; that ultra-wide frame loses
most of its subject to object-fit:cover once the hero box is
991x600 and then near-square on a phone, so each breakpoint
gets art cut to the shape it actually renders at.
===================================================== */
/* The wrapper must not introduce a box of its own - the ![]()
inside stays the absolutely positioned layer it always was. */
/* The desktop artwork carries a dark gradient burnt into its left
side to hold the heading. The tablet and mobile crops are taken
from the photographic part of the frame, so that gradient is no
longer in the image and the scrim has to be drawn instead. Below
991px the hero copy sits at the bottom of the box, so the scrim
runs bottom-up. The colour matches the gradient baked into the
desktop art (sampled at rgb(26,44,77)).
Only pseudo-elements that were free are used here: .blog-banner,
.career-banner, .tech-hero and .blog-post-hero already spend
::before and ::after on decorative circles. career.html and
blog-detail.html are left alone entirely - .career-banner-bg::after
and .post-hero-bg::after already lay a full gradient over those
two banners at every width. */
@media (max-width: 991px) {
.hero-section.inner-page-hero::before,
.blog-banner-bg::after,
.tech-hero-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(to top,
rgba(26, 44, 77, 0.88) 0%,
rgba(26, 44, 77, 0.62) 35%,
rgba(26, 44, 77, 0.25) 65%,
rgba(26, 44, 77, 0) 100%);
}
}
/* =====================================================
VIEWPORT-FIT BANNER (DESKTOP / LAPTOP, 1200px AND UP)
Header + banner + stats strip together fill exactly one
screen, so the stats are readable without scrolling.
The header is in normal flow, so its height is subtracted:
--site-header-height is measured in main.js and the 84px
fallback keeps the layout correct before that runs.
min-height is a floor for very short windows - better to
push the strip slightly below the fold than to crush the
banner headline into the stats.
===================================================== */
@media (min-width: 1200px) {
.viewport-fit {
display: flex;
flex-direction: column;
height: calc(100vh - var(--site-header-height, 84px));
min-height: 510px;
}
.viewport-fit>.hero-section {
flex: 1 1 auto;
height: auto;
min-height: 0;
max-height: none;
}
/* The strip keeps its natural height; the banner absorbs the rest. */
.viewport-fit>.stats-strip,
.viewport-fit>.hero-section>.stats-strip {
flex: 0 0 auto;
}
}
/* Let the banner text block take only the space the stats strip leaves,
instead of pushing the strip off the bottom of the screen. */
@media (min-width: 1200px) {
.viewport-fit>.hero-section>.hero-content-wrapper {
min-height: 0;
}
}
/* Short laptop screens - 1366x768, 1280x720 and similar leave roughly
620px once browser chrome and the header are gone. Tighten the banner
copy so headline, text, button and stats all still share one screen. */
@media (min-width: 1200px) and (max-height: 720px) {
.viewport-fit .hero-box {
padding-top: 20px;
}
.viewport-fit .hero-box h1 {
line-height: 46px;
margin-bottom: 12px;
}
.viewport-fit .hero-box p {
margin-bottom: 16px;
}
.viewport-fit .banner-btn {
padding: 12px 22px;
}
}
/* =====================================================
FOOTER "CRAFTED BY" CREDIT
Three-across on large screens (copyright | crafted |
social); stacks and centres below that, where three
columns would crush the wordmark.
===================================================== */
@media (max-width: 991.98px) {
.footer-bottom {
text-align: center;
}
.footer_crafted {
justify-content: center;
margin: 14px 0;
}
.main-footer p.copyright {
margin-top: 0;
}
}
@media (max-width: 575.98px) {
.footer_crafted {
font-size: 13px;
gap: 5px;
}
.footer_crafted .logo-footer-new {
width: 70px;
}
}
/* Very short desktop windows (roughly 1280x720 hardware and below, or a
part-height browser window): trim the banner copy further so the
headline is never clipped by the stats strip. */
@media (min-width: 1200px) and (max-height: 640px) {
.viewport-fit .hero-box {
padding-top: 8px;
}
.viewport-fit .hero-box h1 {
line-height: 42px;
margin-bottom: 10px;
}
.viewport-fit .hero-box p {
margin-bottom: 12px;
}
}
/* =====================================================
HERO ALIGN END - bottom-aligned banner text
A dedicated class rather than editing the shared
.hero-content-wrapper / .tech-hero rules directly, since
those also serve inner pages (cataract-care, donate,
index, vision-center, netrasathi, ...) that should keep
their current alignment. Applied only on:
frame-production.html, skill-development.html,
contact.html, tech.html, inspiring-stories.html,
about.html, get-involved.html, community-eye-camps.html.
===================================================== */
@media (max-width: 991px) {
.hero-section.inner-page-hero .hero-content-wrapper.hero-align-end,
.hero-content-wrapper.hero-align-end,
.tech-hero.hero-align-end {
align-items: end;
}
}
@media (max-width: 767px) {
.hero-section.inner-page-hero .hero-content-wrapper.hero-align-end,
.hero-content-wrapper.hero-align-end,
.tech-hero.hero-align-end {
align-items: end;
}
}
/* =====================================================
GOOD VISION SECTION - MOBILE ARTWORK (HOME ONLY)
The desktop file is 1920x500. Below 767px the section
box turns portrait (375x450 at a 390px viewport), and
background-size:cover on a 3.84 aspect source crops it
down to roughly 417x500 of the original - a fragment of
one eye, with the subject unrecognisable.
good-vision-mb.webp is a portrait re-frame: the face and
the hand fitting the glasses sit at natural scale along
the bottom, fading up into the same navy the desktop art
already carries behind the copy.
Scoped with --home because goodvision-glasses.html shares
.good-vision-inner and keeps the wide artwork.
===================================================== */
@media (max-width: 767px) {
.good-vision-inner.good-vision-inner--home {
background-image: url(../new-images/good-vision-mb.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.good-vision-inner.gvg-good-vision-overlay {
background-image: url(../new-images/good-vision-mb.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.story-body-section {
padding: 60px 0 30px;
}
}
/* =====================================================
STACKING CARDS - SHORT PHONE FALLBACK
The pinned card has to fit between its own offset and the
bottom of the screen, otherwise the tail of the copy is
parked off-screen and can never be scrolled to. The tallest
cards run ~705px, so below roughly 700px of viewport height
the stack is dropped back to plain flow - the cards simply
follow one another and all the text stays reachable.
===================================================== */
@media (max-width: 767px) and (max-height: 700px) {
.vc-sc-card {
position: relative;
top: auto !important;
}
}
/* =====================================================
SHARED CTA BUTTON SIZING
-----------------------------------------------------
Every solid / outlined call-to-action button on the site uses the
same padding and font-size ladder as the home page banner button,
which is the reference design:
>= 992px ....... 12px 18px / 16px
768 - 991px .... 13px 25px / 14px
401 - 767px .... 14px 20px / 15px
<= 400px ....... 12px 16px / 14px
Bare .banner-btn is deliberately NOT listed - it already defines
these values further up, and re-listing it at (0,1,0) would break
the .viewport-fit short-laptop tweak that intentionally differs.
.tech-hero-btns .banner-btn IS listed on purpose, at (0,2,0): that
page previously shrank its hero button to 11px 18px / 13px, which
is exactly the per-page drift this block exists to remove.
Placed at the end of the file so it wins on source order over the
per-page overrides above without needing !important. The outline
compensation and the .sidebar-donate border reset follow below and
must stay after this block.
Deliberately excluded - these are not CTA buttons and 12px/18px
would break them: .filter-btn / .blog-filter-btn (filter pills),
.story-read-btn / .blog-read-btn (inline text links),
.story-nav-btn / .blog-nav-btn / .t-prev-btn / .t-next-btn /
.au-prev-btn (nav arrows), .play-btn / .post-share-btn /
.sidebar-share-icon-btn (icon buttons), .dn-freq-btn (amount
toggles) and .btn-close.
===================================================== */
.cta-btn,
.gv-donate-btn,
.gv-vision-btn,
.gv-vision-btn.border-btn,
.gi-newsletter-btn,
.submit-btn,
.pos-apply-btn,
.cta-btn-primary,
.cta-btn-outline,
.tech-hero-outline-btn,
.tech-hero-btns .banner-btn,
.dn-submit-btn,
.donate-modal-btn,
.sidebar-donate .btn,
.sidebar-donate-card .btn,
.contact-btn,
.donate-btn {
padding: 12px 18px;
font-size: 16px;
/* Home uses a constant 1.5 ratio at every breakpoint, so this single
declaration keeps every button the same height as its neighbours -
without it the outline variants came out 4px shorter. */
line-height: 1.5;
}
@media (max-width: 991px) {
.cta-btn,
.gv-donate-btn,
.gv-vision-btn,
.gv-vision-btn.border-btn,
.gi-newsletter-btn,
.submit-btn,
.pos-apply-btn,
.cta-btn-primary,
.cta-btn-outline,
.tech-hero-outline-btn,
.tech-hero-btns .banner-btn,
.dn-submit-btn,
.donate-modal-btn,
.sidebar-donate .btn,
.sidebar-donate-card .btn,
.contact-btn,
.donate-btn {
padding: 13px 25px;
font-size: 14px;
}
}
@media (max-width: 767px) {
.cta-btn,
.gv-donate-btn,
.gv-vision-btn,
.gv-vision-btn.border-btn,
.gi-newsletter-btn,
.submit-btn,
.pos-apply-btn,
.cta-btn-primary,
.cta-btn-outline,
.tech-hero-outline-btn,
.tech-hero-btns .banner-btn,
.dn-submit-btn,
.donate-modal-btn,
.sidebar-donate .btn,
.sidebar-donate-card .btn,
.contact-btn,
.donate-btn {
padding: 7px 16px;
font-size: 14px;
}
}
@media (max-width: 400px) {
.cta-btn,
.gv-donate-btn,
.gv-vision-btn,
.gv-vision-btn.border-btn,
.gi-newsletter-btn,
.submit-btn,
.pos-apply-btn,
.cta-btn-primary,
.cta-btn-outline,
.tech-hero-outline-btn,
.tech-hero-btns .banner-btn,
.dn-submit-btn,
.donate-modal-btn,
.sidebar-donate .btn,
.sidebar-donate-card .btn,
.contact-btn,
.donate-btn {
padding: 12px 16px;
font-size: 14px;
}
}
/* Outline variants carry a 2px border, which sits on top of the shared
padding and makes them 4px taller than the solid button beside them
(visible on the tech hero, where the pair is not flex-stretched).
Trim the padding by the border width so the heights line up. */
.gv-vision-btn.border-btn,
.cta-btn-outline,
.tech-hero-outline-btn {
padding: 12px 18px;
}
@media (max-width: 991px) {
.gv-vision-btn.border-btn,
.cta-btn-outline,
.tech-hero-outline-btn {
padding: 11px 23px;
}
}
@media (max-width: 767px) {
.gv-vision-btn.border-btn,
.cta-btn-outline,
.tech-hero-outline-btn {
padding: 7px 16px;
}
}
@media (max-width: 400px) {
.gv-vision-btn.border-btn,
.cta-btn-outline,
.tech-hero-outline-btn {
padding: 10px 14px;
}
}
/* These two are bare Bootstrap .btn elements that never declare a border,
so they inherited Bootstrap's 1px default and rendered 2px taller than
every other CTA. Reset it so they match the shared ladder exactly. */
.sidebar-donate .btn,
.sidebar-donate-card .btn {
border: 0;
}
/* =====================================================
TEAM CARDS - STACKED LAYOUT (991px AND BELOW)
On a touch screen the desktop hover state latches on tap and
the bio covers the photo. Below 991px the card is laid out as
a plain stack instead - photo, then name / role / LinkedIn,
then the bio underneath - and the whole hover treatment
(blur, blue wash, expand) is switched off.
The bio markup is a sibling of .au-team-img rather than a
child, so it simply falls into flow last; no reordering
needed here.
===================================================== */
@media (max-width: 991px) {
/* Out of the overlay position and into the card's flow. */
.au-team-hover-overlay {
position: static;
height: auto;
border-radius: 0;
background: none;
padding: 14px 6px 0;
overflow: visible;
transition: none;
}
/* Always open - it is ordinary copy here, not a reveal. */
.au-team-bio {
max-height: none;
opacity: 1;
overflow: visible;
transition: none;
}
/* On the white card rather than on a blue wash. */
.au-team-bio p {
color: #3d4a57;
font-size: 16px;
}
/* Kill the hover treatment so a tap cannot latch it. */
.au-team-card:hover {
transform: none;
}
.au-team-card:hover .au-team-img img {
filter: none;
transform: none;
}
.au-team-card:hover .au-team-hover-overlay {
background: none;
}
.au-team-card:hover .au-team-bio {
max-height: none;
}
}
/* Equal card heights below 991px.
The bios differ in length, so once they are on show the cards no longer
end level. Two different layouts need covering:
- 767-991px the slides are grid items, so the row already stretches and
only the card inside has to fill it;
- below 767px Swiper is driving a flex track, and its own stylesheet
puts height:100% on every slide, which against an auto-height wrapper
resolves to the slide's own content height. Resetting that to auto
lets the flex track's default stretch size every slide to the tallest,
and the card then fills it. */
@media (max-width: 991px) {
.au-team-card {
height: 100%;
}
}
@media (max-width: 766px) {
.team-slider .swiper-slide {
height: auto;
}
}
/* Grid stretches per row, so the two-up rows were each level but the rows
themselves still differed. 1fr auto-rows levels every row to the tallest
so all six cards match. */
@media (min-width: 767px) and (max-width: 991px) {
.team-slider .swiper-wrapper {
grid-auto-rows: 1fr;
}
}
/* =====================================================
TEAM CARD PHOTO - HEIGHT BELOW 991px
===================================================== */
@media (max-width: 991px) {
.au-team-img {
height: 260px;
overflow: hidden;
border-radius: 12px;
position: relative;
}
}
/* =====================================================
OUR VISION SECTION - STACK BELOW 1100px
The columns are col-lg-6, so they already stack at
991px and under. Between 992px and 1100px the pair is
too narrow to sit side by side, so the comparison
slider and the copy are forced full width there too.
Scoped as a range rather than "1100 and below" so it
cannot override the existing <=991 / <=767 / <=575
heights for this section.
===================================================== */
@media (min-width: 992px) and (max-width: 1100px) {
.our-vision-section .col-lg-6 {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
}
/* 40px gutter only makes sense beside the image. */
.our-vision-text {
padding-left: 0;
padding-top: 24px;
}
/* Matches the full-width height used below 992px. */
.vision-comparison {
min-height: 560px;
}
}
/* =====================================================
HEADER - HAMBURGER FROM 1200px DOWN
The nav switches to the hamburger on the Bootstrap lg
breakpoint (992px) by way of the d-lg-* utilities, but the
full nav already runs out of room around 1100px and starts
crowding the Contact/Donate buttons. Move the swap up to
1200px. Bootstrap's display utilities are !important, so
these have to be too.
===================================================== */
@media (max-width: 1200px) {
.main-header .header-row--desktop {
display: none !important;
}
.main-header .header-row--mobile {
display: flex !important;
}
/* Same logo sizes the mobile header and its drawer already use below
992px, so the 992-1200px band does not fall back to the SVG's
intrinsic width. */
.main-header a.navbar-brand img {
width: 120px;
}
.mobile-logo img {
width: 130px;
}
/* .main-header carries no padding of its own and only picks up
15px 0 below 992px, so without this the 992-1200px band rendered a
47px header against 77px just below it. */
.main-header {
padding: 15px 0;
}
}
/* =====================================================
NEWSLETTER SUBSCRIBE (.nl-form)
Kept at the end of the file so it wins over the
generic p rules above.
===================================================== */
@media (max-width: 575px) {
.nl-sub {
margin-bottom: 26px;
font-size: 16px;
}
.nl-form {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.nl-input,
.nl-btn {
width: 100%;
height: 54px;
font-size: 16px;
}
}
/* =====================================================
LIFE IMPROVED BY VISION - STORY SLIDER
===================================================== */
@media (max-width: 991px) {
.life-story-img-swiper {
height: 380px;
}
}
@media (max-width: 575px) {
.life-story-img-swiper {
height: 300px;
}
.life-story-controls {
margin-top: 22px;
}
}