/* ============================================================
COMMUNITY OUTREACH PAGE
Mount Olives Church
============================================================ */

/* ============================================================
HERO
============================================================ */

.outreach-hero {
position: relative;
min-height: 72vh;
display: flex;
align-items: center;
overflow: hidden;
background: #102a43;
color: #ffffff;
}

.outreach-hero-background {
position: absolute;
inset: 0;

  
background:
    linear-gradient(
        90deg,
        rgba(8, 29, 48, 0.94) 0%,
        rgba(8, 29, 48, 0.78) 48%,
        rgba(8, 29, 48, 0.45) 100%
    ),
    url("https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?auto=format&fit=crop&w=1800&q=85")
    center center / cover no-repeat;

transform: scale(1.02);
  

}

.outreach-hero .container {
position: relative;
z-index: 2;
}

.outreach-hero-content {
max-width: 720px;
padding: 100px 0 90px;
}

.outreach-hero-tag {
display: inline-flex;
align-items: center;
gap: 9px;

  
margin-bottom: 22px;
padding: 8px 15px;

border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 30px;

font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;

background: rgba(255, 255, 255, 0.08);
  

}

.outreach-hero-tag i {
font-size: 0.9rem;
}

.outreach-hero h1 {
margin: 0 0 22px;

  
font-size: clamp(2.8rem, 6vw, 5rem);
line-height: 1.05;
font-weight: 700;
letter-spacing: -1.5px;
  

}

.outreach-hero p {
max-width: 620px;

  
margin: 0 0 32px;

font-size: 1.12rem;
line-height: 1.8;

color: rgba(255, 255, 255, 0.86);
  

}

/* ============================================================
BUTTONS
============================================================ */

.outreach-hero-buttons,
.outreach-cta-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}

.outreach-btn {
display: inline-flex;
align-items: center;
justify-content: center;

  
min-height: 48px;
padding: 12px 24px;

border-radius: 4px;

text-decoration: none;
font-size: 0.92rem;
font-weight: 600;

transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
  

}

.outreach-btn:hover {
transform: translateY(-2px);
}

.outreach-btn-primary {
background: #ffffff;
color: #102a43;
}

.outreach-btn-primary:hover {
background: #f1f4f7;
}

.outreach-btn-outline {
border: 1px solid rgba(255, 255, 255, 0.65);
color: #ffffff;
background: transparent;
}

.outreach-btn-outline:hover {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
ABOUT
============================================================ */

.outreach-about {
padding: 100px 0;
background: #ffffff;
}

.outreach-about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 70px;
}

.outreach-about-image {
position: relative;
padding-right: 20px;
padding-bottom: 20px;
}

.outreach-about-image img {
position: relative;
z-index: 2;

  
display: block;

width: 100%;
height: 520px;

object-fit: cover;
border-radius: 5px;
  

}

.outreach-image-accent {
position: absolute;
right: 0;
bottom: 0;

  
width: 78%;
height: 78%;

border: 2px solid #d5a93a;
border-radius: 5px;
  

}

.outreach-about-content {
max-width: 600px;
}

.section-label {
display: inline-block;

  
margin-bottom: 13px;

font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.8px;

color: #b38a24;
  

}

.outreach-about-content h2 {
margin: 0 0 22px;

  
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;

color: #102a43;
  

}

.outreach-about-content h2 span {
color: #b38a24;
}

.outreach-about-content > p {
margin: 0 0 18px;

  
font-size: 1rem;
line-height: 1.85;

color: #5d6872;
  

}

/* ============================================================
HIGHLIGHT
============================================================ */

.outreach-highlight {
display: flex;
gap: 18px;
align-items: flex-start;

  
margin-top: 30px;
padding: 22px;

border-left: 3px solid #b38a24;

background: #f7f8f9;
  

}

.outreach-highlight > i {
margin-top: 4px;

  
font-size: 1.4rem;
color: #b38a24;
  

}

.outreach-highlight strong {
display: block;

  
margin-bottom: 6px;

font-size: 1rem;
color: #102a43;
  

}

.outreach-highlight p {
margin: 0;

  
font-size: 0.9rem;
line-height: 1.7;

color: #68737d;
  

}

/* ============================================================
OUTREACH ACTIVITIES
============================================================ */

.outreach-activities {
padding: 100px 0;

  
background: #f5f7f9;
  

}

.section-heading {
max-width: 680px;
margin: 0 auto 55px;

  
text-align: center;
  

}

.section-heading h2 {
margin: 0 0 16px;

  
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1.2;

color: #102a43;
  

}

.section-heading p {
margin: 0;

  
font-size: 1rem;
line-height: 1.8;

color: #697681;
  

}

/* ============================================================
OUTREACH CARDS
============================================================ */

.outreach-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.outreach-card {
padding: 32px 28px;

  
border: 1px solid #e3e7eb;
border-radius: 5px;

background: #ffffff;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  

}

.outreach-card:hover {
transform: translateY(-5px);

  
border-color: #d5dce2;

box-shadow: 0 12px 28px rgba(16, 42, 67, 0.08);
  

}

.outreach-card-icon {
display: flex;
align-items: center;
justify-content: center;

  
width: 54px;
height: 54px;

margin-bottom: 22px;

border-radius: 4px;

background: #eef3f7;
color: #b38a24;

font-size: 1.25rem;
  

}

.outreach-card h3 {
margin: 0 0 12px;

  
font-size: 1.18rem;
color: #102a43;
  

}

.outreach-card p {
margin: 0;

  
font-size: 0.92rem;
line-height: 1.75;

color: #697681;
  

}

/* ============================================================
PURPOSE SECTION
============================================================ */

.outreach-purpose {
padding: 100px 0;

  
background: #ffffff;
  

}

.outreach-purpose-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 70px;
}

.outreach-purpose-content {
max-width: 620px;
}

.outreach-purpose-content h2 {
margin: 0 0 22px;

  
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;

color: #102a43;
  

}

.outreach-purpose-content h2 span {
color: #b38a24;
}

.outreach-purpose-content > p {
margin: 0 0 18px;

  
line-height: 1.8;
color: #697681;
  

}

.purpose-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 25px;

  
margin-top: 28px;
  

}

.purpose-point {
display: flex;
align-items: center;
gap: 10px;

  
font-size: 0.9rem;
color: #45525d;
  

}

.purpose-point i {
display: flex;
align-items: center;
justify-content: center;

  
width: 22px;
height: 22px;

flex-shrink: 0;

border-radius: 50%;

background: #eef3f7;
color: #b38a24;

font-size: 0.65rem;
  

}

/* ============================================================
SCRIPTURE / QUOTE
============================================================ */

.outreach-purpose-quote {
position: relative;

  
padding: 55px 45px;

border-radius: 5px;

background: #102a43;
color: #ffffff;

text-align: center;
  

}

.outreach-purpose-quote::before {
content: "";

  
position: absolute;
top: 0;
left: 0;

width: 5px;
height: 100%;

background: #d5a93a;
  

}

.outreach-purpose-quote > i {
margin-bottom: 20px;

  
font-size: 1.8rem;
color: #d5a93a;
  

}

.outreach-purpose-quote blockquote {
margin: 0 0 20px;

  
font-family: Georgia, "Times New Roman", serif;

font-size: 1.35rem;
line-height: 1.7;
font-style: italic;
  

}

.outreach-purpose-quote span {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;

  
color: rgba(255, 255, 255, 0.7);
  

}

/* ============================================================
INVOLVEMENT
============================================================ */

.outreach-involvement {
padding: 100px 0;

  
background: #f5f7f9;
  

}

.involvement-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.involvement-item {
position: relative;

  
padding: 35px 30px;

border-top: 2px solid #d5a93a;

background: #ffffff;
  

}

.involvement-number {
margin-bottom: 22px;

  
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 1.5px;

color: #b38a24;
  

}

.involvement-item h3 {
margin: 0 0 12px;

  
font-size: 1.2rem;
color: #102a43;
  

}

.involvement-item p {
margin: 0;

  
font-size: 0.92rem;
line-height: 1.75;

color: #697681;
  

}

/* ============================================================
CTA
============================================================ */

.outreach-cta {
padding: 100px 0;
background: #ffffff;
}

.outreach-cta-box {
position: relative;

  
overflow: hidden;

padding: 75px 70px;

border-radius: 5px;

background:
    linear-gradient(
        110deg,
        rgba(16, 42, 67, 0.98),
        rgba(16, 42, 67, 0.90)
    );
  

}

.outreach-cta-box::after {
content: "";

  
position: absolute;

right: -100px;
bottom: -150px;

width: 350px;
height: 350px;

border: 1px solid rgba(213, 169, 58, 0.25);
border-radius: 50%;
  

}

.outreach-cta-content {
position: relative;
z-index: 2;

  
max-width: 700px;
  

}

.outreach-cta .section-label {
color: #d5a93a;
}

.outreach-cta h2 {
margin: 0 0 20px;


font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;

color: #ffffff;


}

.outreach-cta p {
max-width: 650px;


margin: 0 0 30px;

font-size: 1rem;
line-height: 1.8;

color: rgba(255, 255, 255, 0.78);


}

/* ============================================================
BACK TO TOP
============================================================ */

.back-to-top {
position: fixed;


right: 25px;
bottom: 25px;

width: 45px;
height: 45px;

display: flex;
align-items: center;
justify-content: center;

border: none;
border-radius: 50%;

background: #102a43;
color: #ffffff;

cursor: pointer;

opacity: 0;
visibility: hidden;

transform: translateY(10px);

transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;

z-index: 1000;


}

.back-to-top.show {
opacity: 1;
visibility: visible;


transform: translateY(0);


}

.back-to-top:hover {
background: #b38a24;
}

/* ============================================================
RESPONSIVE DESIGN
============================================================ */

/* ---------- TABLET ---------- */

@media (max-width: 992px) {


.outreach-about-grid,
.outreach-purpose-grid {
    grid-template-columns: 1fr;
    gap: 50px;
}

.outreach-about-content,
.outreach-purpose-content {
    max-width: none;
}

.outreach-grid {
    grid-template-columns: repeat(2, 1fr);
}

.outreach-about-image img {
    height: 450px;
}

.involvement-grid {
    grid-template-columns: 1fr;
}

}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {


.outreach-hero {
    min-height: 75vh;
}

.outreach-hero-content {
    padding: 80px 0 70px;
}

.outreach-hero h1 {
    font-size: 2.65rem;
    letter-spacing: -0.8px;
}

.outreach-hero p {
    font-size: 1rem;
    line-height: 1.7;
}

.outreach-hero-buttons,
.outreach-cta-buttons {
    flex-direction: column;
    align-items: stretch;
}

.outreach-btn {
    width: 100%;
}


.outreach-about,
.outreach-activities,
.outreach-purpose,
.outreach-involvement,
.outreach-cta {
    padding: 75px 0;
}


.outreach-about-grid,
.outreach-purpose-grid {
    gap: 40px;
}


.outreach-about-image {
    padding-right: 12px;
    padding-bottom: 12px;
}

.outreach-about-image img {
    height: 360px;
}


.outreach-grid {
    grid-template-columns: 1fr;
    gap: 18px;
}


.outreach-card {
    padding: 28px 24px;
}


.purpose-points {
    grid-template-columns: 1fr;
}


.outreach-purpose-quote {
    padding: 45px 30px;
}

.outreach-purpose-quote blockquote {
    font-size: 1.15rem;
}


.outreach-cta-box {
    padding: 55px 30px;
}

}

/* ---------- SMALL PHONES ---------- */

@media (max-width: 480px) {


.outreach-hero h1 {
    font-size: 2.25rem;
}

.outreach-hero-content {
    padding: 70px 0 60px;
}

.outreach-about-image img {
    height: 300px;
}

.outreach-card {
    padding: 25px 20px;
}

.outreach-purpose-quote {
    padding: 40px 24px;
}

.outreach-cta-box {
    padding: 45px 22px;
}

.back-to-top {
    right: 15px;
    bottom: 15px;
}


}