/*==========================================================
  ACMOBOOK NAVIGATION SYSTEM
  Part 1 - Navigation Core
==========================================================*/

/*==============================
  Navigation Wrapper
==============================*/

.acmo-nav{

    display:flex;
    align-items:center;
    gap:6px;
    height:72px;

}

/*==============================
  Navigation Item
==============================*/

.nav-item{

    position:relative;
    display:flex;
    align-items:center;

}

/*==============================
  Navigation Link
==============================*/

.nav-item>a{

    position:relative;

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

    height:46px;

    padding:0 18px;

    border-radius:14px;

    text-decoration:none;

    font-size:15px;
    font-weight:600;
    letter-spacing:.01em;

    color:#0F172A;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

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

.nav-item>a:hover{

    background:#F8FAFC;

    color:#695CFF;

    transform:translateY(-1px);

}

/*==============================
  Active State
==============================*/

.nav-item.active>a,
.nav-item>a.active{

    background:#EEF2FF;

    color:#695CFF;

}

/*==============================
  Keyboard Focus
==============================*/

.nav-item>a:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 3px rgba(105,92,255,.18);

}

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

.nav-item>a i{

    font-size:12px;

    color:#64748B;

    transition:
        transform .25s ease,
        color .25s ease;

}

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

.mega-wrapper:hover>a i,
.mega-wrapper.open>a i{

    transform:rotate(180deg);

    color:#695CFF;

}

/*==============================
  Current Page Indicator
==============================*/

.nav-item>a::after{

    content:"";

    position:absolute;

    left:18px;
    right:18px;
    bottom:8px;

    height:2px;

    border-radius:999px;

    background:#695CFF;

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .25s ease;

}

.nav-item.active>a::after,
.nav-item>a:hover::after{

    transform:scaleX(1);

}

/*==============================
  Mega Wrapper
==============================*/

.mega-wrapper{

    position:relative;

}

/*==============================
  Smooth Hover Gap
==============================*/

.mega-wrapper::before{

    content:"";

    position:absolute;

    left:0;
    right:0;

    top:100%;

    height:16px;

}

/*==============================
  Divider (optional)
==============================*/

.nav-divider{

    width:1px;

    height:26px;

    margin:0 8px;

    background:#EEF2F7;

}

/*==============================
  Reduced Motion
==============================*/

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

    .nav-item>a,
    .nav-item>a i,
    .nav-item>a::after{

        transition:none;

    }

}

/*==========================================================
  ACMOBOOK MEGA MENU SYSTEM
  Part 2 - Framework
==========================================================*/

/*==================================
  Mega Menu Container
==================================*/

.mega-menu{

    position:absolute;

    top:calc(100% + 16px);

    left:0%;

    transform:translateY(18px);

    width:980px;

    background:#FFFFFF;

    border:1px solid rgba(15,23,42,.06);

    border-radius:28px;

    padding:28px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    z-index:99999;

    transition:
        opacity .28s ease,
        transform .28s ease,
        visibility .28s ease;

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

}

/*==================================
  Visible
==================================*/

.mega-menu.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}

/* First menu */
#discoverMenu{

left:-140px;

}

/* Middle */
#talentMenu{

left:-220px;

}

/* Last */
#hiringMenu{

left:-320px;

}

/*==================================
  Layout
==================================*/

.mega-grid{

    display:grid;

    grid-template-columns:

        250px
        250px
        1fr;

    gap:34px;

    align-items:flex-start;

}

/*==================================
  Columns
==================================*/

.mega-column{

    display:flex;

    flex-direction:column;

}

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

.mega-column h6{

    margin:0 0 18px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#94A3B8;

}

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

.mega-column a{

    display:flex;

    align-items:center;

    gap:14px;

    min-height:58px;

    padding:10px 12px;

    border-radius:16px;

    text-decoration:none;

    color:#0F172A;

    transition:
        background .25s ease,
        transform .25s ease;

}

.mega-column a:hover{

    background:#F8FAFC;

    transform:translateX(4px);

}

/*==================================
  Text
==================================*/

.mega-column span{

    font-size:15px;

    font-weight:600;

}

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

.menu-icon{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#F4F7FF;

    color:#695CFF;

    font-size:18px;

    transition:.25s;

}

.mega-column a:hover .menu-icon{

    background:linear-gradient(
        135deg,
        #695CFF,
        #2EA8FF
    );

    color:#FFFFFF;

    transform:scale(1.06);

}

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

.mega-feature{

    position:relative;

    overflow:hidden;

    min-height:340px;

    padding:28px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #695CFF,
            #2EA8FF
        );

    color:black;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

/* Decorative Glow */

.mega-feature::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-110px;

    top:-120px;

    border-radius:50%;

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

}

.mega-feature::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    bottom:-50px;

    left:-50px;

    border-radius:50%;

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

}

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

.mega-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:8px 14px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}

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

.mega-feature h4{

    margin:0 0 14px;

    font-size:30px;

    line-height:1.2;

    font-weight:800;

}

/*==================================
  Description
==================================*/

.mega-feature p{

    margin:0;

    line-height:1.7;

    font-size:15px;

    opacity:.95;

}

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

.mega-btn{

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 24px;

    border-radius:16px;

    background:#FFFFFF;

    color:#695CFF;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.mega-btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 35px rgba(15,23,42,.18);

}

/*==========================================================
  ACMOBOOK MEGA MENU
  Part 3 - Premium Components
==========================================================*/


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

.mega-stats{

    display:grid;

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

    gap:14px;

    margin:26px 0;

}

.mega-stat{

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

    backdrop-filter:blur(14px);

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

    border-radius:18px;

    padding:18px 14px;

    text-align:center;

    transition:.25s;

}

.mega-stat:hover{

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

    transform:translateY(-2px);

}

.mega-stat strong{

    display:block;

    font-size:22px;

    font-weight:800;

    margin-bottom:6px;

}

.mega-stat small{

    display:block;

    font-size:12px;

    opacity:.92;

}


/*==================================
  Featured Label
==================================*/

.menu-label{

    margin-left:auto;

    padding:4px 10px;

    border-radius:999px;

    background:#EEF4FF;

    color:#695CFF;

    font-size:11px;

    font-weight:700;

}


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

.live-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 12px;

    border-radius:999px;

    background:#ECFDF5;

    color:#16A34A;

    font-size:11px;

    font-weight:700;

}

.live-badge::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:#16A34A;

}


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

.new-badge{

    margin-left:auto;

    padding:4px 8px;

    border-radius:999px;

    background:#FFF7ED;

    color:#EA580C;

    font-size:11px;

    font-weight:700;

}


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

.popular-badge{

    margin-left:auto;

    padding:4px 8px;

    border-radius:999px;

    background:#EEF2FF;

    color:#4F46E5;

    font-size:11px;

    font-weight:700;

}


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

.mega-divider{

    height:1px;

    background:#EEF2F7;

    margin:22px 0;

}


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

.mega-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:28px;

    padding-top:22px;

    border-top:1px solid #EEF2F7;

}

.mega-footer-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.mega-footer-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F4F7FF;

    color:#695CFF;

    font-size:18px;

}

.mega-footer-text{

    font-size:14px;

    line-height:1.5;

    color:#475569;

}

.mega-footer a{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#695CFF;

    font-weight:700;

    transition:.25s;

}

.mega-footer a:hover{

    transform:translateX(4px);

}


/*==================================
  Featured Card Hover
==================================*/

.mega-feature:hover{

    transform:translateY(-3px);

    transition:.3s;

}


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

.mega-column a:hover span{

    color:#695CFF;

}


/*==================================
  Scroll Support
==================================*/

.mega-menu{

    max-height:78vh;

    overflow-y:auto;

    scrollbar-width:thin;

    scrollbar-color:#CBD5E1 transparent;

}

.mega-menu::-webkit-scrollbar{

    width:8px;

}

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

    background:#CBD5E1;

    border-radius:999px;

}


/*==================================
  Nice Fade
==================================*/

@keyframes megaFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mega-menu.show{

    animation:megaFade .28s ease;

}


/*==================================
  Glass Effect
==================================*/

.mega-menu{

    backdrop-filter:blur(18px);

}

/*==========================================================
  ACMOBOOK NAVIGATION SYSTEM
  Part 4 - Production Ready
==========================================================*/


/*==================================
  Large Desktop (1600px+)
==================================*/

@media (min-width:1600px){

    .mega-menu{

        width:1080px;

    }

}


/*==================================
  Laptop (1400px)
==================================*/

@media (max-width:1400px){

    .mega-menu{

        width:920px;

    }

    .mega-grid{

        grid-template-columns:

        220px
        220px
        1fr;

    }

}


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

@media (max-width:1200px){

    .mega-menu{

        width:860px;

        padding:24px;

    }

    .mega-grid{

        gap:24px;

    }

}


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

@media (max-width:992px){

    .acmo-nav{

        display:none;

    }

}


/*==================================
  Ultra Wide Protection
==================================*/

.mega-menu{

    max-width:calc(100vw - 40px);

}


/*==================================
  Prevent Text Selection
==================================*/

.nav-item>a{

    user-select:none;

}


/*==================================
  Better Pointer
==================================*/

.nav-item>a,
.mega-column a,
.mega-btn{

    cursor:pointer;

}


/*==================================
  Images
==================================*/

.mega-menu img{

    max-width:100%;

    display:block;

}


/*==================================
  Better Layering
==================================*/

.acmo-header{

    z-index:1000;

}

.mega-menu{

    z-index:1100;

}


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

.mega-column{

    min-width:0;

}

.mega-column span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================
  Better Typography
==================================*/

.mega-menu{

    font-family:

    "Poppins",
    sans-serif;

}


/*==================================
  Better Hover Timing
==================================*/

.mega-column a{

    transition:

        background .22s,

        transform .22s,

        color .22s;

}


/*==================================
  Focus Visible
==================================*/

.mega-column a:focus-visible,

.mega-btn:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 3px

        rgba(105,92,255,.22);

}


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

.mega-btn{

    white-space:nowrap;

}


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

.mega-footer{

    flex-wrap:wrap;

    gap:16px;

}


/*==================================
  Better Icon Animation
==================================*/

.menu-icon{

    transition:

        transform .25s,

        background .25s,

        color .25s;

}


/*==================================
  Better Link Animation
==================================*/

.mega-column a span{

    transition:.25s;

}


/*==================================
  Scrollbar
==================================*/

.mega-menu{

    scrollbar-gutter:stable;

}


/*==================================
  Reduce Motion
==================================*/

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

    .mega-menu,

    .mega-column a,

    .mega-btn,

    .menu-icon,

    .mega-feature{

        transition:none;

        animation:none;

    }

}


/*==================================
  Print
==================================*/

@media print{

    .mega-menu{

        display:none !important;

    }

}