/* =========================================================
   2025 PYQ SUBJECT PAGE

   Scoped to .pyq-page

   IMPORTANT:
   Shared Header / Menu is external.
   This CSS does NOT style or modify the header/menu.
========================================================= */


/* =========================================================
   PAGE RESET
========================================================= */

.pyq-page,
.pyq-page * {

    box-sizing: border-box;

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


.pyq-page h1,
.pyq-page h2,
.pyq-page h3,
.pyq-page p {

    margin-top: 0;

}


/* =========================================================
   MAIN PAGE
========================================================= */

.pyq-page {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    /*
       Desktop spacing
    */

    padding: 130px 15px 40px;

}


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


.back-section {

    width: 100%;

    margin-bottom: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.back-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 15px;

    background: #EAF5FF;

    border: 1px solid #D3E9FF;

    border-radius: 10px;

    color: #1F6FE5;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.25s ease;

}


.back-arrow {

    font-size: 21px;

    line-height: 1;

}


.back-button:hover {

    background: #DCEEFF;

    border-color: #BFDFFF;

    transform: translateX(-3px);

}


/* =========================================================
   HERO
========================================================= */

.pyq-hero {

    width: 100%;

    background: linear-gradient(
        135deg,
        #EAF5FF,
        #DCEEFF
    );

    border-radius: 24px;

    padding: 40px;

    margin-bottom: 30px;

    overflow: hidden;

}


.pyq-hero-content {

    width: 100%;

}


/* =========================================================
   SMALL LABEL
========================================================= */

.pyq-label {

    display: inline-block;

    background: #D3E9FF;

    color: #1F6FE5;

    padding: 7px 14px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 15px;

}


/* =========================================================
   HERO TITLE
========================================================= */

.pyq-hero h1 {

    font-size: 42px;

    line-height: 1.2;

    font-weight: 800;

    color: #0B1F41;

    margin-bottom: 14px;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.pyq-hero p {

    font-size: 20px;

    line-height: 1.6;

    color: #536174;

    font-weight: 500;

    max-width: 720px;

    margin-bottom: 0;

}


/* =========================================================
   SUBJECT SECTION
========================================================= */

.subject-section {

    width: 100%;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    text-align: center;

    margin-bottom: 25px;

}


.section-heading h2 {

    font-size: 28px;

    line-height: 1.3;

    color: #0B1F41;

    font-weight: 800;

    margin-bottom: 7px;

}


.section-heading p {

    font-size: 16px;

    color: #64748B;

    line-height: 1.5;

    margin-bottom: 0;

}


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

.subject-grid {

    width: 100%;

    display: grid;

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

    gap: 18px;

}


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

.subject-card {

    position: relative;

    min-height: 145px;

    padding: 25px;

    background: #F5FAFF;

    border: 2px solid #DCEEFF;

    border-radius: 20px;

    text-decoration: none;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;

}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.subject-card::before {

    content: "";

    position: absolute;

    width: 105px;

    height: 105px;

    border-radius: 50%;

    background: #E7F3FF;

    right: -38px;

    top: -38px;

    transition: 0.25s ease;

}


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

.subject-content {

    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;

}


.subject-content h3 {

    font-size: 21px;

    line-height: 1.3;

    color: #0B1F41;

    font-weight: 800;

    margin: 0;

}


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

.subject-arrow {

    position: relative;

    z-index: 2;

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #1F6FE5;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    line-height: 1;

    transition: 0.25s ease;

}


/* =========================================================
   HOVER
========================================================= */

.subject-card:hover {

    transform: translateY(-4px);

    background: #EDF7FF;

    border-color: #BFDFFF;

    box-shadow:
        0 8px 20px rgba(31,111,229,0.12);

}


.subject-card:hover::before {

    transform: scale(1.3);

    background: #DCEEFF;

}


.subject-card:hover .subject-arrow {

    transform: translateX(4px);

    background: #155DC4;

}


/* =========================================================
   INFORMATION BOX
========================================================= */

.pyq-info {

    width: 100%;

    margin-top: 28px;

    padding: 25px;

    background: #F7F9FC;

    border-radius: 20px;

    display: flex;

    align-items: center;

    gap: 18px;

    border: 1px solid #EEF1F5;

}


/* =========================================================
   INFORMATION ICON
========================================================= */

.info-icon {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #DCEEFF;

    color: #1F6FE5;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 25px;

    font-weight: 800;

}


/* =========================================================
   INFORMATION TEXT
========================================================= */

.info-content h3 {

    font-size: 18px;

    color: #0B1F41;

    font-weight: 700;

    margin-bottom: 4px;

}


.info-content p {

    font-size: 14px;

    line-height: 1.6;

    color: #64748B;

    margin-bottom: 0;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) and (min-width: 769px) {


    .pyq-page {

        padding:
            130px 12px 30px;

    }


    .pyq-hero {

        padding: 35px 30px;

    }


    .pyq-hero h1 {

        font-size: 36px;

    }


    .pyq-hero p {

        font-size: 18px;

    }


    .subject-grid {

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

    }


    .subject-card {

        min-height: 135px;

        padding: 22px;

    }


    .subject-content h3 {

        font-size: 19px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {


    .pyq-page {

        width: 100%;

        margin: 0;

        /*
           IMPORTANT:
           130px space for external header/menu
        */

        padding:
            130px 12px 25px;

    }


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

    .back-section {

        margin-bottom: 12px;
       
    }


    .back-button {

        padding: 8px 12px;

        font-size: 13px;

        border-radius: 9px;

    }


    .back-arrow {

        font-size: 19px;

    }


    /* =====================================================
       HERO
    ===================================================== */

    .pyq-hero {

        padding: 28px 20px;

        margin-bottom: 24px;

        border-radius: 22px;

    }


    .pyq-label {

        font-size: 12px;

        padding: 6px 11px;

        margin-bottom: 11px;

    }


    .pyq-hero h1 {

        font-size: 28px;

        line-height: 1.25;

        margin-bottom: 9px;

    }


    .pyq-hero p {

        font-size: 15px;

        line-height: 1.55;

    }


    /* =====================================================
       SECTION HEADING
    ===================================================== */

    .section-heading {

        margin-bottom: 18px;

    }


    .section-heading h2 {

        font-size: 23px;

        margin-bottom: 5px;

    }


    .section-heading p {

        font-size: 13px;

        line-height: 1.5;

    }


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

    .subject-grid {

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

        gap: 10px;

    }


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

    .subject-card {

        min-height: 115px;

        padding: 18px 13px;

        border-radius: 17px;

        gap: 8px;

    }


    /* =====================================================
       DECORATIVE CIRCLE
    ===================================================== */

    .subject-card::before {

        width: 75px;

        height: 75px;

        right: -28px;

        top: -28px;

    }


    /* =====================================================
       SUBJECT NAME
    ===================================================== */

    .subject-content h3 {

        font-size: 15px;

        line-height: 1.3;

    }


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

    .subject-arrow {

        width: 30px;

        height: 30px;

        font-size: 18px;

    }


    /* =====================================================
       INFORMATION BOX
    ===================================================== */

    .pyq-info {

        margin-top: 20px;

        padding: 18px 15px;

        border-radius: 17px;

        gap: 12px;

        align-items: flex-start;

    }


    .info-icon {

        width: 42px;

        height: 42px;

        font-size: 20px;

    }


    .info-content h3 {

        font-size: 15px;

        margin-bottom: 4px;

    }


    .info-content p {

        font-size: 12px;

        line-height: 1.5;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {


    .pyq-page {

        padding:
            130px 12px 20px;

    }


    /* BACK */

    .back-button {

        padding: 7px 11px;

        font-size: 12px;

    }


    /* HERO */

    .pyq-hero {

        padding: 24px 18px;

        border-radius: 20px;

    }


    .pyq-hero h1 {

        font-size: 25px;

    }


    .pyq-hero p {

        font-size: 14px;

    }


    /* HEADING */

    .section-heading h2 {

        font-size: 21px;

    }


    .section-heading p {

        font-size: 12px;

    }


    /* GRID */

    .subject-grid {

        gap: 8px;

    }


    /* CARD */

    .subject-card {

        min-height: 105px;

        padding: 16px 10px;

        border-radius: 16px;

    }


    /* SUBJECT */

    .subject-content h3 {

        font-size: 13px;

    }


    /* ARROW */

    .subject-arrow {

        width: 28px;

        height: 28px;

        font-size: 17px;

    }


    /* INFO */

    .pyq-info {

        margin-top: 16px;

        padding: 16px 12px;

    }


    .info-icon {

        width: 38px;

        height: 38px;

        font-size: 18px;

    }


    .info-content h3 {

        font-size: 14px;

    }


    .info-content p {

        font-size: 11px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 340px) {


    .pyq-page {

        padding:
            130px 10px 20px;

    }


    .pyq-hero h1 {

        font-size: 23px;

    }


    .pyq-hero p {

        font-size: 13px;

    }


    .subject-card {

        min-height: 100px;

        padding: 14px 8px;

    }


    .subject-content h3 {

        font-size: 12px;

    }


    .subject-arrow {

        width: 26px;

        height: 26px;

        font-size: 16px;

    }

}


/* =========================================================
   SHARED HEADER / MENU CONTAINERS

   DO NOT STYLE THEIR INTERNAL ELEMENTS HERE.
========================================================= */

#header-container,
#menu-container {

    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0;

}