/* ============================================================
   GOVTNAUKRIUPDATE CSS VARIABLES
============================================================ */
/* Shared tokens are defined once in ui-foundation.css, loaded after module CSS. */

/* ============================================================
   BASE RESET & GLOBAL
============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.card {
    border-radius: 0.75rem;
}

.btn {
    border-radius: 0.5rem;
}

.navbar-brand {
    letter-spacing: -0.02em;
}

@media (prefers-color-scheme: dark) {
    [data-bs-theme="light"] .bg-body-tertiary {
        background-color: #12151a;
    }
}

/* ============================================================
   SCROLL ANIMATIONS
============================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(37,99,235,.15);
    }
    50% {
        box-shadow: 0 0 40px rgba(37,99,235,.25);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-fade-up {
    animation: fadeInUp .6s ease forwards;
}

.animate-fade-left {
    animation: fadeInLeft .6s ease forwards;
}

.animate-fade-right {
    animation: fadeInRight .6s ease forwards;
}

.animate-pulse-glow {
    animation: pulseGlow 3s infinite;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    animation: fadeInUp .5s ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: .1s; }
.stagger-children > *:nth-child(2) { animation-delay: .2s; }
.stagger-children > *:nth-child(3) { animation-delay: .3s; }
.stagger-children > *:nth-child(4) { animation-delay: .4s; }
.stagger-children > *:nth-child(5) { animation-delay: .5s; }
.stagger-children > *:nth-child(6) { animation-delay: .6s; }
.stagger-children > *:nth-child(7) { animation-delay: .7s; }
.stagger-children > *:nth-child(8) { animation-delay: .8s; }

/* ============================================================
   UTILITY CLASSES
============================================================ */
.text-gradient {
    background: linear-gradient(90deg,#2563eb,#3b82f6,#06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-padding {
    padding: 90px 0;
}

@media (max-width: 767px) {
    .section-padding {
        padding: 60px 0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ===========================
   Brand
=========================== */

.brand-logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    padding:0;
    flex-shrink:0;
}

/* ===========================
   Icon
=========================== */

.brand-icon{
    width:48px;
    height:48px;
    border-radius:14px;

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

    background:linear-gradient(
        135deg,
        #2563eb 0%,
        #3b82f6 55%,
        #0ea5e9 100%
    );

    color:#fff;
    font-size:22px;

    box-shadow:
        0 10px 24px rgba(37,99,235,.18);

    transition:.25s;
}

.brand-logo:hover .brand-icon{

    transform:rotate(-5deg) scale(1.05);

}

/* ===========================
   Content
=========================== */

.brand-content{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

/* ===========================
   Title
=========================== */

.brand-title{

    margin:0;

    font-size:2rem;

    font-weight:800;

    line-height:1;

    color:#1e293b;

    letter-spacing:-.6px;

}

.brand-title span{

    color:#2563eb;

}

/* ===========================
   Subtitle
=========================== */

.brand-subtitle{

    margin-top:5px;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#64748b;

}

/* ===========================
   Hover
=========================== */

.brand-logo:hover{

    text-decoration:none;

}

.brand-logo:hover .brand-title{

    color:#2563eb;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:1200px){

.brand-title{

font-size:1.7rem;

}

.brand-subtitle{

display:none;

}

.brand-icon{

width:44px;
height:44px;
font-size:20px;

}

}

@media(max-width:768px){

.brand-title{

font-size:1.45rem;

}

.brand-icon{

width:40px;
height:40px;
border-radius:12px;

}

}

/* ==========================================
   Compact Premium Brand
========================================== */

.brand-logo{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0;
    margin-right:24px;
}

/* Logo Box */

.brand-icon{
    width:36px;
    height:36px;
    border-radius:10px;

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

    background:linear-gradient(135deg,#2563eb,#0ea5e9);

    color:#fff;
    font-size:17px;

    box-shadow:0 6px 16px rgba(37,99,235,.15);
}

/* Brand Text */

.brand-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* Logo */

.brand-title{
    margin:0;

    font-size:1.55rem;   /* 25px */

    font-weight:800;

    line-height:1;

    letter-spacing:-0.4px;

    color:#1f2937;
}

.brand-title span{
    color:#2563eb;
}

/* Subtitle */

.brand-subtitle{
    margin-top:3px;

    font-size:.58rem;     /* 9px */

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#64748b;

    font-weight:600;
}

/* Hover */

.brand-logo:hover .brand-title{
    color:#2563eb;
}

.brand-logo:hover{
    text-decoration:none;
}

/* Responsive */

@media (max-width:1200px){

    .brand-icon{
        width:34px;
        height:34px;
        font-size:16px;
    }

    .brand-title{
        font-size:1.35rem;
    }

    .brand-subtitle{
        display:none;
    }

}

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

.premium-navbar{

    height:72px;

    background:#fff;

    border-bottom:1px solid #e5e7eb;

    box-shadow:0 2px 8px rgba(0,0,0,.04);

}

.premium-navbar>.container-xl{

    max-width:1440px;

    display:flex;

    align-items:center;

    height:72px;

    gap:28px;

}


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

.navbar-nav{

    margin:auto;

    gap:8px;

}

.nav-link{

    height:72px;

    display:flex;

    align-items:center;

    padding:0 16px !important;

    font-size:16px;

    font-weight:600;

    color:#334155;

    transition:.25s;

}

.nav-link:hover{

    color:#2563eb;

}


/* ==========================================
RIGHT SIDE
========================================== */

.navbar-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-left:auto;

}


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

.header-search{

    width:320px;

    height:46px;

    display:flex;

    align-items:center;

    padding:0 16px;

    border:1px solid #dbe2ea;

    border-radius:12px;

    background:#fff;

}

.header-search i{

    color:#64748b;

    margin-right:12px;

}

.header-search input{

    flex:1;

    border:none;

    outline:none;

    background:none;

}


/* ==========================================
ICONS
========================================== */

.action-icons{

    display:flex;

    align-items:center;

    gap:8px;

}

.icon-btn{

    width:42px;

    height:42px;

    border:none;

    background:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#475569;

    font-size:20px;

    transition:.25s;

}

.icon-btn:hover{

    background:#f1f5f9;

    color:#2563eb;

}


/* ==========================================
USER
========================================== */

.user-avatar{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

}


/* ==========================================
DROPDOWN
========================================== */

.dropdown-menu{

    margin-top:14px;

    border:none;

    border-radius:16px;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

/*==========================================================
  PREMIUM MEGA MENU V2 - PART 1
  Layout + Position + Container
==========================================================*/

:root{

    --mega-width:1320px;
    --mega-radius:24px;

    --mega-bg:#ffffff;

    --mega-border:#e7edf5;

    --mega-shadow:
        0 20px 50px rgba(15,23,42,.08),
        0 8px 20px rgba(15,23,42,.05);

    --mega-primary:#2563eb;

    --mega-transition:.28s cubic-bezier(.22,.61,.36,1);

}


/*==========================================================
NAVBAR
==========================================================*/

.premium-navbar{

    position:relative;

    z-index:1035;

    overflow:visible;

}

.premium-navbar .container-xl{

    position:relative;

}

.premium-navbar .navbar-nav{

    position:static;

}

.premium-navbar .nav-item{

    position:static;

}


/*==========================================================
DESKTOP ONLY
==========================================================*/

@media (min-width:1200px){

.nav-item.dropdown{

    position:static;

}

}


/*==========================================================
MEGA DROPDOWN
==========================================================*/

.mega-dropdown{

    position:absolute;

    left:50%;

    top:calc(100% + 14px);

    transform:
        translateX(-50%)
        translateY(14px)
        scale(.98);

    width:min(var(--mega-width),calc(100vw - 36px));

    max-width:var(--mega-width);

    min-width:1120px;

    border:1px solid var(--mega-border) !important;

    border-radius:var(--mega-radius);

    background:var(--mega-bg);

    overflow:hidden;

    display:block;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    box-shadow:var(--mega-shadow);

    transition:

        opacity var(--mega-transition),

        transform var(--mega-transition),

        visibility var(--mega-transition);

}


/*==========================================================
OPEN
==========================================================*/

@media(min-width:1200px){

.nav-item.dropdown:hover>.mega-dropdown{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

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

}

}


/*==========================================================
VIEWPORT SAFE
==========================================================*/

@media(max-width:1399px){

.mega-dropdown{

    left:18px;

    right:18px;

    width:auto;

    min-width:auto;

    max-width:none;

    transform:
        translateY(14px)
        scale(.98);

}

.nav-item.dropdown:hover>.mega-dropdown{

    transform:
        translateY(0)
        scale(1);

}

}


/*==========================================================
TOP HIGHLIGHT BAR
==========================================================*/

.mega-dropdown::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #3b82f6,
            #0ea5e9
        );

}


/*==========================================================
BACKGROUND DECORATION
==========================================================*/

.mega-dropdown::after{

    content:"";

    position:absolute;

    right:-120px;

    top:-120px;

    width:280px;

    height:280px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(37,99,235,.08),

            transparent 70%

        );

    pointer-events:none;

}


/*==========================================================
WRAPPER
==========================================================*/

.mega-menu-wrapper{

    position:relative;

    padding:36px;

    background:#fff;

}


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

.mega-menu-wrapper>.row{

    --bs-gutter-x:0;

    --bs-gutter-y:0;

}


/*==========================================================
COLUMNS
==========================================================*/

.mega-menu-wrapper .col-lg-3,

.mega-menu-wrapper .col-lg-4,

.mega-menu-wrapper .col-lg-5{

    position:relative;

    padding:0 30px;

}


/*==========================================================
VERTICAL DIVIDERS
==========================================================*/

.mega-menu-wrapper .border-start{

    border-color:transparent !important;

}

.mega-menu-wrapper .border-start::before{

    content:"";

    position:absolute;

    left:0;

    top:12px;

    bottom:12px;

    width:1px;

    background:

        linear-gradient(

            transparent,

            #e8edf5,

            transparent

        );

}


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

.mega-section{

    display:flex;

    flex-direction:column;

    height:100%;

}


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

.mega-title{

    position:sticky;

    top:0;

    z-index:5;

    background:#fff;

    padding-bottom:16px;

    margin-bottom:20px;

    font-size:13px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#0f172a;

    border-bottom:1px solid #edf2f7;

}


/*==========================================================
TITLE ICONS
==========================================================*/

.mega-title i{

    margin-right:8px;

    color:var(--mega-primary);

}


/*==========================================================
SMOOTH COLUMN HOVER
==========================================================*/

.mega-section{

    transition:.25s;

}

.mega-section:hover{

    transform:translateY(-2px);

}


/*==========================================================
REMOVE BOOTSTRAP ARROW
==========================================================*/

.nav-link.dropdown-toggle::after{

    margin-left:7px;

    transition:.25s;

}

.nav-item.dropdown:hover>.nav-link::after{

    transform:rotate(180deg);

}

/*==========================================================
  PREMIUM MEGA MENU V2 - PART 2
  Lists + Categories + Latest Jobs
==========================================================*/


/*==========================================================
CATEGORY LIST
==========================================================*/

.mega-list{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:0;

    margin:0;

    list-style:none;

}


/*==========================================================
CATEGORY ITEM
==========================================================*/

.mega-list li{

    list-style:none;

}

.mega-list li a{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    min-height:56px;

    padding:14px 18px;

    border-radius:16px;

    text-decoration:none;

    color:#334155;

    background:#fff;

    transition:all .28s ease;

    border:1px solid transparent;

}


/*==========================================================
LEFT BLUE BAR
==========================================================*/

.mega-list li a::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:4px;

    height:0;

    border-radius:10px;

    background:#2563eb;

    transition:.28s;

}

.mega-list li a:hover::before{

    height:70%;

}


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

.mega-list li a:hover{

    background:#f8fbff;

    border-color:#dbeafe;

    color:#2563eb;

    transform:translateX(6px);

    box-shadow:

        0 10px 25px rgba(37,99,235,.08);

}


/*==========================================================
CATEGORY TEXT
==========================================================*/

.mega-list li a span:first-child{

    font-size:14px;

    font-weight:600;

    line-height:1.4;

}


/*==========================================================
BADGE
==========================================================*/

.mega-list .badge{

    min-width:34px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

    border-radius:999px;

    color:#2563eb;

    background:#eff6ff;

    transition:.25s;

}

.mega-list li a:hover .badge{

    background:#2563eb;

    color:#fff;

}


/*==========================================================
LATEST JOB LIST
==========================================================*/

.latest-job-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    max-height:470px;

    overflow-y:auto;

    padding-right:8px;

}


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

.latest-job-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:18px;

    border-radius:18px;

    background:#fff;

    border:1px solid #eef2f7;

    text-decoration:none;

    transition:.30s;

    position:relative;

}


.latest-job-item:hover{

    border-color:#bfdbfe;

    background:#fbfdff;

    transform:translateY(-3px);

    box-shadow:

        0 16px 35px rgba(37,99,235,.10);

}


/*==========================================================
LEFT TITLE
==========================================================*/

.latest-job-item strong{

    display:block;

    color:#0f172a;

    font-size:15px;

    line-height:1.5;

    font-weight:700;

}


/*==========================================================
ORGANIZATION
==========================================================*/

.latest-job-item small{

    display:block;

    margin-top:8px;

    color:#64748b;

    font-size:13px;

}


/*==========================================================
DATE BADGE
==========================================================*/

.latest-job-item span{

    flex-shrink:0;

    min-width:64px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:linear-gradient(

        135deg,

        #2563eb,

        #3b82f6

    );

    color:#fff;

    font-size:12px;

    font-weight:700;

}


/*==========================================================
NEW LABEL
==========================================================*/

.latest-job-item.new::after{

    content:"NEW";

    position:absolute;

    top:14px;

    right:14px;

    padding:4px 10px;

    border-radius:999px;

    background:#ef4444;

    color:#fff;

    font-size:10px;

    font-weight:700;

    letter-spacing:.08em;

}


/*==========================================================
SCROLLBAR
==========================================================*/

.latest-job-list::-webkit-scrollbar{

    width:7px;

}

.latest-job-list::-webkit-scrollbar-track{

    background:#f1f5f9;

    border-radius:999px;

}

.latest-job-list::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:999px;

}

.latest-job-list::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}


/*==========================================================
EMPTY STATE
==========================================================*/

.latest-job-list p{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:220px;

    border:2px dashed #e2e8f0;

    border-radius:18px;

    color:#94a3b8;

    font-weight:600;

}


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

.latest-job-item::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    background:

        linear-gradient(

            90deg,

            rgba(37,99,235,.04),

            transparent

        );

    opacity:0;

    transition:.3s;

}

.latest-job-item:hover::before{

    opacity:1;

}

/*==========================================================
  PREMIUM MEGA MENU V2 - PART 3
  Featured Card + CTA + Quick Links
==========================================================*/


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

.featured-job-card{

    position:relative;

    overflow:hidden;

    padding:26px;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    border:1px solid #dbeafe;

    box-shadow:
        0 10px 30px rgba(37,99,235,.08);

    transition:all .35s ease;

}


/*==========================================================
BACKGROUND DECORATION
==========================================================*/

.featured-job-card::before{

    content:"";

    position:absolute;

    right:-70px;

    top:-70px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(37,99,235,.12),

            transparent 70%

        );

}


.featured-job-card::after{

    content:"";

    position:absolute;

    left:-50px;

    bottom:-50px;

    width:140px;

    height:140px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(14,165,233,.08),

            transparent 70%

        );

}


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

.featured-job-card:hover{

    transform:translateY(-6px);

    box-shadow:

        0 25px 60px rgba(37,99,235,.15);

}


/*==========================================================
FEATURE BADGE
==========================================================*/

.featured-job-card .badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 14px;

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            #2563eb,

            #3b82f6

        );

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.featured-job-card .badge::before{

    content:"★";

    font-size:10px;

}


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

.featured-job-card h5{

    margin-top:18px;

    margin-bottom:16px;

    color:#0f172a;

    font-size:22px;

    line-height:1.45;

    font-weight:800;

}


/*==========================================================
ORGANIZATION
==========================================================*/

.featured-job-card p{

    margin-bottom:10px;

    color:#64748b;

    font-size:14px;

    line-height:1.7;

}


/*==========================================================
LAST DATE
==========================================================*/

.featured-job-card .small{

    display:flex;

    align-items:center;

    gap:8px;

    color:#ef4444;

    font-weight:600;

}

.featured-job-card .small::before{

    content:"⏰";

}


/*==========================================================
CTA BUTTON
==========================================================*/

.featured-job-card .btn{

    margin-top:18px;

    height:50px;

    border:none;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    letter-spacing:.02em;

    background:

        linear-gradient(

            135deg,

            #2563eb,

            #3b82f6

        );

    box-shadow:

        0 12px 25px rgba(37,99,235,.22);

    transition:all .30s ease;

}


.featured-job-card .btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 35px rgba(37,99,235,.28);

}


/*==========================================================
DIVIDER
==========================================================*/

.mega-section hr{

    margin:28px 0;

    border:none;

    height:1px;

    background:

        linear-gradient(

            to right,

            transparent,

            #dbeafe,

            transparent

        );

}


/*==========================================================
QUICK LINKS
==========================================================*/

.quick-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}


/*==========================================================
LINK
==========================================================*/

.quick-links a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 16px;

    border-radius:14px;

    text-decoration:none;

    color:#334155;

    background:#fff;

    border:1px solid transparent;

    transition:all .28s ease;

}


/*==========================================================
LEFT ICON
==========================================================*/

.quick-links a::before{

    content:"→";

    width:26px;

    height:26px;

    border-radius:50%;

    background:#eff6ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

    margin-right:12px;

}


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

.quick-links a:hover{

    background:#f8fbff;

    border-color:#bfdbfe;

    color:#2563eb;

    transform:translateX(6px);

}


/*==========================================================
BADGE
==========================================================*/

.quick-links .badge{

    min-width:26px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

}


/*==========================================================
LINK SPACING
==========================================================*/

.quick-links a{

    gap:10px;

}


/*==========================================================
ANIMATION
==========================================================*/

.quick-links a{

    position:relative;

    overflow:hidden;

}

.quick-links a::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(37,99,235,.05),

            transparent

        );

    opacity:0;

    transition:.3s;

}

.quick-links a:hover::after{

    opacity:1;

}


/*==========================================================
PREMIUM BUTTON FOCUS
==========================================================*/

.featured-job-card .btn:focus{

    box-shadow:

        0 0 0 4px rgba(37,99,235,.18);

}

/*==========================================================
PREMIUM MEGA MENU V2 - PART 4
Responsive + Animation + Final Polish
==========================================================*/


/*==========================================================
DESKTOP ANIMATION
==========================================================*/

@media (min-width:1200px){

.nav-item>.mega-dropdown{

    animation-duration:.28s;

    animation-fill-mode:both;

}

.nav-item:hover>.mega-dropdown{

    animation-name:megaFade;

}

}

@keyframes megaFade{

0%{

opacity:0;

transform:
translateX(-50%)
translateY(18px)
scale(.96);

}

100%{

opacity:1;

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

}

}


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

.mega-list li a,
.latest-job-item,
.quick-links a,
.featured-job-card{

transition:

background .25s ease,

border-color .25s ease,

transform .25s ease,

box-shadow .25s ease,

color .25s ease;

}


/*==========================================================
REMOVE BOOTSTRAP SHADOW
==========================================================*/

.dropdown-menu{

box-shadow:none;

}

.mega-dropdown{

box-shadow:

0 30px 80px rgba(15,23,42,.14),

0 10px 24px rgba(15,23,42,.08);

}


/*==========================================================
BACKDROP
==========================================================*/

@media(min-width:1200px){

.premium-navbar::after{

content:"";

position:fixed;

left:0;

right:0;

top:72px;

bottom:0;

background:rgba(15,23,42,.08);

backdrop-filter:blur(2px);

opacity:0;

visibility:hidden;

transition:.25s;

pointer-events:none;

z-index:-1;

}

.premium-navbar:has(.nav-item:hover)::after{

opacity:1;

visibility:visible;

}

}


/*==========================================================
PREMIUM SCROLLBAR
==========================================================*/

.mega-dropdown *::-webkit-scrollbar{

width:8px;

height:8px;

}

.mega-dropdown *::-webkit-scrollbar-track{

background:#f1f5f9;

border-radius:999px;

}

.mega-dropdown *::-webkit-scrollbar-thumb{

background:#cbd5e1;

border-radius:999px;

}

.mega-dropdown *::-webkit-scrollbar-thumb:hover{

background:#94a3b8;

}


/*==========================================================
FOCUS STATES
==========================================================*/

.mega-dropdown a:focus{

outline:none;

box-shadow:

0 0 0 3px rgba(37,99,235,.16);

border-radius:12px;

}


/*==========================================================
BADGE ANIMATION
==========================================================*/

.badge{

transition:.25s;

}

.mega-list li:hover .badge,

.quick-links a:hover .badge{

transform:scale(1.08);

}


/*==========================================================
BUTTON EFFECT
==========================================================*/

.featured-job-card .btn{

position:relative;

overflow:hidden;

}

.featured-job-card .btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:120%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transition:.7s;

}

.featured-job-card .btn:hover::before{

left:120%;

}


/*==========================================================
IMAGE SUPPORT
==========================================================*/

.featured-job-card img{

width:100%;

border-radius:14px;

margin-bottom:18px;

}


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

@media(max-width:1199px){

.mega-dropdown{

position:static;

width:100%;

max-width:none;

min-width:0;

margin-top:0;

border:none !important;

border-radius:0;

box-shadow:none;

transform:none !important;

opacity:1;

visibility:visible;

display:none;

padding:0;

background:#fafbfd;

}

.dropdown-menu.show{

display:block;

}

.mega-menu-wrapper{

padding:20px;

}

.mega-menu-wrapper .row{

display:block;

}

.mega-menu-wrapper [class*="col-"]{

width:100%;

padding:0;

margin-bottom:30px;

}

.mega-menu-wrapper .border-start{

border:none !important;

}

.mega-menu-wrapper .border-start::before{

display:none;

}

.mega-title{

position:relative;

top:auto;

background:none;

}

.latest-job-list{

max-height:none;

overflow:visible;

}

.featured-job-card{

margin-top:20px;

}

}


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

@media(max-width:576px){

.mega-menu-wrapper{

padding:16px;

}

.mega-title{

font-size:12px;

}

.latest-job-item{

padding:14px;

}

.featured-job-card{

padding:20px;

}

}


/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==========================================================
HIGH DPI
==========================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

.mega-dropdown{

border-width:.5px;

}

}


/*==========================================================
PRODUCTION POLISH
==========================================================*/

.mega-dropdown{

    will-change:transform,opacity;

    contain:layout paint;

}

/* ============================================================
   PREMIUM FOOTER
   GovtNaukriUpdate
============================================================ */

.gnu-footer{
    position:relative;
    overflow:hidden;
    background:#0b1423;
    color:#c8d2e0;
    padding:70px 0 0;
    font-family:'Inter',sans-serif;
}

.gnu-footer::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:rgba(37,99,235,.06);
    top:-250px;
    right:-200px;
    pointer-events:none;
}

.gnu-footer::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(245,158,11,.04);
    bottom:-150px;
    left:-150px;
    pointer-events:none;
}

/*==============================
Logo & Brand
==============================*/

.footer-logo{
    display:inline-block;
    margin-bottom:20px;
}

.footer-logo-img{
    height:42px;
    width:auto;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.footer-desc{
    font-size:14px;
    line-height:1.8;
    color:#94a3b8;
    margin-bottom:22px;
    max-width:380px;
}

/*==============================
Social Links
==============================*/

.footer-social{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.social-link{
    width:40px;
    height:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    color:#94a3b8;
    font-size:18px;
    text-decoration:none;
    transition:.3s;
}

.social-link:hover{
    background:#2563eb;
    color:#fff;
    transform:translateY(-3px);
    text-decoration:none;
}

/*==============================
Headings
==============================*/

.footer-heading{
    color:#fff;
    font-size:15px;
    font-weight:700;
    margin-bottom:22px;
    letter-spacing:.3px;
    position:relative;
    padding-bottom:12px;
}

.footer-heading::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:28px;
    height:3px;
    border-radius:10px;
    background:linear-gradient(90deg,#2563eb,#f59e0b);
}

/*==============================
Links
==============================*/

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-links li a{
    color:#94a3b8;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:.3s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.footer-links li a::before{
    content:"›";
    font-size:18px;
    color:#2563eb;
    font-weight:700;
    transition:.3s;
}

.footer-links li a:hover{
    color:#fff;
    transform:translateX(5px);
}

/*==============================
Subscribe Form
==============================*/

.footer-subscribe .input-group{
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05);
}

.footer-subscribe .form-control{
    background:transparent;
    border:none;
    color:#fff;
    height:50px;
    padding:0 16px;
    font-size:14px;
}

.footer-subscribe .form-control::placeholder{
    color:#64748b;
}

.footer-subscribe .form-control:focus{
    box-shadow:none;
    background:rgba(255,255,255,.05);
}

.btn-subscribe{
    height:50px;
    width:52px;
    border:none;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.btn-subscribe:hover{
    background:#1d4ed8;
    color:#fff;
}

/*==============================
Contact
==============================*/

.footer-contact p{
    font-size:13px;
    color:#64748b;
}

.footer-contact i{
    color:#2563eb;
}

/*==============================
Divider
==============================*/

.footer-divider{
    border:none;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    margin:50px 0 30px;
}

/*==============================
Bottom Bar
==============================*/

.footer-bottom{
    padding-bottom:30px;
}

.copyright{
    color:#64748b;
    font-size:14px;
}

.copyright strong{
    color:#94a3b8;
}

.footer-bottom-links{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    justify-content:flex-end;
}

.footer-bottom-links li a{
    color:#64748b;
    font-size:13px;
    text-decoration:none;
    transition:.3s;
}

.footer-bottom-links li a:hover{
    color:#2563eb;
}

/*==============================
Responsive
==============================*/

@media(max-width:767px){
    .gnu-footer{
        padding:50px 0 0;
    }

    .footer-heading{
        margin-bottom:16px;
    }

    .footer-links{
        gap:10px;
    }

    .footer-bottom-links{
        justify-content:flex-start;
        margin-top:12px;
    }

    .copyright{
        font-size:13px;
        text-align:center;
    }
}

@media(max-width:576px){
    .gnu-footer .col-6:nth-child(2),
    .gnu-footer .col-6:nth-child(3){
        width:50%;
    }

    .footer-logo-img{
        height:36px;
    }

    .footer-desc{
        font-size:13px;
    }

    .footer-bottom-links{
        gap:6px 14px;
    }

    .footer-bottom-links li a{
        font-size:12px;
    }
}

.latest-job-item{

will-change:transform;

}

.featured-job-card{

will-change:transform;

}


/*==========================================================
PRINT
==========================================================*/

@media print{

.mega-dropdown{

display:none !important;

}

}

.mega-dropdown{

    position:absolute;

    top:calc(100% + 10px);

    left:50%;

    transform:translateX(-50%);

    width:min(1320px,calc(100vw - 30px));

    max-width:1320px;

    min-width:1100px;

    background:#fff;

    border:none;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 25px 60px rgba(15,23,42,.12);

    display:block;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .25s,
        transform .25s;

    z-index:1055;

}

.mega-menu-wrapper{

    max-height:calc(100vh - 130px);

    overflow-y:auto;

    overflow-x:hidden;

    padding:32px;

    scroll-behavior:smooth;

}

.mega-menu-wrapper::-webkit-scrollbar{

    width:8px;

}

.mega-menu-wrapper::-webkit-scrollbar-track{

    background:#f1f5f9;

}

.mega-menu-wrapper::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:999px;

}

.mega-menu-wrapper::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}.mega-menu-wrapper::-webkit-scrollbar{

    width:8px;

}

.mega-menu-wrapper::-webkit-scrollbar-track{

    background:#f1f5f9;

}

.mega-menu-wrapper::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:999px;

}

.mega-menu-wrapper::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

@media(min-width:1200px){

.nav-item.dropdown:hover>.mega-dropdown,
.nav-item.dropdown>.mega-dropdown:hover{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%);

}

}

.premium-navbar{

    overflow:visible !important;

}

.navbar{

    overflow:visible !important;

}

.container,
.container-lg,
.container-xl{

    overflow:visible !important;

}

@media(max-width:1400px){

.mega-dropdown{

    left:15px;

    right:15px;

    width:auto;

    min-width:auto;

    transform:none;

}

.nav-item.dropdown:hover>.mega-dropdown,
.nav-item.dropdown>.mega-dropdown:hover{

    transform:none;

}

}

.mega-title{

    position:sticky;

    top:-32px;

    background:#fff;

    z-index:5;

    padding:18px 0;

}

.nav-item.dropdown{

    position:static;

}

.nav-item.dropdown::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:100%;

    height:18px;

}

.mega-dropdown{

    top:100%;

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

}

.nav-item:hover>.mega-dropdown{

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

}
.dropdown-menu{
    margin-top: 0 !important;
}

/*=========================================================
RIGHT NAVBAR
=========================================================*/

.navbar-right{

    display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto;

}


/*=========================================================
LOGIN
=========================================================*/

.btn-login{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:42px;

    padding:0 22px;

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    color:#334155;

    background:#fff;

    border:1px solid #dbe3ee;

    transition:.25s;

}

.btn-login:hover{

    color:#2563eb;

    border-color:#2563eb;

    background:#f8fbff;

    transform:translateY(-2px);

}


/*=========================================================
REGISTER
=========================================================*/

.btn-register{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:42px;

    padding:0 24px;

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    box-shadow:

        0 10px 20px rgba(37,99,235,.20);

    transition:.25s;

}

.btn-register:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:

        0 16px 32px rgba(37,99,235,.28);

}


/*=========================================================
USER MENU
=========================================================*/

.user-menu{

    display:flex;

    align-items:center;

    gap:12px;

    height:50px;

    padding:0 14px;

    border:none;

    border-radius:16px;

    background:#fff;

    border:1px solid #e7edf5;

    cursor:pointer;

    transition:.25s;

}

.user-menu:hover{

    background:#f8fbff;

    border-color:#cbdcf8;

    box-shadow:

        0 12px 30px rgba(37,99,235,.08);

}


/*=========================================================
AVATAR
=========================================================*/

.user-avatar{

    width:38px;

    height:38px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #60a5fa
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    font-weight:700;

    box-shadow:

        0 8px 18px rgba(37,99,235,.18);

}


/*=========================================================
USER INFO
=========================================================*/

.user-info{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.user-name{

    font-size:14px;

    font-weight:700;

    color:#0f172a;

    line-height:1.2;

}

.user-info small{

    color:#64748b;

    font-size:11px;

}


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

.user-menu>.bi{

    margin-left:2px;

    font-size:12px;

    color:#64748b;

    transition:.25s;

}

.dropdown.show .user-menu>.bi{

    transform:rotate(180deg);

}


/*=========================================================
DROPDOWN
=========================================================*/

.navbar-right .dropdown-menu{

    min-width:240px;

    margin-top:14px;

    border:none;

    border-radius:18px;

    padding:10px;

    box-shadow:

        0 25px 60px rgba(15,23,42,.12);

}


/*=========================================================
ITEM
=========================================================*/

.dropdown-item{

    display:flex;

    align-items:center;

    gap:12px;

    height:46px;

    border-radius:12px;

    font-weight:600;

    color:#334155;

    transition:.2s;

}

.dropdown-item:hover{

    background:#f8fbff;

    color:#2563eb;

    transform:translateX(4px);

}


/*=========================================================
DIVIDER
=========================================================*/

.dropdown-divider{

    margin:10px 0;

    border-color:#edf2f7;

}


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

@media(max-width:992px){

    .navbar-right{

        width:100%;

        justify-content:center;

        margin-top:20px;

    }

    .btn-login,
    .btn-register{

        flex:1;

    }

}

@media(max-width:576px){

    .user-menu{

        width:100%;

        justify-content:center;

    }

    .user-info{

        display:none;

    }

}

/*======================================================
Premium Mobile Drawer
======================================================*/

.mobile-navigation{

    width:360px;

    max-width:92vw;

    border:none;

    background:#ffffff;

}

.mobile-navigation .offcanvas-header{

    padding:24px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

}

.mobile-navigation .offcanvas-body{

    padding:22px;

    overflow-y:auto;

}

.mobile-brand{

    display:flex;

    align-items:center;

    gap:14px;

}

.mobile-brand .brand-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.18);

    color:#fff;

    font-size:22px;

}

.mobile-brand h5{

    font-size:20px;

    font-weight:700;

    margin:0;

}

.mobile-brand small{

    opacity:.9;

}

.premium-toggler{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    box-shadow:

        0 10px 25px rgba(0,0,0,.08);

}

.premium-toggler span{

    width:22px;

    height:2px;

    border-radius:20px;

    background:#2563eb;

    transition:.35s;

}

.premium-toggler:hover{

    transform:translateY(-2px);

}
/*==================================================
Mobile Jobs Menu
==================================================*/

.mobile-menu-item{

    border-bottom:1px solid #eef2f7;

    padding:8px 0;

}

.mobile-menu-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    padding:14px 0;

    font-weight:600;

    font-size:16px;

}

.mobile-submenu{

    padding:15px 0;

}

.mobile-section-title{

    font-size:14px;

    font-weight:700;

    margin-bottom:12px;

    color:#2563eb;

    text-transform:uppercase;

}

.mobile-links{

    list-style:none;

    padding:0;

    margin:0;

}

.mobile-links li{

    margin-bottom:8px;

}

.mobile-links a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 12px;

    background:#f8fafc;

    border-radius:12px;

    text-decoration:none;

    color:#222;

}

.mobile-job-card{

    display:block;

    padding:14px;

    margin-bottom:12px;

    border:1px solid #e8edf5;

    border-radius:14px;

    text-decoration:none;

    color:#222;

    background:#fff;

}

.mobile-job-card strong{

    display:block;

    margin-bottom:6px;

}

.mobile-featured-card{

    background:#f8fbff;

    border:1px solid #d8e7ff;

    border-radius:16px;

    padding:16px;

    margin:20px 0;

}

.mobile-links-grid{

    display:grid;

    gap:10px;

}

.mobile-links-grid a{

    padding:12px;

    border-radius:12px;

    background:#f8fafc;

    text-decoration:none;

    color:#222;

}

.mobile-menu-toggle i:last-child{

    transition:.30s;

}

.mobile-menu-toggle[aria-expanded="true"] i:last-child{

    transform:rotate(180deg);

}

.mobile-featured-card .btn-warning{

    color:#212529;

    font-weight:600;

    border-radius:10px;

}

.mobile-featured-card .badge{

    font-size:.75rem;

}

.mobile-job-card .badge{

    display:inline-block;

}

.mobile-menu-item .text-info{

    color:#0ea5e9 !important;

}

.mobile-section-title{

    letter-spacing:.5px;

}

.mobile-links a:hover,
.mobile-job-card:hover{

    background:#f8fbff;

    border-color:#cfe2ff;

    transition:.25s;

}

/*==================================================
Mobile Footer
==================================================*/

.mobile-menu-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    text-decoration:none;

    color:#1e293b;

    font-weight:600;

}

.mobile-menu-link:hover{

    color:#2563eb;

}

.mobile-user-section{

    padding-top:25px;

    border-top:1px solid #e5e7eb;

}

.mobile-user-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

    background:#f8fafc;

}

.mobile-user-avatar{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

}

.mobile-auth-buttons{

    display:flex;

    flex-direction:column;

}

.mobile-logout-btn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#ef4444;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.mobile-logout-btn:hover{

    background:#dc2626;

}

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

.mobile-navigation{

    border:0 !important;

    border-radius:0 30px 30px 0;

    box-shadow:
        0 25px 80px rgba(15,23,42,.18);

    overflow:hidden;

}

.mobile-brand{

    position:relative;

    z-index:2;

}

.mobile-brand .brand-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    backdrop-filter:blur(8px);

    background:rgba(255,255,255,.18);

    font-size:24px;

    transition:.3s;

}

.mobile-brand h5{

    font-size:22px;

    font-weight:700;

}

.mobile-brand small{

    opacity:.92;

    letter-spacing:.3px;

}

.mobile-navigation .offcanvas-body{

    background:#f8fafc;

    padding:20px;

}

.mobile-menu-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:14px;

    overflow:hidden;

    border:1px solid #eef2f7;

    transition:.3s;

}

.mobile-menu-item:hover{

    box-shadow:

        0 12px 30px rgba(37,99,235,.08);

    transform:translateY(-2px);

}

.mobile-menu-toggle{

    padding:18px;

    font-size:16px;

    font-weight:700;

    background:#fff;

}

.mobile-menu-toggle:hover{

    background:#f8fbff;

}

.mobile-menu-toggle i:first-child{

    font-size:18px;

}

.mobile-menu-toggle i:last-child{

    transition:.35s;

}

.mobile-menu-toggle[aria-expanded="true"] i:last-child{

    transform:rotate(180deg);

}

.mobile-menu-item .collapse{

    transition:.3s;

}

.mobile-section-title{

    color:#2563eb;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:15px;

}

.mobile-links a{

    background:#fff;

    border:1px solid #eef2f7;

    transition:.25s;

}

.mobile-links a:hover{

    background:#eff6ff;

    border-color:#bfdbfe;

    transform:translateX(6px);

}

.mobile-job-card{

    background:#fff;

    border-radius:16px;

    border:1px solid #eef2f7;

    transition:.25s;

}

.mobile-job-card:hover{

    border-color:#bfdbfe;

    box-shadow:

        0 10px 25px rgba(37,99,235,.08);

    transform:translateY(-2px);

}

.mobile-featured-card{

    background:

        linear-gradient(
            135deg,
            #eff6ff,
            #ffffff
        );

    border:1px solid #bfdbfe;

    border-radius:18px;

    padding:18px;

    margin:18px 0;

}

.mobile-links-grid{

    display:grid;

    gap:10px;

}

.mobile-links-grid a{

    background:#fff;

    border-radius:14px;

    padding:14px;

    border:1px solid #eef2f7;

    transition:.25s;

}

.mobile-links-grid a:hover{

    background:#eff6ff;

    transform:translateX(6px);

}

.mobile-user-card{

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color:#fff;

    border:none;

}

.mobile-user-card small{

    color:rgba(255,255,255,.9);

}

.mobile-auth-buttons .btn{

    border-radius:14px;

    font-weight:600;

    padding:14px;

}

.mobile-navigation .offcanvas-body::-webkit-scrollbar{

    width:6px;

}

.mobile-navigation .offcanvas-body::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}


/* ============================================================
   PREMIUM HERO SECTION
   Modern, Production-Ready Design
============================================================ */

/*==========================================================
HERO SECTION - Container & Background
==========================================================*/

.hero-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:130px 0 20px;
    margin-top:0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(219,234,254,.12) 0%, transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f8faff 40%, #eef5ff 100%);
}

@media(max-width:1199px){
    .hero-section{
        padding:110px 0 20px;
    }
}

@media(max-width:991px){
    .hero-section{
        min-height:auto;
        padding:100px 0 40px;
    }
}

@media(max-width:767px){
    .hero-section{
        padding:90px 0 30px;
    }
}

/*==========================================================
Animated Particles
==========================================================*/

.hero-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}

.particle{
    position:absolute;
    border-radius:50%;
    opacity:.3;
}

.particle.p1{
    width:300px;
    height:300px;
    background:radial-gradient(circle,rgba(37,99,235,.12),transparent 70%);
    top:-80px;
    right:10%;
    animation:heroFloat 8s ease-in-out infinite;
}

.particle.p2{
    width:200px;
    height:200px;
    background:radial-gradient(circle,rgba(245,158,11,.08),transparent 70%);
    bottom:10%;
    left:5%;
    animation:heroFloat 10s ease-in-out infinite 1s;
}

.particle.p3{
    width:150px;
    height:150px;
    background:radial-gradient(circle,rgba(59,130,246,.1),transparent 70%);
    top:30%;
    left:40%;
    animation:heroFloat 12s ease-in-out infinite .5s;
}

.particle.p4{
    width:80px;
    height:80px;
    border:1px solid rgba(37,99,235,.08);
    top:20%;
    right:25%;
    animation:heroFloat 15s ease-in-out infinite 2s;
}

.particle.p5{
    width:120px;
    height:120px;
    border:2px solid rgba(245,158,11,.06);
    bottom:30%;
    right:15%;
    animation:heroFloat 9s ease-in-out infinite 1.5s;
}

.particle.p6{
    width:60px;
    height:60px;
    background:rgba(37,99,235,.04);
    top:60%;
    left:15%;
    animation:heroFloat 11s ease-in-out infinite .8s;
}

@keyframes heroFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-20px) scale(1.05)}
}

/*==========================================================
Container
==========================================================*/

.hero-section>.container{
    position:relative;
    z-index:10;
    max-width:1400px;
}

/*==========================================================
LEFT CONTENT WRAPPER
==========================================================*/

.hero-left{
    position:relative;
    z-index:20;
}

.hero-content-wrapper{
    max-width:620px;
}

/*==========================================================
Premium Badge
==========================================================*/

.hero-badge-wrapper{
    margin-bottom:28px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 24px;
    border-radius:100px;
    background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(59,130,246,.04));
    border:1px solid rgba(37,99,235,.12);
    color:#2563eb;
    font-size:14px;
    font-weight:700;
    letter-spacing:.02em;
    box-shadow:0 4px 20px rgba(37,99,235,.08);
    backdrop-filter:blur(8px);
}

.hero-badge-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    animation:pulseGlow 2s infinite;
}

.hero-badge-icon{
    color:#22c55e;
    font-size:16px;
}

/*==========================================================
Title
==========================================================*/

.hero-title{
    margin:0 0 20px;
    font-size:52px;
    line-height:1.1;
    font-weight:800;
    color:#0f172a;
    letter-spacing:-2px;
}

.hero-title-line{
    display:block;
}

.hero-title-highlight{
    display:block;
    margin-top:8px;
}

/*==========================================================
Subtitle
==========================================================*/

.hero-subtitle{
    margin:0 0 32px;
    font-size:17px;
    line-height:1.8;
    color:#475569;
    max-width:540px;
}

/*==========================================================
Search Bar
==========================================================*/

.hero-search-wrapper{
    margin-bottom:28px;
}

.hero-search-bar{
    display:flex;
    align-items:center;
    gap:0;
    width:100%;
    max-width:560px;
    height:60px;
    padding:0 8px 0 20px;
    border-radius:16px;
    background:#fff;
    border:1px solid #e2e8f0;
    box-shadow:0 4px 20px rgba(15,23,42,.06);
    transition:.3s;
}

.hero-search-bar:focus-within{
    border-color:#2563eb;
    box-shadow:0 4px 24px rgba(37,99,235,.12);
}

.hero-search-bar>.bi-search{
    color:#94a3b8;
    font-size:18px;
    margin-right:12px;
}

.hero-search-input{
    flex:1;
    border:none;
    outline:none;
    background:none;
    font-size:15px;
    color:#0f172a;
    font-weight:500;
}

.hero-search-input::placeholder{
    color:#94a3b8;
}

.hero-search-btn{
    width:44px;
    height:44px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
    cursor:pointer;
    flex-shrink:0;
}

.hero-search-btn:hover{
    transform:scale(1.05);
    box-shadow:0 8px 20px rgba(37,99,235,.25);
}

/*==========================================================
CTA Buttons
==========================================================*/

.hero-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:32px;
    flex-wrap:wrap;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    height:56px;
    padding:0 30px;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    cursor:pointer;
}

.hero-btn-primary{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    box-shadow:0 12px 30px rgba(37,99,235,.25);
}

.hero-btn-primary:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(37,99,235,.35);
}

.hero-btn-arrow{
    transition:.3s;
}

.hero-btn-primary:hover .hero-btn-arrow{
    transform:translateX(4px);
}

.hero-btn-secondary{
    background:#fff;
    color:#2563eb;
    border:2px solid #e2e8f0;
    box-shadow:0 4px 12px rgba(15,23,42,.05);
}

.hero-btn-secondary:hover{
    color:#2563eb;
    border-color:#2563eb;
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(37,99,235,.12);
}

/*==========================================================
Stats Row
==========================================================*/

.hero-stats{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.hero-stat-item{
    display:flex;
    flex-direction:column;
}

.hero-stat-number{
    font-size:22px;
    font-weight:800;
    color:#0f172a;
    line-height:1.2;
}

.hero-stat-label{
    font-size:13px;
    color:#64748b;
    font-weight:500;
    margin-top:2px;
}

.hero-stat-divider{
    width:1px;
    height:40px;
    background:linear-gradient(transparent,#e2e8f0,transparent);
}

/*==========================================================
RIGHT VISUAL COLUMN
==========================================================*/

.hero-visual-col{
    position:relative;
}

.hero-visual-wrapper{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/*==========================================================
Image Frame
==========================================================*/

.hero-image-frame{
    position:relative;
    width:520px;
    height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Decorative Rings */
.hero-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(37,99,235,.08);
}

.hero-ring-1{
    width:520px;
    height:520px;
    animation:heroSpin 30s linear infinite;
}

.hero-ring-2{
    width:440px;
    height:440px;
    border-color:rgba(59,130,246,.06);
    border-style:dashed;
    animation:heroSpin 25s linear infinite reverse;
}

.hero-ring-3{
    width:360px;
    height:360px;
    border-color:rgba(37,99,235,.05);
    border-width:2px;
    animation:heroSpin 20s linear infinite;
}

@keyframes heroSpin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/* Image Glow */
.hero-image-glow{
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.15),rgba(59,130,246,.08),transparent 70%);
    filter:blur(50px);
    animation:pulseGlow 4s ease-in-out infinite;
}

/* Main Image */
.hero-main-image{
    position:relative;
    z-index:5;
    width:340px;
    height:340px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.8);
    box-shadow:
        0 20px 60px rgba(37,99,235,.15),
        0 0 0 1px rgba(255,255,255,.9),
        inset 0 0 30px rgba(255,255,255,.3);
}

/*==========================================================
Floating Badges
==========================================================*/

.hero-float-badge{
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border-radius:14px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    border:1px solid rgba(226,232,240,.8);
    box-shadow:0 8px 30px rgba(15,23,42,.08);
    z-index:10;
    white-space:nowrap;
}

.float-badge-1{
    top:30px;
    right:10px;
}

.float-badge-2{
    bottom:60px;
    left:-10px;
}

.float-badge-3{
    bottom:10px;
    right:30px;
}

.float-badge-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8f5e9;
    color:#16a34a;
    font-size:17px;
    flex-shrink:0;
}

.float-badge-icon.amber{
    background:#fff7e6;
    color:#f59e0b;
}

.float-badge-icon.purple{
    background:#f3e8ff;
    color:#7c3aed;
}

.float-badge-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.float-badge-text strong{
    font-size:13px;
    color:#0f172a;
    font-weight:700;
}

.float-badge-text small{
    font-size:11px;
    color:#64748b;
    font-weight:500;
}

/*==========================================================
Visual Trust Badges
==========================================================*/

.hero-visual-trust{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin-top:28px;
}

.visual-trust-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:#475569;
}

.visual-trust-item i{
    font-size:16px;
}

/*==========================================================
TRUST BAR AT BOTTOM
==========================================================*/

.hero-trust-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    width:100%;
    margin-top:50px;
    padding:12px;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(16px);
    border-radius:24px;
    border:1px solid rgba(226,232,240,.6);
    box-shadow:0 8px 30px rgba(15,23,42,.05);
}

.trust-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 20px;
    border-radius:16px;
    transition:.35s;
    background:transparent;
}

.trust-featured{
    background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(34,197,94,.04));
    border:1px solid rgba(22,163,74,.12);
}

.trust-card:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.8);
    box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.trust-card-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8f5e9;
    color:#16a34a;
    font-size:22px;
    flex-shrink:0;
    transition:.35s;
}

.trust-card:hover .trust-card-icon{
    transform:rotate(-8deg) scale(1.08);
}

.trust-card-icon.yellow{
    background:#fff7e6;
    color:#f59e0b;
}

.trust-card-icon.purple{
    background:#f3e8ff;
    color:#7c3aed;
}

.trust-card-icon.orange{
    background:#fff1e8;
    color:#f97316;
}

.trust-card-content{
    display:flex;
    flex-direction:column;
}

.trust-card-label{
    font-size:12px;
    color:#64748b;
    font-weight:600;
    margin-bottom:2px;
}

.trust-card-value{
    font-size:16px;
    color:#0f172a;
    font-weight:700;
    line-height:1.2;
}

/*==========================================================
RESPONSIVE - TABLET
==========================================================*/

@media(max-width:1199px){
    .hero-title{
        font-size:44px;
    }

    .hero-image-frame{
        width:420px;
        height:420px;
    }

    .hero-ring-1{width:420px;height:420px;}
    .hero-ring-2{width:360px;height:360px;}
    .hero-ring-3{width:300px;height:300px;}

    .hero-main-image{
        width:280px;
        height:280px;
    }

    .float-badge-1{top:20px;right:0;}
    .float-badge-2{bottom:40px;left:0;}
    .float-badge-3{bottom:0;right:10px;}
}

@media(max-width:991px){
    .hero-section{
        min-height:auto;
        padding:100px 0 40px;
    }

    .hero-left{
        text-align:center;
    }

    .hero-content-wrapper{
        max-width:100%;
        margin:0 auto;
    }

    .hero-badge-wrapper{
        display:flex;
        justify-content:center;
    }

    .hero-title{
        font-size:38px;
        text-align:center;
    }

    .hero-subtitle{
        margin:0 auto 28px;
        text-align:center;
    }

    .hero-search-bar{
        max-width:100%;
        margin:0 auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-stats{
        justify-content:center;
    }

    .hero-stat-divider:last-child{
        display:none;
    }

    .hero-visual-col{
        margin-top:40px;
    }

    .hero-image-frame{
        width:360px;
        height:360px;
        margin:0 auto;
    }

    .hero-ring-1{width:360px;height:360px;}
    .hero-ring-2{width:310px;height:310px;}
    .hero-ring-3{width:260px;height:260px;}

    .hero-main-image{
        width:240px;
        height:240px;
    }

    .float-badge-1{top:10px;right:0;}
    .float-badge-2{bottom:30px;left:0;}
    .float-badge-3{bottom:0;right:10px;}

    .hero-trust-row{
        grid-template-columns:repeat(2,1fr);
        margin-top:40px;
    }
}

/*==========================================================
RESPONSIVE - MOBILE
==========================================================*/

@media(max-width:767px){
    .hero-section{
        padding:90px 0 30px;
    }

    .hero-title{
        font-size:30px;
        letter-spacing:-1px;
    }

    .hero-badge{
        font-size:12px;
        padding:8px 18px;
    }

    .hero-subtitle{
        font-size:15px;
        line-height:1.7;
    }

    .hero-search-bar{
        height:52px;
    }

    .hero-btn{
        height:50px;
        padding:0 22px;
        font-size:14px;
    }

    .hero-stat-number{
        font-size:18px;
    }

    .hero-stat-label{
        font-size:12px;
    }

    .hero-image-frame{
        width:300px;
        height:300px;
    }

    .hero-ring-1{width:300px;height:300px;}
    .hero-ring-2{width:260px;height:260px;}
    .hero-ring-3{width:220px;height:220px;}

    .hero-main-image{
        width:200px;
        height:200px;
    }

    .float-badge-1{top:0;right:0;padding:10px 14px;}
    .float-badge-2{bottom:20px;left:0;padding:10px 14px;}
    .float-badge-3{display:none;}

    .float-badge-icon{
        width:30px;
        height:30px;
        font-size:14px;
    }

    .float-badge-text strong{font-size:12px;}
    .float-badge-text small{font-size:10px;}

    .hero-visual-trust{
        gap:16px;
        flex-wrap:wrap;
    }

    .hero-trust-row{
        grid-template-columns:1fr;
        gap:8px;
        padding:8px;
        margin-top:30px;
    }

    .trust-card{
        padding:14px 16px;
    }
}

/*==========================================================
RESPONSIVE - SMALL MOBILE
==========================================================*/

@media(max-width:480px){
    .hero-title{
        font-size:26px;
    }

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

    .hero-image-frame{
        width:260px;
        height:260px;
    }

    .hero-ring-1{width:260px;height:260px;}
    .hero-ring-2{width:225px;height:225px;}
    .hero-ring-3{width:190px;height:190px;}

    .hero-main-image{
        width:170px;
        height:170px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-btn{
        justify-content:center;
        width:100%;
    }

    .hero-stats{
        gap:16px;
    }

    .hero-stat-divider{
        height:30px;
    }
}

/*==================================================
 PREMIUM NAVBAR v2
 DESKTOP ONLY
==================================================*/

@media (min-width:1200px){

/*=========================================
Navbar
=========================================*/

.premium-navbar{

    position:sticky !important;

    top:0 !important;

    left:0 !important;

    right:0 !important;

    z-index:1080 !important;

    height:82px !important;

    padding:0 !important;

    background:rgba(255,255,255,.82) !important;

    backdrop-filter:blur(22px) saturate(180%) !important;

    -webkit-backdrop-filter:blur(22px) saturate(180%) !important;

    border-bottom:1px solid rgba(226,232,240,.8) !important;

    box-shadow:
        0 10px 40px rgba(15,23,42,.05) !important;

    transition:all .30s ease !important;

}


/*=========================================
Container
=========================================*/

.premium-navbar>.container-xl{

    max-width:1480px !important;

    height:82px !important;

    display:flex !important;

    align-items:center !important;

}


/*=========================================
Brand
=========================================*/

.brand-logo{

    gap:14px !important;

    margin-right:45px !important;

    text-decoration:none !important;

}


.brand-icon{

    width:52px !important;

    height:52px !important;

    border-radius:18px !important;

    background:linear-gradient(135deg,#2563eb,#3b82f6) !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    color:#fff !important;

    font-size:23px !important;

    box-shadow:
        0 12px 28px rgba(37,99,235,.25) !important;

}


.brand-title{

    font-size:25px !important;

    font-weight:800 !important;

    letter-spacing:-.5px !important;

    color:#0f172a !important;

}


.brand-title span{

    color:#2563eb !important;

}


.brand-subtitle{

    font-size:12px !important;

    color:#64748b !important;

    margin-top:2px !important;

}


/*=========================================
Menu
=========================================*/

.navbar-nav{

    gap:8px !important;

}


.navbar-nav>.nav-item{

    position:relative !important;

}


.navbar-nav>.nav-item>.nav-link{

    display:flex !important;

    align-items:center !important;

    height:46px !important;

    padding:0 18px !important;

    border-radius:14px !important;

    font-size:15px !important;

    font-weight:700 !important;

    color:#334155 !important;

    transition:.25s !important;

}


/* Hover */

.navbar-nav>.nav-item:hover>.nav-link{

    background:#eff6ff !important;

    color:#2563eb !important;

}


/* Active */

.navbar-nav>.nav-item>.nav-link.active{

    background:#2563eb !important;

    color:#fff !important;

}


/* Dropdown Arrow */

.nav-link.dropdown-toggle::after{

    margin-left:8px !important;

    transition:.25s !important;

}


.nav-item:hover>.nav-link.dropdown-toggle::after{

    transform:rotate(180deg) !important;

}


/*=========================================
Search
=========================================*/

.header-search{

    width:270px !important;

    height:46px !important;

    border-radius:16px !important;

    border:1px solid #e2e8f0 !important;

    background:#f8fafc !important;

    transition:.3s !important;

}


.header-search:hover,

.header-search:focus-within{

    background:#fff !important;

    border-color:#2563eb !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08) !important;

}


/*=========================================
Buttons
=========================================*/

.btn-login{

    height:44px !important;

    padding:0 24px !important;

    border-radius:14px !important;

    font-weight:700 !important;

}


.btn-register{

    height:46px !important;

    padding:0 28px !important;

    border-radius:14px !important;

    font-weight:700 !important;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6) !important;

    box-shadow:
        0 12px 28px rgba(37,99,235,.25) !important;

}


/*=========================================
Mega Menu Position Fix
=========================================*/

.navbar-nav>.dropdown{

    position:static !important;

}


/* Full Width */

.mega-dropdown{

    position:absolute !important;

    left:50% !important;

    transform:translateX(-50%) !important;

    top:100% !important;

    width:min(1380px,96vw) !important;

    max-width:1380px !important;

    margin-top:18px !important;

    border-radius:24px !important;

    overflow:hidden !important;

    background:#fff !important;

    border:1px solid #edf2f7 !important;

    box-shadow:
        0 30px 80px rgba(15,23,42,.12) !important;

    z-index:1200 !important;

}

}

/*==================================================
 PREMIUM NAVBAR
 PART 1
 DESKTOP ONLY
==================================================*/

@media (min-width:1200px){

/*=============================
Navbar
=============================*/

.premium-navbar{

    position:fixed !important;

    top:0 !important;

    left:0 !important;

    right:0 !important;

    width:100% !important;

    height:82px !important;

    z-index:9999 !important;

    padding:0 !important;

    margin:0 !important;

    background:rgba(255,255,255,.92) !important;

    backdrop-filter:blur(18px) !important;

    -webkit-backdrop-filter:blur(18px) !important;

    border-bottom:1px solid rgba(226,232,240,.75) !important;

    box-shadow:

    0 10px 35px rgba(15,23,42,.05) !important;

}


/*=============================
Container
=============================*/

.premium-navbar .container-xl{

    max-width:1400px !important;

    width:100% !important;

    height:82px !important;

    padding-left:20px !important;

    padding-right:20px !important;

    display:flex !important;

    align-items:center !important;

}


/*=============================
Brand
=============================*/

.navbar-brand{

    display:flex !important;

    align-items:center !important;

    flex-shrink:0 !important;

    margin-right:40px !important;

    padding:0 !important;

}


/* Logo */

.navbar-logo{

    display:block !important;

    height:54px !important;

    width:auto !important;

    max-width:220px !important;

    object-fit:contain !important;

}


/* Remove old icon */

.brand-icon,

.brand-content{

    margin:0 !important;

    padding:0 !important;

}


/*=============================
Navbar Collapse
=============================*/

#mainNavbar{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    flex:1 !important;

    min-width:0 !important;

}


/*=============================
Menu
=============================*/

.navbar-nav{

    display:flex !important;

    align-items:center !important;

    gap:4px !important;

    margin:0 auto !important;

}


/*=============================
Right Area
=============================*/

.navbar-right{

    display:flex !important;

    align-items:center !important;

    gap:14px !important;

    margin-left:24px !important;

    flex-shrink:0 !important;

}


/*=============================
Search
=============================*/

.header-search{

    width:220px !important;

    flex-shrink:0 !important;

}


/*=============================
Buttons
=============================*/

.btn-login{

    flex-shrink:0 !important;

    min-width:110px !important;

}


.btn-register{

    flex-shrink:0 !important;

    min-width:130px !important;

}


/*=============================
Prevent Overflow
=============================*/

body{

    overflow-x:hidden !important;

}

}

/*==================================================
 EXTRA SMALL NAVBAR LOGO
==================================================*/

@media (min-width:1200px){

.navbar-logo{

    height:32px !important;

    width:auto !important;

    max-width:140px !important;

    object-fit:contain !important;

    display:block !important;

}

.navbar-brand{

    padding:0 !important;

    margin-right:20px !important;

    display:flex !important;

    align-items:center !important;

    flex-shrink:0 !important;

}

}

/*=========================================
Navbar Logo Size
=========================================*/

@media (min-width:1200px){

    .navbar-logo{

        height:48px !important;
        width:auto !important;
        max-width:220px !important;
        object-fit:contain !important;
        transition:all .3s ease !important;

    }

    .navbar-brand{

        display:flex !important;
        align-items:center !important;
        padding:0 !important;
        margin-right:24px !important;
        flex-shrink:0 !important;

    }

}

/*==================================================
 MOBILE USER SECTION
 GovtNaukriUpdate Branding
==================================================*/

.mobile-user-section{

    margin-top:28px;
    padding-top:24px;
    border-top:1px solid rgba(37,99,235,.12);

}

/*==========================
User Card
==========================*/

.mobile-user-card{

    display:flex;
    align-items:center;
    gap:16px;

    padding:18px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #2563EB 0%,
        #1D4ED8 55%,
        #F59E0B 100%
    );

    color:#fff;

    box-shadow:
        0 12px 35px rgba(37,99,235,.22);

}

/*==========================
Avatar
==========================*/

.mobile-user-avatar{

    width:58px;
    height:58px;

    border-radius:50%;

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

    font-size:22px;
    font-weight:700;

    background:#fff;
    color:#2563EB;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);

}

/*==========================
Name
==========================*/

.mobile-user-card h6{

    margin:0;
    font-size:17px;
    font-weight:700;
    color:#fff;

}

.mobile-user-card small{

    color:rgba(255,255,255,.88);
    font-size:13px;

}

/*==========================
Grid
==========================*/

.mobile-links-grid{

    display:grid;
    gap:14px;

    margin-top:20px;

}

/*==========================
Dashboard
==========================*/

.mobile-links-grid a{

    display:flex;
    align-items:center;

    padding:15px 18px;

    border-radius:14px;

    text-decoration:none;

    background:#EFF6FF;

    color:#2563EB;

    font-weight:600;

    transition:.3s;

}

.mobile-links-grid a:hover{

    background:#DBEAFE;

    color:#1D4ED8;

    transform:translateY(-2px);

}

/*==========================
Logout
==========================*/

.mobile-logout-btn{

    width:100%;

    border:none;

    padding:15px 18px;

    border-radius:14px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
        135deg,
        #F59E0B,
        #EA580C
    );

    transition:.3s;

}

.mobile-logout-btn:hover{

    transform:translateY(-2px);

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

}

/*==========================
Guest Buttons
==========================*/

.mobile-auth-buttons .btn-primary{

    border:none;

    border-radius:14px;

    padding:14px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );

    box-shadow:
        0 10px 25px rgba(37,99,235,.25);

}

.mobile-auth-buttons .btn-outline-primary{

    border:2px solid #2563EB;

    color:#2563EB;

    background:#fff;

    border-radius:14px;

    padding:14px;

    font-weight:700;

}

.mobile-auth-buttons .btn-outline-primary:hover{

    background:#F59E0B;

    border-color:#F59E0B;

    color:#fff;

}

/*==================================================
 RESPONSIVE NAVBAR LOGO
==================================================*/

.navbar-brand{

    display:flex !important;
    align-items:center !important;
    padding:0 !important;
    margin:0 !important;
    flex-shrink:0 !important;

}

.navbar-logo{

    display:block !important;

    width:auto !important;

    height:48px !important;

    max-width:100% !important;

    object-fit:contain !important;

    transition:all .3s ease;

}

/*==============================
 Large Desktop
==============================*/

@media (min-width:1400px){

    .navbar-logo{

        height:52px !important;

    }

}

/*==============================
 Desktop
==============================*/

@media (max-width:1399px){

    .navbar-logo{

        height:46px !important;

    }

}

/*==============================
 Laptop
==============================*/

@media (max-width:1199px){

    .navbar-brand{

        margin-right:12px !important;

    }

    .navbar-logo{

        height:42px !important;

    }

}

/*==============================
 Tablet
==============================*/

@media (max-width:991px){

    .navbar{

        min-height:72px !important;

    }

    .navbar-brand{

        max-width:220px !important;

    }

    .navbar-logo{

        height:40px !important;

        max-width:100% !important;

    }

}

/*==============================
 Mobile
==============================*/

@media (max-width:767px){

    .navbar{

        min-height:66px !important;

        padding:.5rem .75rem !important;

    }

    .navbar-brand{

        max-width:190px !important;

    }

    .navbar-logo{

        height:34px !important;

        width:auto !important;

    }

}

/*==============================
 Small Mobile
==============================*/

@media (max-width:480px){

    .navbar{

        min-height:62px !important;

    }

    .navbar-brand{

        max-width:165px !important;

    }

    .navbar-logo{

        height:30px !important;

    }

}

/*==============================
 Extra Small Devices
==============================*/

@media (max-width:360px){

    .navbar-brand{

        max-width:145px !important;

    }

    .navbar-logo{

        height:28px !important;

    }

}

/*==================================================
 PREMIUM NAVBAR RIGHT
 GovtNaukriUpdate Branding
==================================================*/

/*==========================
Right Area
==========================*/

.navbar-right{

    display:flex !important;
    align-items:center !important;
    gap:14px !important;

}

/*==========================
Login Button
==========================*/

.btn-login{

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

    height:46px;
    padding:0 22px;

    border-radius:14px;

    background:#fff;

    border:2px solid #2563EB;

    color:#2563EB;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.btn-login:hover{

    background:#2563EB;

    color:#fff;

    border-color:#2563EB;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(37,99,235,.25);

}

/*==========================
Register Button
==========================*/

.btn-register{

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

    height:46px;

    padding:0 24px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563EB 0%,
        #1D4ED8 60%,
        #F59E0B 100%
    );

    box-shadow:0 12px 30px rgba(37,99,235,.30);

    transition:.35s;

}

.btn-register:hover{

    transform:translateY(-2px);

    color:#fff;

    box-shadow:
        0 16px 36px rgba(37,99,235,.35);

}

/*==========================
User Menu
==========================*/

.user-menu{

    display:flex;

    align-items:center;

    gap:14px;

    padding:8px 18px;

    border:none;

    border-radius:16px;

    background:#fff;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        0 6px 18px rgba(15,23,42,.08);

}

.user-menu:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(37,99,235,.15);

}

/*==========================
Avatar
==========================*/

.user-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563EB,
        #F59E0B
    );

    box-shadow:
        0 8px 20px rgba(37,99,235,.25);

}

/*==========================
User Info
==========================*/

.user-name{

    display:block;

    color:#0F172A;

    font-size:15px;

    font-weight:700;

    line-height:1.2;

}

.user-info small{

    color:#64748B;

    font-size:12px;

}

/*==========================
Arrow
==========================*/

.user-menu i{

    color:#2563EB;

    transition:.3s;

}

.user-menu:hover i{

    transform:rotate(180deg);

}

/*==========================
Dropdown
==========================*/

.dropdown-menu{

    border:none;

    border-radius:18px;

    padding:10px;

    min-width:240px;

    box-shadow:
        0 18px 45px rgba(15,23,42,.12);

}

/*==========================
Dropdown Item
==========================*/

.dropdown-item{

    border-radius:12px;

    padding:12px 16px;

    font-weight:600;

    color:#334155;

    transition:.3s;

}

.dropdown-item:hover{

    background:#EFF6FF;

    color:#2563EB;

}

/*==========================
Logout
==========================*/

.dropdown-item.text-danger{

    color:#EA580C !important;

}

.dropdown-item.text-danger:hover{

    background:#FFF7ED !important;

    color:#EA580C !important;

}

/*==========================
Responsive
==========================*/

@media(max-width:1199px){

    .navbar-right{

        width:100%;

        margin-top:20px;

        justify-content:center;

        flex-wrap:wrap;

    }

    .btn-login,
    .btn-register{

        flex:1;

        min-width:150px;

    }

    .user-menu{

        width:100%;

        justify-content:center;

    }

}

/*==========================
Get Started Button
==========================*/

.btn-get-started{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height:48px;

    padding:0 28px;

    border:none;

    border-radius:14px;

    text-decoration:none;

    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;

    color:#fff !important;

    background:linear-gradient(
        135deg,
        #F59E0B 0%,
        #F97316 55%,
        #EA580C 100%
    );

    box-shadow:
        0 10px 30px rgba(245,158,11,.35);

    transition:all .35s ease;

}

.btn-get-started:hover{

    color:#fff !important;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(234,88,12,.40);

    background:linear-gradient(
        135deg,
        #FBBF24 0%,
        #F59E0B 50%,
        #EA580C 100%
    );

}

.btn-get-started i{

    font-size:16px;

}

/*==================================================
 MOBILE BRAND LOGO
==================================================*/

.mobile-brand{

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

    padding:18px 20px;

    border-bottom:1px solid rgba(37,99,235,.10);

}

.mobile-brand-logo{

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

    width:100%;

    text-decoration:none;

}

.mobile-logo{

    width:auto;

    height:42px;

    max-width:220px;

    object-fit:contain;

    transition:all .3s ease;

}

/* Tablet */

@media (max-width:768px){

    .mobile-logo{

        height:38px;
        max-width:200px;

    }

}

/* Mobile */

@media (max-width:576px){

    .mobile-logo{

        height:34px;
        max-width:180px;

    }

}

/* Small Mobile */

@media (max-width:400px){

    .mobile-logo{

        height:30px;
        max-width:160px;

    }

}

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

.offcanvas-header{

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

    padding:18px 20px;

    background:#ffffff;

    border-bottom:1px solid rgba(37,99,235,.10);

    box-shadow:0 2px 10px rgba(15,23,42,.04);

}

/*==================================================
 Mobile Brand
==================================================*/

.mobile-brand{

    display:flex;
    align-items:center;

    flex:1;

}

.mobile-brand-logo{

    display:flex;
    align-items:center;

    text-decoration:none;

}

.mobile-logo{

    display:block;

    height:42px;

    width:auto;

    max-width:220px;

    object-fit:contain;

    transition:.3s;

}

/*==================================================
 Close Button
==================================================*/

.offcanvas-header .btn-close{

    width:40px;

    height:40px;

    border-radius:12px;

    background-color:#F8FAFC;

    opacity:1;

    transition:.3s;

}

.offcanvas-header .btn-close:hover{

    background:#EFF6FF;

    transform:rotate(90deg);

}

/*==================================================
 Tablet
==================================================*/

@media (max-width:768px){

    .offcanvas-header{

        padding:16px 18px;

    }

    .mobile-logo{

        height:38px;

        max-width:200px;

    }

}

/*==================================================
 Mobile
==================================================*/

@media (max-width:576px){

    .offcanvas-header{

        padding:14px 16px;

    }

    .mobile-logo{

        height:34px;

        max-width:180px;

    }

}

/*==================================================
 Small Mobile
==================================================*/

@media (max-width:400px){

    .mobile-logo{

        height:30px;

        max-width:160px;

    }

}

/*==================================================
 OFFCANVAS HEADER - OVERRIDE
==================================================*/

.offcanvas-header{

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

    padding:18px 20px !important;

    background:#ffffff !important;

    border-bottom:1px solid rgba(37,99,235,.10) !important;

    box-shadow:0 2px 10px rgba(15,23,42,.04) !important;

}

/*==================================================
 Mobile Brand
==================================================*/

.mobile-brand{

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    flex:1 !important;

    margin:0 !important;
    padding:0 !important;

}

.mobile-brand-logo{

    display:flex !important;
    align-items:center !important;

    text-decoration:none !important;

    margin:0 !important;
    padding:0 !important;

}

.mobile-logo{

    display:block !important;

    height:42px !important;

    width:auto !important;

    max-width:220px !important;

    object-fit:contain !important;

    transition:all .3s ease !important;

}

/*==================================================
 Close Button
==================================================*/

.offcanvas-header .btn-close{

    width:40px !important;

    height:40px !important;

    padding:0 !important;

    border:none !important;

    border-radius:12px !important;

    background-color:#F8FAFC !important;

    opacity:1 !important;

    box-shadow:none !important;

    transition:all .3s ease !important;

}

.offcanvas-header .btn-close:hover{

    background:#EFF6FF !important;

    transform:rotate(90deg) !important;

}

/*==================================================
 Tablet
==================================================*/

@media (max-width:768px){

    .offcanvas-header{

        padding:16px 18px !important;

    }

    .mobile-logo{

        height:38px !important;

        max-width:200px !important;

    }

}

/*==================================================
 Mobile
==================================================*/

@media (max-width:576px){

    .offcanvas-header{

        padding:14px 16px !important;

    }

    .mobile-logo{

        height:34px !important;

        max-width:180px !important;

    }

}

/*==================================================
 Small Mobile
==================================================*/

@media (max-width:400px){

    .offcanvas-header{

        padding:12px 14px !important;

    }

    .mobile-logo{

        height:30px !important;

        max-width:160px !important;

    }

}


/*==================================================
  PREMIUM EXAM CATEGORIES
==================================================*/

.exam-categories{
    padding:90px 0 !important;
    background:#f8fbff !important;
    position:relative !important;
    overflow:hidden !important;
}

.exam-categories::before{
    content:"" !important;
    position:absolute !important;
    width:420px !important;
    height:420px !important;
    background:rgba(37,99,235,.05) !important;
    border-radius:50% !important;
    top:-180px !important;
    right:-150px !important;
}

.exam-categories::after{
    content:"" !important;
    position:absolute !important;
    width:350px !important;
    height:350px !important;
    background:rgba(245,158,11,.06) !important;
    border-radius:50% !important;
    bottom:-150px !important;
    left:-120px !important;
}

/*=====================================
Section Heading
=====================================*/

.section-header{
    max-width:760px !important;
    margin:0 auto 60px !important;
    position:relative !important;
    z-index:2 !important;
}

.section-badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    background:#eef4ff !important;
    color:#2563EB !important;
    border-radius:50px !important;
    padding:10px 22px !important;
    font-weight:700 !important;
    font-size:14px !important;
}

.section-badge i{
    color:#F59E0B !important;
}

.section-header h2{
    margin-top:18px !important;
    font-size:44px !important;
    font-weight:800 !important;
    color:#0f172a !important;
    line-height:1.2 !important;
}

.section-header p{
    margin-top:18px !important;
    color:#64748b !important;
    font-size:17px !important;
    line-height:1.8 !important;
}

/*=====================================
Category Card
=====================================*/

.category-card{
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;

    height:100% !important;

    padding:28px !important;

    background:#fff !important;

    border-radius:22px !important;

    border:1px solid #edf2f7 !important;

    box-shadow:0 12px 40px rgba(15,23,42,.06) !important;

    transition:.35s ease !important;

    position:relative !important;

    overflow:hidden !important;

    color:inherit !important;
}

.category-card::before{

    content:"" !important;

    position:absolute !important;

    top:0 !important;

    left:0 !important;

    width:100% !important;

    height:5px !important;

    background:linear-gradient(90deg,#2563EB,#F59E0B) !important;

    transform:scaleX(0) !important;

    transition:.35s !important;

}

.category-card:hover{

    transform:translateY(-10px) !important;

    box-shadow:0 25px 60px rgba(37,99,235,.18) !important;

    text-decoration:none !important;

}

.category-card:hover::before{

    transform:scaleX(1) !important;

}

/*=====================================
Top
=====================================*/

.category-top{

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    margin-bottom:28px !important;

}

/*=====================================
Icon
=====================================*/

.category-icon{

    width:72px !important;

    height:72px !important;

    border-radius:20px !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    font-size:32px !important;

    transition:.35s !important;

}

.category-icon.blue{

    background:rgba(37,99,235,.12) !important;

    color:#2563EB !important;

}

.category-icon.orange{

    background:rgba(245,158,11,.15) !important;

    color:#F59E0B !important;

}

.category-card:hover .category-icon{

    transform:rotate(-8deg) scale(1.08) !important;

}

/*=====================================
Badge
=====================================*/

.category-badge{

    background:#2563EB !important;

    color:#fff !important;

    min-width:58px !important;

    height:36px !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    border-radius:50px !important;

    font-weight:700 !important;

    font-size:14px !important;

}

/*=====================================
Content
=====================================*/

.category-content h4{

    font-size:23px !important;

    font-weight:800 !important;

    color:#0f172a !important;

    margin-bottom:12px !important;

}

.category-content p{

    color:#64748b !important;

    line-height:1.8 !important;

    min-height:54px !important;

    margin-bottom:30px !important;

}

/*=====================================
Footer
=====================================*/

.category-footer{

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    border-top:1px solid #eef2f7 !important;

    padding-top:20px !important;

}

.category-footer strong{

    display:block !important;

    font-size:24px !important;

    color:#2563EB !important;

    font-weight:800 !important;

}

.category-footer small{

    color:#64748b !important;

    font-size:14px !important;

}

/*=====================================
Arrow
=====================================*/

.category-arrow{

    width:48px !important;

    height:48px !important;

    border-radius:50% !important;

    background:#f1f5f9 !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    color:#2563EB !important;

    font-size:22px !important;

    transition:.35s !important;

}

.category-card:hover .category-arrow{

    background:#2563EB !important;

    color:#fff !important;

    transform:translateX(6px) !important;

}

/*=====================================
Tablet
=====================================*/

@media (max-width:991px){

.section-header h2{

font-size:36px !important;

}

.category-card{

padding:24px !important;

}

.category-content h4{

font-size:21px !important;

}

}

/*=====================================
Mobile
=====================================*/

@media (max-width:767px){

.exam-categories{

padding:65px 0 !important;

}

.section-header{

margin-bottom:40px !important;

}

.section-header h2{

font-size:30px !important;

}

.section-header p{

font-size:15px !important;

}

.category-card{

padding:22px !important;

border-radius:18px !important;

}

.category-top{

margin-bottom:22px !important;

}

.category-icon{

width:62px !important;

height:62px !important;

font-size:28px !important;

}

.category-content h4{

font-size:20px !important;

}

.category-content p{

font-size:14px !important;

min-height:auto !important;

margin-bottom:22px !important;

}

.category-footer strong{

font-size:20px !important;

}

.category-arrow{

width:42px !important;

height:42px !important;

font-size:18px !important;

}

}

/*=====================================
Small Mobile
=====================================*/

/*=====================================
Category Cards - Mobile Grid Fix
=====================================*/

@media(max-width:575px){
    .exam-categories .col-md-6{
        width:50%;
        flex:0 0 50%;
        max-width:50%;
    }

    .exam-categories .col-md-6:nth-child(odd):last-child{
        width:100%;
        flex:0 0 100%;
        max-width:100%;
    }
}

/* Stagger animation for category cards */
.exam-categories .stagger-children > *{
    opacity:0;
    animation:fadeInUp .5s ease forwards;
}

.exam-categories .stagger-children > *:nth-child(1){animation-delay:.05s;}
.exam-categories .stagger-children > *:nth-child(2){animation-delay:.1s;}
.exam-categories .stagger-children > *:nth-child(3){animation-delay:.15s;}
.exam-categories .stagger-children > *:nth-child(4){animation-delay:.2s;}
.exam-categories .stagger-children > *:nth-child(5){animation-delay:.25s;}
.exam-categories .stagger-children > *:nth-child(6){animation-delay:.3s;}
.exam-categories .stagger-children > *:nth-child(7){animation-delay:.35s;}
.exam-categories .stagger-children > *:nth-child(8){animation-delay:.4s;}

@media(max-width:480px){

.section-header h2{

font-size:26px !important;

}

.section-badge{

font-size:13px !important;

padding:8px 16px !important;

}

.category-card{

padding:18px !important;

}

.category-content h4{

font-size:18px !important;

}

.category-footer{

padding-top:16px !important;

}

}

/*==================================================
FEATURED JOBS
==================================================*/

.featured-jobs{
    background:#fff;
    padding:90px 0;
}

.featured-job-card{
    background:#fff;
    border-radius:24px;
    padding:30px;
    position:relative;
    overflow:hidden;
    border:1px solid #edf2f7;
    height:100%;
    transition:.35s;
    box-shadow:0 15px 45px rgba(15,23,42,.05);
}

.featured-job-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#2563eb,#f59e0b);
    transform:scaleX(0);
    transition:.35s;
}

.featured-job-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(37,99,235,.18);
}

.featured-job-card:hover::before{
    transform:scaleX(1);
}

.featured-ribbon{
    position:absolute;
    top:18px;
    right:-35px;
    width:140px;
    text-align:center;
    transform:rotate(45deg);
    background:#f59e0b;
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:6px 0;
}

.job-top{
    display:flex;
    align-items:center;
    margin-bottom:25px;
}

.company-logo{
    width:70px;
    height:70px;
    border-radius:18px;
    background:#eef4ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-right:18px;
}

.job-company h6{
    margin:0;
    font-weight:700;
}

.job-company span{
    color:#64748b;
    font-size:14px;
}

.job-title{
    font-size:22px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:22px;
}

.job-title a{
    color:#0f172a;
    text-decoration:none;
}

.job-title a:hover{
    color:#2563eb;
}

.job-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
}

.job-meta span{
    background:#f8fafc;
    border-radius:50px;
    padding:8px 15px;
    font-size:13px;
    font-weight:600;
}

.job-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #edf2f7;
    padding-top:20px;
}

.deadline{
    color:#dc2626;
    font-weight:600;
    font-size:14px;
}

.apply-btn{
    background:linear-gradient(90deg,#2563eb,#1d4ed8);
    color:#fff;
    padding:10px 22px;
    border-radius:50px;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.apply-btn:hover{
    color:#fff;
    transform:translateX(5px);
    box-shadow:0 10px 25px rgba(37,99,235,.35);
}

.view-all-btn{
    padding:12px 22px;
    border-radius:50px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.view-all-btn:hover{
    color:#fff;
    background:#1d4ed8;
}

@media(max-width:991px){

.featured-jobs{
padding:70px 0;
}

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

}

@media(max-width:767px){

.featured-job-card{
padding:22px;
}

.section-header{
text-align:center;
}

.view-all-btn{
margin-top:20px;
width:100%;
text-align:center;
}

.job-footer{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

.apply-btn{
width:100%;
text-align:center;
}

.company-logo{
width:58px;
height:58px;
font-size:24px;
}

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

}

/*==================================================
LATEST NOTIFICATIONS
==================================================*/

.latest-notifications{

    background:#f8fbff;

    padding:90px 0;

}

.notification-list{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.notification-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    border:1px solid #edf2f7;

    box-shadow:0 15px 40px rgba(15,23,42,.05);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.notification-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(#2563eb,#f59e0b);

    transform:scaleY(0);

    transition:.35s;

}

.notification-card:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 55px rgba(37,99,235,.16);

}

.notification-card:hover::before{

    transform:scaleY(1);

}

.notification-left{

    display:flex;

    align-items:flex-start;

    gap:22px;

    flex:1;

}

.notification-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#eef4ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    flex-shrink:0;

}

.notification-top{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:14px;

}

.new-badge{

    background:#ef4444;

    color:#fff;

    font-size:12px;

    font-weight:700;

    padding:6px 12px;

    border-radius:30px;

}

.category-chip{

    background:#eef4ff;

    color:#2563eb;

    padding:6px 12px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.notification-content h3{

    font-size:22px;

    font-weight:700;

    margin-bottom:14px;

}

.notification-content h3 a{

    color:#0f172a;

    text-decoration:none;

}

.notification-content h3 a:hover{

    color:#2563eb;

}

.notification-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    color:#64748b;

    font-size:14px;

}

.notification-meta span{

    display:flex;

    align-items:center;

    gap:7px;

}

.apply-now-btn{

    min-width:170px;

    text-align:center;

    padding:14px 24px;

    border-radius:50px;

    background:linear-gradient(90deg,#2563eb,#1d4ed8);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.apply-now-btn:hover{

    color:#fff;

    transform:translateX(6px);

    box-shadow:0 12px 30px rgba(37,99,235,.35);

}

@media(max-width:991px){

.notification-card{

flex-direction:column;

align-items:flex-start;

}

.apply-now-btn{

width:100%;

}

}

@media(max-width:767px){

.latest-notifications{

padding:70px 0;

}

.notification-card{

padding:22px;

border-radius:18px;

}

.notification-left{

gap:16px;

}

.notification-icon{

width:56px;

height:56px;

font-size:24px;

}

.notification-content h3{

font-size:18px;

}

.notification-meta{

font-size:13px;

gap:10px;

}

.apply-now-btn{

padding:12px 18px;

}

}

/*==================================================
MOCK TEST HERO
==================================================*/

.mock-test-hero{

    padding:90px 0;

    background:#f7fbff;

}

.mock-hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#0f4cdd,#2563eb);

    border-radius:32px;

    padding:70px;

    color:#fff;

    box-shadow:0 25px 70px rgba(37,99,235,.25);

}

.mock-hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-180px;

    right:-120px;

}

.mock-hero::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    bottom:-80px;

    left:-80px;

}

.mock-hero>*{

    position:relative;

    z-index:2;

}

.mock-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:rgba(255,255,255,.15);

    padding:10px 18px;

    border-radius:50px;

    font-weight:600;

    backdrop-filter:blur(10px);

}

.mock-title{

    font-size:3rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:24px;

}

.text-gradient{

    color:#ffd54f;

}

.mock-description{

    font-size:1.1rem;

    line-height:1.9;

    color:rgba(255,255,255,.9);

    max-width:620px;

    margin-bottom:35px;

}

.mock-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.btn-start{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 28px;

    border-radius:50px;

    background:#fff;

    color:#2563eb;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.btn-start:hover{

    transform:translateY(-4px);

    color:#2563eb;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.btn-outline-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    border-radius:50px;

    border:2px solid rgba(255,255,255,.3);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-outline-custom:hover{

    background:#fff;

    color:#2563eb;

}

.mock-stats-grid{

    display:grid;

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

    gap:22px;

}

.stat-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:24px;

    padding:28px;

    text-align:center;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.18);

}

.stat-icon{

    width:65px;

    height:65px;

    margin:0 auto 18px;

    border-radius:18px;

    background:rgba(255,255,255,.18);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.stat-card h3{

    font-size:2rem;

    font-weight:800;

    margin-bottom:8px;

}

.stat-card p{

    margin:0;

    color:rgba(255,255,255,.85);

    font-size:15px;

}

/*============ Tablet ============*/

@media(max-width:991px){

.mock-hero{

padding:50px 35px;

}

.mock-title{

font-size:2.3rem;

}

.mock-stats-grid{

margin-top:20px;

}

}

/*============ Mobile ============*/

@media(max-width:767px){

.mock-test-hero{

padding:70px 0;

}

.mock-hero{

padding:35px 22px;

border-radius:24px;

}

.mock-title{

font-size:1.9rem;

}

.mock-description{

font-size:15px;

line-height:1.7;

}

.mock-buttons{

flex-direction:column;

}

.btn-start,

.btn-outline-custom{

width:100%;

justify-content:center;

}

.mock-stats-grid{

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

gap:15px;

margin-top:30px;

}

.stat-card{

padding:18px;

border-radius:18px;

}

.stat-icon{

width:50px;

height:50px;

font-size:22px;

margin-bottom:12px;

}

.stat-card h3{

font-size:1.4rem;

}

.stat-card p{

font-size:13px;

}

}

/*==============================
POPULAR MOCK TEST HEADER
==============================*/

.popular-mock-tests{

    background:#f8fbff;

    padding:90px 0;

}

.free-strip{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    background:linear-gradient(90deg,#16a34a,#22c55e);

    color:#fff;

    border-radius:60px;

    padding:14px 24px;

    max-width:900px;

    margin:0 auto 60px;

    box-shadow:0 20px 45px rgba(34,197,94,.25);

}

.free-strip-badge{

    background:#fff;

    color:#16a34a;

    padding:8px 18px;

    border-radius:40px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:8px;

}

.free-strip-text{

    font-weight:600;

    letter-spacing:.2px;

}

.mock-section-heading{

    text-align:center;

    max-width:760px;

    margin:auto;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    border-radius:40px;

    background:#eef4ff;

    color:#2563eb;

    font-weight:700;

}

.mock-section-heading h2{

    margin:22px 0 18px;

    font-size:3rem;

    font-weight:800;

    color:#0f172a;

}

.mock-section-heading h2 span{

    color:#2563eb;

}

.mock-section-heading p{

    font-size:18px;

    color:#64748b;

    line-height:1.8;

}

/* Mobile */

@media(max-width:768px){

.free-strip{

flex-direction:column;

border-radius:24px;

padding:18px;

text-align:center;

gap:12px;

}

.mock-section-heading h2{

font-size:2rem;

}

.mock-section-heading p{

font-size:15px;

padding:0 10px;

}

}

.mock-test-section{
    background:#f8fafc;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    padding:.55rem 1.25rem;
    border-radius:50px;
    background:#e8fff0;
    color:#16a34a;
    font-weight:700;
}

.section-title{
    font-size:2rem;
    font-weight:700;
}

.section-subtitle{
    max-width:650px;
    margin:auto;
    color:#6b7280;
}

.mock-card{
    position:relative;
    background:#fff;
    border-radius:18px;
    padding:24px;
    border:1px solid #edf2f7;
    transition:.3s;
}

.mock-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.free-ribbon{
    position:absolute;
    top:18px;
    right:-35px;
    width:120px;
    text-align:center;
    background:#16a34a;
    color:#fff;
    transform:rotate(45deg);
    font-size:12px;
    font-weight:700;
    padding:5px 0;
}

.mock-card-header{
    display:flex;
    gap:15px;
    align-items:center;
}

.exam-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#eff6ff;
    color:#2563eb;
    font-size:24px;
}

.rating-row{
    display:flex;
    justify-content:space-between;
    margin:20px 0;
    color:#6b7280;
    font-size:14px;
}

.mock-card-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    text-align:center;
}

.mock-card-stats strong{
    display:block;
    font-size:20px;
}

.mock-card-stats small{
    color:#6b7280;
}

@media(max-width:768px){

    .mock-card-stats{

        grid-template-columns:1fr;

    }

}

/*=========================================================
    LATEST RESULTS
=========================================================*/

.latest-results{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at left top,#effaf3 0,#ffffff 45%),
        linear-gradient(180deg,#ffffff,#f8fcf9);
}

.latest-results::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(25,135,84,.05);
    border-radius:50%;
    top:-180px;
    left:-120px;
    filter:blur(30px);
}

.latest-results::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    background:rgba(13,110,253,.04);
    border-radius:50%;
    right:-140px;
    bottom:-140px;
    filter:blur(35px);
}

/*=========================================================
    Heading
=========================================================*/

.results-section-heading{

    max-width:760px;
    margin:auto;

}

.results-section-heading .section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 20px;

    background:#e9f8ef;

    color:#198754;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.results-section-heading h2{

    font-size:44px;

    font-weight:800;

    color:#212529;

    margin-bottom:15px;

}

.results-section-heading h2 span{

    color:#198754;

}

.results-section-heading p{

    color:#6c757d;

    font-size:17px;

    line-height:1.8;

}

/*=========================================================
    Card
=========================================================*/

.result-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    border:1px solid #edf2f7;

    padding:28px;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 10px 25px rgba(15,23,42,.05);

}

.result-card:hover{

    transform:translateY(-10px);

    border-color:#b8ead0;

    box-shadow:
        0 25px 60px rgba(25,135,84,.18);

}

/* top gradient */

.result-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#198754,#20c997);

}

/*=========================================================
    Status Badge
=========================================================*/

.result-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#e9f8ef;

    color:#198754;

    border-radius:50px;

    padding:8px 18px;

    font-size:13px;

    font-weight:700;

    margin-bottom:22px;

}

.result-status i{

    font-size:16px;

}

/*=========================================================
    Header
=========================================================*/

.result-header{

    display:flex;

    gap:16px;

    align-items:flex-start;

    margin-bottom:24px;

}

.result-icon{

    width:68px;

    height:68px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(135deg,#198754,#20c997);

    color:#fff;

    font-size:28px;

    box-shadow:
        0 10px 25px rgba(25,135,84,.25);

}

.result-header small{

    display:block;

    color:#6c757d;

    font-weight:600;

    margin-bottom:6px;

}

.result-header h5{

    font-size:20px;

    font-weight:700;

    line-height:1.45;

    margin:0;

    color:#212529;

}

/*=========================================================
    Information Box
=========================================================*/

.result-info{

    margin-top:15px;

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;

    padding:18px 0;

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

}

.info-row:last-child{

    margin-bottom:0;

}

.info-row span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#6c757d;

    font-size:14px;

}

.info-row i{

    color:#198754;

}

.info-row strong{

    color:#212529;

    font-size:14px;

    font-weight:700;

    text-align:right;

    max-width:150px;

}

/*=========================================================
    Footer
=========================================================*/

.result-footer{

    margin-top:25px;

}

.result-footer .btn{

    border:none;

    border-radius:14px;

    padding:14px;

    font-weight:700;

    background:linear-gradient(135deg,#198754,#20c997);

    transition:.35s;

    box-shadow:
        0 12px 30px rgba(25,135,84,.22);

}

.result-footer .btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(25,135,84,.32);

}

/*=========================================================
    View All Button
=========================================================*/

.latest-results .btn-outline-success{

    border-width:2px;

    border-radius:50px;

    padding:14px 34px;

    font-weight:700;

    transition:.3s;

}

.latest-results .btn-outline-success:hover{

    transform:translateY(-3px);

}

/*=========================================================
    Hover Effects
=========================================================*/

.result-card:hover .result-icon{

    transform:rotate(-8deg) scale(1.08);

}

.result-icon{

    transition:.35s;

}

.result-card:hover .result-status{

    background:#198754;

    color:#fff;

}

/*=========================================================
    Responsive
=========================================================*/

@media(max-width:1199px){

.results-section-heading h2{

font-size:38px;

}

}

@media(max-width:991px){

.result-card{

padding:24px;

}

}

@media(max-width:767px){

.latest-results{

padding:70px 0;

}

.results-section-heading h2{

font-size:30px;

}

.result-header{

align-items:center;

}

.result-icon{

width:58px;

height:58px;

font-size:24px;

}

.result-header h5{

font-size:18px;

}

.info-row{

flex-direction:column;

align-items:flex-start;

gap:6px;

}

.info-row strong{

text-align:left;

max-width:100%;

}

}

/*=========================================================
    LATEST ADMIT CARDS
=========================================================*/

.latest-admit-cards{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at right top,#eef5ff 0,#ffffff 45%),
        linear-gradient(180deg,#ffffff,#f7fbff);
}

.latest-admit-cards::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(13,110,253,.05);
    top:-180px;
    right:-150px;
    filter:blur(35px);
}

.latest-admit-cards::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(59,130,246,.04);
    bottom:-120px;
    left:-120px;
    filter:blur(35px);
}

/*=========================================================
Heading
=========================================================*/

.admit-section-heading{

    max-width:760px;
    margin:auto;

}

.admit-section-heading .section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    background:#eef5ff;
    color:#0d6efd;

    padding:10px 22px;

    border-radius:50px;

    font-weight:700;

    font-size:14px;

    margin-bottom:20px;

}

.admit-section-heading h2{

    font-size:44px;

    font-weight:800;

    color:#212529;

    margin-bottom:16px;

}

.admit-section-heading h2 span{

    color:#0d6efd;

}

.admit-section-heading p{

    font-size:17px;

    color:#6c757d;

    line-height:1.8;

}

/*=========================================================
Card
=========================================================*/

.admit-card-item{

    position:relative;

    background:#fff;

    border-radius:24px;

    border:1px solid #edf2f7;

    padding:28px;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 10px 25px rgba(15,23,42,.06);

}

.admit-card-item:hover{

    transform:translateY(-10px);

    border-color:#d6e7ff;

    box-shadow:
        0 25px 60px rgba(13,110,253,.16);

}

.admit-card-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#0d6efd,#3b82f6);

}

/*=========================================================
Status
=========================================================*/

.admit-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#eef5ff;

    color:#0d6efd;

    border-radius:50px;

    padding:8px 18px;

    font-size:13px;

    font-weight:700;

    margin-bottom:24px;

    transition:.3s;

}

.admit-card-item:hover .admit-status{

    background:#0d6efd;

    color:#fff;

}

/*=========================================================
Header
=========================================================*/

.admit-header{

    display:flex;

    gap:16px;

    align-items:flex-start;

    margin-bottom:24px;

}

.admit-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0d6efd,#4f9cff);

    color:#fff;

    font-size:30px;

    flex-shrink:0;

    transition:.35s;

    box-shadow:
        0 12px 30px rgba(13,110,253,.25);

}

.admit-card-item:hover .admit-icon{

    transform:rotate(-8deg) scale(1.08);

}

.admit-header small{

    display:block;

    color:#6c757d;

    font-weight:600;

    margin-bottom:6px;

}

.admit-header h5{

    margin:0;

    font-size:20px;

    line-height:1.45;

    font-weight:700;

    color:#212529;

}

/*=========================================================
Information
=========================================================*/

.admit-info{

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;

    padding:20px 0;

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

}

.info-row:last-child{

    margin-bottom:0;

}

.info-row span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#6c757d;

    font-size:14px;

}

.info-row span i{

    color:#0d6efd;

}

.info-row strong{

    font-size:14px;

    color:#212529;

    font-weight:700;

    text-align:right;

    max-width:150px;

}

/*=========================================================
Button
=========================================================*/

.admit-footer{

    margin-top:24px;

}

.admit-footer .btn{

    border:none;

    border-radius:14px;

    padding:14px;

    font-weight:700;

    background:linear-gradient(135deg,#0d6efd,#3b82f6);

    transition:.35s;

    box-shadow:
        0 12px 30px rgba(13,110,253,.22);

}

.admit-footer .btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 45px rgba(13,110,253,.32);

}

/*=========================================================
View All
=========================================================*/

.latest-admit-cards .btn-outline-primary{

    border-width:2px;

    border-radius:50px;

    padding:14px 36px;

    font-weight:700;

    transition:.35s;

}

.latest-admit-cards .btn-outline-primary:hover{

    transform:translateY(-3px);

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:1199px){

.admit-section-heading h2{

font-size:38px;

}

}

@media(max-width:991px){

.admit-card-item{

padding:24px;

}

}

@media(max-width:767px){

.latest-admit-cards{

padding:70px 0;

}

.admit-section-heading h2{

font-size:30px;

}

.admit-header{

align-items:center;

}

.admit-icon{

width:60px;

height:60px;

font-size:25px;

}

.admit-header h5{

font-size:18px;

}

.info-row{

flex-direction:column;

align-items:flex-start;

gap:6px;

}

.info-row strong{

text-align:left;

max-width:100%;

}

}

/*=========================================================
    LATEST ANSWER KEYS
=========================================================*/

.latest-answer-keys{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at left top,#fff7ec 0,#ffffff 45%),
        linear-gradient(180deg,#ffffff,#fffdf9);
}

.latest-answer-keys::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
    top:-180px;
    left:-140px;
    filter:blur(40px);
}

.latest-answer-keys::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(255,152,0,.06);
    bottom:-120px;
    right:-120px;
    filter:blur(35px);
}

/*=========================================================
Heading
=========================================================*/

.answer-section-heading{

    max-width:760px;
    margin:auto;

}

.answer-section-heading .section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    background:#fff3cd;
    color:#d97706;

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.answer-section-heading h2{

    font-size:44px;

    font-weight:800;

    color:#212529;

    margin-bottom:16px;

}

.answer-section-heading h2 span{

    color:#f59e0b;

}

.answer-section-heading p{

    font-size:17px;

    color:#6c757d;

    line-height:1.8;

}

/*=========================================================
Card
=========================================================*/

.answer-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    border:1px solid #f3f4f6;

    padding:28px;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 10px 25px rgba(15,23,42,.05);

}

.answer-card:hover{

    transform:translateY(-10px);

    border-color:#ffd68a;

    box-shadow:
        0 25px 60px rgba(245,158,11,.18);

}

.answer-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#f59e0b,#f97316);

}

/*=========================================================
Status Badge
=========================================================*/

.answer-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#fff3cd;

    color:#d97706;

    border-radius:50px;

    padding:8px 18px;

    font-size:13px;

    font-weight:700;

    margin-bottom:24px;

    transition:.3s;

}

.answer-card:hover .answer-status{

    background:#f59e0b;

    color:#fff;

}

/*=========================================================
Header
=========================================================*/

.answer-header{

    display:flex;

    gap:16px;

    align-items:flex-start;

    margin-bottom:24px;

}

.answer-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    flex-shrink:0;

    color:#fff;

    font-size:30px;

    background:linear-gradient(135deg,#f59e0b,#f97316);

    transition:.35s;

    box-shadow:
        0 12px 30px rgba(245,158,11,.25);

}

.answer-card:hover .answer-icon{

    transform:rotate(-8deg) scale(1.08);

}

.answer-header small{

    display:block;

    color:#6c757d;

    font-weight:600;

    margin-bottom:6px;

}

.answer-header h5{

    margin:0;

    font-size:20px;

    line-height:1.45;

    font-weight:700;

    color:#212529;

}

/*=========================================================
Information
=========================================================*/

.answer-info{

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;

    padding:20px 0;

}

.answer-info .info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

}

.answer-info .info-row:last-child{

    margin-bottom:0;

}

.answer-info span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#6c757d;

    font-size:14px;

}

.answer-info span i{

    color:#f59e0b;

}

.answer-info strong{

    color:#212529;

    font-size:14px;

    font-weight:700;

    text-align:right;

}

/*=========================================================
Button
=========================================================*/

.answer-footer{

    margin-top:24px;

}

.answer-footer .btn{

    border:none;

    border-radius:14px;

    padding:14px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#f59e0b,#f97316);

    transition:.35s;

    box-shadow:
        0 12px 30px rgba(245,158,11,.25);

}

.answer-footer .btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 45px rgba(245,158,11,.35);

}

/*=========================================================
View All
=========================================================*/

.latest-answer-keys .btn-outline-warning{

    border-width:2px;

    border-radius:50px;

    padding:14px 36px;

    font-weight:700;

    transition:.35s;

}

.latest-answer-keys .btn-outline-warning:hover{

    transform:translateY(-3px);

}

/*=========================================================
Objection Status
=========================================================*/

.answer-info strong{

    display:inline-flex;

    align-items:center;

    gap:6px;

}

.answer-info strong::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22c55e;

}

.answer-card .info-row:nth-child(2) strong{

    color:#198754;

}

/*=========================================================
Hover Animation
=========================================================*/

.answer-card:hover h5{

    color:#f59e0b;

}

.answer-card:hover{

    background:linear-gradient(180deg,#ffffff,#fffdf8);

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:1199px){

.answer-section-heading h2{

font-size:38px;

}

}

@media(max-width:991px){

.answer-card{

padding:24px;

}

}

@media(max-width:767px){

.latest-answer-keys{

padding:70px 0;

}

.answer-section-heading h2{

font-size:30px;

}

.answer-header{

align-items:center;

}

.answer-icon{

width:60px;

height:60px;

font-size:24px;

}

.answer-header h5{

font-size:18px;

}

.answer-info .info-row{

flex-direction:column;

align-items:flex-start;

gap:6px;

}

.answer-info strong{

text-align:left;

}

}

/*=========================================================
    EXAM CALENDAR
=========================================================*/

.exam-calendar-section{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at right top,#f3f0ff 0,#ffffff 42%),
        linear-gradient(180deg,#ffffff,#faf9ff);
}

.exam-calendar-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(111,66,193,.06);
    top:-180px;
    right:-160px;
    filter:blur(40px);
}

.exam-calendar-section::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(102,16,242,.05);
    left:-120px;
    bottom:-140px;
    filter:blur(40px);
}

/*=========================================================
Heading
=========================================================*/

.calendar-section-heading{

    max-width:760px;
    margin:auto;

}

.calendar-section-heading .section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    background:#efe8ff;
    color:#6f42c1;

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.calendar-section-heading h2{

    font-size:44px;

    font-weight:800;

    color:#212529;

    margin-bottom:16px;

}

.calendar-section-heading h2 span{

    color:#6f42c1;

}

.calendar-section-heading p{

    font-size:17px;

    color:#6c757d;

    line-height:1.8;

}

/*=========================================================
Calendar Card
=========================================================*/

.calendar-card{

    position:relative;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(18px);

    border:1px solid rgba(111,66,193,.10);

    border-radius:24px;

    overflow:hidden;

    display:flex;

    transition:.35s;

    box-shadow:
        0 15px 40px rgba(15,23,42,.06);

}

.calendar-card:hover{

    transform:translateY(-10px);

    border-color:rgba(111,66,193,.35);

    box-shadow:
        0 25px 60px rgba(111,66,193,.20);

}

.calendar-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#6f42c1,#6610f2);

}

/*=========================================================
Date Box
=========================================================*/

.calendar-date-box{

    min-width:95px;

    background:linear-gradient(180deg,#6f42c1,#6610f2);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.calendar-card:hover .calendar-date-box{

    transform:scale(1.04);

}

.calendar-date-box span{

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.9;

}

.calendar-date-box strong{

    font-size:34px;

    font-weight:800;

    line-height:1;

    margin-top:8px;

}

/*=========================================================
Body
=========================================================*/

.calendar-body{

    flex:1;

    padding:24px;

}

/*=========================================================
Event Type Badge
=========================================================*/

.calendar-type{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    margin-bottom:16px;

    background:#efe8ff;

    color:#6f42c1;

}

/*=========================================================
Dynamic Event Colors
=========================================================*/

.calendar-type.exam{

    background:#d1fae5;

    color:#047857;

}

.calendar-type.admit_card{

    background:#dbeafe;

    color:#2563eb;

}

.calendar-type.answer_key{

    background:#fff7d6;

    color:#d97706;

}

.calendar-type.result{

    background:#dcfce7;

    color:#15803d;

}

.calendar-type.application_last_date{

    background:#fee2e2;

    color:#dc2626;

}

/*=========================================================
Title
=========================================================*/

.calendar-body h5{

    font-size:20px;

    font-weight:700;

    color:#212529;

    margin-bottom:8px;

    line-height:1.5;

    transition:.3s;

}

.calendar-card:hover h5{

    color:#6f42c1;

}

.calendar-body small{

    display:block;

    color:#6c757d;

    font-weight:600;

    margin-bottom:18px;

}

/*=========================================================
Meta
=========================================================*/

.calendar-meta{

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;

    padding:18px 0;

    margin-bottom:20px;

}

.calendar-meta div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

    margin-bottom:12px;

    color:#495057;

}

.calendar-meta div:last-child{

    margin-bottom:0;

}

.calendar-meta i{

    color:#6f42c1;

    margin-right:8px;

}

/*=========================================================
Days Left Badge
=========================================================*/

.days-left{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 16px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

}

.days-left.safe{

    background:#d1fae5;

    color:#047857;

}

.days-left.medium{

    background:#fff3cd;

    color:#d97706;

}

.days-left.urgent{

    background:#fee2e2;

    color:#dc2626;

}

/*=========================================================
Button
=========================================================*/

.calendar-body .btn{

    border:none;

    border-radius:14px;

    padding:14px;

    font-weight:700;

    background:linear-gradient(135deg,#6f42c1,#6610f2);

    box-shadow:
        0 12px 30px rgba(111,66,193,.25);

    transition:.35s;

}

.calendar-body .btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 45px rgba(111,66,193,.35);

}

/*=========================================================
View All Button
=========================================================*/

.exam-calendar-section .btn-outline-primary{

    border-width:2px;

    border-radius:50px;

    padding:14px 38px;

    font-weight:700;

    transition:.35s;

}

.exam-calendar-section .btn-outline-primary:hover{

    transform:translateY(-3px);

}

/*=========================================================
Hover Effects
=========================================================*/

.calendar-card:hover{

    background:linear-gradient(180deg,#ffffff,#fcfbff);

}

.calendar-card:hover .calendar-type{

    transform:translateX(3px);

}

.calendar-card:hover .btn{

    letter-spacing:.3px;

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:991px){

.calendar-card{

flex-direction:column;

}

.calendar-date-box{

width:100%;

min-height:90px;

flex-direction:row;

gap:14px;

}

.calendar-date-box strong{

margin-top:0;

}

}

@media(max-width:767px){

.exam-calendar-section{

padding:70px 0;

}

.calendar-section-heading h2{

font-size:30px;

}

.calendar-body{

padding:22px;

}

.calendar-body h5{

font-size:18px;

}

.calendar-meta div{

flex-direction:column;

align-items:flex-start;

gap:6px;

}

}

/*=========================================================
    CURRENT AFFAIRS
=========================================================*/

.current-affairs-section{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at left top,#f7f2ff 0,#ffffff 45%),
        linear-gradient(180deg,#ffffff,#fcfbff);
}

.current-affairs-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(111,66,193,.06);
    top:-180px;
    left:-150px;
    filter:blur(40px);
}

.current-affairs-section::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(139,92,246,.06);
    right:-120px;
    bottom:-120px;
    filter:blur(35px);
}

/*=========================================================
Heading
=========================================================*/

.current-affairs-heading{

    max-width:760px;
    margin:auto;

}

.current-affairs-heading .section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    background:#f3e8ff;

    color:#7c3aed;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.current-affairs-heading h2{

    font-size:44px;

    font-weight:800;

    color:#212529;

    margin-bottom:15px;

}

.current-affairs-heading h2 span{

    color:#7c3aed;

}

.current-affairs-heading p{

    color:#6c757d;

    font-size:17px;

    line-height:1.8;

}

/*=========================================================
Card
=========================================================*/

.current-affair-card{

    position:relative;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(124,58,237,.10);

    transition:.35s;

    box-shadow:
        0 15px 40px rgba(15,23,42,.06);

}

.current-affair-card:hover{

    transform:translateY(-10px);

    border-color:rgba(124,58,237,.25);

    box-shadow:
        0 25px 65px rgba(124,58,237,.18);

}

/*=========================================================
Image
=========================================================*/

.current-affair-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/9;

    background:#eef2ff;

}

.current-affair-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.current-affair-card:hover img{

    transform:scale(1.08);

}

.image-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#7c3aed,#8b5cf6);

    color:#fff;

    font-size:70px;

}

/*=========================================================
Date Badge
=========================================================*/

.date-badge{

    position:absolute;

    top:18px;

    left:18px;

    width:72px;

    height:72px;

    border-radius:20px;

    background:linear-gradient(135deg,#7c3aed,#8b5cf6);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:
        0 12px 30px rgba(124,58,237,.30);

}

.date-badge strong{

    font-size:24px;

    font-weight:800;

    line-height:1;

}

.date-badge span{

    margin-top:4px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

/*=========================================================
Content
=========================================================*/

.current-affair-content{

    padding:28px;

}

.category-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:50px;

    background:#f3e8ff;

    color:#7c3aed;

    font-size:12px;

    font-weight:700;

    margin-bottom:16px;

    transition:.3s;

}

.current-affair-card:hover .category-badge{

    transform:translateX(4px);

    background:#7c3aed;

    color:#fff;

}

.current-affair-content h5{

    font-size:21px;

    font-weight:700;

    line-height:1.5;

    color:#212529;

    min-height:64px;

    transition:.3s;

}

.current-affair-card:hover h5{

    color:#7c3aed;

}

/*=========================================================
Meta
=========================================================*/

.current-affair-meta{

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;

    padding:18px 0;

    margin:20px 0;

}

.current-affair-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#6c757d;

    font-size:14px;

}

.current-affair-meta i{

    color:#7c3aed;

}

/*=========================================================
Button
=========================================================*/

.current-affair-content .btn{

    border:none;

    border-radius:14px;

    padding:14px;

    font-weight:700;

    background:linear-gradient(135deg,#7c3aed,#8b5cf6);

    transition:.35s;

    box-shadow:
        0 12px 30px rgba(124,58,237,.25);

}

.current-affair-content .btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 45px rgba(124,58,237,.35);

}

/*=========================================================
View All
=========================================================*/

.current-affairs-section .btn-outline-primary{

    border-width:2px;

    border-radius:50px;

    padding:14px 38px;

    font-weight:700;

    transition:.35s;

}

.current-affairs-section .btn-outline-primary:hover{

    transform:translateY(-3px);

}

/*=========================================================
Hover Effects
=========================================================*/

.current-affair-card:hover{

    background:linear-gradient(180deg,#ffffff,#fcfaff);

}

.current-affair-card:hover .date-badge{

    transform:scale(1.08);

}

.date-badge{

    transition:.35s;

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:1199px){

.current-affairs-heading h2{

font-size:38px;

}

}

@media(max-width:991px){

.current-affair-content{

padding:24px;

}

.current-affair-content h5{

min-height:auto;

}

}

@media(max-width:767px){

.current-affairs-section{

padding:70px 0;

}

.current-affairs-heading h2{

font-size:30px;

}

.current-affair-content{

padding:22px;

}

.current-affair-content h5{

font-size:18px;

}

.date-badge{

width:62px;

height:62px;

}

.date-badge strong{

font-size:20px;

}

.image-placeholder{

font-size:55px;

}

}

/*==================================================
STUDY NOTES
==================================================*/

.study-notes-section{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
    radial-gradient(circle at right top,#e8fffb 0,#ffffff 45%),
    linear-gradient(180deg,#ffffff,#fbffff);
}

.study-notes-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(13,202,240,.08);
    top:-170px;
    right:-170px;
    filter:blur(45px);
}

.study-notes-section::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(32,201,151,.08);
    left:-140px;
    bottom:-140px;
    filter:blur(40px);
}

/*==================================================
Heading
==================================================*/

.study-notes-heading{

    max-width:760px;
    margin:auto;

}

.study-notes-heading .section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    background:#d1f8ef;

    color:#0f766e;

    font-weight:700;

    margin-bottom:18px;

}

.study-notes-heading h2{

    font-size:44px;
    font-weight:800;
    color:#212529;
    margin-bottom:18px;

}

.study-notes-heading h2 span{

    color:#14b8a6;

}

.study-notes-heading p{

    font-size:17px;
    color:#6c757d;
    line-height:1.8;

}

/*==================================================
Card
==================================================*/

.study-note-card{

    position:relative;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(18px);

    border-radius:24px;

    border:1px solid rgba(20,184,166,.12);

    overflow:hidden;

    transition:.35s;

    box-shadow:0 18px 40px rgba(15,23,42,.06);

}

.study-note-card:hover{

    transform:translateY(-10px);

    border-color:#14b8a6;

    box-shadow:0 25px 60px rgba(20,184,166,.22);

}

.study-note-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#14b8a6,#06b6d4);

}

/*==================================================
Icon
==================================================*/

.study-icon{

    width:88px;

    height:88px;

    margin:35px auto 20px;

    border-radius:50%;

    background:linear-gradient(135deg,#14b8a6,#06b6d4);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    transition:.45s;

    box-shadow:0 15px 35px rgba(20,184,166,.30);

}

.study-note-card:hover .study-icon{

    transform:rotate(12deg) scale(1.08);

}

/*==================================================
FREE Badge
==================================================*/

.free-badge{

    position:absolute;

    top:20px;

    right:20px;

    background:#22c55e;

    color:#fff;

    padding:7px 14px;

    border-radius:50px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

}

/*==================================================
Content
==================================================*/

.study-content{

    padding:0 28px 30px;

    text-align:center;

}

.study-content h4{

    font-size:22px;

    font-weight:700;

    color:#212529;

    margin-bottom:16px;

    transition:.3s;

}

.study-note-card:hover h4{

    color:#14b8a6;

}

.study-content p{

    color:#6c757d;

    line-height:1.8;

    min-height:82px;

}

/*==================================================
Meta
==================================================*/

.study-meta{

    margin:24px 0;

    padding:18px 0;

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;

}

.study-meta span{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    color:#6c757d;

}

.study-meta i{

    color:#14b8a6;

}

/*==================================================
Buttons
==================================================*/

.btn-study{

    background:linear-gradient(135deg,#14b8a6,#06b6d4);

    color:#fff;

    border:none;

    border-radius:14px;

    padding:14px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 12px 30px rgba(20,184,166,.25);

}

.btn-study:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(20,184,166,.35);

}

.btn-outline-study{

    border:2px solid #14b8a6;

    color:#14b8a6;

    padding:14px 38px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.btn-outline-study:hover{

    background:#14b8a6;

    color:#fff;

    transform:translateY(-3px);

}

/*==================================================
Responsive
==================================================*/

@media(max-width:991px){

.study-notes-heading h2{

font-size:36px;

}

}

@media(max-width:767px){

.study-notes-section{

padding:70px 0;

}

.study-notes-heading h2{

font-size:30px;

}

.study-content{

padding:0 22px 24px;

}

.study-content h4{

font-size:20px;

}

.study-content p{

min-height:auto;

}

.study-icon{

width:74px;
height:74px;
font-size:32px;

}

}

/*=========================================================
    WHY CHOOSE GOVTNAUKRIUPDATE
=========================================================*/

.why-choose-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:
        radial-gradient(circle at left top,#eef8ff 0,#ffffff 42%),
        radial-gradient(circle at right bottom,#ecfff8 0,#ffffff 40%),
        linear-gradient(180deg,#ffffff,#f8fcff);
}

.why-choose-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    left:-170px;
    border-radius:50%;
    background:rgba(13,110,253,.08);
    filter:blur(45px);
}

.why-choose-section::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    right:-140px;
    bottom:-140px;
    border-radius:50%;
    background:rgba(25,135,84,.08);
    filter:blur(45px);
}

/*=========================================================
Section Heading
=========================================================*/

.why-choose-section .section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    background:#e7f1ff;

    color:#0d6efd;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.why-choose-section h2{

    font-size:46px;

    font-weight:800;

    line-height:1.25;

    color:#1f2937;

    margin-bottom:20px;

}

.why-choose-section h2 span{

    color:#0d6efd;

}

.section-description{

    font-size:17px;

    color:#6b7280;

    line-height:1.9;

    margin-bottom:12px;

}

/*=========================================================
Feature Cards
=========================================================*/

.feature-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px;

    height:100%;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border-radius:22px;

    border:1px solid rgba(13,110,253,.08);

    transition:.35s;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(15,23,42,.06);

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,rgba(13,110,253,.05),rgba(25,135,84,.05));

    opacity:0;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:rgba(13,110,253,.25);

    box-shadow:0 25px 60px rgba(13,110,253,.15);

}

.feature-card:hover::before{

    opacity:1;

}

.feature-icon{

    flex-shrink:0;

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:#fff;

    background:linear-gradient(135deg,#0d6efd,#198754);

    box-shadow:0 15px 35px rgba(13,110,253,.28);

    transition:.4s;

}

.feature-card:hover .feature-icon{

    transform:rotate(10deg) scale(1.08);

}

.feature-card h5{

    font-size:18px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:8px;

}

.feature-card p{

    color:#6b7280;

    margin:0;

    line-height:1.7;

    font-size:14px;

}

/*=========================================================
Dashboard
=========================================================*/

.why-dashboard{

    position:relative;

    padding:34px;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(18px);

    border-radius:28px;

    border:1px solid rgba(13,110,253,.08);

    box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.why-dashboard::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:linear-gradient(135deg,#0d6efd,#198754);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

/*=========================================================
Stats Grid
=========================================================*/

.stats-grid{

    display:grid;

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

    gap:20px;

}

.stat-card{

    position:relative;

    text-align:center;

    padding:28px 18px;

    border-radius:22px;

    background:linear-gradient(180deg,#ffffff,#f9fcff);

    transition:.35s;

    border:1px solid rgba(13,110,253,.08);

    overflow:hidden;

}

.stat-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#0d6efd,#198754);

}

.stat-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(13,110,253,.15);

}

.stat-card h3{

    font-size:38px;

    font-weight:800;

    margin-bottom:10px;

    color:#0d6efd;

}

.stat-card span{

    display:block;

    font-size:15px;

    font-weight:600;

    color:#6b7280;

}

/*=========================================================
Trust Box
=========================================================*/

.trust-box{

    display:grid;

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

    gap:14px;

}

.trust-box div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 18px;

    border-radius:14px;

    background:#f8fbff;

    border:1px solid rgba(13,110,253,.08);

    font-weight:600;

    color:#374151;

    transition:.3s;

}

.trust-box div:hover{

    background:#eef6ff;

    transform:translateX(5px);

}

.trust-box i{

    color:#198754;

    font-size:18px;

}

/*=========================================================
Buttons
=========================================================*/

.why-choose-section .btn-primary{

    position:relative;

    overflow:hidden;

    border:none;

    padding:15px 34px;

    border-radius:14px;

    font-weight:700;

    background:linear-gradient(135deg,#0d6efd,#198754);

    box-shadow:0 15px 35px rgba(13,110,253,.25);

    transition:.35s;

}

.why-choose-section .btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-25deg);

    transition:.7s;

}

.why-choose-section .btn-primary:hover::before{

    left:140%;

}

.why-choose-section .btn-primary:hover{

    transform:translateY(-3px);

}

.why-choose-section .btn-outline-primary{

    padding:15px 34px;

    border-radius:14px;

    border-width:2px;

    font-weight:700;

    transition:.35s;

}

.why-choose-section .btn-outline-primary:hover{

    transform:translateY(-3px);

}

/*=========================================================
Floating Animation
=========================================================*/

.why-dashboard{

    animation:dashboardFloat 6s ease-in-out infinite;

}

@keyframes dashboardFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:1199px){

.why-choose-section h2{

font-size:40px;

}

}

@media(max-width:991px){

.why-dashboard{

margin-top:25px;

}

.stats-grid{

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

}

}

@media(max-width:767px){

.why-choose-section{

padding:70px 0;

}

.why-choose-section h2{

font-size:30px;

}

.feature-card{

padding:20px;

}

.feature-icon{

width:56px;

height:56px;

font-size:24px;

}

.stats-grid{

grid-template-columns:1fr;

}

.trust-box{

grid-template-columns:1fr;

}

.why-dashboard{

padding:24px;

}

.why-choose-section .btn{

width:100%;

margin-bottom:12px;

}

}

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

.faq-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:
        radial-gradient(circle at left top,#eef5ff 0,#ffffff 42%),
        radial-gradient(circle at right bottom,#f5fbff 0,#ffffff 38%),
        linear-gradient(180deg,#ffffff,#f8fbff);
}

.faq-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    left:-170px;
    border-radius:50%;
    background:rgba(13,110,253,.08);
    filter:blur(50px);
}

.faq-section::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-140px;
    bottom:-140px;
    border-radius:50%;
    background:rgba(13,202,240,.08);
    filter:blur(45px);
}

/*=========================================================
Heading
=========================================================*/

.faq-heading{

    max-width:760px;

    margin:auto;

}

.faq-heading .section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#e8f1ff;

    color:#0d6efd;

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.faq-heading h2{

    font-size:44px;

    font-weight:800;

    color:#1f2937;

    margin-bottom:18px;

}

.faq-heading h2 span{

    color:#0d6efd;

}

.faq-heading p{

    font-size:17px;

    line-height:1.8;

    color:#6b7280;

}

/*=========================================================
Accordion
=========================================================*/

.faq-accordion{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.faq-accordion .accordion-item{

    border:none;

    border-radius:22px;

    overflow:hidden;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border:1px solid rgba(13,110,253,.08);

    box-shadow:0 18px 40px rgba(15,23,42,.06);

    transition:.35s;

}

.faq-accordion .accordion-item:hover{

    transform:translateY(-4px);

    border-color:rgba(13,110,253,.20);

    box-shadow:0 24px 55px rgba(13,110,253,.14);

}

/*=========================================================
Button
=========================================================*/

.faq-accordion .accordion-button{

    position:relative;

    background:transparent;

    box-shadow:none;

    padding:26px 70px 26px 30px;

    font-size:18px;

    font-weight:700;

    color:#1f2937;

}

.faq-accordion .accordion-button:hover{

    color:#0d6efd;

}

.faq-accordion .accordion-button:not(.collapsed){

    background:#ffffff;

    color:#0d6efd;

    box-shadow:none;

}

/*=========================================================
Custom Icon
=========================================================*/

.faq-accordion .accordion-button::after{

    display:none;

}

.faq-accordion .accordion-button::before{

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    font-weight:700;

    color:#0d6efd;

    background:#eef5ff;

    transition:.35s;

}

.faq-accordion .accordion-button:not(.collapsed)::before{

    content:"−";

    background:linear-gradient(135deg,#0d6efd,#06b6d4);

    color:#fff;

    transform:translateY(-50%) rotate(180deg);

}

/*=========================================================
Body
=========================================================*/

.faq-accordion .accordion-body{

    padding:0 30px 30px;

    font-size:16px;

    color:#6b7280;

    line-height:1.9;

}

/*=========================================================
Collapse Animation
=========================================================*/

.faq-accordion .accordion-collapse{

    transition:all .35s ease;

}

/*=========================================================
Active Item Glow
=========================================================*/

.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){

    border-color:#0d6efd;

    box-shadow:0 25px 60px rgba(13,110,253,.18);

}

/*=========================================================
Hover Glow
=========================================================*/

.faq-accordion .accordion-item::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(13,110,253,.04),
        rgba(6,182,212,.04)
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.faq-accordion .accordion-item:hover::before{

    opacity:1;

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:1199px){

.faq-heading h2{

font-size:38px;

}

}

@media(max-width:991px){

.faq-accordion .accordion-button{

font-size:17px;

padding:24px 65px 24px 24px;

}

}

@media(max-width:767px){

.faq-section{

padding:70px 0;

}

.faq-heading h2{

font-size:30px;

}

.faq-heading p{

font-size:15px;

}

.faq-accordion .accordion-button{

font-size:16px;

padding:22px 60px 22px 20px;

}

.faq-accordion .accordion-button::before{

width:36px;

height:36px;

font-size:22px;

right:18px;

}

.faq-accordion .accordion-body{

padding:0 20px 24px;

font-size:15px;

}

}


/* ============================================================
   PREMIUM FEATURED JOBS (pfj)
   Modern, Backend-Connected, Mobile Responsive
============================================================ */
.pfj-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(37,99,235,.04) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(245,158,11,.05) 0%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
}

.pfj-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(rgba(37,99,235,.06), transparent 70%);
    top: -200px;
    right: -150px;
    pointer-events: none;
}

.pfj-section::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(rgba(245,158,11,.05), transparent 70%);
    bottom: -180px;
    left: -120px;
    pointer-events: none;
}

/* HEADER */
.pfj-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.pfj-header-left {
    flex: 1;
    min-width: 0;
}

.pfj-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-radius: 100px;
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(59,130,246,.04));
    border: 1px solid rgba(37,99,235,.12);
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}

.pfj-badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: pfjPulse 2s infinite;
    display: inline-block;
}

@keyframes pfjPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
    50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

.pfj-title {
    margin: 18px 0 10px;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    letter-spacing: -1.5px;
}

.pfj-subtitle {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

.pfj-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.pfj-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 22px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #edf2f7;
    box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

.pfj-counter-num {
    font-size: 26px;
    font-weight: 800;
    color: #2563eb;
    line-height: 1;
}

.pfj-counter-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pfj-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all .35s ease;
    box-shadow: 0 12px 30px rgba(37,99,235,.25);
}

.pfj-view-all:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(37,99,235,.35);
}

.pfj-view-all i {
    transition: transform .3s;
}

.pfj-view-all:hover i {
    transform: translateX(4px);
}

/* FILTER TABS */
.pfj-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}

.pfj-tabs::-webkit-scrollbar {
    height: 4px;
}

.pfj-tabs::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.pfj-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.pfj-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.pfj-tab i {
    font-size: 16px;
}

.pfj-tab:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #f8fbff;
}

.pfj-tab.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(37,99,235,.2);
}

/* JOBS GRID */
.pfj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 2;
}

.pfj-card-wrapper {
    position: relative;
}

/* CARD */
.pfj-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    border: 1px solid #edf2f7;
    box-shadow: 0 15px 45px rgba(15,23,42,.05);
    transition: all .4s cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pfj-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37,99,235,.02), transparent 50%);
    opacity: 0;
    transition: opacity .4s;
}

.pfj-card:hover {
    transform: translateY(-12px);
    border-color: #bfdbfe;
    box-shadow: 0 30px 80px rgba(37,99,235,.15);
}

.pfj-card:hover::before {
    opacity: 1;
}

/* Top accent bar */
.pfj-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #3b82f6, #06b6d4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

.pfj-card:hover .pfj-card-accent {
    transform: scaleX(1);
}

.pfj-card.closing-soon .pfj-card-accent {
    background: linear-gradient(90deg, #ef4444, #f97316, #f59e0b);
}

/* Ribbon */
.pfj-card-ribbon {
    position: absolute;
    top: 20px;
    right: -38px;
    width: 150px;
    text-align: center;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 0;
    letter-spacing: .5px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(245,158,11,.3);
}

.pfj-card-ribbon i {
    margin-right: 4px;
    font-size: 10px;
}

/* Urgent Badge */
.pfj-urgent-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    z-index: 5;
    animation: pfjUrgentPulse 2s infinite;
}

@keyframes pfjUrgentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.2); }
    50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* CARD TOP */
.pfj-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.pfj-org-logo {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef4ff, #f8fbff);
    color: #2563eb;
    font-size: 26px;
    flex-shrink: 0;
    border: 1px solid #dbeafe;
    overflow: hidden;
    transition: transform .35s ease;
}

.pfj-card:hover .pfj-org-logo {
    transform: scale(1.05) rotate(-3deg);
}

.pfj-org-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pfj-org-info {
    min-width: 0;
    flex: 1;
}

.pfj-org-name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pfj-category-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    background: #eef4ff;
    padding: 4px 12px;
    border-radius: 50px;
}

/* JOB TITLE */
.pfj-job-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
    position: relative;
    z-index: 2;
}

.pfj-job-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color .3s;
}

.pfj-job-title a:hover {
    color: #2563eb;
}

/* DESCRIPTION */
.pfj-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 18px;
    position: relative;
    z-index: 2;
    flex-grow: 0;
}

/* TAGS */
.pfj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.pfj-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 50px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    transition: all .3s;
}

.pfj-card:hover .pfj-tag {
    background: #fff;
}

.pfj-tag i {
    font-size: 13px;
    color: #2563eb;
}

.pfj-tag-salary i {
    color: #16a34a;
}

.pfj-tag-salary {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.pfj-card:hover .pfj-tag-salary {
    background: #f0fdf4;
}

/* DIVIDER */
.pfj-card-divider {
    height: 1px;
    background: linear-gradient(90deg, #edf2f7, #dbeafe, #edf2f7);
    margin: auto 0 20px;
    position: relative;
    z-index: 2;
}

/* CARD FOOTER */
.pfj-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.pfj-deadline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.pfj-deadline i {
    color: #2563eb;
    font-size: 14px;
}

.pfj-expired {
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pfj-open-ended {
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pfj-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .35s ease;
    box-shadow: 0 8px 20px rgba(37,99,235,.2);
    white-space: nowrap;
}

.pfj-apply-btn:hover {
    color: #fff;
    transform: translateX(4px);
    box-shadow: 0 12px 30px rgba(37,99,235,.3);
}

.pfj-apply-btn i {
    transition: transform .3s;
    font-size: 14px;
}

.pfj-apply-btn:hover i {
    transform: translateX(3px);
}

/* BOTTOM CTA */
.pfj-bottom-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
    padding: 24px 32px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf2f7;
    box-shadow: 0 8px 25px rgba(15,23,42,.04);
    position: relative;
    z-index: 2;
}

.pfj-bottom-cta p {
    margin: 0;
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
}

.pfj-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all .35s ease;
    box-shadow: 0 12px 30px rgba(37,99,235,.25);
}

.pfj-cta-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(37,99,235,.35);
}

.pfj-cta-btn i {
    transition: transform .3s;
}

.pfj-cta-btn:hover i {
    transform: translateX(4px);
}

/* RESPONSIVE - Tablet Landscape */
@media (max-width: 1199px) {
    .pfj-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .pfj-title { font-size: 34px; }
}

/* RESPONSIVE - Tablet Portrait */
@media (max-width: 991px) {
    .pfj-section { padding: 70px 0; }
    .pfj-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .pfj-header-right { width: 100%; justify-content: space-between; }
    .pfj-title { font-size: 30px; }
    .pfj-grid { gap: 20px; }
    .pfj-bottom-cta { flex-direction: column; text-align: center; padding: 20px 24px; }
}

/* RESPONSIVE - Mobile */
@media (max-width: 767px) {
    .pfj-section { padding: 60px 0; }
    .pfj-title { font-size: 26px; letter-spacing: -1px; }
    .pfj-subtitle { font-size: 14px; }
    .pfj-badge { font-size: 12px; padding: 8px 18px; }
    .pfj-header-right { flex-direction: column; gap: 12px; align-items: stretch; }
    .pfj-counter { flex-direction: row; justify-content: center; gap: 10px; padding: 12px 18px; }
    .pfj-counter-num { font-size: 22px; }
    .pfj-view-all { justify-content: center; padding: 12px 24px; }
    .pfj-tabs { gap: 8px; margin-bottom: 28px; }
    .pfj-tab { padding: 10px 18px; font-size: 13px; }
    .pfj-grid { grid-template-columns: 1fr; gap: 20px; }
    .pfj-card { padding: 24px; border-radius: 20px; }
    .pfj-card-ribbon { top: 16px; right: -40px; width: 140px; font-size: 11px; padding: 6px 0; }
    .pfj-urgent-badge { top: 16px; left: 16px; font-size: 11px; padding: 5px 12px; }
    .pfj-org-logo { width: 52px; height: 52px; font-size: 22px; }
    .pfj-org-name { font-size: 14px; }
    .pfj-job-title { font-size: 18px; }
    .pfj-tag { font-size: 11px; padding: 6px 12px; }
    .pfj-card-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pfj-apply-btn { width: 100%; justify-content: center; padding: 12px 20px; }
    .pfj-bottom-cta { margin-top: 36px; padding: 18px 20px; }
    .pfj-bottom-cta p { font-size: 14px; }
    .pfj-cta-btn { width: 100%; justify-content: center; }
}

/* RESPONSIVE - Small Mobile */
@media (max-width: 480px) {
    .pfj-title { font-size: 22px; }
    .pfj-card { padding: 20px; }
    .pfj-card-ribbon { display: none; }
    .pfj-tabs { gap: 6px; }
    .pfj-tab { padding: 8px 14px; font-size: 12px; }
    .pfj-tab i { font-size: 14px; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .pfj-card,
    .pfj-card-accent,
    .pfj-card-ribbon,
    .pfj-org-logo,
    .pfj-view-all,
    .pfj-apply-btn,
    .pfj-cta-btn {
        transition: none !important;
        animation: none !important;
    }
    .pfj-card:hover { transform: none !important; }
    .pfj-card:hover .pfj-card-accent { transform: none !important; }
    .pfj-badge-pulse,
    .pfj-urgent-badge { animation: none !important; }
}


/* ============================================================
   PREMIUM LATEST NOTIFICATIONS (gnu-notif)
   Modern, Backend-Connected, Mobile Responsive
============================================================ */

/* SECTION CONTAINER */
.gnu-notif-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(37,99,235,.04) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 100%, rgba(245,158,11,.04) 0%, transparent 50%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 50%, #f8fbff 100%);
}

.gnu-notif-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(rgba(37,99,235,.05), transparent 70%);
    top: -200px;
    left: -150px;
    pointer-events: none;
}

/* HEADER */
.gnu-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
}

.gnu-notif-header-left {
    flex: 1;
    min-width: 0;
}

.gnu-notif-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-radius: 100px;
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(59,130,246,.04));
    border: 1px solid rgba(37,99,235,.12);
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
}

.gnu-notif-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: gnuPulse 2s infinite;
}

@keyframes gnuPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
    50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

.gnu-notif-title {
    margin: 16px 0 8px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    letter-spacing: -1.5px;
}

.gnu-notif-subtitle {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    max-width: 540px;
}

/* HEADER RIGHT - STATS ROW */
.gnu-notif-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.gnu-notif-stats-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #edf2f7;
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
}

.gnu-notif-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.gnu-notif-stat-num {
    font-size: 24px;
    font-weight: 800;
    color: #2563eb;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gnu-notif-stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.gnu-notif-stat-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cbd5e1;
}

.gnu-notif-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all .35s ease;
    box-shadow: 0 12px 30px rgba(37,99,235,.25);
    white-space: nowrap;
}

.gnu-notif-view-all:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(37,99,235,.35);
}

.gnu-notif-view-all i {
    transition: transform .3s;
}

.gnu-notif-view-all:hover i {
    transform: translateX(4px);
}

/* FILTER TABS */
.gnu-notif-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 36px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}

.gnu-notif-tabs::-webkit-scrollbar {
    height: 4px;
}

.gnu-notif-tabs::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.gnu-notif-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.gnu-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.gnu-tab i {
    font-size: 16px;
}

.gnu-tab:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #f8fbff;
}

.gnu-tab.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(37,99,235,.2);
}

.gnu-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 50px;
    background: rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.gnu-tab.active .gnu-tab-badge.today {
    background: #22c55e;
    color: #fff;
}

/* NOTIFICATION LIST */
.gnu-notif-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 2;
}

/* NOTIFICATION CARD */
.gnu-notif-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #edf2f7;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
    transition: all .4s cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
    position: relative;
}

.gnu-notif-card:hover {
    transform: translateY(-6px);
    border-color: #bfdbfe;
    box-shadow: 0 25px 60px rgba(37,99,235,.12);
}

/* Timeline Accent */
.gnu-notif-timeline {
    width: 6px;
    min-width: 6px;
    background: linear-gradient(180deg, #2563eb, #3b82f6, #06b6d4);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gnu-notif-card.closing-soon .gnu-notif-timeline {
    background: linear-gradient(180deg, #ef4444, #f97316, #f59e0b);
}

.gnu-notif-card.expired .gnu-notif-timeline {
    background: linear-gradient(180deg, #94a3b8, #cbd5e1);
}

.gnu-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #2563eb;
    position: absolute;
    top: 32px;
    z-index: 3;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.gnu-notif-card.closing-soon .gnu-timeline-dot {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

.gnu-notif-card.expired .gnu-timeline-dot {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148,163,184,.1);
}

.gnu-timeline-dot.pulse {
    animation: gnuDotPulse 2s infinite;
}

@keyframes gnuDotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37,99,235,.1), 0 0 0 0 rgba(37,99,235,.3); }
    50% { box-shadow: 0 0 0 3px rgba(37,99,235,.1), 0 0 0 8px rgba(37,99,235,0); }
}

/* CARD BODY */
.gnu-notif-card-body {
    flex: 1;
    padding: 28px 30px 20px 24px;
    min-width: 0;
}

/* Top Row */
.gnu-notif-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.gnu-notif-org {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.gnu-notif-org-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef4ff, #f8fbff);
    color: #2563eb;
    font-size: 22px;
    flex-shrink: 0;
    border: 1px solid #dbeafe;
    overflow: hidden;
    transition: transform .35s ease;
}

.gnu-notif-card:hover .gnu-notif-org-icon {
    transform: scale(1.05) rotate(-3deg);
}

.gnu-notif-org-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gnu-notif-org-info {
    min-width: 0;
}

.gnu-notif-org-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gnu-notif-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    background: #eef4ff;
    padding: 3px 10px;
    border-radius: 50px;
    margin-top: 4px;
}

/* Badges */
.gnu-notif-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.gnu-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.gnu-badge-new {
    background: #dcfce7;
    color: #16a34a;
}

.gnu-badge-closing {
    background: #fee2e2;
    color: #dc2626;
    animation: gnuBadgePulse 2s infinite;
}

@keyframes gnuBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.15); }
    50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

.gnu-badge-expired {
    background: #f1f5f9;
    color: #94a3b8;
}

/* Job Title */
.gnu-notif-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px;
}

.gnu-notif-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color .3s;
    background-image: linear-gradient(transparent calc(100% - 2px), #2563eb 2px);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .3s;
}

.gnu-notif-title a:hover {
    color: #2563eb;
    background-size: 100% 100%;
}

/* Description */
.gnu-notif-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 16px;
}

/* Meta Tags */
.gnu-notif-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gnu-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 50px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    transition: all .3s;
}

.gnu-notif-card:hover .gnu-meta-tag {
    background: #fff;
}

.gnu-meta-tag i {
    font-size: 12px;
    color: #2563eb;
}

.gnu-meta-tag-salary i {
    color: #16a34a;
}

.gnu-meta-tag-salary {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.gnu-notif-card:hover .gnu-meta-tag-salary {
    background: #f0fdf4;
}

.gnu-meta-tag-date i {
    color: #f59e0b;
}

/* CARD FOOTER */
.gnu-notif-card-footer {
    display: flex;
    align-items: center;
    padding: 0 30px 0 0;
    flex-shrink: 0;
}

.gnu-notif-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .35s ease;
    box-shadow: 0 8px 20px rgba(37,99,235,.2);
    white-space: nowrap;
}

.gnu-notif-btn:hover {
    color: #fff;
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(37,99,235,.3);
}

.gnu-notif-btn i {
    transition: transform .3s;
    font-size: 14px;
}

.gnu-notif-btn:hover i {
    transform: translateX(3px);
}

.gnu-notif-card.expired .gnu-notif-btn {
    background: #94a3b8;
    box-shadow: none;
}

.gnu-notif-card.expired .gnu-notif-btn:hover {
    transform: none;
    box-shadow: none;
}

/* BOTTOM CTA */
.gnu-notif-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
    padding: 24px 32px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #edf2f7;
    box-shadow: 0 8px 25px rgba(15,23,42,.04);
    position: relative;
    z-index: 2;
}

.gnu-notif-bottom-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gnu-notif-bottom-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef4ff, #f8fbff);
    color: #2563eb;
    font-size: 24px;
    flex-shrink: 0;
    border: 1px solid #dbeafe;
}

.gnu-notif-bottom-text {
    margin: 0 0 2px;
    font-size: 15px;
    color: #334155;
    font-weight: 500;
}

.gnu-notif-bottom-text strong {
    color: #2563eb;
    font-weight: 700;
}

.gnu-notif-bottom-sub {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

.gnu-notif-bottom-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all .35s ease;
    box-shadow: 0 12px 30px rgba(37,99,235,.25);
    white-space: nowrap;
    flex-shrink: 0;
}

.gnu-notif-bottom-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(37,99,235,.35);
}

.gnu-notif-bottom-btn i {
    transition: transform .3s;
}

.gnu-notif-bottom-btn:hover i {
    transform: translateX(4px);
}

/* RESPONSIVE - Tablet Landscape */
@media (max-width: 1199px) {
    .gnu-notif-title { font-size: 34px; }
    .gnu-notif-stats-row { padding: 12px 18px; }
    .gnu-notif-stat-num { font-size: 20px; }
    .gnu-notif-card-body { padding: 24px 20px 16px 20px; }
    .gnu-notif-card-footer { padding: 0 20px 0 0; }
    .gnu-notif-bottom { padding: 20px 24px; }
}

/* RESPONSIVE - Tablet Portrait */
@media (max-width: 991px) {
    .gnu-notif-section { padding: 70px 0; }
    .gnu-notif-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .gnu-notif-header-right { width: 100%; justify-content: space-between; }
    .gnu-notif-title { font-size: 30px; }
    .gnu-notif-stats-row { flex: 1; justify-content: space-around; }
    .gnu-notif-card { flex-direction: column; }
    .gnu-notif-timeline { width: 100%; min-width: 100%; height: 4px; }
    .gnu-timeline-dot { top: auto; left: 32px; }
    .gnu-notif-card-footer { padding: 0 24px 20px; width: 100%; }
    .gnu-notif-btn { width: 100%; justify-content: center; }
    .gnu-notif-bottom { flex-direction: column; text-align: center; padding: 20px 24px; }
    .gnu-notif-bottom-info { flex-direction: column; }
}

/* RESPONSIVE - Mobile */
@media (max-width: 767px) {
    .gnu-notif-section { padding: 60px 0; }
    .gnu-notif-title { font-size: 26px; letter-spacing: -1px; }
    .gnu-notif-subtitle { font-size: 14px; }
    .gnu-notif-badge { font-size: 12px; padding: 8px 18px; }
    .gnu-notif-header-right { flex-direction: column; gap: 12px; align-items: stretch; }
    .gnu-notif-stats-row { justify-content: center; padding: 12px 16px; }
    .gnu-notif-stat-num { font-size: 18px; }
    .gnu-notif-stat-item { min-width: 50px; }
    .gnu-notif-view-all { justify-content: center; padding: 12px 24px; }
    .gnu-notif-tabs { gap: 8px; margin-bottom: 28px; }
    .gnu-tab { padding: 10px 18px; font-size: 13px; }
    .gnu-tab-badge { min-width: 20px; height: 20px; font-size: 10px; }
    .gnu-notif-card-body { padding: 20px 18px 14px 18px; }
    .gnu-notif-top { flex-direction: column; gap: 10px; }
    .gnu-notif-org-icon { width: 42px; height: 42px; font-size: 18px; }
    .gnu-notif-org-name { font-size: 13px; }
    .gnu-notif-title { font-size: 18px; }
    .gnu-notif-desc { font-size: 13px; }
    .gnu-meta-tag { font-size: 11px; padding: 6px 12px; }
    .gnu-badge { font-size: 11px; padding: 5px 12px; }
    .gnu-notif-bottom { margin-top: 32px; padding: 18px 20px; }
    .gnu-notif-bottom-text { font-size: 14px; }
    .gnu-notif-bottom-icon { width: 44px; height: 44px; font-size: 20px; }
    .gnu-notif-bottom-btn { width: 100%; justify-content: center; padding: 12px 24px; }
}

/* RESPONSIVE - Small Mobile */
@media (max-width: 480px) {
    .gnu-notif-title { font-size: 22px; }
    .gnu-notif-stats-row { gap: 10px; padding: 10px 12px; }
    .gnu-notif-stat-num { font-size: 16px; }
    .gnu-notif-stat-label { font-size: 10px; }
    .gnu-notif-stat-dot { display: none; }
    .gnu-notif-tabs { gap: 6px; }
    .gnu-tab { padding: 8px 14px; font-size: 12px; }
    .gnu-tab i { font-size: 13px; }
    .gnu-notif-card { border-radius: 18px; }
    .gnu-timeline-dot { width: 12px; height: 12px; left: 24px; }
    .gnu-notif-card-footer { padding: 0 18px 16px; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .gnu-notif-card,
    .gnu-notif-org-icon,
    .gnu-notif-btn,
    .gnu-notif-view-all,
    .gnu-notif-bottom-btn,
    .gnu-notif-title a {
        transition: none !important;
        animation: none !important;
    }
    .gnu-notif-card:hover { transform: none !important; }
    .gnu-notif-card:hover .gnu-notif-org-icon { transform: none !important; }
    .gnu-notif-badge-dot,
    .gnu-timeline-dot.pulse,
    .gnu-badge-closing,
    .gnu-badge-new {
        animation: none !important;
    }
}


/* ============================================================
   MOCK TEST DETAIL HERO (mtd-*)
   Premium EdTech Hero for Mock Test Detail Page
   Mobile-First, Conversion-Focused
============================================================ */
/* Advertisement slots */
.gnu-ad-slot {
    display: block;
    width: 100%;
    margin: 1rem 0;
    text-align: center;
}

.gnu-ad-slot img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.gnu-ad-slot iframe {
    border: 0;
}

.gnu-ad-slot.is-sticky {
    position: sticky;
    top: 88px;
}

.gnu-ad-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.gnu-ad-link span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: .5rem;
    padding: .45rem .9rem;
    border-radius: 6px;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
}