/* =====================================================
   CERTIFICATE TESTIMONIAL SECTION
===================================================== */

.certificates-section {
    position: relative;
    padding: 120px 6%;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(20, 67, 140, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(198, 158, 68, 0.08),
            transparent 30%
        ),
        #f7f9fc;

    overflow: hidden;
}


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

.certificates-header {
    max-width: 780px;
    margin: 0 auto 70px;
    text-align: center;
}

.eyebrow {
    display: inline-block;

    padding: 8px 18px;

    border: 1px solid rgba(20, 67, 140, 0.15);
    border-radius: 100px;

    color: #16458e;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

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

    backdrop-filter: blur(10px);
}

.certificates-header h2 {
    margin: 20px 0 18px;

    color: #101d35;

    font-size: clamp(38px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-family: Georgia, "Times New Roman", serif;
}

.certificates-header h2 span {
    color: #16458e;
}

.certificates-header p {
    max-width: 620px;
    margin: auto;

    color: #70798a;

    font-size: 16px;
    line-height: 1.8;
}


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

.certificates-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 32px;
}


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

.certificate-card {
    position: relative;

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1);
}

.certificate-card:hover {
    transform: translateY(-12px);
}


/* =====================================================
   GLOW
===================================================== */

.certificate-glow {
    position: absolute;

    width: 70%;
    height: 40%;

    left: 15%;
    bottom: 10%;

    background: rgba(23, 69, 142, .18);

    filter: blur(50px);

    opacity: .5;

    transition: .5s;

    pointer-events: none;
}

.certificate-card:hover .certificate-glow {
    opacity: .8;

    transform: scale(1.2);
}


/* =====================================================
   CERTIFICATE FRAME
===================================================== */

.certificate-frame {
    position: relative;

    padding: 13px;

    background:
        linear-gradient(
            135deg,
            #b88a2c,
            #f4d47c,
            #ffffff,
            #d4aa45,
            #9b7020
        );

    border-radius: 20px;

    box-shadow:
        0 30px 70px rgba(14, 32, 67, .15),
        inset 0 0 0 1px rgba(255,255,255,.8);

    transform:
        perspective(1200px)
        rotateX(1deg);

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1),
        box-shadow .6s;
}

.certificate-card:hover .certificate-frame {
    transform:
        perspective(1200px)
        rotateX(0deg)
        rotateY(-2deg)
        translateZ(10px);

    box-shadow:
        0 40px 90px rgba(14, 32, 67, .22);
}


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

.certificate-image {
    position: relative;

    overflow: hidden;

    background: #fff;

    border-radius: 11px;

    aspect-ratio: 3 / 4;
}

.certificate-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1);
}

.certificate-card:hover
.certificate-image img {
    transform: scale(1.035);
}


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

.certificate-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(7, 25, 57, .45);

    opacity: 0;

    transition: .4s;

    backdrop-filter: blur(3px);
}

.certificate-card:hover
.certificate-overlay {
    opacity: 1;
}


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

.view-certificate {
    border: 0;

    padding: 14px 22px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 100px;

    background: #fff;

    color: #123d7d;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

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

    transform: translateY(15px);

    transition: .4s;
}

.certificate-card:hover
.view-certificate {
    transform: translateY(0);
}

.view-certificate:hover {
    background: #16458e;
    color: white;
}

.eye-icon {
    font-size: 20px;
    line-height: 1;
}


/* =====================================================
   CERTIFICATE INFORMATION
===================================================== */

.certificate-info {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 22px 5px 0;
}

.certificate-info > div {
    display: flex;

    align-items: flex-start;

    gap: 14px;
}

.certificate-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #eaf0fa;

    color: #16458e;

    font-size: 11px;

    font-weight: 800;
}

.certificate-info h3 {
    margin: 0 0 5px;

    color: #17253e;

    font-size: 16px;

    line-height: 1.35;
}

.certificate-info p {
    margin: 0;

    color: #8790a0;

    font-size: 12px;
}


/* =====================================================
   ARROW
===================================================== */

.arrow-button {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: 1px solid #dfe5ef;

    border-radius: 50%;

    background: #fff;

    color: #16458e;

    font-size: 20px;

    cursor: pointer;

    transition: .35s;
}

.arrow-button:hover {
    background: #16458e;
    color: #fff;

    transform: rotate(45deg);
}


/* =====================================================
   FULLSCREEN MODAL
===================================================== */

.certificate-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        rgba(4, 12, 28, .88);

    backdrop-filter: blur(12px);

    opacity: 0;

    visibility: hidden;

    transition: .35s;
}

.certificate-modal.active {
    opacity: 1;

    visibility: visible;
}


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

.modal-content {
    position: relative;

    max-width: 90vw;
    max-height: 92vh;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        scale(.9)
        translateY(20px);

    transition: .4s;
}

.certificate-modal.active
.modal-content {
    transform:
        scale(1)
        translateY(0);
}

.modal-content img {
    display: block;

    max-width: 100%;
    max-height: 90vh;

    object-fit: contain;

    border-radius: 5px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.5);
}


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

.modal-close {
    position: fixed;

    top: 25px;
    right: 30px;

    z-index: 10;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

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

    color: white;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition: .3s;
}

.modal-close:hover {
    background: white;

    color: #163f7d;

    transform: rotate(90deg);
}


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

@media (max-width: 1050px) {

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

}


@media (max-width: 650px) {

    .certificates-section {
        padding: 80px 20px;
    }

    .certificates-header {
        margin-bottom: 45px;
    }

    .certificates-header h2 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }

    .certificates-grid {
        grid-template-columns: 1fr;

        max-width: 430px;
    }

    .certificate-frame {
        padding: 9px;

        border-radius: 15px;
    }

    .certificate-overlay {
        opacity: 1;

        background:
            linear-gradient(
                to top,
                rgba(7,25,57,.65),
                transparent 40%
            );

        align-items: flex-end;

        padding-bottom: 20px;
    }

    .view-certificate {
        transform: none;

        padding: 11px 18px;
    }

    .certificate-info {
        padding-top: 17px;
    }

    .certificate-info h3 {
        font-size: 15px;
    }

    .modal-content {
        max-width: 95vw;
    }

    .modal-close {
        top: 15px;
        right: 15px;
    }

}