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

.page-hero{

margin-top:78px;

background:

linear-gradient(
rgba(4,30,177,.85),
rgba(35,70,211,.85)
),

url("../images/smchero.JPG");

background-size:cover;

background-position:center;

padding:120px 0;

color:white;

text-align:center;

}

.page-hero h1{

font-size:clamp(2.5rem,5vw,4rem);

margin-bottom:15px;

}

.page-hero p{

max-width:700px;

margin:auto;

font-size:1.15rem;

}

/* CONTENT */

.about-section{

padding:30px 0;

background:#fff;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-image img{

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.15);

width:100%;

height:100%;

object-fit:cover;

}

.about-content h2{

font-size:2rem;

color:#041EB1;

margin-bottom:20px;

}

.about-content p{

margin-bottom:20px;

line-height:1.9;

color:#555;

}



/* Responsive */

@media(max-width:900px){

.about-grid{

grid-template-columns:1fr;

}

.page-hero{

padding:90px 0;

}

.about-content{

text-align:center;

}

}

/* =====================================
   OBJECTIVES LIST
===================================== */

.objectives-list{

    margin-top:25px;

    padding-left:20px;

}

.objectives-list li{

    margin-bottom:15px;

    color:#555;

    line-height:1.8;

}

.objectives-list li::marker{

    color:#041EB1;

}

/* =====================================
   VISION & MISSION
===================================== */

.vision-mission-section{

    padding:90px 0;

    background:#f7f9fc;

}

.vision-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.vision-card{

    background:#fff;

    padding:45px 35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.vision-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.vision-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#041EB1;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.4rem;

}

.vision-card h2{

    color:#041EB1;

    margin-bottom:18px;

    font-size:2rem;

}

.vision-card p{

    line-height:1.9;

    color:#555;

}

@media(max-width:900px){

.vision-grid{

    grid-template-columns:1fr;

}

}

/* =====================================
   MISSION CARD
===================================== */

.mission-card{

    text-align:left;

}

.mission-card .vision-icon{

    margin:0 auto 25px;

}

.mission-card h2{

    text-align:center;

}

.mission-card p{

    text-align:left;

    margin-bottom:20px;

}

.mission-card ul{

    padding-left:25px;

    margin:0;

}

.mission-card li{

    margin-bottom:12px;

    line-height:1.8;

    color:#555;

}

/* =====================================
   MOTTO & SEAL
===================================== */

.seal-grid{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:60px;

    align-items:center;

}

.seal-image{

    text-align:center;

}

.seal-image img{

    width:100%;

    max-width:300px;

    height:auto;

    object-fit:contain;

    transition:.35s;

}

.seal-image img:hover{

    transform:scale(1.05);

}

.seal-content h2{

    color:#041EB1;

    margin-bottom:15px;

    margin-top:20px;

    font-size:1.8rem;

}

.seal-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:20px;

}

@media(max-width:900px){

.seal-grid{

    grid-template-columns:1fr;

    text-align:center;

    gap:40px;

}

.seal-image img{

    max-width:220px;

}

}

/* =====================================================
   PHILOSOPHY PAGE
===================================================== */

/* ==========================
   SCHOOL THRUST
========================== */

.thrust-section{

    padding:90px 0;

    background:#f7f9fc;

}

.thrust-card{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:linear-gradient(
        135deg,
        #041EB1,
        #2346D3
    );

    color:#fff;

    padding:70px 50px;

    border-radius:25px;

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.thrust-card .section-tag{

    color:#FFD54A;

    margin-bottom:20px;

}

.thrust-card h2{

    font-size:2rem;

    line-height:1.6;

    margin-bottom:25px;

    font-style:italic;

    font-weight:600;

}

.thrust-card p{

    font-size:1.05rem;

    line-height:1.9;

    max-width:700px;

    margin:auto;

    opacity:.95;

}

/* ==========================
   PHILOSOPHY QUOTE
========================== */

.philosophy-quote{

    max-width:900px;

    margin:auto;

    background:#fff;

    padding:60px;

    border-left:8px solid #041EB1;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    font-size:1.35rem;

    line-height:2;

    color:#444;

    font-style:italic;

    position:relative;

}

.philosophy-quote::before{

    content:"“";

    position:absolute;

    top:10px;

    left:25px;

    font-size:5rem;

    color:#041EB1;

    opacity:.15;

    font-family:Georgia, serif;

}

.philosophy-quote span{

    display:block;

    margin-top:30px;

    font-size:1rem;

    font-style:normal;

    font-weight:700;

    color:#041EB1;

}

/* ==========================
   PRINCIPLES
========================== */

.principles-section{

    padding:100px 0;

    background:#fff;

}

.principles-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:60px;

}

.principle-card{

    background:#fff;

    border-radius:20px;

    padding:45px 30px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid transparent;

}

.principle-card:hover{

    transform:translateY(-10px);

    border-top:5px solid #041EB1;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.principle-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#041EB1;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.2rem;

}

.principle-card h3{

    color:#041EB1;

    margin-bottom:18px;

    font-size:1.4rem;

}

.principle-card p{

    color:#555;

    line-height:1.9;

}

/* ==========================
   COMMITMENT SECTION
========================== */

.about-grid.reverse{

    direction:rtl;

}

.about-grid.reverse>*{

    direction:ltr;

}

/* ==========================
   CLOSING BANNER
========================== */

.quote-banner{

    background:linear-gradient(
        rgba(4,30,177,.92),
        rgba(35,70,211,.92)
    ),
    url("images/smchero1.JPG");

    background-size:cover;

    background-position:center;

    color:#fff;

    text-align:center;

    padding:110px 20px;

}

.quote-banner blockquote{

    max-width:900px;

    margin:auto;

    font-size:2rem;

    line-height:1.8;

    font-weight:300;

    font-style:italic;

}

.quote-banner blockquote::before{

    content:"❝";

    display:block;

    font-size:4rem;

    color:#FFD54A;

    margin-bottom:20px;

}

/* ==========================
   HOVER EFFECTS
========================== */

.about-image{

    overflow:hidden;

}

.about-image img{

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.08);

}

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

@media(max-width:992px){

.about-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.about-grid.reverse{

    direction:ltr;

}

.thrust-card{

    padding:50px 30px;

}

.thrust-card h2{

    font-size:1.6rem;

}

.philosophy-quote{

    padding:40px 30px;

    font-size:1.1rem;

}

.quote-banner{

    padding:80px 20px;

}

.quote-banner blockquote{

    font-size:1.5rem;

}

}

@media(max-width:768px){

.principles-grid{

    grid-template-columns:1fr;

}

.principle-card{

    padding:35px 25px;

}

.principle-icon{

    width:75px;

    height:75px;

    font-size:1.8rem;

}

.about-content{

    text-align:left;

}

.about-content h2{

    font-size:2rem;

}

}

/* =====================================================
   OBJECTIVES PAGE
===================================================== */

/* ==========================
   GENERAL OBJECTIVES
========================== */

.objectives-section{

    padding:100px 0;

    background:#f8faff;

}

.objective-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.objective-card{

    background:#fff;

    padding:45px 35px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.objective-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.objective-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#041EB1;

}

.objective-number{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#041EB1;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:25px;

}

.objective-card h3{

    color:#041EB1;

    font-size:1.5rem;

    margin-bottom:18px;

}

.objective-card p{

    color:#555;

    line-height:1.9;

}

/* ==========================
   SPECIFIC OBJECTIVES
========================== */

.specific-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:60px;

}

.specific-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 12px 25px rgba(0,0,0,.08);

    border-left:6px solid #041EB1;

    transition:.35s;

}

.specific-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.specific-card h3{

    color:#041EB1;

    margin-bottom:15px;

    font-size:1.35rem;

}

.specific-card p{

    color:#555;

    line-height:1.8;

}

/* ==========================
   LEGACY SECTION
========================== */

.legacy-section{

    background:linear-gradient(
        rgba(4,30,177,.92),
        rgba(35,70,211,.92)
    ),
    url("images/gsfacade.JPG");

    background-size:cover;

    background-position:center;

    color:#fff;

    text-align:center;

    padding:110px 20px;

}

.legacy-content{

    max-width:800px;

    margin:auto;

}

.legacy-content .section-tag{

    color:#FFD54A;

}

.legacy-content h2{

    font-size:2.5rem;

    margin:20px 0;

}

.legacy-content p{

    font-size:1.1rem;

    line-height:2;

    margin-bottom:40px;

    opacity:.95;

}

/* ==========================
   BUTTON
========================== */

.legacy-content .hero-btn{

    background:#fff;

    color:#041EB1;

}

.legacy-content .hero-btn:hover{

    background:#FFD54A;

    color:#041EB1;

}

/* ==========================
   CARD ANIMATION
========================== */

.objective-card,
.specific-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

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

@media(max-width:992px){

.objective-grid,
.specific-grid{

    grid-template-columns:repeat(2,1fr);

}

.legacy-content h2{

    font-size:2rem;

}

}

@media(max-width:768px){

.objective-grid,
.specific-grid{

    grid-template-columns:1fr;

}

.objective-card,
.specific-card{

    padding:30px;

}

.objective-number{

    width:55px;

    height:55px;

    font-size:1.2rem;

}

.legacy-section{

    padding:80px 20px;

}

.legacy-content h2{

    font-size:1.8rem;

}

.legacy-content p{

    font-size:1rem;

}

}

/* =====================================================
   VISION & MISSION PAGE
===================================================== */

/* ==========================
   INTRODUCTION
========================== */

.vision-intro{

    background:#fff;

    padding:90px 0;

}

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

.vision-highlight{

    background:linear-gradient(
        135deg,
        #041EB1,
        #2346D3
    );

    color:#fff;

    text-align:center;

    padding:100px 20px;

}

.vision-highlight .section-tag{

    color:#FFD54A;

}

.vision-highlight h2{

    font-size:2.8rem;

    margin:20px 0 35px;

}

.vision-highlight blockquote{

    max-width:900px;

    margin:auto;

    font-size:1.45rem;

    line-height:2;

    font-style:italic;

    font-weight:300;

    position:relative;

}

.vision-highlight blockquote::before{

    content:"❝";

    display:block;

    font-size:4rem;

    color:#FFD54A;

    margin-bottom:25px;

}

.vision-highlight blockquote::after{

    content:"❞";

    display:block;

    font-size:4rem;

    color:#FFD54A;

    margin-top:25px;

}

/* ==========================
   MISSION
========================== */

.mission-section{

    background:#f8faff;

    padding:100px 0;

}

.mission-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-top:60px;

}

.mission-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#fff;

    padding:30px;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.mission-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.mission-item span{

    width:55px;

    height:55px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#041EB1;

    color:#fff;

    font-size:1.4rem;

    font-weight:bold;

}

.mission-item p{

    margin:0;

    color:#555;

    line-height:1.8;

    font-size:1rem;

}

/* ==========================
   VALUES SECTION
========================== */

.principles-section{

    background:#fff;

    padding:100px 0;

}

.principles-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:60px;

}

.principle-card{

    background:#fff;

    border-radius:20px;

    padding:45px 30px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid transparent;

}

.principle-card:hover{

    transform:translateY(-10px);

    border-top:5px solid #041EB1;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.principle-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#041EB1;

    color:#fff;

    font-size:2rem;

}

.principle-card h3{

    color:#041EB1;

    margin-bottom:15px;

    font-size:1.5rem;

}

.principle-card p{

    color:#555;

    line-height:1.9;

}

/* ==========================
   ANIMATION
========================== */

.mission-item,
.principle-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

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

@media(max-width:992px){

.mission-grid{

    grid-template-columns:1fr 1fr;

}

.vision-highlight h2{

    font-size:2.3rem;

}

.vision-highlight blockquote{

    font-size:1.2rem;

}

}

@media(max-width:768px){

.mission-grid{

    grid-template-columns:1fr;

}

.principles-grid{

    grid-template-columns:1fr;

}

.vision-highlight{

    padding:80px 20px;

}

.vision-highlight h2{

    font-size:2rem;

}

.vision-highlight blockquote{

    font-size:1.05rem;

    line-height:1.8;

}

.mission-item{

    padding:25px;

}

.mission-item span{

    width:45px;

    height:45px;

    font-size:1.1rem;

}

.principle-card{

    padding:35px 25px;

}

.principle-icon{

    width:75px;

    height:75px;

    font-size:1.6rem;

}

}

/* ======================================================
   FOOTER
====================================================== */

footer{

    background:#041EB1;

    color:#ffffff;

    text-align:center;

    padding:60px 20px;

}

footer h3{

    color:#ffffff;

    font-size:1.8rem;

    font-weight:700;

    margin-bottom:15px;

}

footer p{

    color:#ffffff;

    opacity:.9;

    margin:8px 0;

    line-height:1.8;

}

/* =====================================================
   HISTORY PAGE
   Stella Maris College QC
===================================================== */

:root{

    --primary:#041EB1;
    --secondary:#2346D3;
    --accent:#FFD54A;

    --dark:#1f2937;
    --text:#555;
    --light:#f5f7fb;
    --white:#ffffff;

    --radius:20px;

    --shadow:
        0 12px 30px rgba(0,0,0,.08);

    --shadow-hover:
        0 20px 40px rgba(0,0,0,.15);

}



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

.about-section{

    padding:90px 0;

    background:white;

}

.about-section:nth-child(even){

    background:#f8faff;

}

.container{

    width:min(1200px,92%);

    margin:auto;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-grid.reverse{

    direction:rtl;

}

.about-grid.reverse>*{

    direction:ltr;

}

.about-image{

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.about-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.08);

}

.section-tag{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.about-content h2{

    font-size:2.5rem;

    color:var(--primary);

    margin-bottom:25px;

}

.about-content p{

    color:var(--text);

    line-height:2;

    font-size:1.05rem;

    margin-bottom:20px;

}

/* =====================================================
   SECTION TITLE
===================================================== */

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading h2{

    color:var(--primary);

    font-size:2.8rem;

    margin-top:10px;

}

/* =====================================================
   TIMELINE
===================================================== */

.timeline-section{

    background:#f5f7fb;

    padding:100px 0;

}

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:45px;

    top:0;

    width:4px;

    height:100%;

    background:var(--primary);

}

.timeline-item{

    position:relative;

    padding-left:110px;

    margin-bottom:60px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:32px;

    top:8px;

    width:30px;

    height:30px;

    background:white;

    border:6px solid var(--primary);

    border-radius:50%;

    z-index:2;

}

.timeline-year{

    color:var(--primary);

    font-size:1.5rem;

    font-weight:bold;

    margin-bottom:12px;

}

.timeline-content{

    background:white;

    border-radius:18px;

    padding:30px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-hover);

}

.timeline-content h3{

    color:var(--primary);

    margin-bottom:12px;

    font-size:1.4rem;

}

.timeline-content p{

    color:var(--text);

    line-height:1.8;

}

/* =====================================================
   STATS
===================================================== */

.stats-section{

    background:linear-gradient(
        135deg,
        #041EB1,
        #2346D3
    );

    padding:90px 0;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    border-radius:20px;

    text-align:center;

    padding:45px 25px;

    color:white;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.20);

}

.stat-card h2{

    font-size:3rem;

    margin-bottom:10px;

}

.stat-card p{

    opacity:.9;

    line-height:1.6;

}

/* ==========================================
   GALLERY SECTION
========================================== */

.gallery-section{
    padding:100px 0;
    background:#f8faff;
}

/* Grid */

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:60px;
}

/* Card */

.gallery figure{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    cursor:pointer;
    transition:.4s ease;
}

.gallery figure:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}

/* Image */

.gallery img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}

.gallery figure:hover img{
    transform:scale(1.12);
}

/* Dark Overlay */

.gallery figure::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(4,30,177,.90),
        rgba(4,30,177,.05)
    );

    opacity:0;

    transition:.4s;

    z-index:1;

}

.gallery figure:hover::before{

    opacity:1;

}

/* Caption */

.gallery figcaption{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:25px;

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    letter-spacing:.5px;

    transform:translateY(30px);

    opacity:0;

    transition:.35s;

    z-index:2;

}

.gallery figure:hover figcaption{

    transform:translateY(0);

    opacity:1;

}

/* Blue Accent Line */

.gallery figcaption::before{

    content:"";

    display:block;

    width:45px;

    height:4px;

    background:#FFD54A;

    border-radius:10px;

    margin-bottom:12px;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.gallery{

    grid-template-columns:1fr;

    gap:20px;

}

.gallery img{

    height:240px;

}

.gallery figcaption{

    font-size:1rem;

}

}

/* ======================================================
   IMPORTANT MILESTONES
====================================================== */

.highlights-section{

    padding:100px 0;

    background:linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );

}

.highlights-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:60px;

}

.highlight-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

    border-top:6px solid #041EB1;

}

.highlight-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

/* Decorative Circle */

.highlight-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(4,30,177,.05);

    border-radius:50%;

    top:-90px;

    right:-90px;

}

/* Decorative Line */

.highlight-card::after{

    content:"";

    position:absolute;

    width:60px;

    height:4px;

    background:#FFD54F;

    left:30px;

    bottom:28px;

    border-radius:10px;

}

.highlight-year{

    width:90px;

    height:90px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #041EB1,
        #2346D3
    );

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:30px;

    box-shadow:0 12px 25px rgba(4,30,177,.25);

}

.highlight-card h3{

    color:#041EB1;

    font-size:1.45rem;

    margin-bottom:18px;

    line-height:1.3;

}

.highlight-card p{

    color:#666;

    line-height:1.9;

    font-size:1rem;

}