/*==============================================================
    JobHarGhar - Current Affairs
    Part 1
    Reset • Variables • Base • Hero • Buttons • Progress Bar
==============================================================*/

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

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    padding:0;
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    font-size:16px;
    line-height:1.7;

    background:#bbcdf5; 
    color:#2D2A55;

    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font-family:inherit;
    border:none;
    cursor:pointer;
    background:none;
}

ul{
    list-style:none;
}

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


/*==============================
=          VARIABLES
==============================*/
:root{

    --primary:#6C63FF;
    --primary-dark:#5647E5;

    --secondary:#4F7CFF;

    --accent:#8B5CF6;

    --background:#F5F4FF;
    --hero-bg:#EEF2FF;
    --card:#FFFFFF;

    --border:#DDD9FF;

    --text:#2D2A55;
    --text-light:#6B7280;
    --heading:#1E1B4B;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;

    --radius:16px;

    --shadow:0 10px 30px rgba(108,99,255,.08);

    --transition:.25s ease;

    --container:1350px;
}


/*==============================
=            BODY
==============================*/

.current-affairs-page{

    width:min(100%,var(--container));

    margin:auto;

    padding:0 18px 70px;

}


/*==============================
=       READING PROGRESS
==============================*/

.progress-container{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:#dfe5ef;

    z-index:9999;

}

.progress-bar{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #3056d3,
        #4b75ff
    );

    transition:width .15s linear;

}


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

.hero-section{

    background:linear-gradient(
        135deg,
        #6C63FF 0%,
        #4F7CFF 100%
    );

    color:#fff;

    border-radius:22px;
     margin-bottom:40px;
      margin-top:40px;

}

.hero-content{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        360px;

    gap:45px;

    align-items:center;

    background:var(--hero-bg);

    border-radius:20px;

    padding:45px;

    box-shadow:var(--shadow);

}

.hero-text{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:8px 16px;

    border-radius:40px;

    background:#e7efff;

    color:var(--primary);

    font-weight:700;

    font-size:14px;

}

.hero-title{

    font-size:42px;

    font-weight:800;

    line-height:1.25;

    color:var(--heading);

}

.hero-subtitle{

    font-size:18px;

    color:var(--text-light);

    max-width:760px;

}

.hero-meta{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.hero-meta span{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:9px 14px;

    border-radius:10px;

    background:#f3f6fb;

    color:#444;

    font-size:14px;

}


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

.hero-stats{

    display:grid;

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

    gap:18px;

}

.hero-stat{

    background:#f7f9fc;

    border:1px solid var(--border);

    border-radius:14px;

    padding:18px;

    text-align:center;

}

.hero-stat strong{

    display:block;

    font-size:28px;

    color:var(--primary);

    font-weight:800;

}

.hero-stat span{

    display:block;

    margin-top:6px;

    font-size:14px;

    color:#666;

}


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

.hero-image{

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-image img{

    width:100%;

    border-radius:18px;

    object-fit:cover;

    box-shadow:0 12px 30px rgba(0,0,0,.10);

}


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

.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:8px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:170px;

    height:48px;

    padding:0 24px;

    border-radius:12px;

    font-weight:700;

    transition:var(--transition);

}

.hero-btn-primary{

    background:var(--primary);

    color:#fff;

}

.hero-btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.hero-btn-secondary{

    background:#edf2ff;

    color:var(--primary);

}

.hero-btn-secondary:hover{

    background:#dbe7ff;

    transform:translateY(-2px);

}


/*==============================
=      COMMON SECTION TITLE
==============================*/

.section-heading{

    margin-bottom:28px;

}

.section-heading h2{

    font-size:34px;

    color:var(--heading);

    margin-bottom:8px;

    font-weight:800;

}

.section-heading p{

    color:var(--text-light);

    font-size:16px;

}


/*==============================
=      COMMON CARD STYLE
==============================*/

.topic-card,
.sidebar-widget,
.revision-card,
.related-card,
.summary-card,
.quiz-card,
.telegram-card{

    background:#fff;

    border-radius:16px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);

}
/*==============================================================
    PART 2
    Navigation • Layout • Topic Cards • Content Sections
==============================================================*/


/*==============================
=      TOPIC NAVIGATION
==============================*/

.topic-navigation{

    position:sticky;

    top:5px;

    z-index:100;

    margin-bottom:32px;

    background:#fff;

    border-radius:16px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);

}

.topic-navigation-wrapper{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding:16px;

    scrollbar-width:thin;

}

.topic-navigation-wrapper::-webkit-scrollbar{

    height:8px;

}

.topic-navigation-wrapper::-webkit-scrollbar-thumb{

    background:#d3d8e6;

    border-radius:20px;

}

.topic-chip{

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

    padding:10px 18px;

    border-radius:40px;

    background:#f4f7fc;

    border:1px solid #dfe6ef;

    transition:.25s;

}

.topic-chip:hover{

    background:var(--primary);

    color:#fff;

}

.topic-chip.active{

    background:var(--primary);

    color:#fff;

}

.topic-number{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

}

.topic-chip.active .topic-number,
.topic-chip:hover .topic-number{

    color:var(--primary);

}


/*==============================
=          PAGE LAYOUT
==============================*/

.page-layout{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        330px;

    gap:30px;

    align-items:start;

}

.content-column{

    display:flex;

    flex-direction:column;

    gap:28px;

}


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

.topic-card{

    padding:35px;

    transition:.25s;

}

.topic-card:hover{

    transform:translateY(-2px);

}

.topic-header{

    margin-bottom:25px;

}

.topic-category{

    display:inline-block;

    margin-bottom:12px;

    background:#edf3ff;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    padding:7px 14px;

    border-radius:30px;

}

.topic-title{

    font-size:30px;

    line-height:1.35;

    color:var(--heading);

    font-weight:800;

}

.topic-body{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.topic-content p{

    margin-bottom:18px;

    color:#444;

    font-size:17px;

    text-align:justify;

}

.topic-content p:last-child{

    margin-bottom:0;

}


/*==============================
=        SECTION BOXES
==============================*/

.why-news-box,
.highlight-box,
.fact-box,
.static-gk-box,
.exam-box,
.memory-box,
.important-terms-box{

    border-radius:14px;

    padding:22px;

    border-left:5px solid var(--primary);

}

.why-news-box{

    background:#eef5ff;

}

.highlight-box{

    background:#eefcf4;

    border-left-color:#1b9e59;

}

.fact-box{

    background:#fff8ea;

    border-left-color:#e79c09;

}

.static-gk-box{

    background:#f7f3ff;

    border-left-color:#7848d6;

}

.exam-box{

    background:#eef6ff;

}

.memory-box{

    background:#fff4fb;

    border-left-color:#d14b91;

}

.important-terms-box{

    background:#f9fafb;

}


/*==============================
=       BOX HEADINGS
==============================*/

.why-news-box h3,
.highlight-box h3,
.fact-box h3,
.static-gk-box h3,
.exam-box h3,
.memory-box h3,
.important-terms-box h3{

    font-size:22px;

    margin-bottom:16px;

    color:#222;

}


/*==============================
=          LISTS
==============================*/

.highlight-box ul,
.fact-box ul,
.static-gk-box ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.highlight-box li,
.fact-box li,
.static-gk-box li{

    position:relative;

    padding-left:24px;

    color:#444;

    line-height:1.7;

}

.highlight-box li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#1b9e59;

    font-weight:700;

}

.fact-box li::before{

    content:"➜";

    position:absolute;

    left:0;

    color:#e79c09;

}

.static-gk-box li::before{

    content:"★";

    position:absolute;

    left:0;

    color:#7848d6;

}


/*==============================
=       NORMAL PARAGRAPH
==============================*/

.why-news-box p,
.exam-box p,
.memory-box p{

    color:#444;

    line-height:1.8;

}


/*==============================
=     IMPORTANT TERMS
==============================*/

.important-terms{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.term-chip{

    padding:10px 18px;

    border-radius:30px;

    background:#3056d3;

    color:#fff;

    font-size:14px;

    font-weight:600;

}


/*==============================
=            TAGS
==============================*/

.topic-footer{

    border-top:1px solid #eceff5;

    padding-top:20px;

}

.tag-container{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.tag{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:24px;

    background:#eef2f9;

    color:#555;

    font-size:13px;

    transition:.2s;

}

.tag:hover{

    background:var(--primary);

    color:#fff;

}
/*==============================================================
    PART 3
    Sidebar • Quick Revision • Related Articles • FAQ
==============================================================*/


/*==============================
=            SIDEBAR
==============================*/

.sidebar-column{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.sticky-sidebar{

    position:sticky;

    top:90px;

}

.sidebar-widget{

    padding:24px;

}

.sidebar-title{

    font-size:22px;

    font-weight:700;

    color:var(--heading);

    margin-bottom:20px;

    padding-bottom:12px;

    border-bottom:2px solid #edf1f7;

}


/*==============================
=        SUMMARY LIST
==============================*/

.summary-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.summary-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #edf1f7;

    color:#555;

}

.summary-list li:last-child{

    border-bottom:none;

}

.summary-list strong{

    color:var(--primary);

    font-size:20px;

    font-weight:800;

}


/*==============================
=        DOWNLOAD BUTTON
==============================*/

.download-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:52px;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}

.download-button:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}


/*==============================
=         SHARE BUTTON
==============================*/

.sidebar-share{

    width:100%;

    height:50px;

    border-radius:12px;

    background:#eef3ff;

    color:var(--primary);

    font-weight:700;

    transition:.25s;

}

.sidebar-share:hover{

    background:var(--primary);

    color:#fff;

}


/*==============================
=      ARTICLE INFO TABLE
==============================*/

.article-info{

    width:100%;

}

.article-info tr{

    border-bottom:1px solid #edf1f7;

}

.article-info tr:last-child{

    border-bottom:none;

}

.article-info th{

    width:42%;

    text-align:left;

    padding:14px 0;

    color:#444;

    font-weight:700;

}

.article-info td{

    padding:14px 0;

    color:#666;

}


/*==============================
=      QUICK REVISION
==============================*/

.quick-revision-section{

    margin-top:60px;

}

.revision-grid{

    display:grid;

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

    gap:20px;

}

.revision-card{

    padding:22px;

    font-size:16px;

    line-height:1.7;

    transition:.25s;

    border-left:5px solid var(--primary);

}

.revision-card:hover{

    transform:translateY(-4px);

}


/*==============================
=      RELATED ARTICLES
==============================*/

.related-section{

    margin-top:70px;

}

.related-grid{

    display:grid;

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

    gap:24px;

}

.related-card{

    transition:.25s;

    overflow:hidden;

}

.related-card:hover{

    transform:translateY(-4px);

}

.related-card a{

    display:block;

    padding:28px;

}

.related-card h3{

    font-size:22px;

    color:var(--heading);

    margin-bottom:12px;

    line-height:1.4;

}

.related-card p{

    color:#666;

    line-height:1.7;

}


/*==============================
=             FAQ
==============================*/

.faq-section{

    margin-top:70px;

}

.faq-wrapper{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.faq-item{

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.faq-item summary{

    cursor:pointer;

    list-style:none;

    padding:22px 24px;

    font-size:18px;

    font-weight:700;

    color:var(--heading);

    position:relative;

    user-select:none;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    font-size:24px;

    color:var(--primary);

    transition:.25s;

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-answer{

    padding:0 24px 24px;

}

.faq-answer p{

    color:#555;

    line-height:1.8;

}


/*==============================
=      SECTION SPACING
==============================*/

.quick-revision-section,

.related-section,

.faq-section{

    margin-bottom:70px;

}
/*==============================================================
    PART 4
    Quiz • Footer • Telegram • Responsive • Dark Mode
==============================================================*/


/*==============================
=            QUIZ
==============================*/

.quiz-section{
    margin-top:70px;
}

.quiz-form{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.quiz-card{
    padding:30px;
}

.question-number{
    display:inline-block;
    background:#eef3ff;
    color:var(--primary);
    font-size:14px;
    font-weight:700;
    padding:8px 14px;
    border-radius:30px;
    margin-bottom:18px;
}

.question-title{
    font-size:24px;
    color:var(--heading);
    margin-bottom:24px;
    line-height:1.5;
}

.options{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.option{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}

.option:hover{
    border-color:var(--primary);
    background:#f8fbff;
}

.option input{
    margin-top:4px;
}

.option.correct{
    background:#ecfff3;
    border-color:#1b9e59;
}

.option.wrong{
    background:#fff1f1;
    border-color:#d63638;
}

.quiz-result{
    margin-top:18px;
    font-weight:700;
    font-size:15px;
}

.quiz-explanation{
    display:none;
    margin-top:18px;
    padding:18px;
    border-left:4px solid var(--primary);
    background:#f7f9fd;
    border-radius:10px;
    color:#555;
    line-height:1.7;
}


/*==============================
=        QUIZ FOOTER
==============================*/

.quiz-footer{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
}

.quiz-submit,
.quiz-reset{
    min-width:180px;
    height:52px;
    border-radius:12px;
    font-weight:700;
    transition:.25s;
}

.quiz-submit{
    background:var(--primary);
    color:#fff;
}

.quiz-submit:hover{
    background:var(--primary-dark);
}

.quiz-reset{
    background:#eceff5;
    color:#333;
}

.quiz-reset:hover{
    background:#dde4ef;
}


/*==============================
=        QUIZ SUMMARY
==============================*/

.quiz-summary{
    margin-top:40px;
    display:none;
}

.summary-card{
    text-align:center;
    padding:40px;
}

.summary-card h2{
    font-size:34px;
    margin-bottom:20px;
}

.summary-score{
    font-size:44px;
    color:var(--primary);
    font-weight:800;
}

.summary-percentage{
    margin-top:18px;
    font-size:28px;
    font-weight:700;
}

.summary-status{
    margin-top:16px;
    color:#666;
}

.result-message{
    margin-top:28px;
    font-size:20px;
    font-weight:700;
}


/*==============================
=         ARTICLE FOOTER
==============================*/

.article-footer{
    margin-top:70px;
    padding-top:35px;
    border-top:1px solid var(--border);
}

.footer-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:24px;
}

.footer-tag{
    background:#eef2f8;
    border-radius:30px;
    padding:10px 16px;
    font-size:14px;
}

.footer-last-updated{
    color:#666;
}


/*==============================
=         TELEGRAM
==============================*/

.telegram-section{
    margin-top:80px;
}

.telegram-card{
    text-align:center;
    padding:60px 30px;
}

.telegram-card h2{
    font-size:36px;
    margin-bottom:18px;
}

.telegram-card p{
    max-width:720px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.telegram-button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    margin-top:30px;
    min-width:220px;
    height:55px;
    border-radius:12px;
    background:#229ED9;
    color:#fff;
    font-weight:700;
    transition:.25s;
}

.telegram-button:hover{
    opacity:.92;
}


/*==============================
=        SITE FOOTER
==============================*/

.site-footer{
    margin-top:60px;
    padding:30px 0;
    border-top:1px solid var(--border);
    text-align:center;
    color:#666;
}


/*==============================
=        NOSCRIPT
==============================*/

.noscript-warning{
    background:#fff3cd;
    color:#856404;
    padding:18px;
    text-align:center;
    font-weight:600;
}


/*==============================
=      SCROLL TO TOP
==============================*/

.scroll-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:22px;
    display:none;
    justify-content:center;
    align-items:center;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    z-index:999;
    transition:.25s;
}

.scroll-top:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
}


/*==============================
=       RESPONSIVE
==============================*/

@media (max-width:1100px){

.hero-content{
    grid-template-columns:1fr;
}

.page-layout{
    grid-template-columns:1fr;
}

.sticky-sidebar{
    position:static;
}

.hero-title{
    font-size:34px;
}

}

@media (max-width:768px){

.current-affairs-page{
    padding:0 14px 50px;
}

.hero-content{
    padding:28px;
}

.hero-title{
    font-size:28px;
}

.hero-subtitle{
    font-size:16px;
}

.hero-stats{
    grid-template-columns:1fr;
}

.topic-card{
    padding:24px;
}

.topic-title{
    font-size:24px;
}

.question-title{
    font-size:20px;
}

.summary-card{
    padding:30px 20px;
}

.telegram-card{
    padding:40px 20px;
}

.telegram-card h2{
    font-size:28px;
}

.quiz-footer{
    flex-direction:column;
}

.quiz-submit,
.quiz-reset{
    width:100%;
}

}

@media (max-width:480px){

.hero-meta{
    flex-direction:column;
}

.hero-actions{
    flex-direction:column;
}

.hero-btn{
    width:100%;
}

.topic-navigation-wrapper{
    gap:8px;
}

.topic-chip{
    padding:8px 14px;
}

.sidebar-widget{
    padding:20px;
}

.question-title{
    font-size:18px;
}

.scroll-top{
    right:18px;
    bottom:18px;
}

}

 body {
      margin: 0;
      font-family: "Calisto MT", serif;
      background-color: #fff;
    }

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


/*======================================================
                    HEADER
======================================================*/

.main-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#f8eaff;

    padding:15px 40px;

    position:relative;

    z-index:999;

    box-shadow:0 2px 10px rgba(0,0,0,.06);

}

/*======================================================
                    LOGO
======================================================*/

.logo-container{

    display:flex;

    align-items:center;

}

.logo-container img{

    height:80px;

    margin-right:15px;

}

.logo-container h1{

    margin:0;

    font-size:32px;

    color:#2e004f;

    font-weight:700;

}

.logo-container h1 a{

    text-decoration:none;

    color:inherit;

}

/*======================================================
                DESKTOP NAVIGATION
======================================================*/

.desktop-nav{

    flex:1;

    display:flex;

    justify-content:center;

}

.desktop-nav ul{

    display:flex;

    list-style:none;

    padding:0;

    margin:0;

    gap:32px;

}

.desktop-nav ul li{

    position:relative;

}

/* Small Laptop & Tablet */

@media (max-width:1200px){

    .desktop-nav{

        display:none;

    }

    .search-wrapper{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}

/*======================================================
                    NAV LINKS
======================================================*/

.desktop-nav ul li>a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#4F2888;

    text-decoration:none;

    font-size:22px;

    font-weight:600;

    padding:12px 5px;

    transition:.25s;

}

.desktop-nav ul li>a:hover{

    color:#8b3cf6;

}

.arrow{

    font-size:11px;

    transition:.25s;

}

.mega-item:hover .arrow{

    transform:rotate(180deg);

}

/*======================================================
                  SEARCH BOX
======================================================*/

.search-box{

    position:relative;

    display:flex;

    align-items:center;

}

.search-box input{

    width:250px;

    height:42px;

    border:none;

    outline:none;

    background:white;

    border-radius:25px;

    padding:0 50px 0 18px;

    font-size:15px;

    box-shadow:0 5px 15px rgba(79,40,136,.10);

}

.search-box button{

    position:absolute;

    right:5px;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#4F2888;

    color:white;

    cursor:pointer;

    transition:.3s;

}

.search-box button:hover{

    background:#7f35d9;

}

/*======================================================
                SEARCH RESULT
======================================================*/

#searchResult{

    position:absolute;

    top:48px;

    width:100%;

    background:white;

    border-radius:16px;

    overflow:hidden;

    display:none;

    box-shadow:0 10px 35px rgba(0,0,0,.12);

}

/*======================================================
                    MEGA MENU
======================================================*/

.mega-menu{

    position:absolute;

    left:50%;

    transform:translateX(-50%) translateY(15px);

    top:58px;

    width:300px;

    background:linear-gradient(to bottom,#ffffff,#f9efff);

    border-radius:18px;

    box-shadow:0 20px 45px rgba(79,40,136,.15);

    opacity:0;

    visibility:hidden;

    transition:.28s;

    padding:25px;

}

/*======================================================
                SHOW MEGA MENU
======================================================*/

.mega-item:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

/*======================================================
                    COLUMN
======================================================*/

.mega-column{

    display:flex;

    flex-direction:column;

}

.mega-column h3{

    margin:0 0 15px;

    color:#4F2888;

    font-size:18px;

    padding-bottom:10px;

    border-bottom:2px solid #ece1ff;

}

/*======================================================
                MENU LINKS
======================================================*/

.mega-column a{

    color:#555;

    text-decoration:none;

    padding:11px 12px;

    border-radius:12px;

    transition:.25s;

    font-size:15px;

}

.mega-column a:hover{

    background:#efe2ff;

    color:#4F2888;

    padding-left:18px;

}

/*======================================================
                MENU TOGGLE
======================================================*/

.menu-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    width:42px;

    height:42px;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:#4F2888;

    margin:4px 0;

    border-radius:20px;

}

@media(max-width:1200px){

    .menu-toggle{

        display:flex !important;

    }

}

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

/* Overlay */

.drawer-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:999998;

}

/* Drawer */

.mobile-drawer{

    position:fixed;

    top:0;
    left:0;

    width:82%;
    max-width:320px;

    height:100vh;

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

    background:#f8eaff;

    /* Slide animation */

    transform:translateX(-105%);
    transition:transform .35s cubic-bezier(.25,.8,.25,1);

    z-index:999999;

    box-shadow:10px 0 30px rgba(0,0,0,.18);

    /* Space for status/header */

    padding:80px 18px 25px;

    box-sizing:border-box;

    /* Rounded edge */

    border-top-right-radius:22px;
    border-bottom-right-radius:22px;

    /* Prevent horizontal scrolling */

    word-wrap:break-word;

}

/* Drawer Open */

.mobile-drawer.open{

    transform:translateX(0);

}

/* Overlay Open */

.drawer-overlay.show{

    opacity:1;
    visibility:visible;

}

/* Scrollbar */

.mobile-drawer::-webkit-scrollbar{

    width:6px;

}

.mobile-drawer::-webkit-scrollbar-thumb{

    background:#b48ae8;
    border-radius:20px;

}

.mobile-drawer::-webkit-scrollbar-track{

    background:transparent;

}

/*======================================================
            EDUCATION BACKGROUND
======================================================*/

.mobile-drawer{

background-image:

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ctext x='20' y='50' font-size='34' fill='%23c8b1ef' opacity='.12'%3E🎓%3C/text%3E%3Ctext x='90' y='110' font-size='30' fill='%23c8b1ef' opacity='.12'%3E📚%3C/text%3E%3C/svg%3E");

background-repeat:repeat;

}

/*======================================================
                SEARCH
======================================================*/

.mobile-search{

margin-bottom:25px;

}

.mobile-search input{

width:100%;

height:45px;

border:none;

border-radius:25px;

padding:0 18px;

font-size:15px;

box-shadow:0 4px 12px rgba(79,40,136,.10);

outline:none;

}

/*======================================================
                ACCORDION
======================================================*/

.drawer-item{

margin-bottom:15px;

}

.accordion{

width:100%;

border:none;

background:white;

border-radius:15px;

padding:15px 18px;

font-size:17px;

font-weight:600;

color:#4F2888;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

box-shadow:0 5px 15px rgba(79,40,136,.08);

}

/*======================================================
                PANEL
======================================================*/

.panel{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    padding-left:12px;

}

.panel a{

    display:block;

    padding:12px 12px;

    color:#555;

    text-decoration:none;

    border-radius:10px;

    transition:.25s;

}

.panel a:hover{

    background:#ece1ff;

    color:#4F2888;

    padding-left:20px;

}

.accordion.active{

    background:#4F2888;

    color:#fff;

}

.accordion span{

    font-size:24px;

    transition:.25s;

}