/* tamabahan program */
    .program-card{
        cursor:pointer;
        transition:.25s;
    }

    .program-card:hover{
        transform:translateY(-4px);
        box-shadow:0 10px 25px rgba(0,0,0,.12);
    }

    .program-card h3{
        margin:10px 0;
        color:#0f4c81;
    }

    .detail-link{
        display:inline-block;
        margin-top:12px;
        color:#2563eb;
        font-size:14px;
        font-weight:600;
    }

    /* pop up program */
    .modal{
        display:none;
        position:fixed;
        z-index:99999;
        inset:0;
        background:rgba(0,0,0,.55);
    }

    .modal-content{
        background:#fff;
        width:88%;
        max-width:650px;
        margin:40px auto;
        border-radius:16px;
        padding:24px;
        position:relative;
        max-height:85vh;
        overflow:auto;
        animation:zoom .25s;
        box-sizing:border-box;
    }

    .close-modal{
        position:absolute;
        top:12px;
        right:18px;
        font-size:30px;
        cursor:pointer;
        color:#666;
    }

    .close-modal:hover{
        color:red;
    }

    .modal-content h2{
        color:#0f4c81;
        margin-bottom:12px;
    }

    .modal-content h3{
        margin-top:18px;
        color:#2563eb;
    }

    .modal-content ul{
        padding-left:22px;
        line-height:1.9;
    }

    .modal-content .btn-wa{
        display:inline-block;
        margin-top:20px;
        background:#25D366;
        color:white;
        text-decoration:none;
        padding:12px 22px;
        border-radius:10px;
        font-weight:bold;
    }

    @keyframes zoom{
        from{
            transform:scale(.9);
            opacity:0;
        }
        to{
            transform:scale(1);
            opacity:1;
        }
    }

    @media (max-width:768px){
        .modal-content{
            width:84%;
            padding:20px;
            margin:30px auto;
            border-radius:14px;
            max-height:82vh;
        }
        .modal-content h2{
            font-size:22px;
        }
        .modal-content h3{
            font-size:18px;
        }
        .modal-content p,
        .modal-content li{
            font-size:15px;
            line-height:1.8;
        }
        .btn-wa{
            width:100%;
            text-align:center;
            box-sizing:border-box;
        }
    }

    /* icon emozy membesar */
    .program-icon{
        font-size:60px;
        transition:.25s;
    }

    .program-card:hover .program-icon{
        transform:scale(1.12);
    }

    /* pop up gallery */
    .gallery-modal{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.92);
        z-index:999999;
    }

    .gallery-image{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        max-width:90%;
        max-height:82%;
        border-radius:12px;
        box-shadow:0 10px 30px rgba(0,0,0,.5);
        z-index:10000;
    }

    .gallery-close{
        position:absolute;
        top:18px;
        right:30px;
        color:white;
        font-size:42px;
        cursor:pointer;
    }

    .gallery-prev,
    .gallery-next{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:54px;
        height:54px;
        border-radius:50%;
        background:rgba(0,0,0,.45);
        color:white;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:34px;
        cursor:pointer;
        transition:.25s;
        z-index:10001;
    }

    .gallery-prev{
        left:15px;
    }

    .gallery-next{
        right:15px;
    }

    .gallery-prev:hover,
    .gallery-next:hover{
        background:#2563eb;
    }

    .gallery-caption{
        position:absolute;
        bottom:20px;
        width:100%;
        text-align:center;
        color:white;
        font-size:18px;
        font-weight:bold;
    }

    #galeri .card{
        cursor:pointer;
    }