*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    width:100%;
    min-height:100vh;

    overflow-y:auto;
    overflow-x:hidden;

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

    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(rgba(0,0,0,0.82),rgba(0,0,0,0.88)),
    url('../images/backdrop.png');

    background-size:cover;
    background-position:center;

    padding:20px 0;
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#080808;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(#ffb347,#ff7b00);
    border-radius:20px;
}

/* PARTICLES */

.particles{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:1;
}

.particles span{

    position:absolute;

    border-radius:50%;

    background:
    radial-gradient(circle,#ffd27a,#ff8c00);

    box-shadow:
    0 0 10px rgba(255,180,0,0.8),
    0 0 20px rgba(255,140,0,0.5),
    0 0 40px rgba(255,120,0,0.3);

    animation:
    particleFloat linear infinite,
    flicker 2s infinite alternate;
}

@keyframes particleFloat{

    0%{
        transform:
        translateY(120vh)
        translateX(0px)
        scale(0);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:
        translateY(-120vh)
        translateX(120px)
        scale(1.8);

        opacity:0;
    }
}

@keyframes flicker{

    from{
        filter:brightness(1);
    }

    to{
        filter:brightness(2);
    }
}

/* MAIN */

.certificate{

    position:relative;

    width:97%;

    min-height:95vh;

    border-radius:30px;

    overflow:hidden;

    padding:18px;

    z-index:5;

    background:
    linear-gradient(
    145deg,
    rgba(255,180,0,0.05),
    rgba(0,0,0,0.78),
    rgba(255,140,0,0.04)
    );

    border:1px solid rgba(255,200,120,0.35);

    backdrop-filter:blur(12px);

    box-shadow:
    0 0 40px rgba(255,160,0,0.25),
    inset 0 0 50px rgba(255,160,0,0.08);
}

/* BORDER */

.certificate::before{

    content:'';

    position:absolute;

    inset:-2px;

    border-radius:30px;

    background:
    conic-gradient(
    from 0deg,
    transparent,
    rgba(255,180,0,0.7),
    transparent,
    rgba(255,120,0,0.8),
    transparent
    );

    animation:borderRotate 6s linear infinite;

    z-index:-2;
}

.certificate::after{

    content:'';

    position:absolute;

    inset:3px;

    border-radius:28px;

    background:
    linear-gradient(
    145deg,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.76)
    );

    z-index:-1;
}

@keyframes borderRotate{

    100%{
        transform:rotate(360deg);
    }
}

/* GLOW LIGHTS */

.light1,
.light2{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:0.28;

    pointer-events:none;
}

.light1{

    width:350px;
    height:350px;

    background:#ffb347;

    top:-100px;
    left:-80px;

    animation:moveLight1 10s infinite alternate ease-in-out;
}

.light2{

    width:420px;
    height:420px;

    background:#ff6a00;

    bottom:-180px;
    right:-120px;

    animation:moveLight2 12s infinite alternate ease-in-out;
}

@keyframes moveLight1{

    100%{
        transform:translate(180px,120px);
    }
}

@keyframes moveLight2{

    100%{
        transform:translate(-150px,-100px);
    }
}

/* MOUSE LIGHT */

.mouse-light{

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    pointer-events:none;

    background:
    radial-gradient(
    circle,
    rgba(255,210,120,0.16),
    rgba(255,170,0,0.08),
    transparent 70%
    );

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

    filter:blur(30px);

    mix-blend-mode:screen;

    z-index:2;

    transition:
    left 0.08s linear,
    top 0.08s linear,
    opacity 0.4s ease;
}

/* HEADER */

.top-section{

    position:relative;

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

    margin-bottom:15px;

    z-index:10;
}

/* LOGO */

.logo-box{

    width:95px;
    height:95px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid rgba(255,200,120,0.7);

    position:relative;

    animation:logoFloat 4s infinite ease-in-out;

    box-shadow:
    0 0 20px rgba(255,180,0,0.6),
    0 0 50px rgba(255,140,0,0.4);
}

.logo-box::before{

    content:'';

    position:absolute;

    inset:-20px;

    background:
    conic-gradient(
    transparent,
    rgba(255,180,0,0.8),
    transparent
    );

    animation:spin 3s linear infinite;
}

.logo-box img{

    position:relative;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    z-index:2;
}

@keyframes spin{

    100%{
        transform:rotate(360deg);
    }
}

@keyframes logoFloat{

    50%{
        transform:translateY(-8px);
    }
}

/* TITLE */

.title-area{

    text-align:center;
}

.title-area h1{

    font-family:'Cinzel',serif;

    font-size:3.4rem;

    color:#ffd27a;

    letter-spacing:4px;

    position:relative;

    text-shadow:
    0 0 10px rgba(255,200,120,0.8),
    0 0 30px rgba(255,160,0,0.7),
    0 0 80px rgba(255,120,0,0.6);

    animation:titlePulse 4s infinite ease-in-out;
}

.title-area h1::before{

    content:'';

    position:absolute;

    width:100%;
    height:100%;

    left:-120%;
    top:0;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.8),
    transparent
    );

    animation:shimmer 4s linear infinite;
}

@keyframes shimmer{

    100%{
        left:120%;
    }
}

@keyframes titlePulse{

    50%{
        transform:scale(1.04);
    }
}

.title-area p{

    margin-top:8px;

    color:#ffdca0;

    letter-spacing:5px;

    font-size:0.9rem;
}

/* BADGE */

.badge{

    position:relative;

    padding:18px 28px;

    border-radius:18px;

    overflow:hidden;

    background:
    linear-gradient(
    145deg,
    rgba(255,180,0,0.12),
    rgba(255,120,0,0.05)
    );

    border:1px solid rgba(255,200,120,0.5);

    color:#ffd27a;

    font-weight:700;

    animation:badgeFloat 3s infinite ease-in-out;

    box-shadow:
    0 0 20px rgba(255,180,0,0.35);
}

.badge::before{

    content:'';

    position:absolute;

    width:180%;
    height:100%;

    top:0;
    left:-180%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
    );

    animation:badgeShine 3s linear infinite;
}

@keyframes badgeShine{

    100%{
        left:180%;
    }
}

@keyframes badgeFloat{

    50%{
        transform:translateY(-6px);
    }
}

/* TABLE */

.table-wrapper{

    position:relative;

    width:100%;

    overflow-y:auto;

    border-radius:18px;

    background:rgba(0,0,0,0.28);

    border:1px solid rgba(255,200,120,0.18);

    backdrop-filter:blur(8px);

    z-index:10;
}

table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;
}

/* TABLE HEADER */

thead{

    background:
    linear-gradient(
    90deg,
    #5a2c00,
    #d98b12,
    #5a2c00
    );

    animation:headerGlow 6s linear infinite;
}

@keyframes headerGlow{

    100%{
        filter:hue-rotate(18deg);
    }
}

thead th{

    padding:14px;

    color:white;

    font-size:0.95rem;

    border:1px solid rgba(255,220,160,0.18);

    text-transform:uppercase;
}

/* TABLE BODY */

tbody td{

    padding:10px;

    color:#ffe9c8;

    font-size:0.84rem;

    border:1px solid rgba(255,220,160,0.08);

    transition:0.35s ease;

    text-align:center;
}

tbody td:nth-child(2){

    text-align:left;

    padding-left:18px;
}

/* ROW HOVER */

tbody tr{

    transition:0.35s ease;
}

tbody tr:hover{

    background:
    linear-gradient(
    90deg,
    rgba(255,170,0,0.10),
    rgba(255,255,255,0.04),
    rgba(255,170,0,0.10)
    );

    box-shadow:
    0 0 20px rgba(255,180,0,0.12);
}

tbody tr:hover td{

    color:white;

    text-shadow:
    0 0 10px rgba(255,220,150,0.7);
}

/* SECTION ROW */

.section-row{

    background:
    linear-gradient(
    90deg,
    rgba(255,170,0,0.08),
    rgba(255,255,255,0.02)
    );
}

.section-row td{

    color:#ffd27a;

    font-weight:600;
}

/* FOOTER */

.footer-line{

    width:100%;

    text-align:center;

    margin-top:18px;
}

.footer-line span{

    color:#ffd27a;

    letter-spacing:3px;

    font-size:0.9rem;

    text-shadow:
    0 0 10px rgba(255,180,0,0.7),
    0 0 25px rgba(255,140,0,0.4);

    animation:footerPulse 3s infinite ease-in-out;
}

@keyframes footerPulse{

    50%{
        opacity:1;
    }
}

/* RESPONSIVE */

@media(max-width:1400px){

    .title-area h1{
        font-size:2.3rem;
    }

    thead th{
        font-size:0.75rem;
    }

    tbody td{
        font-size:0.72rem;
    }
}