/* ============================================================
   homepage.css — site chrome (header, nav, popup, sidebar, footer)
   v2 — refined, modern, accessible
   ============================================================ */

:root {
    --brand-900: #02273f;
    --brand-800: #04395e;
    --brand-700: #0a5081;
    --brand-500: #1976d2;
    --brand-50:  #eaf2fb;

    --accent:    #ec5252;
    --accent-2:  #ff7a59;
    --gold:      #ffd400;
    --gold-soft: #ffe566;

    --ink-900:   #0f1c2e;
    --ink-700:   #2b3a4a;
    --ink-500:   #5d6b7a;
    --ink-300:   #8a96a3;

    --bg:        #f4f7fb;
    --bg-soft:   #eef3f9;
    --line:      #e3e8ef;
    --line-soft: #eef2f7;

    --shadow-sm: 0 2px 6px rgba(15, 28, 46, .05);
    --shadow-md: 0 6px 22px rgba(15, 28, 46, .08);
    --shadow-lg: 0 18px 48px rgba(15, 28, 46, .12);
    --shadow-pop: 0 24px 60px rgba(15, 28, 46, .18);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --t-fast: .18s ease;
    --t-med:  .28s cubic-bezier(.4,.0,.2,1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--ink-700);
    background: var(--bg);
    line-height: 1.65;
    padding-top: 72px;          /* matches single-row header height */
}

/* selection / focus */
::selection { background: var(--gold-soft); color: var(--ink-900); }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

a { text-decoration: none; color: var(--brand-700); transition: color var(--t-fast); }
a:hover { color: var(--brand-500); }

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

/* ============================================================
   HEADER
   ============================================================ */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(15, 28, 46, .06);
    box-shadow: 0 1px 0 rgba(15, 28, 46, .02), var(--shadow-sm);
    z-index: 1000;
    transition: box-shadow var(--t-med), background var(--t-med);
    height: 72px;                 /* lock single-row height */
    overflow: visible;
}
.header:hover { box-shadow: var(--shadow-md); }

.header > .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 22px;
    position: relative;
    height: 100%;
}

/* The outer .navbar is just a wrapper — flatten it so the two
   stacked rows (.navbar-header + .fulltrakmenu) sit side-by-side
   instead of on top of each other. */
.header > .container > .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Hide the duplicate Google-ad slots and stray scripts that live
   inside the header — they reserve hundreds of px of empty height. */
.header .adsbygoogle,
.header > .container > script + ins,
.header ins.adsbygoogle { display: none !important; }

/* Hide the redundant .navbar-header brand block —
   .fulltrakmenu already shows the same logo + wordmark. */
.header > .container > .navbar > .navbar-header {
    display: none;
}

.navbar-header {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.navbrand img,
.navbar-brand img {
    height: 40px;
    width: auto;
    transition: transform var(--t-fast);
}
.navbrand:hover img,
.navbar-brand:hover img { transform: scale(1.04); }

/* the dark "Logicmojo" wordmark — keep it inline, not absolutely positioned */
.headlogo2 {
    position: static !important;
    width: 130px !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin-left: 6px;
    opacity: .95;
}

/* burger */
.navbar-toggle, .navbar-toggler {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.navbar-toggle:hover, .navbar-toggler:hover {
    background: var(--bg-soft);
    border-color: var(--brand-500);
}
.icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink-700);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform var(--t-fast);
}
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* The .fulltrakmenu IS the single visible header row. Make it lay out
   horizontally: brand on the left, nav pushed to the right. */
.fulltrakmenu {
    flex: 1;
    width: auto;
    display: flex;
    align-items: center;
    height: 100%;
}
.fulltrakmenu > .container {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    height: 100%;
}
.trakmenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 24px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}
.trakmenu > .navbar-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.padtrkss {
    flex: 1 1 auto;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
}

/* ============================================================
   NAV LIST
   ============================================================ */
.navbar-nav {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 28px;
}
.navbar-nav > li {
    position: relative;
}

.navbar-nav > li > a,
.navbar-nav .nav-link {
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 2px;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: inline-block;
    position: relative;
}
.navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 2px;
    transition: right var(--t-med);
}
.navbar-nav > li > a:hover {
    color: var(--brand-800);
}
.navbar-nav > li > a:hover::after { right: 0; }

/* ============================================================
   MEGA DROPDOWN
   ============================================================ */
.dropdown { position: relative; }
.dropdown-toggle::after {
    content: " ▾";
    font-size: 10px;
    margin-left: 4px;
    opacity: .7;
    transition: transform var(--t-fast);
}
.dropdown:hover .dropdown-toggle::after { transform: translateY(2px); }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    min-width: 780px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 26px;
    display: none;
    z-index: 1001;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--t-med), transform var(--t-med);
}
.dropdown:hover > .dropdown-menu,
.dropdown.show > .dropdown-menu {
    display: flex;
    gap: 26px;
    opacity: 1;
    transform: translateY(0);
}
/* gradient top accent on dropdown */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-700), var(--accent));
    border-radius: 0 0 4px 4px;
}

.dropdownleft {
    flex: 1;
    min-width: 320px;
    padding-right: 22px;
    border-right: 1px solid var(--line-soft);
}
.dropdownleft:last-child { border-right: 0; padding-right: 0; }

.dropdownleft h2 {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-300);
    margin: 14px 0 10px;
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line-soft);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-700);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.dropdown-item:hover {
    background: linear-gradient(135deg, var(--brand-50), #fff);
    color: var(--brand-800);
    transform: translateX(3px);
}
.dropdown-item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-soft);
    padding: 3px;
}
.populartag {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 4px 10px rgba(236, 82, 82, .3);
}
.liveclasses-dropdownbtn { display: block; }

/* nav CTA */
.counsbtn,
.my-sign-up {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold), #ffb300);
    color: var(--ink-900) !important;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(255, 212, 0, .35);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.counsbtn:hover,
.my-sign-up:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 212, 0, .45);
    color: var(--ink-900) !important;
}
.arrowclass { transition: transform var(--t-fast); }
.counsbtn:hover .arrowclass { transform: translateX(3px); }

.megaMenu0 { margin-left: 0; }
.sticky { top: 0; }

/* ============================================================
   FLOATING CHAT POPUP
   ============================================================ */
.open-button {
    position: fixed;
    bottom: 0;
    right: 28px;
    background: linear-gradient(135deg, var(--brand-800), var(--brand-700));
    color: #fff;
    border: none;
    padding: 14px 22px;
    border-radius: 14px 14px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 -8px 26px rgba(4, 57, 94, .35);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--t-fast);
}
.open-button:hover { transform: translateY(-3px); }
.open-button .fa-bell-o {
    background: var(--gold);
    color: var(--ink-900);
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
}
.open-button b { letter-spacing: .2px; }
.open-button span {
    margin-left: 6px;
    opacity: .85;
    font-size: 12px;
    border-left: 1px solid rgba(255,255,255,.25);
    padding-left: 12px;
}

.chat-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 28px;
    width: 380px;
    background: #fff;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: var(--shadow-pop);
    z-index: 1000;
    overflow: hidden;
    animation: popupRise .35s cubic-bezier(.4,.0,.2,1);
}
@keyframes popupRise {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.form-container { padding: 0; }
.popuptexttop {
    background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
    color: #fff;
    padding: 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.popuptexttop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 212, 0, .25), transparent 60%);
    pointer-events: none;
}
.popuptexttop h1 {
    font-size: 16px;
    margin: 0 0 14px;
    line-height: 1.35;
    color: #fff;
    text-align: center;
    font-weight: 700;
}
.popuptexttop img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255,255,255,.15);
    position: relative;
    z-index: 1;
}
.popuptextmid { padding: 16px 20px 6px; }
.popuptextmid p {
    margin: 0 0 9px;
    font-size: 13px;
    color: var(--ink-700);
    line-height: 1.55;
}
.popuptextmid .fa-check-circle {
    color: #18a957;
    margin-right: 8px;
    font-size: 14px;
}
.attemptbtn {
    text-align: center;
    padding: 4px 20px 14px;
}
.attemptbtn a {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff !important;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 8px 20px rgba(236, 82, 82, .3);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.attemptbtn a:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(236, 82, 82, .4);
}
.popup-powerdby {
    text-align: center;
    font-size: 11px;
    color: var(--ink-300);
    padding: 6px 0 10px;
}
.popup-powerdby span {
    color: var(--brand-800);
    font-weight: 700;
}
.hidebtn {
    width: 100%;
    background: var(--bg-soft);
    border: none;
    padding: 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink-500);
    transition: background var(--t-fast), color var(--t-fast);
}
.hidebtn:hover {
    background: var(--brand-50);
    color: var(--brand-800);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar { position: relative; width: 100%; }
.sidebar.fixed {
    position: fixed;
    top: 100px;
    width: 22%;
}

/* ============================================================
   FOOTER
   ============================================================ */
.endfooter {
    background: linear-gradient(180deg, var(--brand-900), var(--brand-800));
    color: #cfd8e3;
    padding: 44px 0 30px;
    margin-top: 80px;
    position: relative;
}
.endfooter::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold), var(--brand-500));
}
.endfooter .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 22px;
}
.endfooter .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}
.endfooter .col-md-3 { flex: 0 0 auto; }
.endfooter .col-md-6 { flex: 1 1 auto; }

.wpicons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border-radius: 50%;
    font-size: 26px;
    box-shadow: 0 10px 24px rgba(37, 211, 102, .35);
    transition: transform var(--t-fast);
}
.wpicons:hover { transform: scale(1.06) rotate(-4deg); }
.wpicons a, .wpfav { color: #fff !important; }

.footerlinks ul {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    list-style: none;
    padding: 0; margin: 0 0 10px;
}
.footerlinks ul li a {
    color: #cfd8e3;
    font-size: 13.5px;
    font-weight: 500;
    transition: color var(--t-fast);
    position: relative;
}
.footerlinks ul li a:hover { color: var(--gold); }
.footerlinks ul li a:hover::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--gold);
}
.footerlinks span {
    display: block;
    font-size: 12px;
    color: #8a96a3;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.footerlinks .linkss { color: var(--gold); font-weight: 600; }

.livechatdiv { text-align: right; }

/* ============================================================
   MISC
   ============================================================ */
.adsbygoogle { display: block; margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .dropdown-menu { min-width: 640px; }
    .navbar-nav { gap: 22px; }
}

@media (max-width: 991px) {
    .trakmenu .navbar-toggler { display: inline-block; }
    .padtrkss {
        position: absolute;
        top: 72px; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        display: none !important;
        flex-direction: column;
        padding: 14px;
    }
    .padtrkss.in, .padtrkss.show { display: flex !important; }
    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 4px;
    }
    .navbar-nav > li { width: 100%; }
    .navbar-nav > li > a::after { display: none; }
    .dropdown-menu {
        position: static;
        min-width: 100%;
        flex-direction: column;
        box-shadow: none;
        border: 0;
        padding: 8px 0;
        opacity: 1;
        transform: none;
    }
    .dropdown-menu::before { display: none; }
    .dropdownleft { border-right: 0; padding-right: 0; min-width: 0; }
    .headlogo2 { display: none !important; }
}

@media (max-width: 767px) {
    body { padding-top: 74px; }
    .open-button {
        right: 12px; left: 12px;
        font-size: 12px;
        padding: 12px;
        text-align: left;
    }
    .open-button span {
        display: none;
    }
    .chat-popup {
        right: 0; left: 0;
        width: auto;
        border-radius: 0;
    }
    .endfooter .row {
        flex-direction: column;
        text-align: center;
    }
    .footerlinks ul { justify-content: center; }
    .livechatdiv { text-align: center; }
    .wpicons { width: 50px; height: 50px; font-size: 22px; }
}