/* ==========================================
   CERTIFICATES PAGE
========================================== */

.certificate-hero{
    background: var(--dark-main);
    padding:120px 0 100px;
    text-align:center;
}

.certificate-hero h1{
    font-size:4rem;
    margin:20px 0;
    color:#fff;
}

.certificate-hero h1 span{
    color:var(--primary-gold);
}

.certificate-hero p{
    max-width:750px;
    margin:auto;
    color:rgba(255,255,255,.75);
    font-size:1.05rem;
    line-height:1.8;
}

.certificate-section{
    padding:90px 0;
    background:#f8f8f8;
}

/* ================= GRID ================= */

.certificate-grid{

    display:grid;

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

    gap:35px;

}

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

.certificate-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    transition:.4s;

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

    position:relative;

}

.certificate-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

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

.certificate-image{

    height:320px;

    overflow:hidden;

    position:relative;

    background:#eee;

}

.certificate-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.certificate-card:hover img{

    transform:scale(1.08);

}

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

.certificate-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
            rgba(0,0,0,.75),
            rgba(0,0,0,.10));

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.certificate-card:hover .certificate-overlay{

    opacity:1;

}

.view-btn{

    width:75px;

    height:75px;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    transform:scale(.5);

    transition:.4s;

}

.certificate-card:hover .view-btn{

    transform:scale(1);

}

.view-btn i{

    font-size:34px;

    color:var(--primary-gold);

}

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

.certificate-content{

    padding:30px;

    text-align:center;

}

.certificate-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:rgba(199,160,84,.1);

    margin:auto;

    margin-top:-65px;

    margin-bottom:18px;

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.certificate-icon i{

    font-size:32px;

    color:var(--primary-gold);

}

.certificate-content h3{

    font-size:1.35rem;

    margin-bottom:10px;

    color:#222;

}

.certificate-content p{

    color:#777;

    font-size:.95rem;

    line-height:1.7;

    min-height:48px;

}

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

.certificate-content button{

    margin-top:25px;

    border:none;

    background:var(--primary-gold);

    color:#fff;

    padding:13px 30px;

    border-radius:40px;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    transition:.3s;

}

.certificate-content button:hover{

    background:#111;

    transform:translateY(-3px);

}

.certificate-content button i{

    margin-left:8px;

}

/* ================= PDF MODAL ================= */

#modalBackdrop{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(4px);

    display:none;

    z-index:9998;

}

#pdfModal{

    position:fixed;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%) scale(.85);

    width:92%;

    max-width:1200px;

    height:92vh;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    display:none;

    z-index:9999;

    transition:.3s;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

}

#pdfModal.active{

    transform:translate(-50%,-50%) scale(1);

}

/* ================= HEADER ================= */

.modal-header{

    height:65px;

    background:#111;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

}

.modal-header h3{

    margin:0;

    font-size:20px;

}

.modal-header button{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.modal-header button:hover{

    background:#d32f2f;

}

.modal-header button i{

    font-size:24px;

}

/* ================= IFRAME ================= */

#pdfViewer{

    width:100%;

    height:calc(100% - 65px);

    border:none;

    background:#fafafa;

}

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

@media(max-width:991px){

.certificate-grid{

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

}

}

@media(max-width:768px){

.certificate-grid{

grid-template-columns:1fr;

}

.certificate-image{

height:260px;

}

.certificate-hero{

padding:90px 0;

}

.certificate-hero h1{

font-size:2.6rem;

}

#pdfModal{

width:98%;

height:95vh;

border-radius:12px;

}

.modal-header{

padding:0 15px;

}

.modal-header h3{

font-size:16px;

}

}

@media(max-width:480px){

.certificate-content{

padding:22px;

}

.certificate-content h3{

font-size:1.15rem;

}

.certificate-content button{

width:100%;

}

}