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

.hero-modern{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* ================= SLIDER ================= */

.hero-slider{
    position: absolute;
    inset: 0;
}

/* EACH SLIDE */
.hero-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 2s ease-in-out;
}

/* ACTIVE */
.hero-slide.active{
    opacity: 1;
    z-index: 1;
}

/* IMAGE */
.hero-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Cinematic zoom */
    transform: scale(1.1);
    transition: transform 8s ease-in-out, filter 2s ease;

    /* slight tone */
    filter: brightness(0.85) contrast(1.05);
}

/* ACTIVE IMAGE MOTION */
.hero-slide.active img{
    transform: scale(1);
}

/* ================= OVERLAY ================= */

.hero-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.45) 40%,
        rgba(0,0,0,0.15) 100%
    );
}

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

.hero-content{
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* HEADING */
.hero-content h1{
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: 1.2;
    color: var(--text-light);
    max-width: 650px;

    /* cinematic entrance */
    animation: fadeUp 1.5s ease forwards;
}

/* DESCRIPTION */
.hero-content p{
    margin-top: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-body-md);
    color: rgba(255,255,255,0.85);
    max-width: 500px;

    animation: fadeUp 2s ease forwards;
}

/* BUTTON */
.hero-btn{
    margin-top: var(--space-5);
    display: inline-block;
    padding: 12px 30px;
    background: var(--clr-accent);
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: var(--fs-button);
    border-radius: var(--radius-pill);
    text-decoration: none;

    transition: var(--transition-medium);
    box-shadow: var(--shadow-soft);

    animation: fadeUp 2.5s ease forwards;
}

/* BUTTON HOVER */
.hero-btn:hover{
    background: var(--clr-primary);
    color: var(--text-light);
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-medium);
}

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

@keyframes fadeUp{
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media(max-width:768px){

.hero-modern{
    height: 75vh;
}

.hero-content{
    align-items: center;
    text-align: center;
}

.hero-content h1{
    font-size: var(--fs-h2);
}

.hero-content p{
    font-size: var(--fs-body-sm);
}

}

@media(max-width:480px){

.hero-modern{
    height: 65vh;
}

.hero-content h1{
    font-size: var(--fs-h3);
}

}






/* our-programme section css ============================================== */

.our-programme{
    background-color:  var(--clr-bg-soft);
}

.our-programme h1{
       font-size: var( --fs-h2);
    font-family: var( --font-heading);
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
}

.our-programme h4{
    font-size: var( --fs-h4);
    font-weight: 600;
    text-transform: uppercase;
    font-family: var( --font-body);
    letter-spacing: 1px;
    color: var(--clr-accent);
    text-align: center;
}

.timeline-year {
    display: inline-block;
    background: var(--clr-primary);
    color: var(--text-light);
    font-size: var(--fs-label);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
}


/* ===========================
   PROGRAM / MEDITATION SECTION
   =========================== */

.program-section {
    background: var(--clr-bg-soft);
    padding-left: var(--space-3);
    padding-right:  var(--space-3);
}

.program-wrapper {
    position: relative;
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
}

/* VERTICAL TIMELINE LINE IN CENTER */
.timeline-line {
    position: absolute;
    top: var(--space-3);
    bottom: var(--space-3);
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(253, 143, 143, 0.35); /* soft accent line */
}

/* EACH ROW */
.program-row {
    position: relative;
    margin-bottom: var(--space-9);
}

/* DOT WRAPPER (position at center of row) */
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* DOT ICON (Bootstrap Icons) */
.timeline-dot i {
    font-size: 90px;                 /* big, visible dot */
    color: var(--clr-accent-dark);        /* pink accent */

    /* glow effect */
    text-shadow:
        0 0 6px rgba(253, 143, 143, 0.55),
        0 0 12px rgba(253, 143, 143, 0.35),
        0 0 20px rgba(253, 143, 143, 0.25);
}

/* IMAGES */
.program-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.program-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease;
}

.program-slide.active {
    opacity: 1;
    z-index: 1;
}

.program-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

.program-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}

.program-dot-btn {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.48);
    cursor: pointer;
    transition: background 250ms ease, transform 250ms ease;
}

.program-dot-btn.active {
    background: var(--clr-accent-dark);
    border-color: var(--clr-accent-dark);
    transform: scale(1.2);
}

/* TEXT CONTENT */
.program-content {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
}

.program-title {
    font-family: var(--font-heading);
    color: var(--clr-primary);
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.program-text {
    font-family: var(--font-body);
    font-size: var(--fs-body-md);
    color: var(--text-dark);
    line-height: 1.7;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 992px) {
    /* hide timeline for stacked layout */
    .timeline-line,
    .timeline-dot {
        display: none;
    }

    .program-wrapper {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    .program-row {
        margin-bottom: var(--space-8);
    }

    .program-content {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .program-row {
        margin-bottom: var(--space-7);
    }
    .program-title {
        font-size: var(--fs-h4);
    }
}



/* education section css-------------------------------------------------------------------------------------------------------------- */
/* ===============================
   EDUCATION SECTION
================================ */

.education-section{
background:var(--clr-bg-soft);
}


/* HEADER */

.education-header{
text-align:center;
margin-bottom:var(--space-9);
}

.education-label{
font-size:var(--fs-label);
font-family:var(--font-body);
letter-spacing:2px;
text-transform:uppercase;
color:var(--clr-primary-soft);
margin-bottom:var(--space-2);
}

.education-header h2{
font-size:var(--fs-h2);
font-family:var(--font-heading);
color:var(--text-dark);
font-weight:600;
}


/* GRID */

.education-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--space-7);
}


/* CARD */

.education-card{

background:white;
border-radius:var(--radius-large);
overflow:hidden;

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

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

display:flex;
flex-direction:column;

border:1px solid var(--clr-bg-border);
}


/* HOVER */

.education-card:hover{

transform:translateY(-6px);
box-shadow:var(--shadow-medium);

}


/* IMAGE */

.education-image{
overflow:hidden;
}

.education-image img{

width:100%;
height:220px;
object-fit:cover;

transition:transform .5s ease;

}

.education-card:hover img{
transform:scale(1.06);
}


/* CONTENT */

.education-content{

padding:var(--space-6);

display:flex;
flex-direction:column;
gap:var(--space-3);

}

.education-content h3{

font-size:var(--fs-h3);
font-family:var(--font-heading);
color:var(--text-dark);

}

.education-content p{

font-size:var(--fs-body-md);
font-family:var(--font-body);
color:var(--clr-primary-dark);
line-height:1.7;

}



/* RESPONSIVE */

@media(max-width:992px){

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

}

@media(max-width:600px){

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

.education-image img{
height:200px;
}

}




/* ===============================upcoming events section css */

.up-events{
    background-color: var(--clr-bg-soft);
      padding: 0 var(--space-3);
}

.up-events h4{
     font-size: var( --fs-h4);
    font-weight: 600;
    text-transform: uppercase;
    font-family: var( --font-body);
    letter-spacing: 1px;
    color: var(--clr-accent);
    text-align: center;
}

.up-events h1{
       font-size: var( --fs-h2);
    font-family: var( --font-heading);
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
}

/* event CARD  --------------------------------------------------------------*/
.event-card {
    background: #fff;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    position: relative;
    margin-bottom: var(--space-4);
  
}

/* IMAGE + BADGE AREA */
.event-img-wrap {
    position: relative;
}

.event-img-wrap img {
    width: 220px;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-medium);
}

/* FLOATING DATE BADGE (HALF INSIDE / HALF OUTSIDE IMAGE) */
.event-date {
    position: absolute;
    top: 50%;
    right: -30px;                       /* moves badge outside image */
    transform: translateY(-50%);
    
    width: 70px;
    height: 70px;
    background: #ffe6ef;
    border-radius: 50%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 16px rgba(253, 143, 143, 0.35);
    z-index: 5;

    border: 5px solid white;
}

/* TEXT INSIDE BADGE */
.event-date .day {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-primary);
    line-height: 1;
}

.event-date .month {
    font-size: 0.70rem;
    color: var(--clr-primary);
    margin-top: 2px;
    letter-spacing: 0.5px;
}


.event-text{
    font-size: var(--fs-body-sm);
    color: var(--clr-primary);
    margin-top: var(--space-2);
    line-height: 1.4;
}

/* INFO AREA */
.event-info {
    flex: 1;
    padding-left: var(--space-5);
}

.event-title {
    font-family: var(--font-body);
    font-size: var(--fs-h4);
    color: var(--text-dark);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.event-time {
    font-size: var(--fs-body-md);
    color: var(--clr-accent-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.event-time i {
    color: var(--clr-accent);
}

/* RIGHT BUTTON */
.event-btn {
    background: var(--clr-accent);
    color: white;
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-size: var(--fs-button);
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(253, 143, 143, 0.3);
    transition: .3s ease;
}

.event-btn:hover {
    background: var(--clr-primary);
    transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .event-card {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-5);
    }

    .event-img-wrap img {
        width: 100%;
        height: auto;
    }

    .event-date {
        right: auto;
        left: 20px;
        top: -20px;  /* move badge above image on mobile */
        transform: none;
    }

    .event-btn {
        margin-top: var(--space-3);
    }
}