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

/* =========================================================
   PYQ PAGE RESET ONLY
   Does NOT affect shared Header / Menu
========================================================= */

/* =========================================================
   PYQ PAGE RESET ONLY
   Does NOT affect shared Header / Menu
========================================================= */

.pyq-page,
.pyq-page * {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Remove only the default top margins */
.pyq-page h1,
.pyq-page h2,
.pyq-page h3,
.pyq-page p {
    margin-top: 0;
}

.pyq-page ul,
.pyq-page ol {
    margin-top: 0;
    padding-left: 0;
}




/* =========================================================
   MAIN CONTAINER
========================================================= */

.pyq-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 125px 15px 30px;
}


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

.pyq-hero {
    background: linear-gradient(
        135deg,
        #EAF5FF,
        #DCEEFF
    );

    border-radius: 24px;

    padding: 35px 40px;

    margin-bottom: 28px;

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

    gap: 20px;

    overflow: hidden;
}

.pyq-hero-content{
    flex:1;
}

.pyq-hero h1{
    font-size:42px;

    line-height:1.2;

    font-weight:800;

    color:#0B1F41;

    margin-bottom:14px;
}

.pyq-hero p{
    font-size:21px;

    line-height:1.6;

    color:#536174;

    font-weight:500;

    max-width:700px;
}


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

.pyq-hero-icon{
    width:180px;
    height:180px;

    background:#D3E9FF;

    border-radius:50%;

    display:flex;

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

    flex-shrink:0;
}

.pyq-document-icon{
    width:95px;
    height:120px;

    background:#ffffff;

    border:5px solid #0B1F41;

    border-radius:15px;

    position:relative;

    transform:rotate(5deg);

    box-shadow:10px 8px 0 #1F6FE5;
}

.pyq-document-icon::before{
    content:"10th";

    position:absolute;

    top:20px;
    left:16px;

    font-size:23px;

    font-weight:800;

    color:#1F6FE5;
}

.pyq-document-icon::after{
    content:"";

    position:absolute;

    left:18px;
    right:18px;

    bottom:25px;

    height:5px;

    background:#8798AD;

    border-radius:10px;

    box-shadow:
        0 -17px 0 #8798AD,
        0 -34px 0 #8798AD;
}


/* =========================================================
   TWO OPTION CARDS
========================================================= */

.pyq-options{
    display:grid;

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

    gap:24px;

    width:100%;
}


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

.pyq-card{
    border-radius:22px;

    padding:35px 30px 28px;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    border:2px solid transparent;

    min-height:500px;

    width:100%;
}


/* =========================================================
   QUESTIONS ONLY CARD
========================================================= */

.questions-card{
    background:#EFF8FF;

    border-color:#D6EAFB;
}


/* =========================================================
   QUESTION + SOLUTION CARD
========================================================= */

.solutions-card{
    background:#EEFBF5;

    border-color:#D5F0E2;
}


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

.pyq-card-icon{
    width:145px;
    height:145px;

    border-radius:50%;

    display:flex;

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

    margin-bottom:24px;
}

.questions-card .pyq-card-icon{
    background:#DCEEFF;
}

.solutions-card .pyq-card-icon{
    background:#D9F5E7;
}


/* =========================================================
   DOCUMENT ICON
========================================================= */

.card-document{
    width:70px;
    height:88px;

    background:#ffffff;

    border:5px solid #0B1F41;

    border-radius:11px;

    position:relative;
}

.card-document::before{
    content:"";

    position:absolute;

    top:22px;

    left:15px;
    right:15px;

    height:5px;

    background:#0B1F41;

    border-radius:10px;

    box-shadow:
        0 18px 0 #0B1F41,
        0 36px 0 #0B1F41;
}


/* =========================================================
   SOLUTION DOCUMENT
========================================================= */

.solution-document{
    width:70px;
    height:88px;

    background:#ffffff;

    border:5px solid #0B1F41;

    border-radius:11px;

    position:relative;
}

.solution-document::before{
    content:"";

    position:absolute;

    top:20px;

    left:14px;
    right:18px;

    height:5px;

    background:#159A67;

    border-radius:10px;

    box-shadow:
        0 18px 0 #159A67,
        0 36px 0 #159A67;
}


/* =========================================================
   CHECK CIRCLE
========================================================= */

.check-circle{
    position:absolute;

    width:55px;
    height:55px;

    right:-30px;
    bottom:-15px;

    border-radius:50%;

    background:#159A67;

    border:4px solid #0B1F41;

    display:flex;

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

    color:#ffffff;

    font-size:30px;

    font-weight:700;
}


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

.pyq-card h2{
    font-size:27px;

    line-height:1.3;

    color:#0B1F41;

    margin-bottom:16px;

    font-weight:800;
}

.pyq-card p{
    font-size:18px;

    line-height:1.65;

    color:#59687A;

    max-width:360px;

    margin-bottom:28px;

    flex:1;
}


/* =========================================================
   BUTTONS
========================================================= */

.pyq-btn{
    width:100%;

    padding:15px 20px;

    border-radius:15px;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    transition:0.25s ease;

    color:#ffffff;
}

.questions-btn{
    background:#1F6FE5;

    box-shadow:
        0 5px 12px rgba(31,111,229,0.20);
}

.solutions-btn{
    background:#159A67;

    box-shadow:
        0 5px 12px rgba(21,154,103,0.20);
}

.pyq-btn:hover{
    transform:translateY(-2px);
}

.questions-btn:hover{
    background:#155DC4;
}

.solutions-btn:hover{
    background:#108456;
}

.arrow{
    font-size:28px;

    line-height:18px;

    font-weight:400;
}


/* =========================================================
   FEATURES
========================================================= */

.pyq-features{
    margin-top:28px;

    background:#F7F9FC;

    border-radius:22px;

    padding:30px 20px;

    display:grid;

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

    gap:20px;

    text-align:center;
}

.pyq-feature{
    padding:5px;
}

.feature-icon{
    font-size:42px;

    margin-bottom:8px;

    color:#124B9B;
}

.pyq-feature h3{
    font-size:20px;

    color:#0B1F41;

    margin-bottom:4px;
}

.pyq-feature p{
    font-size:15px;

    color:#64748B;
}


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

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

    .pyq-page{
        padding: 76px 12px 20px;
    }

    .pyq-hero{
        padding:35px 30px;
    }

    .pyq-hero h1{
        font-size:36px;
    }

    .pyq-hero p{
        font-size:19px;
    }

    .pyq-card{
        padding:30px 20px 25px;
    }

    .pyq-card h2{
        font-size:24px;
    }

    .pyq-card p{
        font-size:16px;
    }

}


/* =========================================================
   MOBILE
   TWO CARDS REMAIN SIDE-BY-SIDE
========================================================= */

@media (max-width:768px){

    .pyq-page {
        width: 100%;
        margin: 0;
        padding: 76px 12px 20px;

    }

    .pyq-hero {
        margin-top: 0;
        padding: 28px 20px;
        margin-bottom: 20px;

        flex-direction: column;
        text-align: left;
        align-items: flex-start;

        border-radius: 22px;
        gap: 10px;
    }

    .pyq-hero h1{
        font-size:28px;

        line-height:1.25;

        margin-bottom:8px;
    }

    .pyq-hero p{
        font-size:16px;

        line-height:1.55;
    }

    .pyq-hero-icon{
        width:110px;
        height:110px;

        align-self:center;

        margin-top:8px;
    }

    .pyq-document-icon{
        width:62px;
        height:78px;

        border-width:4px;

        box-shadow:
            7px 6px 0 #1F6FE5;
    }

    .pyq-document-icon::before{
        font-size:16px;

        top:13px;

        left:10px;
    }

    .pyq-document-icon::after{
        left:11px;
        right:11px;

        bottom:16px;

        height:4px;

        box-shadow:
            0 -12px 0 #8798AD,
            0 -24px 0 #8798AD;
    }


    /* -----------------------------------------------------
       TWO CARDS
    ----------------------------------------------------- */

    .pyq-options{
        display:grid !important;

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

        gap:10px !important;

        width:100%;
    }


    /* -----------------------------------------------------
       CARDS
    ----------------------------------------------------- */

    .pyq-card{
        min-height:0 !important;

        width:100%;

        padding:22px 10px 16px;

        border-radius:18px;

        border-width:2px;
    }


    /* -----------------------------------------------------
       CARD ICON
    ----------------------------------------------------- */

    .pyq-card-icon{
        width:82px;
        height:82px;

        margin-bottom:15px;

        flex-shrink:0;
    }


    /* -----------------------------------------------------
       DOCUMENT
    ----------------------------------------------------- */

    .card-document,
    .solution-document{
        width:48px;
        height:61px;

        border-width:4px;

        border-radius:8px;
    }

    .card-document::before{
        top:15px;

        left:10px;
        right:10px;

        height:4px;

        box-shadow:
            0 13px 0 #0B1F41,
            0 26px 0 #0B1F41;
    }

    .solution-document::before{
        top:14px;

        left:9px;
        right:10px;

        height:4px;

        box-shadow:
            0 13px 0 #159A67,
            0 26px 0 #159A67;
    }


    /* -----------------------------------------------------
       CHECK
    ----------------------------------------------------- */

    .check-circle{
        width:38px;
        height:38px;

        right:-20px;
        bottom:-10px;

        border-width:3px;

        font-size:21px;
    }


    /* -----------------------------------------------------
       CARD TEXT
    ----------------------------------------------------- */

    .pyq-card h2{
        font-size:18px;

        line-height:1.25;

        margin-bottom:10px;

        width:100%;
    }

    .pyq-card p{
        font-size:13px;

        line-height:1.5;

        margin-bottom:16px;

        max-width:none;

        width:100%;
    }


    /* -----------------------------------------------------
       BUTTON
    ----------------------------------------------------- */

    .pyq-btn{
        width:100%;

        padding:11px 6px;

        border-radius:11px;

        font-size:12px;

        line-height:1.25;

        gap:4px;

        min-height:46px;

        white-space:normal;
    }

    .arrow{
        font-size:20px;

        line-height:15px;

        flex-shrink:0;
    }


    /* -----------------------------------------------------
       FEATURES
    ----------------------------------------------------- */

    .pyq-features{
        margin-top:20px;

        padding:22px 12px;

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

        gap:8px;

        border-radius:18px;
    }

    .feature-icon{
        font-size:28px;

        margin-bottom:5px;
    }

    .pyq-feature h3{
        font-size:14px;

        margin-bottom:2px;
    }

    .pyq-feature p{
        font-size:11px;

        line-height:1.35;
    }

}


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

@media (max-width:400px){

    .pyq-page{
        padding: 76px 12px 20px;
    }


    /* HERO */

    .pyq-hero{
        padding:24px 18px;

        margin-bottom:16px;

        border-radius:20px;
    }

    .pyq-hero h1{
        font-size:25px;

        line-height:1.25;
    }

    .pyq-hero p{
        font-size:15px;

        line-height:1.5;
    }

    .pyq-hero-icon{
        width:100px;
        height:100px;
    }


    /* TWO CARDS */

    .pyq-options{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;
    }


    /* CARD */

    .pyq-card{
        padding:20px 8px 14px;

        border-radius:17px;
    }


    /* ICON */

    .pyq-card-icon{
        width:74px;
        height:74px;

        margin-bottom:12px;
    }

    .card-document,
    .solution-document{
        width:44px;
        height:56px;

        border-width:4px;
    }

    .card-document::before{
        top:14px;

        left:9px;
        right:9px;

        height:4px;

        box-shadow:
            0 12px 0 #0B1F41,
            0 24px 0 #0B1F41;
    }

    .solution-document::before{
        top:13px;

        left:8px;
        right:9px;

        height:4px;

        box-shadow:
            0 12px 0 #159A67,
            0 24px 0 #159A67;
    }

    .check-circle{
        width:35px;
        height:35px;

        right:-18px;
        bottom:-9px;

        font-size:19px;
    }


    /* TEXT */

    .pyq-card h2{
        font-size:16px;

        line-height:1.25;

        margin-bottom:9px;
    }

    .pyq-card p{
        font-size:12px;

        line-height:1.45;

        margin-bottom:14px;
    }


    /* BUTTON */

    .pyq-btn{
        font-size:11px;

        padding:10px 5px;

        min-height:44px;

        gap:3px;
    }

    .arrow{
        font-size:18px;
    }


    /*FEATURES */

    .pyq-features{
        margin-top:16px;

        padding:20px 8px;

        gap:5px;

        border-radius:17px;
    }

    .feature-icon{
        font-size:25px;
    }

    .pyq-feature h3{
        font-size:13px;
    }

    .pyq-feature p{
        font-size:10px;
    }

}


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

@media (max-width:340px){

    .pyq-hero h1{
        font-size:23px;
    }

    .pyq-hero p{
        font-size:14px;
    }

    .pyq-card{
        padding-left:6px;
        padding-right:6px;
    }

    .pyq-card h2{
        font-size:15px;
    }

    .pyq-card p{
        font-size:11px;
    }

    .pyq-btn{
        font-size:10px;
    }

    .arrow{
        font-size:16px;
    }

}

/* =========================================================
   HEADER / MENU COMPONENTS
========================================================= */

#header-container,
#menu-container{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}