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

.programs-section{

    position:relative;

    padding:140px 0 180px;

    overflow:hidden;

    background:transparent;

    isolation:isolate;

}

.programs-section::before{

    content:"";

    position:absolute;

    inset:0;


    opacity:.18;

    transform:scale(1.08);

    z-index:-2;

}

.programs-section::after{

    content:"";

    position:absolute;

    inset:0;

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

    z-index:-1;

}

.programs-section .container{

    position:relative;

    z-index:5;

}
/*=========================================================
HEADING
==========================================================*/

.programs-heading{

    max-width:1200px;

    margin:45px auto 90px;

    text-align:center;

}

.section-title{

    font-size:clamp(2.4rem,3vw,3.4rem);
    font-weight:800;
    color:#262626;
    line-height:1.15;
    margin-bottom:18px;

}


.section-title span{

    color:#7AC943;

}


.section-subtitle{

    max-width:950px;
    margin:auto;

    font-size:1.05rem;

    line-height:1.8;

    color:#131313;

}


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

.programs-section .col-xl-3{

    display:flex;

}


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

.program-card{

    position:relative;

    width:100%;

    height:650px;

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    background:#fff;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.program-card:hover{

    transform:none;

    box-shadow:

        0 20px 40px rgba(0,0,0,.12);

}


/*=========================================================
BACKGROUND IMAGE
==========================================================*/

/*=========================================================
BACKGROUND IMAGE
==========================================================*/

.program-bg{

    position:absolute;

    top:-25px;           /* <-- inaangat ang larawan */

    left:0;

    width:100%;

    height:calc(100% + 25px);

    object-fit:cover;

    object-position:center 6%;

}


.program-card:hover .program-bg{

    transform:none;

}


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

.program-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:0;

}
/*=========================================================
PROGRAM COLORS
==========================================================*/

/* Residential */

.program-overlay.yellow{

    background:
    linear-gradient(
        to top,
        rgba(244,180,0,.90) 0%,
        rgba(244,180,0,.70) 35%,
        rgba(244,180,0,0) 65%
    );

}

/* Health */

.program-overlay.green{

    background:
    linear-gradient(
        to top,
        rgba(31,169,76,.90) 0%,
        rgba(31,169,76,.70) 35%,
        rgba(31,169,76,0) 65%
    );

}

/* Disaster */

.program-overlay.blue{

    background:
    linear-gradient(
        to top,
        rgba(31,111,178,.90) 0%,
        rgba(31,111,178,.70) 35%,
        rgba(31,111,178,0) 65%
    );

}

/* Leadership */

.program-overlay.sky{

    background:
    linear-gradient(
        to top,
        rgba(45,156,219,.90) 0%,
        rgba(45,156,219,.70) 35%,
        rgba(45,156,219,0) 65%
    );

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

.program-content p{

    margin:0 0 20px;

    font-size:18px;

    line-height:1.6;

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

}

.program-content ul{

    margin:0;

    padding:0;

    list-style:none;

}

.program-content li{

    margin:6px 0;

    font-size:18px;

    color:#fff;

}

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

.program-card:hover{

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.program-card:hover .program-bg{

    transform:none;

}
/*=========================================================
IMAGE QUALITY
==========================================================*/

.program-bg{

    image-rendering:auto;

}


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

.program-card,
.program-overlay,
.program-content,
.program-bg{

    transition:all .45s ease;

}
/*=================================================
PROGRAMS HEADING
=================================================*/

.programs-heading{
    max-width:1200px;
    margin:0 auto 60px;
    text-align:center;
}

/* TITLE */

.section-title{

    font-size:clamp(2.4rem,3vw,3.5rem);   /* Mas maliit */
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1px;
    margin-bottom:15px;
    color:#2b2b2b;

}

.section-title span{

    color:#7AC943;

}

/* SUBTITLE */

.section-subtitle{

    max-width:1000px;
    margin:0 auto;
    font-size:1.05rem;
    font-weight:400;
    color:#1d1d1d;
    line-height:1.8;

}

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

.program-content{

    padding:28px 22px;

    color:#fff;

    text-align:justify;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;   /* <-- start from top */

    align-items:center;

    gap:14px;

}
.program-content h3{

    margin:0;

    font-size:26px;

    font-weight:700;

    line-height:1.15;

}
.program-content p{

    margin:0;

    font-size:15px;

    line-height:1.6;

}
.program-content ul{

    margin:0;

    padding:0;

    list-style:none;

}

.program-content li{

    margin:5px 0;

    font-size:15px;

}

/*=========================================================
PROGRAM ROW
==========================================================*/

.programs-row{

    margin-top:-15px;      /* iangat ang cards */
    margin-bottom:80px;    /* dagdag space sa baba */

}