.hero{
    width:100%;
    padding:35px 15px;
    text-align:center;
    background:#1e3a8a;
    color:#fff;
    border-radius:0 0 15px 15px;
}

.hero-badge{
    display:inline-block;
    background:#2563eb;
    padding:7px 16px;
    border-radius:30px;
    font-size:12px;
    margin-bottom:14px;
}

.hero h1{
    font-size:24px;
    margin-bottom:10px;
    line-height:1.4;
}

.hero p{
    font-size:14px;
    line-height:1.7;
    max-width:500px;
    margin:auto;
}

@media(max-width:600px){

    .hero{
        padding:28px 12px;
    }

    .hero h1{
        font-size:20px;
    }

    .hero p{
        font-size:13px;
    }

    .hero-badge{
        font-size:11px;
        padding:6px 12px;
    }

}

.year{
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

h3{
    color: white;
    border-radius: 10px;
    font-size: 20px;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    letter-spacing: 1px;
}

h4{
    text-align: center;
}




 .page{
    max-width:1800px;
    margin:auto;
    background:rgb(227, 243, 234);
    padding:40px;
    border-radius:10px;
}

.main-heading{
    text-align:center;
    font-size:20px;
    color:#f3f6fb;
    margin-bottom:40px;
    text-decoration: underline;
}

.question{
    font-size:20px;
    color:#0d47a1;
    margin-top:40px;
    margin-bottom:15px;
    border-bottom:2px solid #0d47a1;
    padding-bottom:10px;
}

.answer{
    font-size:18px;
    line-height:2;
    text-align:justify;
    color:#333;
}


@media(max-width:768px){

    .page{
        padding:20px;
    }

    .main-heading{
        font-size:30px;
    }

    .question{
        font-size:17px;
    }

    .answer{
        font-size:15px;
        line-height:1.8;
    }

}



/* second TABLE CSS WITH NEW CLASS NAME */


.cbcs-table-container{
    background-color: seashell;
    width:100%;
    overflow-x:auto;
    padding:12px;
    box-sizing:border-box;
}

.cbcs-table{
    width:100%;
    border-collapse:collapse;
}

.cbcs-table tr{
    transition:0.3s;
}

.cbcs-table td{
    border:1.5px solid #000;
    padding:18px 20px;
    font-size:18px;
}

.cbcs-table td:first-child{
    font-weight:600;
}

.cbcs-table td:last-child{
    width:180px;
    text-align:center;
}

.cbcs-table a{
    text-decoration:none;
    color:#000;
    padding:8px 16px;
    border:1.5px solid #000;
    border-radius:6px;
    display:inline-block;
    transition:0.3s;
}

.cbcs-table a:hover{
    letter-spacing:0.5px;
}


/* MOBILE RESPONSIVE */

@media(max-width:768px){

    .cbcs-table td{
        padding:12px 10px;
        font-size:14px;
    }

    .cbcs-table td:last-child{
        width:120px;
    }

    .cbcs-table a{
        font-size:13px;
        padding:6px 10px;
    }
}



/* third TABLE CSS WITH NEW CLASS NAME */

.name-more-1{
background-color: rgb(109, 166, 99);    padding:20px 10px;
    box-sizing:border-box;
    text-decoration: underline;
}

.more{
    text-align:center;
    font-size:32px;
    font-weight:700;
    margin-top:40px;
    margin-bottom:10px;
    letter-spacing:1px;
    text-decoration: underline;
}

.name-more{
    text-align:center;
    font-size:20px;
    margin-bottom:30px;
    font-weight:500;
    text-decoration: underline;
}


/* MOBILE RESPONSIVE */

@media(max-width:768px){

    .more{
        font-size:24px;
        margin-top:30px;
    }

    .name-more{
        font-size:16px;
        padding:0 10px;
        
    }

}

.subject-table-container{
    width:100%;
    overflow-x:auto;
    padding:10px;
    box-sizing:border-box;
background-color: rgb(143, 188, 233);}

.subject-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 14px;
}

.subject-table tr{
    border:1px solid #000;
}

.subject-table td{
    padding:18px 20px;
    font-size:18px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}

.subject-table td:first-child{
    border-left:1px solid #000;
    border-radius:10px 0 0 10px;
    font-weight:600;
}

.subject-table td:last-child{
    border-right:1px solid #000;
    border-radius:0 10px 10px 0;
    text-align:center;
    width:180px;
}

.subject-table a{
    text-decoration:none;
    color:#000;
    border:1px solid #000;
    padding:8px 16px;
    border-radius:30px;
    display:inline-block;
    transition:0.3s;
}

.subject-table a:hover{
    transform:scale(1.05);
}


/* MOBILE RESPONSIVE */

@media(max-width:768px){

    .subject-table{
        border-spacing:0 10px;
    }

    .subject-table td{
        padding:12px 10px;
        font-size:14px;
    }

    .subject-table td:last-child{
        width:120px;
    }

    .subject-table a{
        padding:6px 10px;
        font-size:13px;
    }
}


.body{
    user-select:none;
    -webkit-user-select:none;
    overflow-x:hidden;
}

/* Blur effect */
.blur-page{
    filter:blur(25px);
}

/* Watermark */
.watermark{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-30deg);
    font-size:80px;
    font-weight:bold;
    color:rgba(255,255,255,0.06);
    z-index:99999;
    pointer-events:none;
    white-space:nowrap;
}




.watermark-container {
    position: relative;
    background-color: transparent; /* adjust as needed, but watermark will overlay */
}

.watermark-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 120px,
        rgba(0, 0, 0, 0.03) 120px,
        rgba(0, 0, 0, 0.03) 240px
    );
    background-repeat: repeat;
    background-size: 340px 340px;
    pointer-events: none;  /* allows clicking through watermark */
    z-index: 1;
}

/* Alternative: pure text watermark using pseudo-element with SVG/text pattern */
/* More elegant: repeating text "LearnFo" diagonally across the whole area */
.watermark-text::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 80px,
        rgba(160, 160, 160, 0.2) 80px,
        rgba(160, 160, 160, 0.2) 160px
    ), 
    repeating-linear-gradient(
        135deg,
        transparent,
        transparent 90px,
        rgba(100, 100, 100, 0.15) 90px,
        rgba(100, 100, 100, 0.15) 180px
    );
    pointer-events: none;
    z-index: 1;
}

/* === RECOMMENDED: clean, scalable text-only watermark "LearnFo" rotated 45deg === */
/* This version displays the actual word "LearnFo" repeatedly across the document */
.diagonal-watermark {
    position: relative;
    overflow-x: hidden;
}

.diagonal-watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="20" y="40" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="rgba(0,0,0,0.12)" transform="rotate(45, 100, 100)">LearnFo</text></svg>');
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.65;
    pointer-events: none;
    z-index: 2;
    transform: rotate(0deg); /* SVG already handles rotation; background repeats naturally */
}

/* More robust: pure CSS repeating-linear-gradient with data-uri text (works everywhere) */
.watermark-layered {
    position: relative;
}

.watermark-layered::after {
    content: "LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 38px;
    font-weight: bold;
    color: rgba(120, 120, 130, 0.12);
    font-family: 'Segoe UI', Arial, sans-serif;
    white-space: pre;
    transform: rotate(45deg) translateX(10%) translateY(-20%);
    transform-origin: top left;
    text-align: center;
    letter-spacing: 6px;
    word-break: keep-all;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(45deg, transparent, transparent 140px, rgba(0,0,0,0.02) 140px, rgba(0,0,0,0.02) 280px);
}

/* ===== THE FINAL WORKING SOLUTION: 45° angle, many watermarks "LearnFo" like PDF ===== */
/* Use this class on the element you want watermarked (e.g., <div class="watermarked">) */
.watermarked {
    position: relative;
    isolation: isolate;
}

.watermarked::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 90px,
        rgba(0, 0, 0, 0.04) 90px,
        rgba(0, 0, 0, 0.04) 180px
    );
    background-repeat: repeat;
    background-size: 260px 260px;
    pointer-events: none;
    z-index: 1;
}

.watermarked::after {
    content: "LearnFo";
    position: absolute;
    font-size: 2rem;
    font-weight: 800;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: rgba(45, 45, 52, 0.18);
    white-space: nowrap;
    letter-spacing: 2px;
    transform: rotate(45deg);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(45deg, transparent, transparent 120px, rgba(0,0,0,0.04) 120px, rgba(0,0,0,0.04) 240px);
    background-size: 200px 200px;
    /* The text needs to be repeated manually using inline trick? Better: use background repeating text */
}

/* === ULTIMATE REPEATING WATERMARK TEXT "LearnFo" AT 45° === */
/* This creates a grid of diagonal "LearnFo" texts, fully scalable, truly like PDF watermark */
.document-watermark {
    position: relative;
}

.document-watermark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><defs><pattern id="watermarkPattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><text x="28" y="70" font-family="Arial, Helvetica, sans-serif" font-size="34" font-weight="bold" fill="rgba(80,80,100,0.2)" opacity="0.7">LearnFo</text><text x="28" y="150" font-family="Arial, Helvetica, sans-serif" font-size="34" font-weight="bold" fill="rgba(80,80,100,0.2)" opacity="0.7">LearnFo</text></pattern></defs><rect width="100%25" height="100%25" fill="url(%23watermarkPattern)"/></svg>');
    background-repeat: repeat;
    background-size: 220px 220px;
    pointer-events: none;
    z-index: 5;
    opacity: 0.85;
}

/* ======= SIMPLE AND ROBUST: Multi-line repeating "LearnFo" diagonal (NO SVG required, CSS only) ======= */
.watermark-pure-css {
    position: relative;
    overflow: hidden;
}

.watermark-pure-css::after {
    content: "LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo LearnFo";
    position: absolute;
    top: -50%;
    left: -30%;
    width: 200%;
    height: 200%;
    font-size: 3.4rem;
    font-weight: 800;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    color: rgba(120, 110, 140, 0.14);
    letter-spacing: 5px;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    transform: rotate(45deg);
    pointer-events: none;
    line-height: 5.2;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 40px, transparent 40px, transparent 80px);
    z-index: 2;
}

/* ========== FINAL RECOMMENDATION: Use this class on container (body or .page) ========== */
/* generates a beautiful 45-degree tiled "LearnFo" watermark — many repeats, semi-transparent */
.pdf-watermark {
    position: relative;
}

.pdf-watermark::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 130px,
        rgba(0, 0, 0, 0.03) 130px,
        rgba(0, 0, 0, 0.03) 260px
    ), repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 130px,
        rgba(0, 0, 0, 0.02) 130px,
        rgba(0, 0, 0, 0.02) 260px
    );
    background-size: 280px 280px;
    pointer-events: none;
    z-index: 1;
}

/* TEXT-BASED PATTERN — The best "LearnFo" watermarks */
/* you can combine with before/after for text appearance */
.final-watermark {
    position: relative;
}

.final-watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><defs><pattern id="lfn" patternUnits="userSpaceOnUse" width="180" height="180" patternTransform="rotate(45)"><text x="15" y="55" font-family="\'Segoe UI\', Arial" font-size="34" font-weight="bold" fill="rgba(0,0,0,0.14)" opacity="0.75">LearnFo</text><text x="15" y="130" font-family="\'Segoe UI\', Arial" font-size="34" font-weight="bold" fill="rgba(0,0,0,0.14)" opacity="0.75">LearnFo</text></pattern></defs><rect width="100%25" height="100%25" fill="url(%23lfn)"/></svg>');
    background-repeat: repeat;
    background-size: 210px 210px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.6;
}

/* When you need multiple watermarks covering whole area with rotated text */
/* Use this compact and extremely reliable snippet */
.watermark-learnfo {
    position: relative;
}

.watermark-learnfo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 95px, rgba(180, 170, 200, 0.1) 95px, rgba(180, 170, 200, 0.1) 190px);
    background-repeat: repeat;
    background-size: 210px 210px;
    pointer-events: none;
    z-index: 1;
}

.watermark-learnfo::before {
    content: "LearnFo";
    position: absolute;
    font-size: 42px;
    font-weight: 900;
    font-family: 'Inter', 'Arial Black', sans-serif;
    color: rgba(90, 90, 110, 0.14);
    white-space: nowrap;
    transform: rotate(45deg);
    transform-origin: 0% 0%;
    left: 5%;
    top: 15%;
    right: auto;
    bottom: auto;
    width: 200%;
    height: 200%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 80px;
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 0 2px rgba(0,0,0,0.02);
    letter-spacing: 4px;
}

/* Adjust for full coverage — Multiple rows generated using background property with text */
/* PRODUCTION GRADE: reliable, simple, exactly as requirement */
html .watermark-simple {
    position: relative;
}

html .watermark-simple::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><defs><pattern id="pattern45" x="0" y="0" width="190" height="190" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><text x="28" y="60" font-family="system-ui, -apple-system, sans-serif" font-size="36" font-weight="bold" fill="rgba(70,70,95,0.22)">LearnFo</text><text x="28" y="140" font-family="system-ui, -apple-system, sans-serif" font-size="36" font-weight="bold" fill="rgba(70,70,95,0.22)">LearnFo</text></pattern></defs><rect width="100%25" height="100%25" fill="url(%23pattern45)"/></svg>');
    background-repeat: repeat;
    background-size: 220px 220px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 100;
}

/* === READY TO USE === */
/* To apply watermark: add class="watermark-ready" on the main container */
.watermark-ready {
    position: relative;
    background: inherit;
}

.watermark-ready::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><defs><pattern id="wm" patternUnits="userSpaceOnUse" width="200" height="200" patternTransform="rotate(45)"><text x="15" y="58" font-family="\'Segoe UI\', Roboto" font-size="38" font-weight="900" fill="rgba(60,60,80,0.18)">LearnFo</text><text x="15" y="136" font-family="\'Segoe UI\', Roboto" font-size="38" font-weight="900" fill="rgba(60,60,80,0.18)">LearnFo</text></pattern></defs><rect width="100%25" height="100%25" fill="url(%23wm)"/></svg>');
    background-repeat: repeat;
    background-size: 230px 230px;
    pointer-events: none;
    z-index: 999;
    opacity: 0.8;
}

/* ========== FINAL ANSWER: ONE CLASS THAT WORKS PERFECTLY ========== */
/* Use .watermark-45 on your main element */
.watermark-45 {
    position: relative;
    isolation: isolate;
}

.watermark-45::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 280 280"><defs><pattern id="rot45" patternUnits="userSpaceOnUse" width="190" height="190" patternTransform="rotate(45)"><text x="18" y="65" font-family="\'Helvetica Neue\', Helvetica, Arial" font-size="42" font-weight="bold" fill="rgba(75,75,95,0.2)">LearnFo</text><text x="18" y="145" font-family="\'Helvetica Neue\', Helvetica, Arial" font-size="42" font-weight="bold" fill="rgba(75,75,95,0.2)">LearnFo</text></pattern></defs><rect width="100%25" height="100%25" fill="url(%23rot45)"/></svg>');
    background-repeat: repeat;
    background-size: 210px 210px;
    pointer-events: none;
    z-index: 2000;
    opacity: 0.65;
}

/* simple addition for responsive tile effect */
@media print {
    .watermark-45::before {
        opacity: 0.4;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}