/*
    Theme Name: Medilab
    Theme URL: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/
    Author: BootstrapMade.com
    Author URL: https://bootstrapmade.com
*/

/* ===================================================================
   ExpertFrontier — Brand tokens
   Derived from the logo: deep navy "Expert" + red "Frontier".
   Use these variables for all brand colors so identity stays
   consistent and the theme is editable from one place.
=================================================================== */
:root {
    /* Primary — deep brand navy ("Expert" letters) */
    --brand-primary: #22304d;
    --brand-primary-dark: #16203a;
    --brand-primary-light: #3a4f7d;

    /* Secondary — brand red ("Frontier") — CTAs / emphasis */
    --brand-secondary: #c8202b;
    --brand-secondary-dark: #9e161f;

    /* Accents */
    --brand-accent: #e63946;
    /* bright red — decorative / large only */
    --brand-teal: #c8202b;
    /* interactive accent (links, buttons, borders), AA-safe 5:1 on white */
    --brand-teal-bright: #e04a54;
    /* lighter red — backgrounds / decoration only */

    /* Semantic (keep independent of brand accent) */
    --success: #157a59;
    --success-bg: #e9f6f0;
    --success-border: #bfe3d3;

    /* Text */
    --text-dark: #1a2233;
    --text-body: #333333;
    --text-muted: #5a6473;
    /* AA-safe muted (5.5:1 on white) */
    --text-on-brand: #ffffff;

    /* Surfaces / lines */
    --surface: #ffffff;
    --surface-alt: #f4f6fa;
    --border: #e1e5ec;

    /* Brand gradient (logo navy → red) */
    --brand-gradient: linear-gradient(90deg, var(--brand-primary-dark) 0%, #5c2038 55%, var(--brand-secondary) 100%);
}

body {
    /*font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 20px;
    color: #333;
    font-size: 16px;
}

ol,
ul {
    /*list-style: none;*/
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #000000;
}

a,
a:hover,
a:focus,
a:active {
    outline: none;
}

.section-padding {
    padding: 30px 0px;
    /*padding: 60px 0px;*/

}

h2 {
    line-height: 30px;
    margin: 0;
    font-size: 28px;
    font-weight: 700;

}

/*hr.botm-line {
    height: 3px;
    width: 60px;
    background: #ffb737;
    position: relative;
    border: 0;
    margin: 20px 0 20px 0;
}*/
hr.botm-line {
    height: 1px;
    width: 60px;
    background: #ffffff;
    position: relative;
    border: 0;
    margin: 2px 0 15px 0;
}

/***************************************
banner
***************************************/
.navbar {
    margin-bottom: 0px;
    border: 0px;
    border-radius: 0px;
    background-color: #ffffff;
    padding: 6px 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* full-width containers capped & centered site-wide */
.container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
}

/***************************************
homepage hero — ExpertFrontier
Deep navy surface, red accent, live stats.
***************************************/
.ef-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(200, 32, 43, 0.28), transparent 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(58, 79, 125, 0.55), transparent 65%),
        linear-gradient(135deg, #131b30 0%, var(--brand-primary-dark) 45%, #1d2a49 100%);
    color: #eef1f8;
    padding: 72px 0 0;
}

/* faint dot grid so the navy doesn't read flat */
.ef-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(238, 241, 248, 0.10) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
    pointer-events: none;
}

/* red baseline — echoes the logo's two-tone cut */
.ef-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-secondary) 0%, var(--brand-secondary) 38%, rgba(200,32,43,.25) 60%, transparent 100%);
}

.ef-hero-inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.ef-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #b8c2d9;
    border: 1px solid rgba(238, 241, 248, 0.18);
    border-radius: 999px;
    padding: 7px 16px;
    margin-bottom: 26px;
    background: rgba(238, 241, 248, 0.05);
}

.ef-hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.22);
    animation: ef-pulse 2.4s ease-in-out infinite;
}

@keyframes ef-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.30); }
    50%      { box-shadow: 0 0 0 7px rgba(230, 57, 70, 0.08); }
}

.ef-hero-title {
    font-size: clamp(34px, 5.2vw, 58px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 18px;
}

.ef-hero-title span {
    color: #ff5a64;
    /* red pops on navy; token red is too dark on this surface */
    white-space: nowrap;
}

.ef-hero-sub {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.65;
    color: #b8c2d9;
    max-width: 620px;
    margin: 0 auto 34px;
}

.ef-hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 58px;
}

.ef-btn-solid,
.ef-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, background-color 140ms ease, border-color 140ms ease;
}

.ef-btn-solid {
    background: var(--brand-secondary);
    color: #fff;
    box-shadow: 0 8px 24px rgba(200, 32, 43, 0.35);
}

.ef-btn-solid:hover,
.ef-btn-solid:focus {
    background: var(--brand-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(200, 32, 43, 0.45);
}

.ef-btn-ghost {
    color: #eef1f8;
    border: 1px solid rgba(238, 241, 248, 0.35);
    background: rgba(238, 241, 248, 0.04);
}

.ef-btn-ghost:hover,
.ef-btn-ghost:focus {
    color: #fff;
    border-color: rgba(238, 241, 248, 0.75);
    background: rgba(238, 241, 248, 0.10);
    transform: translateY(-2px);
}

.ef-hero-stats {
    position: relative;
    display: flex;
    justify-content: center;
    gap: clamp(28px, 6vw, 72px);
    padding: 22px 10px 26px;
    border-top: 1px solid rgba(238, 241, 248, 0.14);
}

.ef-stat {
    text-align: center;
}

.ef-stat b {
    display: block;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.ef-stat span {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8d99b5;
}

@media (max-width: 767.98px) {
    .ef-hero { padding-top: 52px; }
    .ef-hero-br { display: none; }
    .ef-hero-cta { margin-bottom: 42px; }
    .ef-btn-solid, .ef-btn-ghost { width: 100%; justify-content: center; }
    .ef-hero-stats { gap: 18px; }
}

/***************************************
banner carousel
***************************************/
.brand-carousel {
    width: calc(100% - 24px);
    max-width: 1400px;
    margin: 12px auto 0;
    /* center within the page */
    border-radius: 12px;
    overflow: hidden;
    /* clip image to the rounded box */
    background: var(--surface-alt);
}

.brand-carousel .carousel-item {
    aspect-ratio: 1400 / 425;
    /* keeps banner ratio, scales with width */
}

.brand-carousel .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fill without distortion */
    object-position: center;
}

/* indicators: brand-teal pills */
.brand-carousel .carousel-indicators [data-bs-target] {
    width: 28px;
    height: 5px;
    border-radius: 4px;
    background-color: var(--brand-teal);
    opacity: 0.45;
    transition: opacity 200ms ease, width 200ms ease;
}

.brand-carousel .carousel-indicators .active {
    opacity: 1;
    width: 40px;
}

/* arrows: solid brand-teal circles, only visible on hover/focus for cleanliness */
.brand-carousel .carousel-control-prev,
.brand-carousel .carousel-control-next {
    width: 6%;
    opacity: 0;
    transition: opacity 200ms ease;
}

.brand-carousel:hover .carousel-control-prev,
.brand-carousel:hover .carousel-control-next,
.brand-carousel .carousel-control-prev:focus,
.brand-carousel .carousel-control-next:focus {
    opacity: 1;
}

.brand-carousel .carousel-control-prev-icon,
.brand-carousel .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(25, 118, 133, 0.85);
    /* --brand-teal @ 85% */
    background-size: 45% 45%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.brand-carousel .carousel-caption h3 {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    /* readable over any image (AA) */
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .brand-carousel {
        width: calc(100% - 16px);
        border-radius: 8px;
        margin-top: 8px;
    }

    /* arrows always visible on touch (no hover) */
    .brand-carousel .carousel-control-prev,
    .brand-carousel .carousel-control-next {
        opacity: 1;
        width: 12%;
    }

    .brand-carousel .carousel-control-prev-icon,
    .brand-carousel .carousel-control-next-icon {
        width: 34px;
        height: 34px;
    }

    .brand-carousel .carousel-caption h3 {
        font-size: 16px;
    }
}

.navbar-default {
    background-color: transparent;
    padding: 20px 0;
    transition: all 0.3s;
    border: 0px;
}

.navbar-brand {
    font-family: inherit;
    font-size: 32px;
    margin-right: 32px;
}

.navbar-brand img {
    padding-top: 2px;
    max-width: 230px;
    height: auto;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #EA6045;
}

.top-nav-collapse {
    padding: 0;
    background: rgba(28, 74, 90, 0.9);
}

.white,
.white:hover,
.white:focus {
    color: #fff;
    width: 100% !important;
}

.block {
    display: block;
}

/* BS5: active state lives on .nav-link.active (BS3 selectors kept for safety) */
.navbar-default .navbar-nav>.active>a,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.active:focus,
.navbar .navbar-nav .nav-link.active:hover {
    color: #fff;
    text-transform: uppercase;
    background-color: var(--brand-teal);
}

.navbar-default .navbar-nav>li>a,
.navbar .navbar-nav .nav-link {
    color: var(--brand-teal);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 150ms ease, background-color 150ms ease, transform 120ms ease-out;
}

.navbar .navbar-nav .nav-link:active {
    transform: scale(0.97);
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
    color: var(--brand-primary);
    text-transform: uppercase;
    background-color: rgba(27, 94, 155, 0.10);
}

.btn-appoint,
.btn-appoint:hover,
.btn-appoint:focus {
    margin-top: 30px;
    padding: 10px 20px;
    font-size: 12px;
    background-color: rgba(12, 184, 182, 0.91);
    border-radius: 3px;
    color: #fff;
}

.overlay-detail a i {
    text-align: center;
    position: absolute;
    bottom: 25px;
    font-size: 38px;
    color: #fff;
    margin: 0 auto;
}

.text-primary i {
    padding-top: 8px;
    display: inline-block;
}

/***************************************
services
***************************************/
.icon i {
    color: var(--brand-primary);
    font-size: 45px;
    margin-bottom: 25px;
}

.service-info {
    margin-bottom: 20px;
}

.icon-info h4 {
    padding-bottom: 15px;
}

.icon-info p {
    font-size: 15px !important;
}

/***************************************
cta-1
***************************************/
.schedule-tab {
    background-color: var(--brand-primary);
    float: left;
}

.medi-info {
    border-right: 1px solid #fff;
}

.medi-info,
.time-info {
    padding: 20px;
    color: #fff;
}

.medi-info h3,
.time-info h3 {
    padding-bottom: 16px;
    color: #fff;
    font-weight: 600;
}

.medi-info-btn,
.medi-info-btn:hover,
.medi-info-btn:focus {
    margin: 15px 0px 5px;
    display: inline-block;
    border: solid white 2px;
    padding: 3px 8px;
    font-size: 12px;
    color: #fff;
    font-weight: 400 !important;
    cursor: pointer;
}

td {
    border: 0px solid #ededed;
    border-top: 1px solid rgba(216, 216, 216, 0.5);
    padding: 6px 10px 6px 0;
}

.medi-info,
.time-info {
    font-size: 14px;
}

/***************************************
about
***************************************/
#about {
    background-color: rgba(238, 238, 238, 0.15);
}

.lg-line {
    line-height: 1.4;
    font-size: 28px;
}

.more-features-box-text-icon {
    float: left;
    width: 40px;
    height: 40px;
    padding-top: 6px;
    background: var(--brand-primary);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    text-align: center;
}

.more-features-box-text-description h3 {
    padding-bottom: 15px;
}

.more-features-box-text-icon i {
    font-size: 18px;
    line-height: 26px;
}

.more-features-box-text-description {
    margin-left: 80px;
    margin-bottom: 35px;
}

.sec-para {
    padding-bottom: 10px;
}

/***************************************
doctor team
***************************************/
.thumbnail {
    border-radius: 0px;
}

.caption h3 {
    padding-bottom: 5px;
}

.caption p {
    padding-bottom: 10px;
}

/***************************************
testimonial
***************************************/
#testimonial {
    background-color: #eee;
}

.testi-details {
    background: #fff;
    padding: 14px 24px;
    margin-bottom: 20px;
    box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.18);
    position: relative;
}

.testi-info a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

.testi-info a img {
    border-radius: 50%;
}

.testi-info h3 {
    display: inline-block;
    line-height: 22px;
    font-weight: 600;
    color: #000;
    margin-top: 8px;
}

.testi-info h3>span {
    display: block;
    line-height: 16px;
    font-weight: 400;
}

.testi-details::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-left: 0;
    bottom: -40px;
    left: 56px;
    border-top-color: #fff;
    border-width: 20px;
}

.testi-details::before {
    content: '';
    position: absolute;
    transform: rotate(45deg);
    width: 0px;
    height: 0px;
    bottom: -30px;
    left: 45px;
    border-style: solid;
    border-width: 15px;
    border-color: transparent;
    z-index: -1;
    box-shadow: 3px -13px 5px 0px rgba(0, 0, 0, 0.18);
    border-left: 0;
}

/***************************************
cta -2
***************************************/
#cta-2 {
    background-color: rgb(41, 48, 46);
}

.white {
    color: #fff;
}

.icon-play,
.icon-play:hover,
.icon-play:focus {
    background-color: var(--brand-primary);
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    padding: 5px 17px;
    margin-top: 26px;
    display: block;
}

.text-primary {
    color: var(--brand-primary);
}

.icon-mar {
    margin-right: 7px;
}

/***************************************
contact us
***************************************/
.space {
    margin-top: 40px;
}

.btn-form,
.btn-form:hover,
.btn-form:focus {
    background-color: var(--brand-teal);
    border-radius: 10px !important;
    color: #fff;
    border-radius: 0px;
    padding: 10px 20px;
}

.br-radius-zero {
    border-radius: 0px;
}

.form-control {
    height: 40px;
}

.validation {
    color: red;
    display: none;
    margin: 0 0 20px;
    font-weight: 400;
    font-size: 13px;
}

#sendmessage {
    color: green;
    border: 1px solid green;
    display: none;
    text-align: center;
    padding: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}

#errormessage {
    color: red;
    display: none;
    border: 1px solid red;
    text-align: center;
    padding: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}

#sendmessage.show,
#errormessage.show,
.show {
    display: block;
}


/***************************************
footer
***************************************/
#footer {
    background-color: var(--brand-teal);
}

.ftr-tle {
    margin-bottom: 18px;
}

.ftr-tle h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin: 0;
}

.info-sec {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
}

.info-sec p {
    margin: 0 0 10px;
}

/* footer link lists */
.quick-info {
    margin: 0;
    padding: 0;
    list-style: none;
}

.quick-info li {
    margin: 0 0 9px;
}

.quick-info li i {
    font-size: 6px;
    margin-right: 8px;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.55);
}

.social-icon li {
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-right: 5px;
}

/* accreditation logos row (replaces   + hr hack) */
.ftr-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
}

.ftr-logos img {
    height: 64px;
    width: auto;
    background: #fff;
    padding: 6px 8px;
    border-radius: 6px;
}

.bglight-blue {
    background-color: #3498DB;
}

.bgred {
    background-color: #E74C3C;
}

.bgdark-blue {
    background-color: #2C3E50;
}

.top-footer {
    padding: 48px 0px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-line {
    padding: 16px 0px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}

.footer-line a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.footer-line a:hover {
    text-decoration: underline;
}

/* footer links: no underline by default, reveal on hover */
.quick-info li a,
.info-sec a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 150ms ease, opacity 150ms ease;
}

.quick-info li a:hover,
.quick-info li a:focus,
.info-sec a:hover,
.info-sec a:focus {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ftr-readmore {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    color: #fff !important;
}

.site-link,
.site-link:hover,
.site-link:focus {
    color: var(--brand-primary);
    text-transform: none;
}

.searchdiv {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    padding: 4px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.searchdiv:focus-within {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(78, 183, 197, 0.15);
}

.searchdiv form {
    margin: 0;
    display: flex;
    align-items: center;
}

.searchdiv input {
    border: 0px solid #ccc;
    outline: none;
    margin-left: 4px;
    width: 140px;
    color: var(--text-body);
}

.searchdiv input::placeholder {
    color: var(--text-muted);
}

.searchdiv .nav-search-icon {
    color: var(--brand-teal);
}

/* collapsed navbar (below BS5 lg breakpoint): stack menu + utilities */
@media (max-width: 991.98px) {
    .navbar-nav.main-menu {
        margin: 8px 0;
    }

    .navbar-utilities {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .searchdiv {
        width: 100%;
    }

    .searchdiv input {
        width: 100%;
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 12px;
    }
}

@media (min-width: 220px) and (max-width: 551px) {

    .testi-info {
        margin-bottom: 20px;
    }

    .marb20 {
        margin-top: 30px;
    }

    h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .medi-info {
        border: 0px;
        border-bottom: 1px solid #fff;
    }

    .service-info {
        margin-top: 20px;
        margin-bottom: 0px;
    }

    .caption h3 {
        font-size: 14px;
    }

    .caption p {
        font-size: 12px;
        padding-bottom: 5px;
    }

    .caption ul li a i {
        font-size: 14px;
    }
}

/***************************************
Bootstrap 5 migration shims
(restore look of BS3 components removed in BS5)
***************************************/
.thumbnail {
    display: block;
    padding: 8px;
    background-color: #fff;
    border-radius: 8px;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.well-sm {
    padding: 9px;
    border-radius: 3px;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
}

.panel-body {
    padding: 15px;
}

/* BS3 dropdown caret (BS5 removed it) */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* keep old btn-default looking like a neutral button under BS5 */
.btn-default {
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
}

.btn-default:hover {
    background-color: #e6e6e6;
}


/* ===================================================================
   Site-specific components (merged from Gcustom.css)
=================================================================== */
.cateG {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    overflow: hidden;
}


.cateG li,
.tab_hdr li {
    margin: 10px 0px;
    background-color: var(--brand-primary);
    padding: 1px;
}

.cateG li,
.cateG li a {
    border-radius: 10px;
}


.cateG li a {

    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.cateG li a i {
    color: #ccc;
    font-weight: bold;
    font-size: 20px;
}

/* Change the link color on hover */
.cateG li a:hover {
    background-color: var(--brand-secondary);
    color: white;
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ---- Live / Recorded seminar tabs (segmented control) ---- */
.seminar-tabs {
    display: flex;
    gap: 6px;
    max-width: 640px;
    margin: 0 auto 22px;
    padding: 5px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.seminar-tabs .seminar-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 11px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--brand-primary);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 120ms ease-out;
}

.seminar-tabs .seminar-tab:hover {
    background: rgba(27, 94, 155, 0.08);
}

.seminar-tabs .seminar-tab:active {
    transform: scale(0.98);
}

.seminar-tabs .seminar-tab.is-active {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(27, 94, 155, 0.25);
}


.conf-panel.is-hidden {
    display: none;
}

/* smooth opacity-in when a panel becomes visible (no layout-prop animation) */
.conf-panel:not(.is-hidden) {
    animation: confPanelIn 240ms ease-out both;
}

@keyframes confPanelIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion:reduce) {
    .conf-panel:not(.is-hidden) {
        animation: none;
    }
}

/* ---- Webinar / conference cards ---- */
.conf-card {
    position: relative;
    /* anchor for the top-right flag */
    display: flex;
    gap: 16px;
    align-items: flex-start;
    height: 100%;
    /* equal-height cards within a row */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

/* days-left badge sits on its own meta row (never overlaps the title) */
.conf-meta-badge {
    margin-top: 2px;
}

@media (hover:hover) and (pointer:fine) {
    .conf-card:hover {
        box-shadow: 0 8px 24px rgba(28, 43, 54, 0.10);
        border-color: var(--brand-teal);
        transform: translateY(-2px);
    }
}

.conf-card-media {
    flex: 0 0 96px;
    text-align: center;
}

.conf-card-photo {
    width: 96px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--surface-alt);
}

.conf-card-photo a {
    display: block;
    width: 100%;
    height: 100%;
}

.conf-card .team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.conf-card-speaker {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
}

.conf-card-speaker .view {
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
}

.conf-card-speaker .view:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

.conf-card-body {
    flex: 1 1 auto;
    min-width: 0;
    /* allow text to wrap instead of overflowing */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.conf-card-title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--text-dark);
    font-weight: 600;
}

/* category / type pills */
.conf-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.conf-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--brand-primary);
    background: rgba(27, 94, 155, 0.08);
    padding: 3px 9px;
    border-radius: 999px;
}

.conf-tag-muted {
    color: var(--text-muted);
    background: var(--surface-alt);
}

/* label : value meta rows */
.conf-card-meta {
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    /* grow so the CTA aligns to a consistent bottom line */
}

.conf-meta-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px 8px;
    font-size: 14px;
    line-height: 1.5;
}

.conf-meta-label {
    flex: 0 0 70px;
    font-weight: 700;
    color: var(--text-muted);
}

.conf-meta-value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-body);
}

/* "N Days Left" / "Today" badge */
.days-badge {
    display: inline-block;
    /* margin-left:8px; */
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.6;
    color: #fff;
    background: var(--brand-primary);
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.days-badge-today {
    background: var(--brand-secondary-dark);
}

.conf-card-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--brand-teal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border-radius: 24px;
    text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease-out;
}

.conf-card-cta:hover,
.conf-card-cta:focus {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(27, 94, 155, 0.30);
}

.conf-card-cta:active {
    transform: scale(0.97);
}

.conf-empty {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-primary);
    padding: 28px 12px;
}

.conf-pagination {
    text-align: center;
    margin-top: 10px;
}

/* phones: single column, card stacks vertically and centers */
@media (max-width:575.98px) {
    .conf-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 16px;
    }

    .conf-card-media {
        flex-basis: auto;
    }

    .conf-card-photo {
        width: 120px;
    }

    .conf-card-body {
        width: 100%;
        align-items: center;
    }

    .conf-card-cta {
        align-self: center;
    }

    .conf-card-tags {
        justify-content: center;
    }

    .conf-meta-row {
        justify-content: center;
    }

    .conf-meta-label {
        flex-basis: auto;
    }

    .seminar-tabs .seminar-tab {
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* 2-up (md): tighten, keep label beside value */
@media (min-width:768px) and (max-width:991.98px) {
    .conf-card {
        gap: 12px;
        padding: 16px;
    }

    .conf-card-title {
        font-size: 16px;
    }

    .conf-meta-label {
        flex-basis: 60px;
    }
}

/* 3-up (lg): narrow columns — stack meta label ABOVE value so the long
   date never wraps mid-row; shrink photo so the body breathes */
@media (min-width:992px) and (max-width:1199.98px) {
    .conf-card {
        gap: 12px;
        padding: 16px;
    }

    .conf-card-media {
        flex-basis: 80px;
    }

    .conf-card-photo {
        width: 80px;
    }

    .conf-card-title {
        font-size: 15px;
    }

    .conf-meta-row {
        flex-direction: column;
        gap: 1px;
    }

    .days-badge {
        margin-left: 0px;
    }

    .conf-meta-label {
        flex: none;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .conf-meta-value {
        font-size: 13px;
    }
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.small_labels {
    font-family: inherit;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.home_conf_dtls {
    width: 100%;
    display: block;
}

.view {
    color: var(--brand-teal);
    font-weight: bold;
}

#cartwa {
    text-align: center;
    width: 20%;
}

/* background:url('img/cart-73-xxl.png') no-repeat; background-size: 30px 30px;*/

/* right zone: search + account/cart, pinned to the far right of the bar */
.navbar-utilities {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* navbar right-side actions: cart + sign in + cta */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}

/* cart icon with count badge */
.nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-dark);
    font-size: 20px;
    line-height: 1;
    transition: color 150ms ease;
}

.nav-cart:hover,
.nav-cart:focus {
    color: var(--brand-primary);
}

.nav-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--brand-secondary);
    border-radius: 999px;
}

/* sign-in text link */
.nav-signin {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 150ms ease;
}

.nav-signin:hover,
.nav-signin:focus {
    color: var(--brand-primary);
}

/* primary CTA — outlined pill */
.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-primary);
    background: transparent;
    border: 1.5px solid var(--brand-primary);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, transform 120ms ease-out;
}

.nav-cta:hover,
.nav-cta:focus {
    background: var(--brand-primary);
    color: #fff;
}

.nav-cta:active {
    transform: scale(0.97);
}





.info,
.success,
.warning,
.error,
.validation {
    border: 1px solid;
    margin: 10px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}

.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}

.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}



.wisHes {
    bottom: 0;
    color: red;
    height: auto;

    position: fixed;
    opacity: 1;
    width: 286px;
    margin-left: 18px;
}


/* ===================================================================
   Conference detail page (moved from conference.php inline <style>)
=================================================================== */
.conf_name {
    font-family: inherit;
    font-weight: 500;
}

.detailwa {
    margin: 5px 0 20px 0;
    width: 100%;
}

/* Description heading — navy with short red underline, matches brand system */
.detailwa h4 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.01em;
    margin: 6px 0 18px;
}

.detailwa h4::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 8px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-secondary), rgba(200, 32, 43, 0.35));
}

/* Description body — admin-authored HTML, so style the raw tags for readability */
.detailwa {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-body);
    max-width: 76ch;
    /* readable measure; the column grid still bounds it */
}

.detailwa p {
    margin: 0 0 14px;
}

.detailwa b,
.detailwa strong {
    color: var(--text-dark);
}

/* section-ish headings authored as bold lines or h5/h6 inside the blob */
.detailwa h5,
.detailwa h6 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 22px 0 10px;
}

.detailwa ul,
.detailwa ol {
    margin: 0 0 16px;
    padding-left: 6px;
    list-style: none;
}

.detailwa ul li,
.detailwa ol li {
    position: relative;
    padding: 3px 0 3px 26px;
    margin: 0;
}

/* custom marker: small red arrow chip instead of default dots */
.detailwa ul li::before {
    content: "\f105";
    /* fa-angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 4px;
    top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--brand-secondary);
}

.detailwa ol {
    counter-reset: dw;
}

.detailwa ol li::before {
    counter-increment: dw;
    content: counter(dw);
    position: absolute;
    left: 0;
    top: 6px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fdf0f1;
    color: var(--brand-secondary);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detailwa a {
    color: var(--brand-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}



.training_msg {
    display: none;
}

.training_rs {
    float: right;
}

.list-style-type {
    padding: 12px;
    background: var(--surface-alt);
    border-radius: 12px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.list-style-type h4 {
    color: var(--brand-teal);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
}

.list-style-type hr {
    border-color: var(--brand-teal) !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* "Find more webinars" — speaker avatar + title list */
.more-webinars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease-out;
}

.mw-item:hover {
    border-color: var(--brand-teal);
    box-shadow: 0 4px 14px rgba(28, 43, 54, 0.08);
    transform: translateY(-1px);
}

.mw-img {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: var(--surface-alt);
}

.mw-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mw-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mw-speaker {
    font-size: 12px;
    color: var(--text-muted);
}

.mw-item:hover .mw-title {
    color: var(--brand-primary);
}

/* pricing group headings */
.Single h3,
.Combo h3,
.Additional h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--brand-primary);
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.Combo h3,
.Additional h3 {
    margin-top: 18px;
}

/* ---- hero: light editorial, one hairline container ----
   Typography carries the hierarchy; no chips, no texture, no shadows. */
.conf-hero {
    overflow: hidden;
    width: calc(100% - 24px);
    max-width: 1400px;
    margin: 16px auto 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0 !important;
}

.conf-hero-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 56px 52px;
    /* quiet tint so the breathing room reads as a designed panel, not a void */
    background: var(--surface-alt);
}

/* kicker row: type + urgency, above the title */
.conf-hero-info .conf-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.conf-hero-info .conf-type-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-secondary);
}

.conf-hero-info .conf-kicker .days-badge {
    margin: 0;
    background: #fdf0f1;
    color: var(--brand-secondary);
}

/* title — the hero element, scaled to own the wider panel */
.conf-hero-info .conf_name {
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--text-dark);
    margin: 0 0 28px;
    max-width: 26ch;
}

/* speaker: plain avatar + name + category, no card */
.conf-hero-info .conf-speaker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.conf-hero-info .conf-speaker-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #fff;
}

.conf-hero-info .conf-speaker-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.conf-hero-info .conf-speaker-name {
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.conf-hero-info a.conf-speaker-name:hover {
    color: var(--brand-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.conf-hero-info .conf-speaker-cat {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* facts: plain inline text, no chips */
.conf-hero-info .conf-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
}

.conf-hero-info .conf-fact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-body);
}

.conf-hero-info .conf-fact i {
    text-align: center;
    color: var(--brand-secondary);
    flex: 0 0 auto;
    font-size: 13px;
}

.conf-hero-info a.view {
    color: var(--text-dark);
}

.conf-hero-pricing {
    /* near-black (navy-tinted, never #000); the light/dark cut is the divider */
    background: #0d1220;
    padding: 26px 12px;
    /* native form controls (checkboxes) render with dark-appropriate borders */
    color-scheme: dark;
}

/* the BS3 .thumbnail shim paints a white card — neutralize it inside the dark panel */
.conf-hero-pricing .thumbnail {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* dark-panel overrides: headings, rows, prices, states — white + shades of white */
.conf-hero-pricing .Single h3,
.conf-hero-pricing .Combo h3,
.conf-hero-pricing .Additional h3 {
    color: #fff;
    font-size: 12.5px;
    letter-spacing: 1px;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.conf-hero-pricing .price-label {
    color: rgba(255, 255, 255, 0.78);
}

.conf-hero-pricing .price-label .training_rs {
    color: #fff;
}

.conf-hero-pricing .price-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* checked: brighter white tint (not red — reads muddy maroon on near-black);
   the red accent lives on the price alone */
.conf-hero-pricing .price-row:has(input:checked) {
    background: transparent;
}

.conf-hero-pricing .price-row:has(input:checked) .price-label {
    color: #fff;
}

.conf-hero-pricing .price-row:has(input:checked) .training_rs {
    color: #ff8d94;
}

.conf-hero-pricing .conf-cart-bar {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.conf-hero-pricing .conf-total {
    color: #fff;
}

/* ---- pricing rows (were float:left/right) — compact ---- */
.price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.price-row:hover {
    background: var(--surface-alt);
}

/* row lights up when its option is checked — tint only, no ring */
.price-row:has(input:checked) {
    background: #fdf0f1;
}

.price-row:has(input:checked) .training_rs {
    color: var(--brand-secondary);
}

.price-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-body);
    font-size: 14px;
}

.price-label .training_rs {
    float: none;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

.price-check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.price-check input {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--brand-secondary);
}

@media (max-width: 991.98px) {
    .conf-hero {
        margin-top: 12px;
        border-radius: 12px;
    }

    .conf-hero-info {
        padding: 30px 22px;
    }

    .conf-hero-info .conf_name {
        margin-bottom: 18px;
    }

    .conf-hero-pricing {
        padding: 22px;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

/* add-to-cart bar: button left, live total right, aligned */
.conf-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.conf-cart-bar .btn-form {
    margin: 0;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.conf-cart-bar .btn-form:active {
    transform: scale(0.97);
}

/* live total: plain number, no box */
.conf-total {
    display: none;
    /* revealed by JS when an option is checked */
    text-align: right;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    white-space: nowrap;
}

/* ===================================================================
   Login / register (auth gate before checkout)
=================================================================== */
.auth-wrap {
    background: var(--surface-alt);
    padding: 48px 0 72px;
}

.auth-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 34px 36px;
    height: 100%;
}

.auth-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 0 0 6px;
}

.auth-title-sm {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 6px;
}

.auth-sub {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 20px;
}

.auth-divider {
    height: 1px;
    background: var(--border);
    margin: 30px 0 26px;
}

.auth-card .form-group {
    margin-bottom: 14px;
}

/* inline messages: error (default) and success (.is-ok) */
.auth-alert {
    display: block;
    background: #fdf0f1;
    color: var(--brand-secondary-dark);
    border: 1px solid rgba(200, 32, 43, 0.18);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 14px;
}

.auth-alert.is-ok {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.auth-errs {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Register / Guest segmented control (radios stay live for the footer JS) */
.auth-seg {
    display: flex;
    gap: 6px;
    background: var(--surface-alt);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 26px;
}

.auth-seg-opt {
    flex: 1;
    margin: 0;
    cursor: pointer;
    position: relative;
}

.auth-seg-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-seg-opt span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 9px 10px;
    border-radius: 7px;
    transition: background-color 160ms ease, color 160ms ease;
}

.auth-seg-opt input:checked + span {
    background: #fff;
    color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(19, 27, 48, 0.10);
}

/* captcha image + code input on one line */
.captcha-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.captcha-img {
    height: 40px;
    border-radius: 6px;
    flex: 0 0 auto;
}

.captcha-row .form-control {
    flex: 1;
}

@media (max-width: 767.98px) {
    .auth-wrap {
        padding: 24px 0 48px;
    }

    .auth-card {
        padding: 24px 20px;
        margin-bottom: 16px;
        height: auto;
    }
}

/* ===================================================================
   Billing / shipping details page
=================================================================== */
.bill-wrap {
    background: var(--surface-alt);
    padding: 40px 0 64px;
}

.bill-card {
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(19, 27, 48, 0.07);
    padding: 38px 42px 34px;
}

.bill-head {
    margin-bottom: 28px;
}

.bill-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 0;
}

.bill-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-secondary), rgba(200, 32, 43, 0.35));
}

.bill-sub {
    margin: 14px 0 0;
    font-size: 14.5px;
    color: var(--text-muted);
}

/* two-column field grid */
.bill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}

.bill-field {
    position: relative;
    margin: 0;
}

.bill-field-full {
    grid-column: 1 / -1;
}

.bill-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.bill-field .form-control {
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 15px;
    color: var(--text-dark);
    padding: 10px 14px;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bill-field .form-control:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(200, 32, 43, 0.12);
    outline: none;
}

.bill-addstate {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-secondary);
    text-decoration: none;
}

.bill-addstate:hover {
    color: var(--brand-secondary-dark);
    text-decoration: underline;
}

/* attendees block */
.bill-attendees {
    margin-top: 30px;
    padding: 20px 22px;
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: 12px;
}

.bill-att-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 2px;
}

.bill-att-title span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: none;
}

.bill-att-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 14px;
}

.bill-att-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 40px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.bill-att-row input {
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    padding: 8px 12px;
    min-width: 0;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bill-att-row input:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(200, 32, 43, 0.10);
    outline: none;
}

.bill-att-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 120ms ease, transform 120ms ease-out;
}

.bill-att-btn:hover {
    background: var(--brand-primary-light);
    color: #fff;
    transform: translateY(-1px);
}

.bill-att-remove {
    background: #fdf0f1;
    color: var(--brand-secondary);
}

.bill-att-remove:hover {
    background: var(--brand-secondary);
    color: #fff;
}

/* actions row */
.bill-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.bill-secure {
    font-size: 13px;
    color: var(--text-muted);
}

.bill-secure i {
    color: var(--success);
    margin-right: 6px;
}

.bill-pay-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    background: var(--brand-secondary);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(200, 32, 43, 0.30);
    transition: background-color 140ms ease, transform 140ms ease-out, box-shadow 140ms ease-out;
}

.bill-pay-btn:hover,
.bill-pay-btn:focus {
    background: var(--brand-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(200, 32, 43, 0.38);
}

@media (max-width: 767.98px) {
    .bill-card {
        padding: 26px 18px;
        border-radius: 12px;
    }

    .bill-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bill-att-row {
        grid-template-columns: 1fr 1fr;
    }

    .bill-att-row .bill-att-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .bill-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        text-align: center;
    }

    .bill-pay-btn {
        justify-content: center;
    }
}

/* ===================================================================
   Cart page (moved from cart.php inline <style>)
=================================================================== */
/* Premium cart styling — scoped to section.cart-wrap */
section.cart-wrap {
    background: var(--surface-alt);
    padding-bottom: 60px;
}

section.cart-wrap>.container {
    padding-top: 10px;
}

.cart-wrap .ser-title {
    margin-top: 0;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.cart-wrap .botm-line {
    border-color: var(--border);
    margin: 8px 0 4px;
}

.cart-wrap .cart-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin: 8px 0 18px;
}

/* Top action bar (Empty Cart / Continue Shopping) */
.cart-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 18px;
    gap: 12px;
}

.cart-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none !important;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease-out;
    border: 1px solid transparent;
}

.cart-action-empty {
    color: var(--text-muted);
    background: #fff;
    border-color: var(--border);
}

.cart-action-empty:hover {
    color: #c0392b;
    border-color: #e8c9c6;
    background: #fbecec;
}

.cart-action-continue {
    color: var(--brand-primary);
    background: #fff;
    border-color: var(--border);
}

.cart-action-continue:hover {
    border-color: var(--brand-primary);
    background: rgba(27, 94, 155, 0.06);
}

.cart-action-btn:active {
    transform: scale(0.97);
}

/* Items card */
.cart-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.cart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}

.cart-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: .3px;
    text-transform: uppercase;
}

.cart-card-header .item-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-alt);
    padding: 4px 10px;
    border-radius: 10px;
}

.cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.cart-table thead th {
    background: var(--surface-alt);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.cart-table thead th.num {
    text-align: right;
}

.cart-table tbody td {
    padding: 18px 16px;
    border-bottom: 1px solid var(--surface-alt);
    color: var(--text-dark);
    vertical-align: middle;
    line-height: 1.45;
}

.cart-table tbody tr:last-child td {
    border-bottom: 0;
}

.cart-table .item-name {
    text-align: left;
    font-weight: 500;
}

.cart-table .item-name b {
    color: var(--text-dark);
    font-weight: 700;
}

.cart-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-dark);
    font-weight: 600;
}

.cart-table .cart-qty {
    width: 70px;
    height: 36px;
    padding: 6px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.cart-table .cart-qty:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(27, 94, 155, 0.15);
    outline: none;
}

.cart-table .rm-cell {
    text-align: center;
    width: 42px;
}

.btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    font-size: 15px;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 150ms ease, color 150ms ease, transform 120ms ease-out;
}

.btn-remove:hover {
    background: #fbecec;
    color: #c0392b;
}

.btn-remove:active {
    transform: scale(0.92);
}

.cart-update-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

.btn-update {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease-out;
}

.btn-update:hover {
    background: var(--surface-alt);
    border-color: var(--text-muted);
    color: var(--text-dark);
}

.update-hint {
    font-style: italic;
}

/* Summary card */
.cart-summary {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px 24px;
    position: sticky;
    top: 20px;
}

.cart-summary h3 {
    margin: 0 0 16px;
    padding-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: .3px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.cart-summary .sum-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.cart-summary .sum-line.discount {
    color: #c62828;
}

.cart-summary .sum-line.grand {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 18px;
    color: var(--text-dark);
    font-weight: 700;
}

.cart-summary .sum-line .amt {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.coupon-block {
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 6px 0;
}

.coupon-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.coupon-row {
    display: flex;
    gap: 8px;
}

.coupon-row #coupon_input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease-out;
}

.coupon-row #coupon_input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(27, 94, 155, 0.15);
    outline: none;
}

.coupon-btn {
    padding: 9px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease-out;
}

.coupon-btn:hover {
    background: var(--brand-primary-dark);
}

.btn-checkout {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 13px 16px;
    background: var(--brand-secondary-dark);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color 150ms ease, transform 120ms ease-out;
}

.btn-checkout:hover {
    background: var(--brand-secondary);
}

.btn-checkout:active {
    transform: scale(0.99);
}

.trust-line {
    text-align: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
    letter-spacing: .3px;
}

.trust-line .fa {
    color: var(--success);
}

/* Empty-cart state */
.cart-empty {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 28, 40, .05);
    padding: 50px 30px;
    text-align: center;
    margin-top: 14px;
}

.cart-empty .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 24px;
    margin-bottom: 16px;
}

.cart-empty .title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.cart-empty .sub {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 22px;
}

/* Flash message */
.cart-flash {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin: 14px 0 0;
    border-radius: 8px;
    background: var(--success-bg);
    color: var(--success);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--success-border);
}

.cart-flash .fa {
    font-size: 18px;
}

@media (max-width: 991px) {
    .cart-summary {
        position: static;
        margin-top: 16px;
    }
}

.cart-action-btn:active,
.coupon-btn:active,
.cart-update-row button:active {
    transform: scale(0.97);
}

/* ===================================================================
   Industries / category page (moved from category.php inline <style>)
=================================================================== */
        /* ===== Industries grid ===== */
        .ind-section{ background:var(--surface-alt); }
        .ind-head{ text-align:center; max-width:640px; margin:0 auto 32px; }
        .ind-head h2{ font-size:30px; font-weight:700; color:var(--text-dark); margin:0 0 8px; }
        .ind-head p{ color:var(--text-muted); font-size:15px; margin:0; }

        .ind-card{
            display:flex;
            flex-direction:column;
            height:100%;
            background:#fff;
            border:1px solid var(--border);
            border-radius:14px;
            padding:20px;
            box-shadow:0 1px 3px rgba(28,43,54,0.05);
            transition:transform 200ms cubic-bezier(0.23,1,0.32,1), box-shadow 200ms ease, border-color 200ms ease;
            opacity:0; transform:translateY(12px);
            animation:indIn 380ms cubic-bezier(0.23,1,0.32,1) forwards;
        }
        @keyframes indIn{ to{ opacity:1; transform:translateY(0); } }
        @media (hover:hover){
            .ind-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(28,43,54,0.10); border-color:var(--brand-teal); }
        }
        .ind-card-top{ display:flex; align-items:center; gap:14px; }
        .ind-icon{
            flex:0 0 auto;
            width:46px; height:46px;
            display:flex; align-items:center; justify-content:center;
            border-radius:10px;
            background:rgba(27,94,155,0.08);
            color:var(--brand-primary);
            font-size:18px;
        }
        .ind-name{ flex:1 1 auto; min-width:0; }
        .ind-name a{
            font-size:16px; font-weight:700; color:var(--text-dark);
            text-decoration:none; line-height:1.3;
            transition:color 150ms ease;
        }
        .ind-card:hover .ind-name a{ color:var(--brand-primary); }
        .ind-count{ display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }
        .ind-toggle{
            flex:0 0 auto; width:30px; height:30px;
            display:flex; align-items:center; justify-content:center;
            border:1px solid var(--border); border-radius:8px;
            background:#fff; color:var(--text-muted); cursor:pointer;
            transition:background-color 150ms ease, color 150ms ease, transform 200ms ease;
        }
        .ind-toggle:hover{ background:var(--surface-alt); color:var(--brand-primary); }
        .ind-toggle.open{ transform:rotate(180deg); color:var(--brand-primary); }
        /* subcategory list */
        .ind-subs{ list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--border); display:none; }
        .ind-subs li{ margin:0 0 6px; }
        .ind-subs a{
            display:inline-block; font-size:13px; color:var(--brand-teal);
            text-decoration:none; padding:4px 0;
        }
        .ind-subs a:hover{ color:var(--brand-primary); text-decoration:underline; text-underline-offset:3px; }

        @media (prefers-reduced-motion:reduce){ .ind-card{ animation:none; opacity:1; transform:none; } }


/* ===================================================================
   Contact page
=================================================================== */
.contact-section{ background:var(--surface-alt); }
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:28px;
    align-items:stretch;
    max-width:1100px;
    margin:0 auto;
}
/* info panel — brand surface */
.contact-info-panel{
    background:var(--brand-gradient);
    color:#fff;
    border-radius:16px;
    padding:40px 34px;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.contact-title{ font-size:30px; font-weight:700; color:#fff; margin:0; }
.contact-lead{ font-size:15px; line-height:1.6; color:rgba(255,255,255,0.9); margin:0 0 8px; }
.contact-item{ display:flex; align-items:flex-start; gap:14px; }
.contact-ico{
    flex:0 0 auto; width:42px; height:42px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px; background:rgba(255,255,255,0.16);
    color:#fff; font-size:16px;
}
.contact-item-label{ display:block; font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:2px; }
.contact-item-val{ display:block; font-size:15px; color:#fff; text-decoration:none; }
a.contact-item-val:hover{ text-decoration:underline; text-underline-offset:3px; }

/* form card */
.contact-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:34px 32px;
    box-shadow:0 1px 3px rgba(28,43,54,0.05);
}
.contact-form-title{ font-size:20px; font-weight:700; color:var(--text-dark); margin:0 0 4px; }
.contact-form-sub{ font-size:14px; color:var(--text-muted); margin:0 0 22px; }
.contact-field{ margin-bottom:14px; }
.contact-field input,
.contact-field textarea{
    width:100%;
    padding:12px 14px;
    font-size:14px;
    color:var(--text-body);
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    transition:border-color 150ms ease, box-shadow 150ms ease;
}
.contact-field textarea{ resize:vertical; min-height:120px; }
.contact-field input::placeholder,
.contact-field textarea::placeholder{ color:var(--text-muted); }
.contact-field input:focus,
.contact-field textarea:focus{
    outline:none;
    border-color:var(--brand-primary);
    box-shadow:0 0 0 3px rgba(27,94,155,0.12);
}
.contact-submit{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:6px; padding:12px 28px;
    background:var(--brand-primary); color:#fff;
    border:0; border-radius:10px;
    font-size:15px; font-weight:700; cursor:pointer;
    transition:background-color 160ms ease, transform 120ms ease-out, box-shadow 160ms ease;
}
.contact-submit:hover{ background:var(--brand-primary-dark); box-shadow:0 6px 18px rgba(27,94,155,0.28); }
.contact-submit:active{ transform:scale(0.98); }
.contact-success,
.contact-alert{
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; margin-bottom:18px;
    border-radius:10px;
    font-size:14px; font-weight:600;
}
.contact-success{ background:var(--success-bg); color:var(--success); border:1px solid var(--success-border); }
.contact-alert.error{ background:#fbecec; color:#c0392b; border:1px solid #e8c9c6; }
.contact-captcha{ display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.contact-captcha b{ color:var(--brand-primary); letter-spacing:2px; }
@media (max-width:767.98px){
    .contact-grid{ grid-template-columns:1fr; gap:18px; }
    .contact-info-panel{ padding:30px 24px; }
    .contact-card{ padding:26px 22px; }
}


/* ===================================================================
   Speakers page — card grid
=================================================================== */
.spk-section{ background:var(--surface-alt); }
.spk-head{ text-align:center; max-width:640px; margin:0 auto 32px; }
.spk-head h2{ font-size:30px; font-weight:700; color:var(--text-dark); margin:0 0 8px; }
.spk-head p{ color:var(--text-muted); font-size:15px; margin:0; }

.spk-card{
    height:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(28,43,54,0.05);
    transition:transform 200ms cubic-bezier(0.23,1,0.32,1), box-shadow 200ms ease, border-color 200ms ease;
    opacity:0; transform:translateY(12px);
    animation:spkIn 380ms cubic-bezier(0.23,1,0.32,1) forwards;
}
@keyframes spkIn{ to{ opacity:1; transform:translateY(0); } }
@media (hover:hover){
    .spk-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(28,43,54,0.10); border-color:var(--brand-teal); }
}
.spk-photo{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--surface-alt); }
.spk-photo .team-img{ object-position:center top; }
.spk-photo .team-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 320ms cubic-bezier(0.23,1,0.32,1); }
@media (hover:hover){ .spk-card:hover .spk-photo .team-img{ transform:scale(1.05); } }
.spk-body{ padding:14px 16px 16px; }
.spk-name{ margin:0 0 8px; font-size:15px; font-weight:700; line-height:1.3; }
.spk-name a{ color:var(--text-dark); text-decoration:none; }
.spk-card:hover .spk-name a{ color:var(--brand-primary); }
.spk-actions{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.spk-link{ font-size:13px; font-weight:600; color:var(--brand-teal); text-decoration:none; }
.spk-link:hover{ color:var(--brand-primary); text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .spk-card{ animation:none; opacity:1; transform:none; } }


/* ===================================================================
   Footer popups / modals (Speaker Opportunity, Suggest, Subscribe, Unsubscribe)
=================================================================== */
.blacky{
    position:fixed; inset:0; z-index:2000;   /* above sticky navbar (~1020) */
    display:none;                      /* JS fadeIn sets it to block */
    padding:20px;
    /* center the card */
    align-items:flex-start; justify-content:center;
}
.blacky[style*="block"]{ display:flex !important; }   /* when JS reveals it, use flex centering */
.blacky_cover{
    position:fixed; inset:0; z-index:-1;
    background:rgba(15,28,40,0.55);
    backdrop-filter:blur(2px);
}
.whitey{
    position:relative;
    width:100%;
    max-width:760px;
    max-height:88vh;
    margin:40px auto;
    background:#fff;
    box-shadow:0 24px 60px rgba(15,28,40,0.28);
    padding:30px 36px 34px;
    overflow-y:auto;
    animation:modalIn 240ms cubic-bezier(0.23,1,0.32,1);
}
.whitey_unsubscribe{ max-width:880px; }   /* two-panel unsubscribe is wider */
@keyframes modalIn{ from{ opacity:0; transform:translateY(10px) scale(0.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .whitey{ animation:none; } }

/* close button */
.popup_cross{
    position:absolute; top:14px; right:16px;
    width:34px; height:34px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:8px; color:var(--text-muted);
    text-decoration:none; font-size:20px; line-height:1;
    transition:background-color 150ms ease, color 150ms ease;
    z-index:2;
}
.popup_cross img{ display:none; }                 /* hide old remove_icon.gif */
.popup_cross::before{ content:"\00d7"; }          /* clean × glyph */
.popup_cross:hover{ background:var(--surface-alt); color:var(--text-dark); }

/* form fields inside popups (popup/*.php use plain inputs/labels) */
/* 2-per-row form grid inside popups */
.whitey .payment-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 22px;
    align-items:start;
}
.whitey .payment-form .form-group{ margin:0; }
/* fields that should span the full width (both columns) */
.whitey .payment-form .form-group:has(textarea),
.whitey .payment-form .form-group:has(select),
.whitey .payment-form .form-group:has(input[type=radio]),
.whitey .payment-form #CreateAccountTextDiv,
.whitey .payment-form .form-action,
.whitey .payment-form > p,
.whitey .payment-form > input[type=submit],
.whitey .payment-form > .btn-success,
.whitey .payment-form .full-row{ grid-column:1 / -1; }
/* reset the old bootstrap col widths inside the grid */
.whitey .payment-form .col-sm-3,
.whitey .payment-form .col-sm-9{ width:100%; max-width:100%; flex:none; padding:0; }
.whitey .payment-form .form-label{ display:block; margin:0 0 6px; font-size:13px; font-weight:600; color:var(--text-dark); }
.whitey .payment-form .btn-success,
.whitey .payment-form input[type=submit]{ float:none !important; }
@media (max-width:575.98px){
    .whitey .payment-form{ grid-template-columns:1fr; }   /* stack on mobile */
}

.whitey label{ display:block; font-size:13px; font-weight:600; color:var(--text-dark); margin:14px 0 6px; }
.whitey input[type=text], .whitey input[type=email], .whitey input[type=tel],
.whitey input[type=number], .whitey select, .whitey textarea{
    width:100%; padding:11px 13px; font-size:14px; color:var(--text-body);
    background:#fff; border:1px solid var(--border); border-radius:10px;
    transition:border-color 150ms ease, box-shadow 150ms ease;
}
.whitey textarea{ resize:vertical; min-height:90px; }
.whitey input:focus, .whitey select:focus, .whitey textarea:focus{
    outline:none; border-color:var(--brand-primary);
    box-shadow:0 0 0 3px rgba(27,94,155,0.12);
}
.whitey h2, .whitey h3, .whitey h4{ text-align:center; color:var(--text-dark); margin:0 0 6px; }
/* brand-styled submit buttons inside popups */
.whitey button[type=submit], .whitey input[type=submit], .whitey .btn-form{
    margin-top:18px; padding:11px 26px;
    background:var(--brand-primary); color:#fff;
    border:0; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer;
    transition:background-color 160ms ease, transform 120ms ease-out;
}
.whitey button[type=submit]:hover, .whitey .btn-form:hover{ background:var(--brand-primary-dark); }
.whitey button[type=submit]:active{ transform:scale(0.98); }
@media (max-width:575.98px){ .whitey{ padding:22px 18px; margin:20px auto; } }


/* ===================================================================
   About page — editorial layout
=================================================================== */
.about-section{ background:var(--surface); }
/* hero */
.about-hero{ text-align:center; margin-bottom:36px; }
.about-eyebrow{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase; color:var(--brand-teal);
    background:rgba(25,118,133,0.08); padding:5px 14px; border-radius:999px; margin-bottom:16px;
}
.about-title{
    font-size:34px; line-height:1.2; font-weight:800; color:var(--text-dark);
    margin:0 auto 14px; max-width:48ch;
}
.about-lead{
    font-size:17px; line-height:1.6; color:var(--text-muted);
    max-width:62ch; margin:0 auto;
}
/* prose — constrained line length */
.about-prose{ max-width:98ch; margin:0 auto 32px; }
.about-prose p{
    font-size:15.5px; line-height:1.75; color:var(--text-body); margin:0 0 16px;
}
/* materials as chips */
.about-materials{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    margin:0 0 36px;
}
.about-chip{
    display:flex; align-items:center; gap:12px;
    padding:16px 18px;
    background:var(--surface-alt);
    border:1px solid var(--border);
    border-radius:12px;
    font-size:15px; font-weight:600; color:var(--text-dark);
    transition:transform 180ms cubic-bezier(0.23,1,0.32,1), box-shadow 180ms ease, border-color 180ms ease;
    opacity:0; transform:translateY(10px);
    animation:aboutIn 360ms cubic-bezier(0.23,1,0.32,1) forwards;
}
.about-chip:nth-child(1){ animation-delay:0ms; }
.about-chip:nth-child(2){ animation-delay:50ms; }
.about-chip:nth-child(3){ animation-delay:100ms; }
.about-chip:nth-child(4){ animation-delay:150ms; }
.about-chip:nth-child(5){ animation-delay:200ms; }
.about-chip:nth-child(6){ animation-delay:250ms; }
@keyframes aboutIn{ to{ opacity:1; transform:none; } }
@media (hover:hover){
    .about-chip:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(28,43,54,0.08); border-color:var(--brand-teal); }
}
.about-chip i{
    flex:0 0 auto; width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px; background:rgba(27,94,155,0.08); color:var(--brand-primary); font-size:16px;
}
/* closing CTA */
.about-cta{
    text-align:center; max-width:620px; margin:0 auto;
    padding:28px 30px; border-radius:16px;
    background:var(--brand-gradient); color:#fff;
}
.about-cta p{ font-size:15px; line-height:1.6; color:rgba(255,255,255,0.92); margin:0 0 18px; }
.about-cta-btn{
    display:inline-block; padding:11px 28px;
    background:#fff; color:var(--brand-primary);
    border-radius:10px; font-size:15px; font-weight:700; text-decoration:none;
    transition:transform 120ms ease-out, box-shadow 160ms ease;
}
.about-cta-btn:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.18); color:var(--brand-primary-dark); }
.about-cta-btn:active{ transform:scale(0.98); }
@media (prefers-reduced-motion:reduce){ .about-chip{ animation:none; opacity:1; transform:none; } }
@media (max-width:767.98px){
    .about-title{ font-size:26px; }
    .about-materials{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
    .about-materials{ grid-template-columns:1fr; }
}