/* ======================================================
   STELLA MARIS COLLEGE QC
   ACADEMIC PAGE
   PART 1
====================================================== */

/* ======================================================
   VARIABLES
====================================================== */

:root{

    --primary:#041EB1;
    --secondary:#2346D3;
    --accent:#FFD54F;
    --white:#ffffff;
    --light:#F7F9FC;
    --gray:#555;
    --dark:#222;
    --shadow:0 12px 30px rgba(0,0,0,.08);

}

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

.page-hero{

    margin-top:78px;

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

    background-size:cover;
    background-position:center;

    color:#fff;

    text-align:center;

    padding:120px 20px;

}

.page-hero h1{

    font-size:clamp(2.8rem,5vw,4.3rem);

    margin-bottom:15px;

}

.page-hero p{

    max-width:750px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

}

/* ======================================================
   SHARED
====================================================== */

.section-heading{

    text-align:center;

    max-width:800px;

    margin:auto auto 60px;

}

.section-tag{

    display:inline-block;

    color:#041EB1;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

    font-size:.85rem;

}

.section-heading h2{

    color:#041EB1;

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

    margin-bottom:18px;

}

.section-heading p{

    color:#666;

    line-height:1.9;

}

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

.academic-intro{

    padding:100px 0;

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-image img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow);

    object-fit:cover;

}

.about-content h2{

    color:#041EB1;

    font-size:2.2rem;

    margin-bottom:20px;

}

.about-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:20px;

}

/* ======================================================
   PROGRAMS
====================================================== */

.programs{

    padding:100px 0;

    background:#F7F9FC;

}

.program-grid{

    display:grid;

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

    gap:35px;

}

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

.program-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    display:flex;

    flex-direction:column;

    position:relative;

}

.program-card:hover{

    transform:translateY(-10px);

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

}

.program-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.4s;

}

.program-card:hover img{

    transform:scale(1.08);

}

/* ======================================================
   CONTENT
====================================================== */

.program-content{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.program-level{

    display:inline-block;

    align-self:flex-start;

    background:#041EB1;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:.75rem;

    margin-bottom:18px;

    letter-spacing:1px;

}

.program-content h3{

    color:#041EB1;

    margin-bottom:18px;

    font-size:1.5rem;

}

.program-content ul{

    padding-left:20px;

    margin-bottom:30px;

    flex:1;

}

.program-content li{

    color:#555;

    margin-bottom:12px;

    line-height:1.7;

}

.program-content a{

    text-decoration:none;

    color:#2346D3;

    font-weight:700;

    transition:.3s;

}

.program-content a:hover{

    padding-left:8px;

}

/* ======================================================
   HOVER BORDER
====================================================== */

.program-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:2px solid transparent;

    transition:.35s;

    pointer-events:none;

}

.program-card:hover::after{

    border-color:#2346D3;

}

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

.program-card{

    opacity:0;

    animation:fadeUp .8s forwards;

    transform:translateY(40px);

}

.program-card:nth-child(2){

    animation-delay:.15s;

}

.program-card:nth-child(3){

    animation-delay:.3s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ======================================================
   WHY SMC
====================================================== */

.why-smc{

    padding:100px 0;

    background:#fff;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

    border-top:5px solid transparent;

}

.why-card:hover{

    transform:translateY(-10px);

    border-top:5px solid #041EB1;

}

.why-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#041EB1;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

}

.why-card h3{

    color:#041EB1;

    margin-bottom:15px;

}

.why-card p{

    color:#555;

    line-height:1.8;

}

/* ======================================================
   TABLET
====================================================== */

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

}

.program-grid{

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

}

}

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

@media(max-width:768px){

.program-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.page-hero{

padding:90px 20px;

}

.about-content{

text-align:center;

}

.program-card img{

height:220px;

}

}

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

.cvif-section{

    padding:100px 0;

    background:#F7F9FC;

}

.cvif-section .about-grid{

    align-items:center;

}

.cvif-section .about-image img{

    width:100%;

    border-radius:20px;

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

}

.cvif-section .about-content h2{

    color:#041EB1;

    margin:15px 0 25px;

    font-size:2.3rem;

}

.cvif-section .about-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:20px;

}

/* ======================================================
   FEATURES
====================================================== */

.features-section{

    padding:100px 0;

    background:#fff;

}

.feature-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.feature-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    text-align:center;

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

    transition:.35s;

    border-top:5px solid transparent;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-top:5px solid #041EB1;

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

}

.feature-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#041EB1;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

}

.feature-card h3{

    color:#041EB1;

    margin-bottom:15px;

    font-size:1.35rem;

}

.feature-card p{

    color:#555;

    line-height:1.8;

}

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

.admission-cta{

    padding:110px 20px;

    text-align:center;

    color:#fff;

    background:
    linear-gradient(
        rgba(4,30,177,.90),
        rgba(35,70,211,.90)
    ),
    url("../images/shsbldg.jfif");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.admission-cta .section-tag{

    color:#FFD54F;

}

.admission-cta h2{

    font-size:clamp(2.4rem,5vw,3.6rem);

    margin:20px 0;

    font-weight:700;

}

.admission-cta p{

    max-width:760px;

    margin:0 auto 45px;

    line-height:1.9;

    font-size:1.1rem;

    opacity:.95;

}

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

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:50px;

    background:#FFD54F;

    color:#041EB1;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.hero-btn:hover{

    background:#fff;

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.2);

}

.hero-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border:2px solid #fff;

    border-radius:50px;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.hero-btn-outline:hover{

    background:#fff;

    color:#041EB1;

    transform:translateY(-4px);

}

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

footer{

    background:linear-gradient(
        135deg,
        #041EB1,
        #0826c9
    );

    color:#fff;

    text-align:center;

    padding:60px 20px;

}

footer h3{

    color:#fff;

    font-size:1.8rem;

    margin-bottom:15px;

}

footer p{

    color:rgba(255,255,255,.9);

    line-height:1.8;

    margin:8px 0;

}

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

.feature-card,
.why-card,
.program-card{

    animation:fadeUp .8s ease both;

}

.feature-card:nth-child(2){

    animation-delay:.1s;

}

.feature-card:nth-child(3){

    animation-delay:.2s;

}

.feature-card:nth-child(4){

    animation-delay:.3s;

}

.feature-card:nth-child(5){

    animation-delay:.4s;

}

.feature-card:nth-child(6){

    animation-delay:.5s;

}

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

@media(max-width:1024px){

.feature-grid{

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

}

.admission-cta{

    background-attachment:scroll;

}

}

@media(max-width:768px){

.cvif-section{

    padding:80px 0;

}

.features-section{

    padding:80px 0;

}

.feature-grid{

    grid-template-columns:1fr;

}

.feature-card{

    padding:30px;

}

.admission-cta{

    padding:80px 20px;

}

.admission-cta h2{

    font-size:2rem;

}

.admission-cta p{

    font-size:1rem;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-btn,

.hero-btn-outline{

    width:100%;

    max-width:320px;

}

}

@media(max-width:480px){

.page-hero{

    padding:80px 20px;

}

.page-hero h1{

    font-size:2.3rem;

}

.page-hero p{

    font-size:1rem;

}

.about-content h2{

    font-size:1.8rem;

}

.section-heading h2{

    font-size:2rem;

}

.program-content{

    padding:24px;

}

.program-card img{

    height:200px;

}

.feature-card{

    border-radius:16px;

}

.hero-btn,

.hero-btn-outline{

    padding:15px 28px;

}

}

/* ======================================================
   SMOOTH TRANSITIONS
====================================================== */

img{

    transition:.35s;

}

section{

    overflow:hidden;

}

.program-card,
.feature-card,
.why-card{

    will-change:transform;

}