:root {
    --primary-color: #286efb;
    --primary-rgb: 0,33,94;
    --primary-hover-color: #2361dd;
    --primary-hover: #2361dd;
}

body{
    font-family: 'DM Sans', sans-serif !important;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'DM Sans', sans-serif !important;
}

a{
    color:#286efb;
    text-decoration:none;
    background-color:transparent
}

a:hover {
    color: #286efb;
    text-decoration: none;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #286efb !important;
    border-color: #286efb !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #286efb;
    border-color: #286efb;
}
.btn.btn-primary:hover {
    box-shadow: 0 4px 11px rgba(0,33,94,.3);
}
.template-box:hover{
    border-color: #286efb;
}
.btn-primary.disabled,.btn-primary:disabled{
    color:#fff;
    background-color:#286efb;
    border-color:#286efb}

.btn-outline-primary{
    color:#286efb;
    border-color:#286efb}
.btn-outline-primary:hover{
    color:#fff;
    background-color:#286efb;
    border-color:#286efb}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{
    color:#286efb;
    background-color:transparent
}
.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{
    color:#fff;
    background-color:#286efb;
    border-color:#286efb}

.btn-link{
    font-weight:500;
    color:#286efb;
    text-decoration:none
}

.dropdown-item:focus,.dropdown-item:hover{
    background: rgba(0,33,94,.05) !important;
    transition: 0.1s;
    color:#286efb !important;
    text-decoration:none;
    background-color:transparent
}
.dropdown-item.active,.dropdown-item:active{
    color:#286efb;
    text-decoration:none;
    background-color:transparent
}

.custom-file-input:focus~.custom-file-label{
    border-color:#286efb;
    box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}
.home-search form:hover {
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(142, 151, 158, 0.15) 0px 4px 19px;
    border: 1px solid #286efb !important;
}

.bg-cover-empty {
  position: relative;
  min-height: 250px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  background: rgba(0,33,94, .8) !important;
}

.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{
    color:#286efb;
}
.navbar-light .navbar-nav .nav-link.disabled{
    color:rgba(0,0,0,.3)
}
.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{
    color:#286efb}
.navbar-light .navbar-text a{
    color:#286efb}
.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{
    color:#286efb}

.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{
    color:#286efb}
.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{
    color:#286efb}

.badge-primary{
    color:#fff;
    background-color:#286efb}

.bg-primary{
    background-color:#286efb!important
}

.text-primary{
    color:#286efb!important
}

.btn.btn-light-primary{
    background:rgba(190, 190, 190, 0.1);
    color:#286efb}
.btn.btn-light-primary:hover{
    color:#fff;
    background-color:#286efb;
    box-shadow:0 4px 11px rgba(40,110,251,.35)
}

.badge-primary-soft{
    background-color: rgba(106,116,123,.1);
    color: #286efb;
}
a.badge-primary-soft:focus,a.badge-primary-soft:hover{
    background-color:rgba(106,116,123,.1);
    color:#286efb}

.badge-white-soft.active{
    background-color:#fff;
    color:#286efb}
.badge-white-soft.active:focus,.badge-white-soft.active:hover{
    background-color:#f6f9fc;
    color:#286efb}

.bg-primary::-moz-selection{
    color:#286efb;
    background:#fff
}
.bg-primary::selection{
    color:#286efb;
    background:#fff
}
.bg-primary{
    color:#286efb;
    background:#fff
}

.svg-injector{
    width:auto;
    height:auto;
    fill:none;
    stroke:currentcolor;
    stroke-width:0;
    stroke-linecap:round;
    stroke-linejoin:round;
    color:#286efb}

.breadcrumb .breadcrumb-item a{
    color:#286efb}

::-moz-selection{
    color:#fff;
    background:#286efb}
::selection{
    color:#fff;
    background:#286efb}
::-moz-selection{
    color:#fff;
    background:#286efb}
.navbar-dark .navbar-text a{
    color:#286efb}
.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{
    color:#286efb}

.tab-card-header > .nav-tabs > li > a.active {
    border: 0;
    border-bottom: 2px solid #286efb;
    margin-right: 0;
    color: #737373;
    padding: 8px 5px;
}

.scroll-to-top{
    font-size:20px;
    text-align:center;
    color: #286efb;
    background-color: rgba(190, 190, 190, 0.1);
    text-decoration:none;
    position:fixed;
    bottom:20px;
    right:20px;
    display:none;
    border-radius:50%;
    width:35px;
    height:35px;
    line-height:35px;
    z-index:9999;
    outline:0;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease
}
.scroll-to-top i{
    color:#286efb}
.scroll-to-top:hover{
    color:#fff;
    background:#286efb}
.icon-style-two .icon{
    display:inline-block;
    vertical-align:middle;
    border-radius:50px;
    padding:10px;
    line-height:2.2rem;
    text-align:center;
    background-color:rgba(190, 190, 190, 0.1);
    color:#286efb;
    height:3.5rem;
    width:3.5rem
}

.list-style1 i{
    color:#286efb;
    font-size:12px;
    background:rgba(190, 190, 190, 0.1);
    border-radius:30px;
    padding:7px;
    line-height:13px
}

.hover-primary:hover{
    color:#286efb;
    transition:all .3s ease-in-out
}

.fill-primary{
    fill:#286efb}

.overlay-primary:before{
    background-color:#286efb
}

@media (max-width:991.98px){
    .navbar-dark .navbar-nav .nav-link:hover{
        color:#6a747b;
        color:#286efb    }
    .navbar-dark .navbar-nav .nav-link:focus{
        color:#286efb    }
}


.footer-list-style li a:hover{
    color:#286efb}



.footer-list-style-two li a:hover{
    color:#286efb;
    text-decoration: underline;
}

.footer-title-style2:after{
    position:absolute;
    content:'';
    background:#286efb;
    width:60px;
    height:2px;
    bottom:2px;
    left:0;
    right:0;
    margin:0 auto
}

.social-icon li a{
    font-size:1.16rem;
    color:#286efb}

.social-icon3 li a{
    width:35px;
    height:35px;
    line-height:35px;
    border:1px solid #286efb;
    text-align:center;
    border-radius:4px;
    font-size:15px;
    display:inline-block
}
.social-icon3 li a:hover{
    background-color:#286efb;
    color:#fff
}

.tab-style-one .resp-tabs-list li.resp-tab-active{
    border:1px solid #286efb;
    border-bottom:none;
    border-color:#286efb!important;
    margin-bottom:-1px;
    border-top:4px solid #286efb!important;
    border-bottom:0 #fff solid;
    border-bottom:none;
    background-color:#fff;
    color:#286efb;
    -ms-border-top-left-radius:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-top-left-radius:5px;
    -o-border-top-left-radius:5px;
    -ms-border-top-right-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-top-right-radius:5px;
    -o-border-top-right-radius:5px;
    -ms-border-radius-top-left:5px;
    -webkit-border-radius-top-left:5px;
    -moz-border-radius-top-left:5px;
    -o-border-radius-top-left:5px;
    -ms-border-radius-topright:5px;
    -webkit-border-radius-topright:5px;
    -moz-border-radius-topright:5px;
    -o-border-radius-topright:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-top:none!important;
    border-left:none!important;
    border-right:none!important
}


.tab-style-one .resp-tabs-list li.resp-tab-active:after{
    content:"";
    background:#286efb;
    height:1px;
    width:100%;
    position:absolute;
    bottom:-1px;
    left:0;
    margin:0 auto;
    right:0
}

.html-code .copy-clipboard:hover{
    background:#286efb;
    color:#fff!important
}

ul.pagination li a {
    background: #f1f1f1;
    padding: 10px 20px;
    color: #286efb;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    margin-right: 4px;
}

ul.pagination li a:hover {
    background:#286efb;
    color: #fff !important;
}

.pagination>.active>a{ 
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #286efb !important;
    border-color: #514adf !important;
}

.icon-plan i {
    background-color: rgba(190, 190, 190, 0.1);
    border-color: #286efb;
    font-size: 16px;
    color: #286efb;
    padding: 20px;
    border-radius: 50px;
}

.purple .price-tag {
  color: #286efb;
}

.ui-state-default:hover {
	background: rgba(190, 190, 190, 0.1);
	color: #286efb;
    border: 1px solid #286efb;
}

.ui-state-active {
    background: #286efb;
    color: #fff;
    border: 1px solid #286efb;
}

.ui-state-default.ui-state-active:hover {
    background: #286efb;
    color: #fff;
    border: 1px solid #286efb;
}



.staff-rdo > input + div:hover{
    border: 2px solid #286efb;
}

.staff-rdo > input:checked + div {
    background-color: #fff;
    border: 2px solid #286efb;
    border-radius: 4px;
}

.bg-primary-soft{
    background-color: rgba(190, 190, 190, 0.1);
    color: #286efb;
}

.ui-timepicker-standard .ui-state-hover {
    border: 1px solid #fff !important;
    background-color: rgba(190, 190, 190, 0.1) !important;
    color: #286efb !important;
}

.learn-more{
    color: #286efb !important;
    text-decoration: underline;
}

.btn-aceptar{
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px !important;
    color: #286efb !important;
    border: 1px solid #286efb !important;
    background-color: #fff !important;
    font-size: 12px !important;
}

.btn-aceptar:hover{
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px !important;
    color: #fff !important;
    border: 1px solid #286efb !important;
    background-color: #286efb !important;
    font-size: 12px !important;
}

.service-rdo > input + div:hover{
    border: 2px solid #286efb;
}

.service-rdo > input{ 
    visibility: hidden; 
    position: absolute;
}

.service-rdo > input:checked + div {
    background-color: #fff;
    border: 2px solid #286efb;
    border-radius: 4px;
}

.btn-primary {
    /* BRAND-2b, 5 Sep 2026: !important stripped from this pair. It was here to
       beat home3.css, but it also beat the BRAND-2 accent block further down in
       this same file, which is why the CTAs stayed navy after the palette
       deploy. De-escalated at source rather than answering it with more weight. */
    color: #fff;
    background-color: #286efb;
    border-color: #286efb;
}

.text-primary {
    color: #286efb !important;
}

a h1:hover, a.h1:hover, a h2:hover, a.h2:hover, a h3:hover, a.h3:hover, a h4:hover, a.h4:hover, a h5:hover, a.h5:hover, a h6:hover, a.h6:hover {
    color: #286efb !important;
}

.nav-link.text-dark:hover {
    transition: none;
    color: #286efb !important;
}

.sidebar-icon i {
    color: #286efb !important;
}

.ui-datepicker-header {
    height: 50px;
    line-height: 50px;
    color: #fff;
    background: #286efb;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px;
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
}

.ui-datepicker-calendar thead tr th span {
    display: block;
    width: 40px;
    color: #555;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 15px;

}

.pick-date span {
    color: #286efb;
    border-bottom: 1px dotted #2d54de;
}

a.hover:hover {
    transition: none !important;
    color: #286efb !important; 
}

.cart-num {
    position: absolute;
    background-color: #286efb;
    color: #fff;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    top: 13px;
    left: 8px;
    font-size: 11px;
    font-style: normal;
}

.company-link {
    transition: none;
    color: #286efb;
}

.event_badge {
    position: absolute;
    height: 65px;
    width: 70px;
    background-color: #286efb;
    color: #fff;
    top: 10px;
    right: 10px;
    border-radius: 2px;
}

.link-hover:hover{
    color: #286efb !important;
    transition: all none !important;
    text-decoration: underline;
}


.template-box:hover .circle-icon {
   background-color: #286efb !important;
   color: #fff;
   transition: ease-in-out 0.3s !important;
}

.template-box:hover p.template-box-text {
   color: #286efb !important;
}

.text-gradnt{
    background: -webkit-linear-gradient(#286efb, #CF9FFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav:not(.nav-pills) .nav-link.active{
    color: #286efb !important;
}

.nav .nav-link:not(.active):hover {
    color: #286efb !important;
    transition: none;
}

.nav-tabs .nav-link:hover {
    border-bottom: 2px solid #286efb !important;
}

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    color: #286efb !important;
    background: rgba(0,33,94,.1) !important;
}

.owl-theme .owl-dots .owl-dot span {
    background: #286efb !important;
}

.owlstyle-2:hover {
    background: #286efb !important;
    color: #fff;
    padding: 10px 12px;
    border-radius: 50px;
    font-size: 18px;
}

.accordion>.card .btn-link:after {
    background-color: #286efb !important;
}

.btn-dark {
    color: #fff;
    background-color: #286efb !important;
    border-color: #286efb !important;
}

.workflow-img {
    border: 1px solid rgba(0,33,94,.1) !important;
}


.template-box.feature:hover{
    border: 1px solid #286efb;
    background: rgba(0,33,94,.8) !important;
}

.template-box.feature:hover .circle-icon {
   background-color: #fff !important;
   color: #fff;
   transition: ease-in-out 0.3s !important;
}

.template-box.feature:hover p {
   color: #fff !important;
}

.day:hover {
  border: 2px solid rgba(0,33,94,.6) !important;
}

.day.active {
  background: rgba(0,33,94,.05) !important;
  border: 2px solid rgba(0,33,94,.6) !important;
  color: #286efb;
}

.day.active p {
  color: #286efb !important;
}

.time_btn.active {
    border: 1px solid rgba(0,33,94,.9) !important;
    background: rgba(0,33,94,.1) !important;
    color: #286efb !important;
}

.btn-black:hover {
    color: #fff;
    background-color: rgba(0,33,94,.8) !important;
    border-color: rgba(0,33,94,.8) !important;
}


/* ============================================================================
   DESIGN TOKENS — Deploy 3A, 4 September 2026
   ----------------------------------------------------------------------------
   This file is the last stylesheet on every page (index 20 of 21 in
   document.styleSheets), so a :root block here wins the cascade over
   home3.css's own :root. That is already how --primary-color reaches the
   theme; this block extends the same mechanism to the rest of the system.

   The page was measured, not guessed: 20 distinct text colours, 17 distinct
   box-shadows and 12 distinct border-radii render on the homepage, drawn
   from three greyscales layered by three different authors (the original
   template's #333/#666/#888, a Tailwind-ish --gray-* scale, and a custom
   #1A2B36/#4A5568/#718096 set). Rather than edit hundreds of rules, the
   legacy variable names are re-pointed at four ink roles below. Every rule
   that already says var(--text-color) / var(--gray-700) / var(--text-muted)
   collapses onto the system automatically, with no selector touched.

   Hardcoded literals (#666, 0 5px 20px rgba(0,0,0,.05), 0.85rem) are NOT
   reachable this way and are handled separately in Deploy 3B, in the
   home3-part*.css sources.
   ============================================================================ */

:root{
    /* --- ink: 4 text roles replacing 20 rendered colours --- */
    --ink-900:#0F172A;   /* headings */
    --ink-700:#334155;   /* body */
    --ink-500:#64748B;   /* secondary, meta */
    --ink-400:#94A3B8;   /* disabled, placeholder */
    --line:#E2E8F0;      /* borders, dividers */
    --surface:#FFFFFF;
    --surface-alt:#F8FAFC;
    --brand:#286efb;
    --accent:#F26522;    /* the logo orange; see note in Deploy 3B */

    /* --- re-point the three legacy greyscales onto the ink roles --- */
    --dark-text:var(--ink-900);
    --text-color:var(--ink-700);
    --text-muted:var(--ink-500);
    --gray-900:var(--ink-900);
    --gray-800:var(--ink-900);
    --gray-700:var(--ink-700);
    --gray-600:var(--ink-700);
    --gray-500:var(--ink-500);
    --gray-400:var(--ink-400);
    --gray-300:var(--line);
    --gray-200:var(--line);
    --gray-100:var(--surface-alt);
    --light-bg:var(--surface-alt);
    --light-color:var(--surface-alt);
    --card-bg:var(--surface);
    --dark-color:var(--ink-900);

    /* --- elevation: 4 levels replacing 17 --- */
    --shadow-sm:0 1px 2px rgba(15,23,42,.06);
    --shadow-md:0 4px 12px rgba(15,23,42,.08);
    --shadow-lg:0 12px 32px rgba(15,23,42,.10);
    --shadow-brand:0 8px 24px rgba(0,33,94,.18);
    --box-shadow:var(--shadow-md);

    /* --- radius: 4 steps replacing 12 --- */
    --r-sm:8px;      /* inputs, chips, buttons */
    --r-md:14px;     /* cards */
    --r-lg:24px;     /* panels, hero card */
    --r-pill:999px;
    --border-radius:var(--r-md);

    /* --- type: 8 steps, no fractional values --- */
    --fs-display:56px; --lh-display:60px;
    --fs-h1:40px;      --lh-h1:46px;
    --fs-h2:32px;      --lh-h2:40px;
    --fs-h3:24px;      --lh-h3:32px;
    --fs-h4:19px;      --lh-h4:28px;
    --fs-body:16px;    --lh-body:26px;
    --fs-sm:14px;      --lh-sm:22px;
    --fs-xs:12px;      --lh-xs:18px;

    /* home3.css's :root declares Inter for --font-sans, --body-font and
       --heading-font, but this file's body/h1-h6 rules load later and set
       'DM Sans' with !important -- so the site has always rendered in
       DM Sans while three variables claimed otherwise. Anyone editing
       those variables was editing something with no effect. Point them at
       the font that actually renders. */
    --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --body-font:var(--font-sans);
    --heading-font:var(--font-sans);
}

/* --border-radius now carries the card value (14px), which is its dominant
   use -- .card, .mentor-card, .feature-card, .process-card all read it.
   Buttons are the one consumer that wants the tighter 8px, so pin them. */
.btn{
    border-radius:var(--r-sm) !important;
}
.navbar .btn,
.btn-pill,
.mentor-category-pill{
    border-radius:var(--r-pill) !important;
}

/* Leading. Measured across the homepage, only three selectors sit at a
   line-height ratio of 1.00: .category-count (24 instances), .badge (3) and
   .cta-stat-number (2). Headings at 1.20-1.30 are correct display leading
   and are deliberately left alone. .cta-stat-number is a single large
   numeral where 1.00 is intentional, so only the first two are corrected. */
.category-count{
    line-height:1.4 !important;
}
.badge{
    line-height:1.4 !important;
}

/* E2E-3 (4 Sep 2026): mentor sign-up was effectively blocked.
   select2 initialises the Categories and Skills multiselects while the register
   form's step-2 panel is still display:none. Its width:'resolve' default cannot
   measure a hidden element, so it fell back to writing inline width:auto and both
   controls collapsed to ~23px. Clicking still opened the dropdown, but at 23px
   wide the option labels rendered as an unreadable vertical sliver ("Se", "Inf",
   "Te"...). Both fields are required, so a mentor could not finish signing up.
   Verified against the live DOM: the collapsed width came from select2's inline
   style, not from any stylesheet rule, so forcing it here in CSS holds no matter
   what order the JS initialises in. Scoped by adjacent sibling to these two
   selects only, so the inline-sized Country and Time Zone controls are untouched. */
select[name="category[]"] + .select2-container,
select[name="skills[]"] + .select2-container{
    width:100% !important;
    max-width:100%;
}
select[name="category[]"] + .select2-container .select2-selection--multiple,
select[name="skills[]"] + .select2-container .select2-selection--multiple{
    min-height:44px;
    border-radius:var(--r-sm);
    border:1px solid var(--line);
    padding:4px 8px;
}
/* select2 also writes the dropdown width inline from the collapsed control, so the
   panel needs a floor of its own or it stays a sliver even once the box is fixed. */
.select2-dropdown{
    min-width:260px;
}

/* ======================================================================
   AVATAR-1 (4 Sep 2026) -- initials avatars for photoless mentors.

   Measured against the live site: 50 of 115 mentors have no photograph, so
   43% of every directory page painted the identical grey silhouette from
   assets/images/no-photo-sm.png. Forty-three percent of the faces on a
   people-directory being the same grey blob does not read as "photo
   pending", it reads as an abandoned site. The initials tile does not add
   any information the silhouette lacked -- it removes a signal of absence
   that was costing more than the missing photo itself.

   The initials live in a real <span>, not a pseudo-element, because both
   were already occupied: .mentor-card .uitem-bg:before carries the card
   hover gradient and .mentor-img::after carries its own. Either pseudo
   would have been overwritten by a more specific existing rule.

   Still a mitigation. The photographs are still missing.
   ====================================================================== */
.hm-initials{
    position:relative;
    background-image:none !important;
}
.hm-initials-text{
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    line-height:1;
    letter-spacing:.02em;
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none;
    user-select:none;
    z-index:1;
    font-size:32px;
}

/* Per-context sizing. The avatar boxes on this site run from 72px to
   300px, and one font-size cannot serve both, so each container names its
   own. A percentage font-size would resolve against the parent's font
   size rather than its width, and container queries would need
   container-type on boxes that already carry absolutely-positioned
   badges -- explicit sizes are the boring, safe answer. */
.uitem-bg .hm-initials-text          { font-size:72px; }
.mentor_area .uitem-bg .hm-initials-text { font-size:40px; }  /* 150px box */
.mentor-img .hm-initials-text        { font-size:64px; }
.profile-avatar .hm-initials-text    { font-size:64px; }
.similar-mentor-img .hm-initials-text{ font-size:28px; }
.hm-avatar-72 .hm-initials-text      { font-size:26px; }

@media (max-width:767.98px){
    .profile-avatar .hm-initials-text{ font-size:34px; }   /* 96px box */
    .uitem-bg .hm-initials-text      { font-size:56px; }
}

/* Eight tints, deliberately muted rather than a rainbow: this is a
   professional directory, and eight saturated circles per row would look
   like a colour test. All eight clear 4.5:1 against white text.
   !important because .mentor-card .uitem-bg sets background-color:#f0f2f5
   at higher specificity than a single class. */
.hm-tint-1{ background-color:#1E3A5F !important; }
.hm-tint-2{ background-color:#2C5F7C !important; }
.hm-tint-3{ background-color:#3D6B5A !important; }
.hm-tint-4{ background-color:#6B4E71 !important; }
.hm-tint-5{ background-color:#8C5A3C !important; }
.hm-tint-6{ background-color:#4A5568 !important; }
.hm-tint-7{ background-color:#2F6F6B !important; }
.hm-tint-8{ background-color:#7A4A52 !important; }

/* Boxes that used to be <img> and are now background-image divs need the
   sizing the img gave them for free. */
.hm-avatar-cover{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.hm-avatar-72{
    width:72px;
    height:72px;
    flex:0 0 72px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.similar-mentor-img{ flex:0 0 80px; }

/* ======================================================================
   E2E-C (4 Sep 2026) -- the whole mentor card is the link, not just the
   photo.

   Measured on /mentors: the only anchor in a card wrapped the 288x280
   photo. Clicking the mentor's NAME did nothing, and so did clicking
   their job title, their categories, their price -- roughly two thirds of
   the card was dead. People click names.

   Done with a stretched ::after on the anchor that already exists rather
   than by nesting a second <a>, because an anchor inside an anchor is
   invalid HTML and the alternative -- a JS click handler on the card --
   would give up middle-click, cmd-click and "open in new tab".

   The two status badges and the country flag are lifted above the overlay
   so their tooltips still fire; everything else below it is click-through
   to the profile.
   ====================================================================== */
.mentor-card .cards{ position:relative; }
.mentor-card .cards > a{ position:static; }
.mentor-card .cards > a::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    z-index:2;
}
.mentor-card .uitem-bg .available-badge,
.mentor-card .uitem-bg .verified-badge{ z-index:3; }
.mentor-card .card-body .flag-cimg{ position:relative; z-index:3; }
.mentor-card .cards:hover .mentor_title{ color:var(--brand); }

/* ======================================================================
   E2E-7 (4 Sep 2026) -- mentor names were being cut off.

   .text-truncate on the name gives one line and an ellipsis. On the
   two-up mobile grid that produced "Ruchii Gamb..." and "Bajrangi
   Shar...", and a directory that cannot print its own mentors' names is
   not a directory. Two lines, then clamp -- long enough for essentially
   every Indian name at both card widths, still bounded so the card
   cannot grow without limit. Cards in a row are already equal-height via
   .h-100, so a two-line name does not make the grid ragged.
   ====================================================================== */
.mentor-card .mentor_title.text-truncate{
    white-space:normal !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.3;
}

/* ======================================================================
   E2E-6 (4 Sep 2026) -- the step numeral in the signup indicator was
   invisible.

   .badge-primary on the active step painted the pill in the brand navy
   but the numeral inherited the theme's dark body colour, so step 1 read
   as a solid navy lozenge with nothing in it. While fixing the contrast,
   make the two badges the same fixed circle: as plain Bootstrap badges
   they were pill-shaped rectangles that changed width between "1" and
   "2", so the indicator shifted as the user moved between steps.
   ====================================================================== */
.signup_badge_1,
.signup_badge_2{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    border-radius:var(--r-pill);
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:1;
}
.signup_badge_1.badge-primary,
.signup_badge_2.badge-primary{
    background-color:var(--brand) !important;
    color:#fff !important;
}
.signup_badge_1.badge-light,
.signup_badge_2.badge-light{
    background-color:var(--surface-alt) !important;
    color:var(--ink-500) !important;
    box-shadow:inset 0 0 0 1px var(--line);
}

/* AVATAR-1b: homepage floating hero cards. The wrapper is a fixed 60px (50px on
   small screens) circle with overflow:hidden and sized its <img> at 100%/100%.
   Swapping the img for a div means the div must claim that box itself. */
.floating-mentor-avatar > .hm-avatar-fill{ width:100%; height:100%; }
.floating-mentor-avatar .hm-initials-text{ font-size:22px; }
@media (max-width:767.98px){ .floating-mentor-avatar .hm-initials-text{ font-size:18px; } }

/* ==========================================================================
   Deploy 4 -- craft pass (4 Sep 2026)
   Everything here is an override layer. home3*.css already carries the
   token-normalised values from Deploy 3B; this file only changes the small
   number of things that were still visually wrong after normalisation.
   ========================================================================== */

/* --- 3B tail: body type -------------------------------------------------
   template.min.css sets body{font-size:15px}. Nothing else on the site uses
   15px any more after 3B, so it was the one value left off the scale, and
   15px body copy is below the comfortable reading floor on a 1440 desktop. */
body{ font-size:var(--fs-body,16px); }

/* --- Section headings ---------------------------------------------------
   "Featured Mentors" and "Explore by Category" are the same markup pattern
   -- <h2>Word <span class="text-primary">Word</span></h2> -- but only the
   featured section got the highlight sweep, and that rule used z-index:-1
   with bottom:0, so the bar sat on the baseline box rather than under the
   glyphs and dropped behind the section background wherever the section
   made its own stacking context. One treatment, applied to both, positioned
   in em so it tracks the font size instead of drifting at each breakpoint. */
.featured-mentors-section > .container > .text-center > h2,
.categories-section > .container > .text-center > h2{
    font-size:var(--fs-h2,32px);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.2;
    margin-bottom:.75rem;
    color:var(--ink-900,#0F172A);
}
.featured-mentors-section h2 .text-primary,
.categories-section h2 .text-primary{
    position:relative;
    z-index:0;
    color:var(--brand,#286efb) !important;
}
.featured-mentors-section h2 .text-primary:after,
.categories-section h2 .text-primary:after{
    content:'';
    position:absolute;
    left:-.06em; right:-.06em;
    bottom:.06em;
    height:.30em;
    background-color:rgba(var(--primary-rgb),.16);
    border-radius:2px;
    z-index:-1;
}
/* The bar uses z-index:-1 relative to the span, so the span must own the
   stacking context or the bar escapes to the section background. */
.featured-mentors-section h2,
.categories-section h2{ position:relative; z-index:0; isolation:isolate; }

.featured-mentors-section > .container > .text-center > .lead,
.categories-section > .container > .text-center > .lead{
    color:var(--ink-500,#64748B);
    max-width:34rem;
    margin-left:auto; margin-right:auto;
}

/* --- Category cards -----------------------------------------------------
   These were a flat white box with a 1px-ish shadow and a 60px pale icon
   square: nothing separated a card from the section background, and the
   only hover feedback was a 5px lift. Give them a real edge, a brand-tinted
   lift, and an accent bar that wipes in from the left on hover so the
   pointer target reads as a target. */
.categories-section .category-card{
    padding:28px 22px;
    border-radius:var(--r-lg,24px);
    border:1px solid var(--line,#E2E8F0);
    box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.06));
    background-color:var(--surface,#FFFFFF);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.categories-section .category-card:before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--primary-linear-gradient, var(--brand,#286efb));
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .3s ease;
}
.categories-section .category-card:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--primary-rgb),.35);
    box-shadow:var(--shadow-brand,0 8px 24px rgba(40,110,251,.18));
}
.categories-section .category-card:hover:before{ transform:scaleX(1); }
.categories-section .category-icon-wrapper{
    width:64px; height:64px;
    border-radius:var(--r-md,14px);
    margin-bottom:18px;
    background-image:linear-gradient(135deg, rgba(var(--primary-rgb),.14), rgba(var(--primary-rgb),.06));
    transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.categories-section .category-card:hover .category-icon-wrapper{
    transform:scale(1.06);
    background-image:none;
}
.categories-section .category-icon{ font-size:var(--fs-h3,24px); }
.categories-section .category-card-link:focus-visible .category-card{
    outline:2px solid var(--brand,#286efb);
    outline-offset:3px;
}

/* --- Hero cluster -------------------------------------------------------
   The stack was subtitle(19) -> title(56) -> paragraph -> match box, with a
   1.5rem gap under the title and a heavy brand shadow on the match box at
   rest. Tighten the vertical rhythm so the three lines read as one block,
   and let the match box earn its shadow on focus instead of shouting at
   rest -- it is the primary action, but it is not the only thing on screen. */
.hero-subtitle-top{ margin-bottom:.5rem; letter-spacing:.02em; }
.hero-title{ margin-bottom:1rem; letter-spacing:-0.02em; }
.hero-match-wrapper{
    border-radius:var(--r-lg,24px);
    padding:20px 22px 18px;
    box-shadow:var(--shadow-md,0 4px 12px rgba(15,23,42,.08));
}
.hero-match-wrapper:focus-within{
    box-shadow:var(--shadow-brand,0 8px 24px rgba(40,110,251,.18));
}
.hero-match-input{ border-radius:var(--r-md,14px); }
.hero-search-wrapper{ box-shadow:var(--shadow-md,0 4px 12px rgba(15,23,42,.08)); }
.hero-search-wrapper:hover,
.hero-search-wrapper:focus-within{ box-shadow:var(--shadow-brand,0 8px 24px rgba(40,110,251,.18)); }

/* --- Gap above "View All Mentors" --------------------------------------
   The button sits in .col-12.text-center.mt-5 (3rem) directly beneath
   .custom-carousel-nav, which already contributes margin-bottom:15px plus
   its own padding -- roughly 65px of dead space between the dots and the
   button on desktop. Collapse the stack to one deliberate gap. */
.featured-mentors-section .custom-carousel-nav{ margin-bottom:0; }
.featured-mentors-section .col-12.text-center.mt-5{ margin-top:1.5rem !important; }
@media (max-width:767.98px){
    .featured-mentors-section .col-12.text-center.mt-5{ margin-top:1rem !important; }
}

/* ==========================================================================
   Deploy 4b -- corrections found by measuring the live DOM after Deploy 4
   ========================================================================== */

/* E2E-C, second pass. The stretched ::after was already absolute/inset-0, but
   .card-body carries position:relative;z-index:2 -- the same z-index as the
   overlay and later in the DOM, so it painted on top and elementFromPoint at
   the name, designation and price rows still returned the body, not a link.
   Lift the overlay clear of the body and put the badges/flag above it so
   their tooltips still fire. */
.mentor-card .cards > a::after{ z-index:4; }
.mentor-card .card-body{ z-index:auto; }
/* z-index:auto, not a number: any numeric z-index on .card-body makes it a
   stacking context, which traps the flag tooltip's z-index:5 inside it and
   leaves the flag unhoverable under the overlay. */
.mentor-card .uitem-bg .available-badge,
.mentor-card .uitem-bg .verified-badge,
.mentor-card .card-body .flag-cimg{ z-index:5; position:relative; }

/* Type scale, second pass. home3.css carries blanket h1{...!important} and
   h3{...!important} rules that outrank every classed heading, so .hero-title
   computed to 40px on a 1440 desktop instead of the 56px its own rule asks
   for, and the responsive ladder underneath it was dead code. Restate the
   ladder here, last in the cascade, with the specificity to win. */
.hero-title{ font-size:var(--fs-display,56px) !important; }
@media (max-width:1199.98px){ .hero-title{ font-size:var(--fs-h1,40px) !important; } }
@media (max-width:767.98px){ .hero-title{ font-size:var(--fs-h2,32px) !important; } }
.featured-mentors-section .section-title,
.testimonials-section .section-title{ font-size:var(--fs-h2,32px) !important; }

/* D6: mobile step for section headings.
   home3-part5.css drops bare h2 to --fs-h3 at <=575.98px, but our classed
   section headings out-specify that rule and stayed at 32px on a 386px
   screen. Restate the step so the whole heading ladder agrees on phones. */
@media (max-width:575.98px){
  .featured-mentors-section > .container > .text-center > h2,
  .categories-section > .container > .text-center > h2,
  .featured-mentors-section .section-title,
  .testimonials-section .section-title{ font-size:var(--fs-h3,24px) !important; }
}

/* ======================================================================
   REV-1 (4 Sep 2026): reviewer avatars on the mentor profile.

   The review card drew its author with an <img> pointing at
   no-photo-sm.png whenever the mentee had no picture, which is the same
   grey silhouette AVATAR-1 removed everywhere else. The markup now emits
   an initials tile instead, so it needs a size for this box (60px) and a
   flex-shrink guard: .review-avatar sits inside a d-flex row and a plain
   width:60px is only a hint there -- a long review title could squash it.
   ====================================================================== */
.hm-avatar-60 .hm-initials-text { font-size:22px; }
.review-card .review-avatar     { flex:0 0 60px; width:60px; height:60px; border-radius:50%; }


/* ============================================================================
   BRAND-2 — palette decision, 4 September 2026
   ----------------------------------------------------------------------------
   The owner delegated the three open colour questions. All three are answered
   here, at the token layer, because this file is the last stylesheet on every
   page and a :root block here wins the cascade over home3.css's own.

   1. CYAN IS GONE. --secondary-color was #06B6D4, a teal that appears nowhere
      in the logo and exists only because the template shipped with it. It fed
      --primary-linear-gradient (navy -> teal) in sixteen places, which is the
      single most template-looking thing on the site: every SaaS starter kit
      built between 2021 and 2024 shipped that exact ramp. Replaced with an
      azure drawn from the navy itself, so the gradient now reads as depth in
      one hue family instead of two unrelated brand colours colliding.
      Custom properties substitute at use time, so redefining the one variable
      updates all sixteen gradients; no gradient rule is touched.

   2. PRIMARY CTAs ARE NOW ORANGE. They were navy -- the same navy as the
      header, the body links and the section headings -- so the single most
      important element on each page carried no more visual weight than a
      paragraph. Orange is already the logo colour; it was just never used for
      anything that mattered. Blue and orange are complements, so the CTA now
      separates from everything around it on both the white and the navy
      surfaces without a new colour being invented.

      The label is NAVY, not white. This is deliberate and it is a contrast
      decision, not a stylistic one: white on #F26522 measures 3.15:1, which
      fails WCAG AA for button text (4.5:1 required below 18.66px bold). The
      two ways out are to dull the orange to #C4521C, where white finally
      passes, or to keep the true logo orange and darken the label instead.
      Navy #00215E on #F26522 measures 4.83:1 and passes -- so the accessible
      choice is also the one that keeps the brand colour at full strength.

      Hover BRIGHTENS to #FF7A3D rather than darkening. Darkening is the
      reflex, but with a dark label it would walk the contrast down toward
      failure; brightening lifts it to 5.88:1. The affordance comes from the
      shadow and the 1px rise instead.

   3. ONE ORANGE, NOT TWO. #ff6b00 (with its #ff8c00 gradient partner) was
      decorating mentor cards in home3-part3 and part4, a visibly yellower
      orange than the #F26522 in the logo -- close enough to look like a
      mistake, far enough apart to be one. Everything is unified on the logo
      value, with a lighter tint of the same hue as the gradient partner.
      This also fixes an accessibility bug carried in those files: the skill
      chip on card hover was white on #ff6b00, which measures 2.86:1.

   Contrast measured, not estimated (WCAG 2.1 relative luminance):
       #F26522 on #FFFFFF   3.15  -- fill only, never text
       #00215E on #F26522   4.83  PASS AA normal text
       #00215E on #FF7A3D   5.88  PASS AA normal text
       #1E5BC6 on #FFFFFF   6.24  PASS AA normal text
       #F26522 on #00215E   4.83  PASS AA normal text (accents on dark hero)
   ============================================================================ */

:root{
    --secondary-color:#1E5BC6;   /* was #06B6D4 cyan; see note 1 */
    --accent:#F26522;            /* the logo orange, now the CTA colour */
    --accent-bright:#FF7A3D;     /* hover; brighter, not darker; see note 2 */
    --accent-tint:#FEF0E9;       /* wash for chips and hover surfaces */
    --cta-ink:#00215E;           /* label on accent fills; 4.83:1 */
}

/* --- primary CTA -------------------------------------------------------- */
/* .navbar .btn-primary (0,2,0) is carried explicitly: home3.css scopes the
   header button that way and it outranks a bare .btn-primary. */
.btn-primary,
.btn.btn-primary,
.navbar .btn-primary,
.navbar .btn.btn-primary{
    /* Every declaration here is !important for one reason only: home3.css
       ships `.btn-primary{background-color:..!important;border-color:..!important;
       color:white!important}` and `.navbar .btn-primary{background:<gradient>
       !important}`. That file is vendor template code we do not edit. Matching
       its weight is the minimum needed; nothing here escalates past it. */
    background-color:var(--accent) !important;
    background-image:none !important;
    border-color:var(--accent) !important;
    color:var(--cta-ink) !important;
    font-weight:600;
    transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.navbar .btn-primary:hover,
.navbar .btn.btn-primary:hover{
    background-color:var(--accent-bright) !important;
    background-image:none !important;
    border-color:var(--accent-bright) !important;
    color:var(--cta-ink) !important;
    transform:translateY(-1px);
}
.btn.btn-primary:hover{
    box-shadow:0 8px 20px rgba(242,101,34,.32);
}
.btn-primary:active,
.btn.btn-primary:active{
    transform:translateY(0);
}
/* The existing active-state rule in this file carries !important on the navy,
   so this one has to match its specificity and weight to land. */
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
    background-color:var(--accent) !important;
    background-image:none !important;
    border-color:var(--accent) !important;
    color:var(--cta-ink) !important;
}
.btn-primary.disabled,
.btn-primary:disabled{
    background-color:var(--accent);
    background-image:none;
    border-color:var(--accent);
    color:var(--cta-ink);
    opacity:.55;
}

/* Secondary action stays navy outline. Orange solid vs navy outline gives the
   page a real primary/secondary hierarchy, which it did not have when both
   were the same navy. */

/* --- focus ring --------------------------------------------------------- */
/* :focus-visible only, so it appears for keyboard users and never on a mouse
   click. There was no visible focus state on buttons at all before this. */
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:2px;
    box-shadow:none;
}

::selection{
    background:var(--accent);
    color:var(--cta-ink);
}

/* --- unify the second orange ------------------------------------------- */
/* Identical selectors to home3-part3/part4, and this file loads after both,
   so plain specificity is enough -- no !important needed. */
.mentor-card-top-bar,
.mentor-profile-card::after{
    background:linear-gradient(90deg,var(--accent),var(--accent-bright));
}
.mentor-profile-avatar::before{
    background:linear-gradient(135deg,var(--accent),var(--accent-bright));
}
.mentor-profile-card:hover .mentor-profile-avatar{
    border-color:var(--accent);
}
.mentor-profile-card:hover .mentor-profile-skill{
    background:var(--accent);
    color:var(--cta-ink);   /* was #fff on #ff6b00 = 2.86:1, an AA failure */
}

/* --- BRAND-2b: the navbar CTA -------------------------------------------
   home3.css scopes the header button as `.navbar .btn-primary` (0,2,0) and
   paints it with `background:` shorthand + !important, so it needs its own
   rule -- the (0,1,0) block above cannot reach it. The gradient is kept
   rather than flattened: against a white header a two-stop fill reads as a
   raised object, which is what a primary CTA should look like. Ink stays
   navy for the same 4.83:1 reason as everywhere else. */
.navbar .btn-primary{
    background:linear-gradient(145deg,var(--accent),var(--accent-bright)) !important;
    border:none !important;
    color:var(--cta-ink) !important;
    box-shadow:0 8px 24px rgba(242,101,34,.28) !important;
}
.navbar .btn-primary:hover{
    background:linear-gradient(145deg,var(--accent-bright),var(--accent)) !important;
    color:var(--cta-ink) !important;
    box-shadow:0 12px 28px rgba(242,101,34,.36) !important;
    transform:translateY(-2px);
}

/* --- LAYOUT-1: /mentors page heading was hidden behind the category bar ---
   The fixed header is 80px and `.mentor-categories-nav` is sticky at top:80
   with a 52px height, so the first 132px of the viewport is permanently
   occupied. `.mentor-showcase` begins its flow at y=52 -- nothing on this
   page compensates for the fixed header -- and `py-6` gave it only 40px of
   top padding, so the <h1> rendered at y=92 and was sliced in half by the
   category bar. Bootstrap spacing utilities carry !important, which is why
   this has to as well. 104px puts the heading at y=156: clear of the bar
   with 24px of air. */
.mentor-showcase{ padding-top:104px !important; }
@media (max-width:991.98px){
    /* Below lg home3.css already does the right thing -- `.main-wrapper` gets
       padding-top:62px and `.mentor-categories-nav` drops to position:static,
       so there is no overlap and nothing to compensate. Hand the section back
       its original py-6 value; the 104px above would be dead space here. */
    .mentor-showcase{ padding-top:40px !important; }
}

/* ======================================================================
   TYPE-LADDER (5 Sep 2026): make the .h1-.h6 UTILITIES agree with the
   h1-h6 ELEMENT rules.

   home3.css restates the whole scale on the tags only:
       h1 40  h2 32  h3 24  h4 24  h5 19  h6 16
   while template.min.css defines the utilities as Bootstrap ships them:
       .h1 40 .h2 32 .h3 28 .h4 24 .h5 20 .h6 16
   so .h3 was 4px larger than an h3 and .h5 1px larger than an h5.

   That divergence matters because the whole heading-order fix depends on
   it. Correcting document outline without moving pixels is done by
   promoting the TAG and pinning the size with the matching utility class
   -- <h2 class="h5"> where an <h5> used to sit. That identity only holds
   if .h5 and h5 are the same size. Everywhere the site already does this
   the class was on the old tag too, so the before/after sizes matched by
   accident; on /pricing and /post/<slug> they would not have.

   Fixed at source rather than by adding a per-page override, and without
   !important, so the mobile steps in home3-part5.css (which ARE marked
   important) and the component rules above still win where they should.

   Blast radius measured before shipping: .h3 appears on exactly one
   element sitewide (the /register h1) and .h5 on a handful of promoted
   headings. Nothing else changes size.
   ====================================================================== */
.h1 { font-size: var(--fs-h1, 40px);   line-height: 1.2; }
.h2 { font-size: var(--fs-h2, 32px);   line-height: 1.3; }
.h3 { font-size: var(--fs-h3, 24px);   line-height: 1.4; }
.h4 { font-size: var(--fs-h3, 24px);   line-height: 1.4; }
.h5 { font-size: var(--fs-h4, 19px);   line-height: 1.5; }
.h6 { font-size: var(--fs-body, 16px); line-height: 1.5; }