* {
    box-sizing: border-box;
}

body {
    margin:0;
    font-family:"Georgia","Times New Roman",serif;
    background:#f8f5ed;
    color:#1f2937;
}

/* Top banner */

header {

    background:#f8f5ed;

    color:#0f172a;

    padding:50px 20px 35px;

    text-align:center;

    border-bottom:3px solid #c9a227;

}

header h1 {
    margin: 0;
    font-size: 42px;
}


header p {
    margin-top: 12px;
    font-size: 18px;
    opacity: 0.85;
}


/* Main area */

.container {
    max-width: 950px;
    margin: auto;
    padding: 35px 20px;
}



/* Course cards */

.card {

    background:#fffdf7;

    padding:30px;

    margin:25px 0;

    border-radius:8px;

    border:1px solid #d6c7a1;

    box-shadow:
    0 8px 20px rgba(80,60,20,0.12);

}

.card:hover {

    transform: translateY(-4px);

}


/* Course grid */

.grid {

    display: grid;

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

    gap: 25px;

}



/* Buttons and links */

button,
a {

    display: inline-block;

    background: #2563eb;

    color: white;

    padding: 12px 20px;

    border-radius: 10px;

    border: none;

    text-decoration: none;

    cursor: pointer;

    margin: 6px;

    font-size: 15px;

}


button:hover,
a:hover {

    background:#1d4ed8;

}


/* Quiz result */

#result {

    margin:20px 0;

    font-size:22px;

}

.logo {

    width:150px;

    display:block;

    margin:0 auto 15px;

}}

.main-logo {
    width:150px;
    display:block;
    margin:0 auto 15px;
}


.course-header {

    background:#f8f5ed;

    color:#0f172a;

    padding:25px 50px;

    border-bottom:3px solid #c9a227;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

}


.course-title {

    text-align:center;

}


.course-logo {

    width:90px;

    justify-self:end;

}

#cert-content {
    width: 900px;        /* Fixed width to ensure consistent PDF rendering */
    height: 600px;       /* Fixed height to prevent overflow */
    border: 15px double #2c3e50;
    padding: 30px;
    background: white;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cert-footer {
    margin-top: auto; /* Pushes content to the bottom */
    border-top: 2px solid #ccc;
    padding-top: 15px;
    display: flex;
    justify-content: space-around;
    width: 100%;
}