/* ========================================================================== brandseducation.css — custom overrides for brandseducation.com (theme 33) ONLY. Created 2026-09-28. Loaded on EVERY brandseducation page, as the LAST stylesheet in : - home / udemy_theme pages: udemy_theme/layouts/app.blade.php (after styles.css) - all other pages: theme_page/layouts/app.blade.php (after header.css, inside the theme_select_id == 33 guard) No other tenant loads this file. Cache-busted by file mtime, so edits show immediately. Theme colour tokens: var(--purple) #497e9f, var(--purple-dark) #3a657f, var(--purple-tint) #edf2f5 (tokens.css on home/explore; on other pages use the hex values). Add your custom CSS below. ========================================================================== */ /* ========================================================================== Brand colour only: #497e9f everywhere, no teal / mint / green. Per Arshad 2026-09-30. ========================================================================== Where the teal came from (found by scanning every rule that applies on the Home page and 11 inner pages): the legacy sheets every inner page loads (master.css, materialize.min.css) plus the theme's own mint announcement bar, badge, "updated" text and the partner block on Home. Nothing is edited in those shared files (other tenants use them); they are overridden here, and this file loads only for theme 33. Tints (tracks, light hovers) use #497e9f with transparency. 1. Focused buttons. master.css: `button:focus { background-color:#2ab7a9 !important }` (+ the same in materialize). This is the teal circle behind the drawer's X: the drawer focuses its close button when it opens. Kept ABOVE the `.sk-head button` rule below so the header's own buttons stay transparent (same specificity, later rule wins). :where() keeps it to the inner pages (body.themeclass33) at zero extra specificity. */ :where(body.themeclass33) button:focus { background-color: #497e9f !important; } /* 2. Legacy classes on inner pages (master.css). */ :where(body.themeclass33) .coursingMaincard .course-card-header { background-color: #497e9f; } :where(body.themeclass33) .coursingMaincard .course-tag-course { color: #497e9f; } :where(body.themeclass33) .stm_lms_courses__single--info_preview a:hover { background-color: #497e9f; } :where(body.themeclass33) ul.mainBreadcrumb li a { color: #497e9f !important; } /* master: #90c0c5 !important */ /* 3. Materialize teal (#26a69a family), same selectors, colour swapped. */ :where(body.themeclass33) .collection .collection-item.active {background-color:#497e9f; } :where(body.themeclass33) .collection a.collection-item {color:#497e9f; } :where(body.themeclass33) .secondary-content {color:#497e9f; } :where(body.themeclass33) span.badge.new {background-color:#497e9f; } :where(body.themeclass33) .progress {background-color:rgba(73,126,159,.35); } :where(body.themeclass33) .progress .determinate {background-color:#497e9f; } :where(body.themeclass33) .progress .indeterminate {background-color:#497e9f; } :where(body.themeclass33) .btn-large:hover, :where(body.themeclass33) .btn:hover {background-color:#497e9f; } :where(body.themeclass33) .btn-floating {background-color:#497e9f; } :where(body.themeclass33) .dropdown-content li>a, :where(body.themeclass33) .dropdown-content li>span {color:#497e9f; } :where(body.themeclass33) select:focus {outline:1px solid rgba(73,126,159,.4); } :where(body.themeclass33) input[type=date]:focus:not([readonly]), :where(body.themeclass33) input[type=datetime-local]:focus:not([readonly]), :where(body.themeclass33) input[type=email]:focus:not([readonly]), :where(body.themeclass33) input[type=number]:focus:not([readonly]), :where(body.themeclass33) input[type=password]:focus:not([readonly]), :where(body.themeclass33) input[type=search]:focus:not([readonly]), :where(body.themeclass33) input[type=tel]:focus:not([readonly]), :where(body.themeclass33) input[type=text]:focus:not([readonly]), :where(body.themeclass33) input[type=time]:focus:not([readonly]), :where(body.themeclass33) input[type=url]:focus:not([readonly]), :where(body.themeclass33) textarea.materialize-textarea:focus:not([readonly]) {border-bottom:1px solid #497e9f; box-shadow:0 1px 0 0 #497e9f; } :where(body.themeclass33) input[type=date]:focus:not([readonly])+label, :where(body.themeclass33) input[type=datetime-local]:focus:not([readonly])+label, :where(body.themeclass33) input[type=email]:focus:not([readonly])+label, :where(body.themeclass33) input[type=number]:focus:not([readonly])+label, :where(body.themeclass33) input[type=password]:focus:not([readonly])+label, :where(body.themeclass33) input[type=search]:focus:not([readonly])+label, :where(body.themeclass33) input[type=tel]:focus:not([readonly])+label, :where(body.themeclass33) input[type=text]:focus:not([readonly])+label, :where(body.themeclass33) input[type=time]:focus:not([readonly])+label, :where(body.themeclass33) input[type=url]:focus:not([readonly])+label, :where(body.themeclass33) textarea.materialize-textarea:focus:not([readonly])+label {color:#497e9f; } :where(body.themeclass33) .input-field .prefix.active {color:#497e9f; } :where(body.themeclass33) [type=radio]:checked+label:after {border:2px solid #497e9f; background-color:#497e9f; } :where(body.themeclass33) [type=radio].with-gap:checked+label:before {border:2px solid #497e9f; } :where(body.themeclass33) [type=radio].with-gap:checked+label:after {border:2px solid #497e9f; background-color:#497e9f; } :where(body.themeclass33) [type=checkbox]:checked+label:before {border-right:2px solid #497e9f; border-bottom:2px solid #497e9f; } :where(body.themeclass33) [type=checkbox]:indeterminate+label:before {border-right:2px solid #497e9f; } :where(body.themeclass33) [type=checkbox].filled-in:checked+label:after {border:2px solid #497e9f; background-color:#497e9f; } :where(body.themeclass33) .switch label input[type=checkbox]:checked+.lever {background-color:rgba(73,126,159,.5); } :where(body.themeclass33) .switch label input[type=checkbox]:checked+.lever:after {background-color:#497e9f; } :where(body.themeclass33) input[type=checkbox]:checked:not(:disabled)~.lever:active:after {box-shadow:0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(73,126,159,.1); } :where(body.themeclass33) input[type=range]+.thumb {background-color:#497e9f; } :where(body.themeclass33) input[type=range]+.thumb .value {color:#497e9f; } :where(body.themeclass33) input[type=range]::-webkit-slider-thumb {background-color:#497e9f; } :where(body.themeclass33) input[type=range]::-moz-range-thumb {background:#497e9f; } :where(body.themeclass33) input[type=range]::-ms-thumb {background:#497e9f; } :where(body.themeclass33) .spinner-layer {border-color:#497e9f; } :where(body.themeclass33) .picker__date-display {background-color:#497e9f; } :where(body.themeclass33) .picker__nav--next:hover, :where(body.themeclass33) .picker__nav--prev:hover {background:rgba(73,126,159,.3); } :where(body.themeclass33) .picker__weekday-display {background-color:#497e9f; } :where(body.themeclass33) .picker__day.picker__day--today {color:#497e9f; } :where(body.themeclass33) .picker--focused .picker__day--selected, :where(body.themeclass33) .picker__day--selected, :where(body.themeclass33) .picker__day--selected:hover {background-color:#497e9f; } :where(body.themeclass33) .picker--focused .picker__day--selected.picker__day--outfocus, :where(body.themeclass33) .picker__day--selected.picker__day--outfocus, :where(body.themeclass33) .picker__day--selected:hover.picker__day--outfocus {background-color:rgba(73,126,159,.3); } :where(body.themeclass33) .picker__close, :where(body.themeclass33) .picker__today {color:#497e9f; } :where(body.themeclass33) button.picker__clear:focus, :where(body.themeclass33) button.picker__close:focus, :where(body.themeclass33) button.picker__today:focus {background-color:rgba(73,126,159,.3); } .announce, .sk-head .announce { background: #497e9f; color: #fff; } .announce__timer, .sk-head .announce__timer { background: rgba(255, 255, 255, .18); } .announce__close:hover { background: rgba(255, 255, 255, .18); } .badge:where(:not(.badge--premium)) { background: #497e9f; color: #fff; } .pop-updated { color: #497e9f; } .partner { background: #497e9f; } .link--white:hover { color: #fff; text-decoration: underline; } .sk-head button:where(:not(.sk-mnav__close)) { background: none !important; font-weight: 500 !important; font-size: 15px; } body button.tbnRemoveing { background: #497e9f; color: #fff; } body button.tbnRemoveing:hover, body button.tbnRemoveing:focus-visible { background: #3a657f; color: #fff; } button#exploreMenuBtn { font-weight: 600 !important; } html[dir="rtl"] body, html[lang="ar"] body { font-weight: 500 !important; } .hero .hero__img { min-height: 240px; object-fit: cover; object-position: 75% center; } body { font-weight: 400; } .lang-menu__list .lang-menu__link span { font-weight: 700; } body.be-theme.be-tutor-page .tutor-page { --bt-primary: #497e9f; --bt-primary-hover: #3a657f; --bt-ring: rgba(73, 126, 159, .18); --bt-border: #D5D7E0; --bt-text: #1F1F2B; --bt-muted: #6B7280; --bt-error: #D93025; background: #F6F6F7; padding: 48px 16px 64px; font-family: Inter, Poppins, "Noto Sans Arabic", sans-serif; } body.be-theme.be-tutor-page .tutor-page__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 56px; align-items: center; justify-content: center; } body.be-theme.be-tutor-page .tutor-page__media img { display: block; width: 100%; max-height: 640px; object-fit: cover; border-radius: 14px; } body.be-theme.be-tutor-page .tutor-card { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(17, 24, 39, .08); padding: 40px 54px; color: var(--bt-text); box-sizing: border-box; width: 100%; } body.be-theme.be-tutor-page .tutor-card__logo { display: flex; justify-content: center; margin: 0 0 14px; } body.be-theme.be-tutor-page .tutor-card__logo img { display: block; height: 56px; width: auto; max-width: 220px; object-fit: contain; } body.be-theme.be-tutor-page .tutor-card__tagline { margin: 0 0 6px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--bt-muted); } body.be-theme.be-tutor-page .tutor-card__title { margin: 0; text-align: center; font-size: 25px !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--bt-text); } body.be-theme.be-tutor-page .tutor-card__sub { margin: 6px 0 28px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--bt-muted); } body.be-theme.be-tutor-page .tutor-card .be-field { position: relative; margin: 0 0 16px; padding: 0; } body.be-theme.be-tutor-page .tutor-card .be-field input.form-control { display: block; width: 100% !important; height: 46px !important; margin: 0 !important; box-sizing: border-box !important; padding: 0 44px !important; border: 1px solid var(--bt-border) !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; outline: none; font-family: inherit; font-size: 15px !important; line-height: 1.4; color: var(--bt-text); transition: border-color .15s ease, box-shadow .15s ease; } body.be-theme.be-tutor-page .tutor-card .be-field input.form-control::placeholder { color: #949AA4 !important; opacity: 1; } body.be-theme.be-tutor-page .tutor-card .be-field input.form-control:focus { border: 1px solid var(--bt-primary) !important; box-shadow: 0 0 0 3px var(--bt-ring) !important; } body.be-theme.be-tutor-page .tutor-card .be-ico { position: absolute; top: 14px; inset-inline-start: 14px; width: 18px; height: 18px; line-height: 0; color: var(--bt-muted); pointer-events: none; z-index: 1; } body.be-theme.be-tutor-page .tutor-card .be-ico svg { width: 18px; height: 18px; } body.be-theme.be-tutor-page .tutor-card .be-field:focus-within .be-ico { color: var(--bt-primary); } body.be-theme.be-tutor-page .tutor-card .be-eye { position: absolute; top: 5px; inset-inline-end: 6px; width: 36px; height: 36px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; border-radius: 6px; box-shadow: none; color: var(--bt-muted); cursor: pointer; line-height: 0; } body.be-theme.be-tutor-page .tutor-card .be-eye:hover { color: var(--bt-text); } body.be-theme.be-tutor-page .tutor-card .be-eye:focus-visible { outline: 2px solid var(--bt-primary); outline-offset: 1px; } body.be-theme.be-tutor-page .tutor-card .be-eye svg { width: 18px; height: 18px; } /* Errors: red border + 12px message under the field (server-side, old() kept). */ body.be-theme.be-tutor-page .tutor-card .be-field.has-error input.form-control { border-color: var(--bt-error) !important; } body.be-theme.be-tutor-page .tutor-card .be-field.has-error input.form-control:focus { box-shadow: 0 0 0 3px rgba(217, 48, 37, .15) !important; } body.be-theme.be-tutor-page .tutor-card .be-error { display: block; position: static !important; float: none !important; clear: both; width: auto !important; /* master.css floats label.error */ margin: -10px 0 14px !important; padding: 0; font-size: 12px !important; line-height: 1.4; color: var(--bt-error) !important; text-align: start; transform: none !important; } body.be-theme.be-tutor-page .tutor-card .be-error:empty { display: none; } body.be-theme.be-tutor-page .tutor-card .be-captcha { margin: 4px 0 18px; } body.be-theme.be-tutor-page .tutor-card .be-captcha .be-error { margin: 6px 0 0 !important; } body.be-theme.be-tutor-page .tutor-card .be-btn { display: block; width: 100%; height: 48px; margin: 4px 0 0; padding: 0 16px; background: var(--bt-primary) !important; border: 0 !important; border-radius: 6px; box-shadow: none !important; color: #fff !important; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 48px; text-transform: none; letter-spacing: normal; cursor: pointer; transition: background-color .15s ease; } body.be-theme.be-tutor-page .tutor-card .be-btn:hover { background: var(--bt-primary-hover) !important; } body.be-theme.be-tutor-page .tutor-card .be-btn:focus-visible { outline: 2px solid var(--bt-text); outline-offset: 2px; } body.be-theme.be-tutor-page .tutor-card__login { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--bt-muted); } body.be-theme.be-tutor-page .tutor-card__login a { color: var(--bt-primary) !important; font-weight: 600; text-decoration: none; } body.be-theme.be-tutor-page .tutor-card__login a:hover { text-decoration: underline; } body.be-theme.be-tutor-page .tutor-card__legal { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: var(--bt-muted); } body.be-theme.be-tutor-page .tutor-card__legal a { color: var(--bt-primary) !important; text-decoration: none; } @media (max-width: 900px) { body.be-theme.be-tutor-page .tutor-page { padding: 24px 16px 48px; } body.be-theme.be-tutor-page .tutor-page__inner { grid-template-columns: minmax(0, 1fr); } body.be-theme.be-tutor-page .tutor-page__media { display: none; } body.be-theme.be-tutor-page .tutor-card { padding: 32px 20px; max-width: 560px; margin: 0 auto; } } /* ===== BE THEME: brand colour #497e9f replaces default blue (added 2026-10-01) ===== Part A: auto-generated from master.css / master_new.css / master_find.css / custom_chatbox.css (every rule there using #2d8ae8 #039be5 #3f8ae8 #4285f4 #2196f3 #007bff #1a73e8), scoped to body.be-theme. Part B (below) is the curated set; it comes last so it wins on equal specificity. */ body.be-theme{--be-primary:#497e9f;--be-primary-dark:#3b6a87;--be-primary-tint:rgba(73,126,159,.12);} body.be-theme .login-inter {background-color:var(--be-primary)!important;} body.be-theme .wf-btn {background-color:var(--be-primary)!important;} body.be-theme .main_studOne ul.tabs li a.active {color:var(--be-primary)!important;} body.be-theme .vtn_msg {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme .vx_man center a {color:var(--be-primary)!important;} body.be-theme a.btn.btn-primary.pull-right.unique {background:var(--be-primary)!important;border-color:var(--be-primary)!important;} body.be-theme .lecturescls {background:var(--be-primary)!important;} body.be-theme button.plyBtn {background:var(--be-primary)!important;} body.be-theme .BtnCls {background:var(--be-primary)!important;} body.be-theme div#GameContainer a.checkurlcls.active_cls {color:var(--be-primary)!important;} body.be-theme .pendding_attending_cls a + a.waves-effect.waves-light.btn {background:var(--be-primary)!important;} body.be-theme .clPass ~ button.wwaves-effect.waves-light.btn {background:var(--be-primary)!important;} body.be-theme .acceptModalCls button {background-color:var(--be-primary)!important;} body.be-theme .acceptModalCls .modal-footer a.modal-action.modal-close.waves-effect.waves-green.btn-flat {background-color:var(--be-primary)!important;} body.be-theme #changepassfrm button.waves-effect.waves-green.btn {background:var(--be-primary)!important;} body.be-theme .bc_class {background:var(--be-primary)!important;} body.be-theme .col.s12.pendding_attending_cls a {background:var(--be-primary)!important;} body.be-theme .ser_fomi button.butExp {background:var(--be-primary)!important;} body.be-theme .btn_morei a {background-color:var(--be-primary)!important;} body.be-theme .iconWp i.fa {color:var(--be-primary)!important;} body.be-theme .iconxbi_menu i.fa {color:var(--be-primary)!important;} body.be-theme .bxi_wrko .iconxbi_menu {color:var(--be-primary)!important;} body.be-theme ul.listIcoin li i {color:var(--be-primary)!important;} body.be-theme .parentStudent .tall_box .inner .web_font_container .icon {background:var(--be-primary)!important;} body.be-theme .boxgrid .cover .icon {background:var(--be-primary)!important;} body.be-theme .tall_box.box.boxgrid.slidedown:hover .inner {background:var(--be-primary)!important;} body.be-theme .tall_box.box.boxgrid.slidedown:hover .row.cell_title_bar {background:var(--be-primary)!important;} body.be-theme .toplif.active > a {color:var(--be-primary)!important;} body.be-theme .boxiBlackb {background:var(--be-primary)!important;} body.be-theme button.muiButtonBase-root {background:var(--be-primary)!important;} body.be-theme ul.listAvbTon li a:hover {background:var(--be-primary)!important;} body.be-theme .bxohelpLeft .collapsible-header.active_menu_help_page {background:var(--be-primary)!important;} body.be-theme .bxohelpLeft .collapsible-header:hover {background:var(--be-primary)!important;} body.be-theme input#book_code {border:2px solid var(--be-primary)!important;} body.be-theme .rig_tx a.add_cart {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme a.buy_no:hover {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme .noUi-horizontal .noUi-handle {background-color:var(--be-primary)!important;} body.be-theme .noUi-connect {background:var(--be-primary)!important;} body.be-theme span.totalTutors {background:var(--be-primary)!important;} body.be-theme .find_tutor_cont_on:hover {border:1px solid var(--be-primary)!important;} body.be-theme .sec_bott a.book_lesson {background:var(--be-primary)!important;} body.be-theme a.book_message {border:1px solid var(--be-primary)!important;color:var(--be-primary)!important;} body.be-theme span.tital_spanrr .main-txte {border-bottom:3px solid var(--be-primary)!important;} body.be-theme span.five_tital_spanrr .main-txte {border-bottom:3px solid var(--be-primary)!important;} body.be-theme .tutor_profile_Section_r_three span.but_ful a {background:var(--be-primary)!important;} body.be-theme span.but_ful1 a {color:var(--be-primary)!important;} body.be-theme span.but_ful1 a:hover {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme button#myBtn {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme .modal-content1 {border:3px solid var(--be-primary)!important;} body.be-theme button.udlite-btn {background:var(--be-primary)!important;} body.be-theme button.btn.btn-primary {background-color:var(--be-primary)!important;} body.be-theme .cart_one3 a:hover {color:var(--be-primary)!important;} body.be-theme .dropdown-content_three a:hover {background:var(--be-primary)!important;} body.be-theme span.cart_num {background:var(--be-primary)!important;} body.be-theme button.btn-login {background-color:var(--be-primary)!important;} body.be-theme .sign-up-text {color:var(--be-primary)!important;} body.be-theme .crt-ac {background-color:var(--be-primary)!important;} body.be-theme .materialert.info {background-color:var(--be-primary)!important;} body.be-theme .header-slider .owl-theme .owl-nav [class*=owl-] {background:var(--be-primary)!important;} body.be-theme button.btn.btn-primary-log {background-color:var(--be-primary)!important;} body.be-theme .sign-today {background:var(--be-primary)!important;border:2px solid var(--be-primary)!important;} body.be-theme .login-today {border:2px solid var(--be-primary)!important;} body.be-theme .header-btn a {color:var(--be-primary)!important;} body.be-theme .book_lesson-confirm {background:var(--be-primary)!important;} body.be-theme div#loginModal {border:0px solid var(--be-primary)!important;} body.be-theme div#signupModal {border:0px solid var(--be-primary)!important;} body.be-theme .mg-t-10 .btn {background-color:var(--be-primary)!important;} body.be-theme .video-container p {color:var(--be-primary)!important;} body.be-theme div#cirruculumtable_paginate a:hover {background-color:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme div#manucartList {border:3px solid var(--be-primary)!important;} body.be-theme div#manucartList a {background-color:var(--be-primary)!important;} body.be-theme .main_studOne .tabs .tab a:hover {color:var(--be-primary)!important;border-bottom:1px solid var(--be-primary)!important;} body.be-theme .tutor_profile_Section_l_four ul.tabs li a.active {border-bottom:2px solid var(--be-primary)!important;} body.be-theme .tutor_profile_Section_l_five span.five_tital_spanrr .main-txte {border-bottom:2px solid var(--be-primary)!important;} body.be-theme .tutor_profile_Section_l_four ul.tabs li a:hover {border-bottom:2px solid var(--be-primary)!important;} body.be-theme .find_tutor_fou .ShortBio___1gIDW a {color:var(--be-primary)!important;} body.be-theme span.courseHR b {color:var(--be-primary)!important;} body.be-theme .pagi_naviOne .pagination li.active {background-color:var(--be-primary)!important;border-color:var(--be-primary)!important;} body.be-theme a.waves-effect.waves-light.btn.social.google:hover {color:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme a.bo-sent {background-color:var(--be-primary)!important;} body.be-theme .main_fti nav .nav-wrapper a.breadcrumb {color:var(--be-primary)!important;} body.be-theme .main_fti .breadcrumb:before {color:var(--be-primary)!important;} body.be-theme .leftingShort a {color:var(--be-primary)!important;} body.be-theme .main_fti a {color:var(--be-primary)!important;} body.be-theme .peginiMnin ul.pagination li.active {background:var(--be-primary)!important;} body.be-theme .peginiMnin ul.pagination li a:hover {background:var(--be-primary)!important;} body.be-theme .bixiSerching button {background:var(--be-primary)!important;} body.be-theme .privwgroupClass .modal-footer.f-btn .btn {background:var(--be-primary)!important;} body.be-theme div#groupclassModal {border:0px solid var(--be-primary)!important;} body.be-theme .exploCenter .owl-nav button {background:var(--be-primary)!important;} body.be-theme .exploCenter .owl-theme .owl-nav [class*=owl-]:hover {background:var(--be-primary)!important;} body.be-theme .autBoxim span {color:var(--be-primary)!important;} body.be-theme .ntb_cart a.heading_font {background:var(--be-primary)!important;} body.be-theme ul.lidiMnin li a {color:var(--be-primary)!important;} body.be-theme a.btn_expli.bcbgroun {background:var(--be-primary)!important;} body.be-theme .mainCheckuoti .col.s8 .panel-default.credit-card-box button.btn.btn-primary.btn-lg.btn-block {background:var(--be-primary)!important;} body.be-theme .bdPricingBold {color:var(--be-primary)!important;} body.be-theme button.tbnRemoveing {background:var(--be-primary)!important;} body.be-theme .find_tutor_cont .paginationCls ul li.page-item.active {border-color:var(--be-primary)!important;} body.be-theme .pagination.box-page ul.pagination li.page-item.active {border-color:var(--be-primary)!important;background:var(--be-primary)!important;} body.be-theme .btnConTime.avtive {background:var(--be-primary)!important;} body.be-theme .timeSlot a.btn.tooltipped.confirmScheduleActive {background:var(--be-primary)!important;} body.be-theme .detlRight .ntb_cart a.heading_font {background:var(--be-primary)!important;} body.be-theme span.but_ful a {background:var(--be-primary)!important;} body.be-theme .bxilfetitut span.star-rate1 {color:var(--be-primary)!important;} body.be-theme ul.lstiverify li a svg {fill:var(--be-primary)!important;} body.be-theme .xbiPromo a {color:var(--be-primary)!important;} body.be-theme .xbiPromo a:hover {background:var(--be-primary)!important;} body.be-theme h5.frriHed svg {fill:var(--be-primary)!important;} body.be-theme .mainCheckuoti .col.s8 .panel-default.credit-card-box button.btn.btn-primary.btn-lg.btn-block.hyperpay {border:2px solid var(--be-primary)!important;color:var(--be-primary)!important;} body.be-theme .xbiInstrucFirst a {color:var(--be-primary)!important;} html body.be-theme .vvdiosss {border:0px solid var(--be-primary)!important;} body.be-theme .enrolled_link {background:var(--be-primary)!important;} body.be-theme h4.valuHeading {color:var(--be-primary)!important;} body.be-theme .chilPaybtn a {background-color:var(--be-primary)!important;} body.be-theme a.btnSubcrip {background-color:var(--be-primary)!important;} body.be-theme .bxiYearplan:hover {border:5px solid var(--be-primary)!important;} body.be-theme .mmenuu #navbarimobile a.active {border-bottom:2px solid var(--be-primary)!important;} body.be-theme .support-form.support-formMain form button.btn.waves-effect.waves-light {background:var(--be-primary)!important;} body.be-theme .booknaim_shop .product-button .btn.btn-primary {background:var(--be-primary)!important;} body.be-theme .social-buttons a {color:var(--be-primary)!important;border:3px solid var(--be-primary)!important;} body.be-theme .social-buttons a:hover {background:var(--be-primary)!important;} body.be-theme #buttoning {background-color:var(--be-primary)!important;} body.be-theme .vtbatical ul.tabs li a.active, body.be-theme .vtbatical ul.tabs li a:hover {background:var(--be-primary)!important;} body.be-theme .addingtoCart button {background:var(--be-primary)!important;} body.be-theme .bxiRelated_products .row .col.s3 .product-inner .add-to-cart-button {background:var(--be-primary)!important;} body.be-theme .bcastoUniman h4 {background:var(--be-primary)!important;} body.be-theme .bookProductList ul {border-top:1px solid var(--be-primary)!important;} body.be-theme .bookProductList .nbOfBooks span {color:var(--be-primary)!important;} body.be-theme .bcastoUniman {border:1px solid var(--be-primary)!important;} body.be-theme .sliSeraching {border:2px solid var(--be-primary)!important;} body.be-theme button.bntinblue {background:var(--be-primary)!important;} body.be-theme .uniFirsting {border-right:2px solid var(--be-primary)!important;} body.be-theme .uniSeconding {border-right:2px solid var(--be-primary)!important;} body.be-theme h5.cmiclTect {border-bottom:1px solid var(--be-primary)!important;} body.be-theme .logsingup {border:0px solid var(--be-primary)!important;} body.be-theme .xbionstepFir form .page .field button {background:var(--be-primary)!important;} body.be-theme #videoPreviewContainer a.waves-effect.waves-light.btn {background:var(--be-primary)!important;} body.be-theme .xbionstepFir .avatar-upload .avatar-edit input + label {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme ul.lisicoteji li a:hover {color:var(--be-primary)!important;} body.be-theme .shopcontRight ul.pagination li.page-item.active, body.be-theme .shopcontRight ul.pagination li a:hover {background:var(--be-primary)!important;} body.be-theme .slidHediCont {color:var(--be-primary)!important;} body.be-theme .slidHediCont a {color:var(--be-primary)!important;} body.be-theme .btnTextRead {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme .btnTextBook {background:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme .btnTextBook:hover, body.be-theme .btnTextRead:hover {border:1px solid var(--be-primary)!important;color:var(--be-primary)!important;} body.be-theme .Contsubmit input {background:var(--be-primary)!important;border:2px solid var(--be-primary)!important;} body.be-theme .bxicontMediOne:hover span i.fa {color:var(--be-primary)!important;} body.be-theme .serchProductList .product-button a {background:var(--be-primary)!important;} body.be-theme .shopShort a {background:var(--be-primary)!important;border:2px solid var(--be-primary)!important;} body.be-theme .fieldinToAccording .collapsible-body button.next {background:var(--be-primary)!important;} body.be-theme .childSelecMid button.submit {background-color:var(--be-primary)!important;} body.be-theme .selChilding label span {color:var(--be-primary)!important;} body.be-theme .img-container.fly-to-basket a.container-link {background:var(--be-primary)!important;} body.be-theme .diploMidAbout h4 {color:var(--be-primary)!important;} body.be-theme button.btn.btnAppSub {background:var(--be-primary)!important;} body.be-theme button.btn.btnProgram {background:var(--be-primary)!important;} body.be-theme ul.lisiObjcting li:after {color:var(--be-primary)!important;} body.be-theme .txtifromi button {background:var(--be-primary)!important;} body.be-theme .txtifromi .btn.btn-primary {background:var(--be-primary)!important;} body.be-theme a.ntbViewCal {background:var(--be-primary)!important;} body.be-theme .paginationCls.pageCls ul.pagination li a:hover {color:var(--be-primary)!important;} body.be-theme .slibxoin .owl-carousel.owl-theme.owl-loaded.owl-drag .owl-nav button {background:var(--be-primary)!important;} body.be-theme .maininTwo.boxiCrouping ul.pagination li.page-item.active {background:var(--be-primary)!important;} body.be-theme ul.lisBlogMenu li a:hover {border-bottom:4px solid var(--be-primary)!important;} body.be-theme .cta-interlinking__content .btn {background:var(--be-primary)!important;} body.be-theme .tutors-carousel__footer .btn.btn--large {background:var(--be-primary)!important;} body.be-theme .tababhaTheme ul.tabs li a.active {background:var(--be-primary)!important;} body.be-theme .pagination.commonPagton ul.pagination li.page-item.active {background-color:var(--be-primary)!important;} body.be-theme .pagination.commonPagton ul.pagination li.page-item a:hover {color:var(--be-primary)!important;} body.be-theme .thxSubMisn:before {border-bottom:400px solid var(--be-primary)!important;} body.be-theme .thnkLeft .social-links a {border:1px solid var(--be-primary)!important;} body.be-theme .inbithaqTheme .owl-theme .owl-nav [class*="owl-"]:hover {background:var(--be-primary)!important;} body.be-theme span.uplNwimg a {background:var(--be-primary)!important;} body.be-theme .acmBox a.btn.btn-theme.btn-light.btn-more {background:var(--be-primary)!important;} body.be-theme .category-card .fa {color:var(--be-primary)!important;} body.be-theme .payCanlMainBox .text-section .btn {background-color:var(--be-primary)!important;} body.be-theme .dayName {border-top:4px solid var(--be-primary)!important;} body.be-theme .dayName.active p.dayDate {background-color:var(--be-primary)!important;} body.be-theme .timeSlot a.btn.tooltipped {color:var(--be-primary)!important;} body.be-theme .timeSlot a.btn.tooltipped:hover {border:1px solid var(--be-primary)!important;} body.be-theme .viewScheduleButton {color:var(--be-primary)!important;border:1px solid var(--be-primary)!important;} body.be-theme li.select2-results__option.select2-results__option--selectable.select2-results__option--selected {background:var(--be-primary)!important;} body.be-theme button.mainibottomThreeButton {background-color:var(--be-primary)!important;} body.be-theme button.mainibottomThreeButton:focus {background:var(--be-primary)!important;} body.be-theme #messageBoxModal button {background:var(--be-primary)!important;} body.be-theme .chatwidgetsBoxCls span.namecls {color:var(--be-primary)!important;} @media only screen and (max-width: 767px){ body.be-theme .tutor_profile_Section_r_three span.but_ful a {background:var(--be-primary)!important;} body.be-theme .main_responsive span.but_ful1 a {color:var(--be-primary)!important;} body.be-theme .search-inline button[type="submit"] {background:var(--be-primary)!important;} body.be-theme .search-inline button[type="button"] {background:var(--be-primary)!important;} body.be-theme a.clr_all {color:var(--be-primary)!important;} body.be-theme #myModali .modal-footer button.btn.btn-default {background:var(--be-primary)!important;} body.be-theme #myModali [type="checkbox"]:checked+span:not(.lever):before {border-right:2px solid var(--be-primary)!important;border-bottom:2px solid var(--be-primary)!important;} } @media only screen and (max-width: 600px){ body.be-theme .sliSeraching.innerPgi .uniSeconding {border-top:2px solid var(--be-primary)!important;} body.be-theme .sliSeraching.innerPgi .uniTherding {border-top:2px solid var(--be-primary)!important;} } /* ----- Part B: curated overrides ----- */ body.be-theme{--be-primary:#497e9f;--be-primary-dark:#3b6a87;--be-primary-tint:rgba(73,126,159,.12);} /* Global links (low specificity so existing custom link colours still win) */ :where(body.be-theme) a{color:var(--be-primary);} body.be-theme .dropdown-content li>a, body.be-theme .dropdown-content li>span{color:var(--be-primary);} /* Solid buttons / CTAs */ body.be-theme .enrolled_link, body.be-theme .ntb_cart a.heading_font, body.be-theme .detlRight .ntb_cart a.heading_font, body.be-theme button.btn.btn-primary, body.be-theme .btn.btn-primary, body.be-theme button.btn-login, body.be-theme button.btn.btn-primary-log, body.be-theme #btnLogin, body.be-theme #btnSignup, body.be-theme #btnSignupaf, body.be-theme #btnforgotpassword, body.be-theme #otpVerficationLoginBtn, body.be-theme button.tbnRemoveing, body.be-theme .login-inter, body.be-theme .wf-btn, body.be-theme span.but_ful a, body.be-theme .rig_tx a.add_cart, body.be-theme .addingtoCart button, body.be-theme a.btnSubcrip, body.be-theme .chilPaybtn a, body.be-theme .Contsubmit input, body.be-theme .bixiSerching button, body.be-theme .search-inline button, body.be-theme .sec_bott a.book_lesson, body.be-theme .book_lesson-confirm, body.be-theme button.btn.btnAppSub, body.be-theme button.btn.btnProgram, body.be-theme .sign-today, body.be-theme #buttoning, body.be-theme button#myBtn, body.be-theme span.cart_num, body.be-theme span.totalTutors, body.be-theme li.wishBtni a, body.be-theme .exploCenter .owl-nav button {background-color:var(--be-primary)!important;border-color:var(--be-primary)!important;color:#fff!important;} /* Hover states */ body.be-theme .enrolled_link:hover, body.be-theme .ntb_cart a.heading_font:hover, body.be-theme .btn.btn-primary:hover, body.be-theme button.btn-login:hover, body.be-theme span.but_ful a:hover, body.be-theme span.but_ful1 a:hover, body.be-theme .social-buttons a:hover, body.be-theme a.buy_no:hover, body.be-theme .xbiPromo a:hover, body.be-theme li.wishBtni a:hover, body.be-theme .peginiMnin ul.pagination li a:hover, body.be-theme div#cirruculumtable_paginate a:hover {background-color:var(--be-primary-dark)!important;border-color:var(--be-primary-dark)!important;color:#fff!important;} /* Text-coloured items */ body.be-theme i.fa.fa-share, body.be-theme .sign-up-text, body.be-theme .header-btn a, body.be-theme .xbiInstrucFirst a, body.be-theme .xbiPromo a, body.be-theme .main_fti a, body.be-theme .main_fti nav .nav-wrapper a.breadcrumb, body.be-theme .main_fti .breadcrumb::before, body.be-theme span.but_ful1 a, body.be-theme .social-buttons a, body.be-theme .main_studOne ul.tabs li a.active, body.be-theme .main_studOne .tabs .tab a:hover, body.be-theme .slidHediCont, body.be-theme .slidHediCont a, body.be-theme h4.valuHeading, body.be-theme span.courseHR b, body.be-theme .video-container p, body.be-theme .cart_one3 a:hover, body.be-theme .bxicontMediOne:hover span i.fa, body.be-theme ul.lisBlogMenu li a:hover, body.be-theme ul.lisicoteji li a:hover, body.be-theme a.book_message, body.be-theme .toplif.active>a, body.be-theme .toplif.activeo>a, body.be-theme .timeSlot a.btn.tooltipped, body.be-theme .viewScheduleButton {color:var(--be-primary)!important;} /* Borders / underlines */ body.be-theme div#loginModal, body.be-theme div#loginModaling, body.be-theme div#signupModal, body.be-theme div#signupaffiliateModal, body.be-theme div#groupclassModal, body.be-theme div#modallessononline, body.be-theme .modal-content1, body.be-theme .logsingup, body.be-theme .login-today, body.be-theme .vvdiosss, body.be-theme span.tital_spanrr .main-txte, body.be-theme span.five_tital_spanrr .main-txte, body.be-theme .tutor_profile_Section_l_four ul.tabs li a.active, body.be-theme .tutor_profile_Section_l_four ul.tabs li a:hover, body.be-theme .mmenuu #navbari a.active, body.be-theme .mmenuu #navbarimobile a.active, body.be-theme .dayName, body.be-theme .viewScheduleButton, body.be-theme .timeSlot a.btn.tooltipped:hover, body.be-theme input#book_code, body.be-theme .find_tutor_cont_on:hover, body.be-theme .bxiYearplan:hover {border-color:var(--be-primary)!important;} body.be-theme .tabs .indicator{background-color:var(--be-primary)!important;} /* Pagination / active states */ body.be-theme .pagination.box-page ul.pagination li.page-item.active, body.be-theme .pagi_naviOne .pagination li.active, body.be-theme .peginiMnin ul.pagination li.active, body.be-theme .shopcontRight ul.pagination li.page-item.active, body.be-theme .dayName.active p.dayDate, body.be-theme .btnConTime.avtive, body.be-theme .timeSlot a.btn.tooltipped.confirmScheduleActive, body.be-theme .vtbatical ul.tabs li a.active, body.be-theme .bxohelpLeft .collapsible-header.active_menu_help_page, body.be-theme .noUi-connect, body.be-theme .noUi-horizontal .noUi-handle, body.be-theme li.select2-results__option--selected {background-color:var(--be-primary)!important;border-color:var(--be-primary)!important;color:#fff!important;} /* Keep the number inside active pagination items white (the carries its own colour) */ body.be-theme .pagination li.active a, body.be-theme .pagination li.active span, body.be-theme .pagination li.page-item.active .page-link {background-color:transparent;color:#fff!important;} /* Materialize form controls */ body.be-theme [type="checkbox"]:checked+label::before, body.be-theme [type="checkbox"]:checked+span:not(.lever)::before {border-right-color:var(--be-primary)!important;border-bottom-color:var(--be-primary)!important;} body.be-theme [type="checkbox"]:indeterminate+label::before{border-right-color:var(--be-primary)!important;} body.be-theme input:focus:not([readonly]), body.be-theme textarea:focus:not([readonly]) {border-bottom-color:var(--be-primary)!important;box-shadow:0 1px 0 0 var(--be-primary)!important;} body.be-theme input:focus:not([readonly])+label, body.be-theme textarea:focus:not([readonly])+label {color:var(--be-primary)!important;} /* Header search icon */ body.be-theme .headSrchAll .search-wrapper.active .input-holder .search-icon, body.be-theme .headSrchAll .search-wrapper .input-holder .search-icon span::after {border-color:var(--be-primary)!important;} body.be-theme .headSrchAll .search-wrapper .input-holder .search-icon span::before, body.be-theme .headSrchAll .search-wrapper .close::before, body.be-theme .headSrchAll .search-wrapper .close::after {background-color:var(--be-primary)!important;} .cp-register .f-btn .btn-login.borderOnly:hover { background: #497e9f !important; } /* ===== END BE THEME ===== */ /* ===== CP-CATEGORIES (2026-10-14, ARSHAD-8) — "Program Categories" on the home page ===== Between the hero and the partners (udemy_theme/home_page.blade.php). Arabic / RTL. Rows are 4 / 5 / 3 cards; 2 columns at <=1024px, 1 column at <=560px. Own class names (cp-categories__row…) instead of a generic .row, so no grid framework can touch them. */ .cp-categories{ --be-primary:#497E9F; --be-primary-dark:#3A6683; --be-light:#B6CBD9; --be-text:#2B2B3C; --be-muted:#6A6F73; --be-pink:#E5536F; --be-bg:#F4F8FB; --be-card:#FFFFFF; --be-border:#E3ECF2; --tint-blue:rgba(73,126,159,.14); --tint-gold:rgba(240,169,46,.16); --tint-pink:rgba(229,83,111,.12); position:relative; background:linear-gradient(180deg,var(--be-bg) 0%,#fff 100%); padding:56px 16px 64px; overflow:hidden; font-family:Inter,Poppins,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--be-text); } .cp-categories *,.cp-categories *::before,.cp-categories *::after{box-sizing:border-box} .cp-categories::before,.cp-categories::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--tint-blue);filter:blur(40px);z-index:0;pointer-events:none} .cp-categories::before{top:-80px;right:-80px} .cp-categories::after{bottom:-100px;left:-80px;background:var(--tint-pink)} .cp-categories__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto} .cp-categories__head{text-align:center;margin:0 0 32px} .cp-categories__eyebrow{display:inline-block;font-size:13px;font-weight:600;line-height:1.4;color:var(--be-primary);background:var(--tint-blue);padding:6px 14px;border-radius:999px;margin:0 0 12px} .cp-categories__title{font-size:24px;font-weight:700;line-height:1.35;color:var(--be-primary);margin:0} .cp-categories__sub{margin:8px 0 0;color:var(--be-muted);font-size:15px;line-height:1.6} .cp-categories__rows{display:flex;flex-direction:column;gap:16px} .cp-categories__row{display:grid;gap:16px;margin:0} .cp-categories__row--4{grid-template-columns:repeat(4,minmax(0,1fr))} .cp-categories__row--5{grid-template-columns:repeat(5,minmax(0,1fr))} .cp-categories__row--3{grid-template-columns:repeat(3,minmax(0,1fr))} .cp-cat{display:flex;align-items:center;gap:14px;background:var(--be-card);border:1px solid var(--be-border);border-radius:16px;padding:18px;text-decoration:none;color:var(--be-text);box-shadow:0 4px 14px rgba(28,29,40,.04);transition:transform .25s,box-shadow .25s,border-color .25s;min-height:96px} .cp-cat:hover,.cp-cat:focus-visible{transform:translateY(-4px);border-color:var(--be-light);box-shadow:0 12px 28px rgba(73,126,159,.16);color:var(--be-text);text-decoration:none} .cp-cat__icon{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--be-primary);background:var(--tint-blue)} .cp-cat--gold .cp-cat__icon{background:var(--tint-gold);color:#B97A10} .cp-cat--pink .cp-cat__icon{background:var(--tint-pink);color:var(--be-pink)} .cp-cat__icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .cp-cat__label{flex:1;min-width:0;font-size:16px;font-weight:700;line-height:1.45} .cp-cat__arrow{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--be-bg);display:grid;place-items:center;color:var(--be-text);transition:background .25s,color .25s} .cp-cat__arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cp-cat:hover .cp-cat__arrow,.cp-cat:focus-visible .cp-cat__arrow{background:var(--be-primary);color:#fff} .cp-categories__row--5 .cp-cat{padding:16px 14px;gap:10px} .cp-categories__row--5 .cp-cat__icon{flex-basis:50px;width:50px;height:50px} .cp-categories__row--5 .cp-cat__label{font-size:15px} .cp-categories__cta{text-align:center;margin-top:36px} .cp-categories .cp-btn{display:inline-flex;align-items:center;gap:10px;background:var(--be-primary);color:#fff;text-decoration:none;font-weight:600;font-size:15px;line-height:1.4;padding:14px 34px;border-radius:999px;box-shadow:0 8px 20px rgba(73,126,159,.3);transition:background .25s,transform .25s} .cp-categories .cp-btn:hover,.cp-categories .cp-btn:focus-visible{background:var(--be-primary-dark);color:#fff;transform:translateY(-2px);text-decoration:none} .cp-categories .cp-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (max-width:1024px){ .cp-categories__row--4,.cp-categories__row--5,.cp-categories__row--3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .cp-categories__row--4,.cp-categories__row--5,.cp-categories__row--3{grid-template-columns:minmax(0,1fr)} .cp-cat{min-height:80px;padding:14px} .cp-cat__icon{flex-basis:50px;width:50px;height:50px} .cp-categories__title{font-size:21px} } /* English (LTR): same layout mirrored by dir="ltr" (icon left, arrow right); arrows point right. */ .cp-categories[dir="ltr"] .cp-cat__arrow svg,.cp-categories[dir="ltr"] .cp-btn svg{transform:scaleX(-1)} .cp-categories[dir="ltr"] .cp-categories__title{letter-spacing:-.2px} /* ===== END CP-CATEGORIES ===== */ /* ARSHAD-16 (2026-10-14): homepage hero card mirrors in Arabic (RTL). styles.css pins it with left:72px and has no RTL rule, so on [dir=rtl] the card sat on the left. Desktop only: below 900px the card is static (stacked under the image) in both directions. */ @media (min-width: 901px) { html[dir="rtl"] .hero__card { left: auto; right: 72px; text-align: right; } } /* AMIT-228 part 2 (2026-10-15): the Our Programs tiles come from the category admin, so one even grid (4 / 3 / 2 / 1 columns) replaces the fixed 4-5-3 rows (.cp-categories__row--N stay for nothing). */ .cp-categories__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} @media (max-width:1100px){.cp-categories__grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:820px){.cp-categories__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.cp-categories__grid{grid-template-columns:minmax(0,1fr)}} /* ARSHAD-19 (2026-10-17): course/diploma sidebar card - the payment logos (Apple Pay, mada, Mastercard, STC Pay, Visa, Tamara, Tabby) are white PNGs on the white card, so they were invisible. Images untouched; each link gets a brand-teal tile behind it. */ .pricing-box ul.uviq-payment-methods{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px} .pricing-box ul.uviq-payment-methods > li{width:auto;height:auto;margin:0;padding:0;background:none} .pricing-box ul.uviq-payment-methods > li > a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;min-width:96px;padding:8px 14px;border-radius:10px;background-color:#4E6B6B} .pricing-box ul.uviq-payment-methods > li > a > img{max-height:22px;height:auto;width:auto;max-width:100%;opacity:1;filter:none} /* ARSHAD-19b (2026-10-17): same card - "Register Now" was white text on a white button (invisible). Brand teal like the price bar and payment tiles; slightly darker on hover/focus. */ .pricing-box a.btn.register-btn{background-color:#4E6B6B !important;color:#fff !important} .pricing-box a.btn.register-btn:hover,.pricing-box a.btn.register-btn:focus{background-color:#3D5656 !important;color:#fff !important} /* ===== KW-WHEEL (2026-10-17, ARSHAD-20) - /karimwrama-wheel on brandseducation ===== The shared karimwrama view is built for a full-screen kids site (html/body 100% high, wheel pulled up with a negative margin, characters pinned to the bottom), so here the wheel slid under the header and the footer rode over the game. Original design kept as is; only placed in the page flow: header first, the sky section grows tall enough for the whole wheel, footer after it. Phones keep the original letter grid. Scoped to this page on theme 33. */ html:has(body.be-theme .sppinMain.wheel){height:auto} body.be-theme:has(.sppinMain.wheel){display:flex;flex-direction:column;min-height:100vh;height:auto} body.be-theme:has(.sppinMain.wheel) > #app{flex:1 0 auto;display:flex;flex-direction:column;height:auto} body.be-theme:has(.sppinMain.wheel) .sk-head{position:relative;z-index:100} body.be-theme:has(.sppinMain.wheel) main.py-4{flex:1 0 auto;height:auto;padding:0} body.be-theme:has(.sppinMain.wheel) .newThemeChild,body.be-theme:has(.sppinMain.wheel) .mainDivi{float:none;width:100%;height:auto} body.be-theme:has(.sppinMain.wheel) .sk-foot{position:relative;margin-top:0} body.be-theme:has(.sppinMain.wheel) .mainBgTwo{position:relative;height:auto !important;min-height:calc(100vh - 110px);padding:40px 0 160px;box-sizing:border-box;overflow:hidden} body.be-theme:has(.sppinMain.wheel) .mainBgTwo .sppinMain.wheel{margin-top:0} @media (max-width:800px){body.be-theme:has(.sppinMain.wheel) .mainBgTwo{min-height:0;padding:24px 0 0}} /* ===== END KW-WHEEL ===== */ /* ARSHAD-20c (2026-10-17): same page - the plans popup (#popupBox) opened under the sticky header (header z-index 100, popup none), so its top was cut off, and on phones the two plan cards were squeezed side by side. Popup above the header, scrolls when taller than the screen; cards stack on phones. */ body.be-theme:has(.sppinMain.wheel) #popupBox.popup{z-index:10000;overflow-y:auto;align-items:safe center;justify-content:center;padding:24px 16px;box-sizing:border-box} body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content{position:relative;width:800px;max-width:100%;margin:auto;padding:16px;box-sizing:border-box} body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content .close{position:absolute;top:8px;inset-inline-end:12px;float:none;font-size:26px;line-height:1;z-index:2} @media (max-width:600px){ body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content{padding:40px 12px 12px} body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content > .row{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0} body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content > .row > .col.s2{display:none} body.be-theme:has(.sppinMain.wheel) #popupBox .popup-content > .row > .col.s4{width:100%;max-width:280px;margin:0;float:none;padding:0} } /* ===== BE-CAROUSEL (2026-10-17, ARSHAD-21) - every .carousel on brandseducation ===== Works with js/be-carousel.js (arrows, dots, mouse drag, RTL) and js/bx-marquee.js (marquee on wider screens only; phones get the native swipe slider). Card design is unchanged: these rules only add swipe/drag behaviour, mobile arrows, dots and the 78% mobile card width. */ .carousel__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; cursor: grab; -webkit-user-select: none; user-select: none; } .carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .carousel__track.is-dragging a { pointer-events: none; } .carousel__track img { -webkit-user-drag: none; pointer-events: none; } /* Marquee rows are moved by the animation, not by scrolling: let the page scroll vertically and hand horizontal drags to be-carousel.js. */ .carousel--marquee .carousel__track { touch-action: pan-y; } .carousel__arrow.is-disabled { opacity: .35; cursor: default; } /* Nothing to scroll (all cards fit): no arrows, no dots. */ .carousel--static .carousel__arrow, .carousel--static .carousel__dots { display: none; } .carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 12px; } .carousel__dot { border: 0; background: none; padding: 6px 3px; line-height: 0; cursor: pointer; } .carousel__dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: #D6D3E3; transition: width .25s ease, background-color .25s ease; } .carousel__dot.is-active::before { width: 22px; background: var(--purple); } .carousel__dot:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; border-radius: 6px; } @media (max-width: 768px) { .carousel__arrow { display: flex; width: 34px; height: 34px; font-size: 13px; } .carousel__arrow--prev { left: 4px; } .carousel__arrow--next { right: 4px; } [dir="rtl"] .carousel__arrow--prev { left: auto; right: 4px; } [dir="rtl"] .carousel__arrow--next { right: auto; left: 4px; } .course-card { flex-basis: 78%; } } @media (prefers-reduced-motion: reduce) { .carousel__dot::before { transition: none; } } /* ===== END BE-CAROUSEL ===== */ /* ===== CP-DL CHIPS (2026-10-17, ARSHAD-23) - /diploma-programs/{category}/{sub?} ===== View: udemy_theme/diploma_list.blade.php (AMIT-237, its own inline styles untouched). The chip bar is a