/* ==========================================================================
   Landing page — design layer
   --------------------------------------------------------------------------
   Loaded after style.css, and it does not replace it: the template's layout,
   its grid and every class name stay exactly where they are. What changes is
   the surface — colour, type, spacing, depth — the same way theme.css does it
   for the admin panel, so the marketing site and the product a school signs
   into look like one thing.

   Colour still comes from System Settings. The five --theme-* rows feed the
   :root block in home.blade.php; everything below is derived from those with
   color-mix(), so an operator who sets their own brand colour gets a coherent
   page rather than one button in their colour and a mint green everything
   else. Every derived value is written twice: a flat rgba first for browsers
   without color-mix(), then the mix.
   ========================================================================== */

:root {
    /* Neutrals. Deliberately cool-grey rather than the template's near-black
       on white: a page of #000000 text is harsher than anything printed. */
    --ld-ink: #0e2033;
    --ld-ink-2: #39485c;
    --ld-ink-3: #66778c;
    --ld-ink-4: #94a2b5;

    --ld-surface: #ffffff;
    --ld-wash: #f6f8fc;
    --ld-line: #e5e8f0;
    --ld-line-strong: #d3d9e6;

    /* Flat fallbacks first, for a browser without color-mix(); the mixed
       values below override them where it is supported. The literal is the
       shipped default - an operator's own --primary-color still wins in both
       branches. */
    --ld-accent: #1668c1;
    --ld-accent-strong: #12559e;
    --ld-accent-soft: rgba(22, 104, 193, 0.10);
    --ld-accent-softer: rgba(22, 104, 193, 0.05);
    --ld-accent-ring: rgba(22, 104, 193, 0.22);

    --ld-accent: var(--primary-color, #1668c1);
    --ld-accent-strong: color-mix(in srgb, var(--primary-color, #1668c1) 82%, black);
    --ld-accent-soft: color-mix(in srgb, var(--primary-color, #1668c1) 10%, transparent);
    --ld-accent-softer: color-mix(in srgb, var(--primary-color, #1668c1) 5%, transparent);
    --ld-accent-ring: color-mix(in srgb, var(--primary-color, #1668c1) 22%, transparent);

    --ld-deep: var(--secondary-color, #0e2a42);

    --ld-radius: 14px;
    --ld-radius-sm: 10px;
    --ld-radius-lg: 22px;

    --ld-shadow-1: 0 1px 2px rgba(15, 23, 41, 0.05), 0 1px 3px rgba(15, 23, 41, 0.06);
    --ld-shadow-2: 0 10px 30px rgba(15, 23, 41, 0.08);
    --ld-shadow-3: 0 24px 60px rgba(15, 23, 41, 0.12);

    /* One section rhythm for the whole page, instead of each section
       choosing its own margin. */
    --ld-section: 104px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", "Lato", Arial, sans-serif !important;
    color: var(--ld-ink-2);
    background-color: var(--ld-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

a {
    color: var(--ld-ink) !important;
    transition: color .15s ease;
}

a:hover {
    color: var(--ld-accent) !important;
}

img {
    max-width: 100%;
}

::selection {
    background: var(--ld-accent-ring);
}

/* The page scrolls to #features, #pricing and #contact-us from the nav, and
   the navbar is sticky — without this the heading lands underneath it. */
html {
    scroll-behavior: smooth;
}

section[id],
footer[id] {
    scroll-margin-top: 92px;
}

/* --------------------------------------------------------------------------
   Rhythm
   -------------------------------------------------------------------------- */

.commonMT {
    margin-top: var(--ld-section) !important;
}

@media screen and (max-width: 991px) {
    :root { --ld-section: 68px; }
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar {
    background-color: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid var(--ld-line);
    position: sticky;
}

/* The frost sits on a pseudo-element, not on .navbar itself.
   backdrop-filter makes the element carrying it the containing block for
   every position:fixed descendant - and the mobile off-canvas menu is a
   fixed element inside this header. With the filter on .navbar the menu was
   laid out inside the bar instead of over the page, and its 997px of
   translated width became 997px of horizontal page scroll. A pseudo-element
   is nobody's ancestor, so the effect stays and the menu is left alone. */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

.navbar > .container {
    position: relative;
}

.navbar .navbarWrapper {
    height: 76px;
}

.navbar .listItems {
    gap: 30px;
    align-items: center;
}

.navbar ul li a,
.navbar .dropdown-toggle {
    color: var(--ld-ink-2) !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    position: relative;
    padding: 6px 0;
}

.navbar ul li a:hover,
.navbar .dropdown-toggle:hover {
    color: var(--ld-ink) !important;
}

/* A hairline that grows from the middle, rather than a colour change alone —
   the difference between "this is a link" and "this is where I am". */
.navbar .listItems > li > a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ld-accent);
    transition: left .18s ease, right .18s ease;
}

.navbar .listItems > li > a:hover::after {
    left: 0;
    right: 0;
}

.navbar .logo {
    height: 44px;
}

.navbar .dropdown-menu {
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius-sm);
    box-shadow: var(--ld-shadow-2);
    padding: 6px;
    margin-top: 10px;
}

.navbar .dropdown-item {
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ld-ink-2);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--ld-accent-soft);
    color: var(--ld-accent) !important;
}

/* The two buttons on the right of the bar. */
.loginBtnsWrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.loginBtnsWrapper .btn,
.loginBtnsWrapper a,
.loginBtnsWrapper button {
    border-radius: 999px !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    padding: 9px 20px !important;
    border: 1px solid transparent !important;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.loginBtnsWrapper .btn-secondary,
.loginBtnsWrapper .redirect-login {
    background: var(--ld-surface) !important;
    color: var(--ld-ink) !important;
    border-color: var(--ld-line-strong) !important;
    box-shadow: var(--ld-shadow-1);
}

.loginBtnsWrapper .btn-secondary:hover,
.loginBtnsWrapper .redirect-login:hover {
    border-color: var(--ld-accent) !important;
    color: var(--ld-accent) !important;
}

.hamburg {
    color: var(--ld-ink);
    font-size: 22px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.commonBtn {
    background: var(--ld-accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--ld-accent) !important;
    border-radius: 999px !important;
    padding: 13px 28px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -0.005em;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px var(--ld-accent-ring);
    transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
    white-space: nowrap;
}

.commonBtn:hover,
.commonBtn:focus {
    background: var(--ld-accent-strong) !important;
    border-color: var(--ld-accent-strong) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px var(--ld-accent-ring);
}

.commonBtn:active {
    transform: translateY(0);
}

/* Two calls to action side by side should not be equally loud. In the hero
   the primary is a <button> (register) and the secondary is an <a> (the demo
   school), so no markup has to change to tell them apart. */
.heroSection a.commonBtn {
    background: var(--ld-surface) !important;
    color: var(--ld-ink) !important;
    border-color: var(--ld-line-strong) !important;
    box-shadow: var(--ld-shadow-1);
}

.heroSection a.commonBtn:hover {
    border-color: var(--ld-accent) !important;
    color: var(--ld-accent) !important;
    background: var(--ld-surface) !important;
}

/* `mx-5` on the second hero button is a 3rem gutter on both sides. */
.heroSection .commonBtn.mx-5 {
    margin-left: 12px !important;
    margin-right: 0 !important;
}

.view-more-feature {
    margin-top: 34px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.heroSection {
    background: var(--ld-wash) !important;
    position: relative;
    overflow: hidden;
}

/* A quiet wash instead of a flat panel: two very soft radial tints in the
   brand colour, so the top of the page has depth without a photo behind it. */
.heroSection::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 78% 18%, var(--ld-accent-soft), transparent 70%),
        radial-gradient(45% 55% at 8% 88%, var(--ld-accent-softer), transparent 72%);
}

.heroSection .linesBg,
.heroSection .colorBg {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

.heroSection .flex_column_start {
    padding: 34px 0;
}

/* The eyebrow above the headline. */
.heroSection .commonTitle {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em;
    color: var(--ld-accent) !important;
    background: var(--ld-accent-soft);
    border: 1px solid var(--ld-accent-ring);
    border-radius: 999px;
    padding: 6px 15px;
    margin-bottom: 22px;
    max-width: 100%;
}

.heroSection .commonDesc {
    font-size: clamp(34px, 4.2vw, 56px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -0.028em;
    color: var(--ld-ink) !important;
    margin-bottom: 18px;
    display: block;
}

.heroSection .commonText {
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: var(--ld-ink-3) !important;
    max-width: 34em;
    margin-bottom: 30px;
    display: block;
}

.heroSection .heroImg {
    position: relative;
}

/* The two floating chips over the hero photograph. */
.heroSection .topRated,
.heroSection .textWrapper {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ld-line) !important;
    border-radius: var(--ld-radius) !important;
    box-shadow: var(--ld-shadow-2) !important;
}

.heroSection .topRated span,
.heroSection .textWrapper span {
    color: var(--ld-ink) !important;
    font-weight: 650;
    font-size: 13.5px;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

/* The dot-and-bar underline goes. It drew the eye to a decoration rather than
   to the heading, and it sat differently on every section because the rule
   was a percentage of a different container each time. */
.sectionTitle::before,
.sectionTitle::after {
    display: none !important;
}

.sectionTitle {
    margin-bottom: 44px;
    gap: 12px;
}

.sectionTitle span {
    color: var(--ld-ink) !important;
    font-size: clamp(27px, 2.8vw, 38px) !important;
    font-weight: 780 !important;
    letter-spacing: -0.022em;
    line-height: 1.16 !important;
    width: min(100%, 22ch);
    max-width: 760px;
}

/* A second line under a heading is a standfirst, not another heading. */
.sectionTitle span + span {
    font-size: 16.5px !important;
    font-weight: 450 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    color: var(--ld-ink-3) !important;
    width: min(100%, 56ch);
    max-width: 640px;
}

.greenText {
    color: var(--ld-ink) !important;
}

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */

.features .cardWrapper {
    gap: 18px 0;
    margin-top: 0;
}

.features .card {
    border: 1px solid var(--ld-line) !important;
    border-radius: var(--ld-radius) !important;
    background: var(--ld-surface) !important;
    padding: 16px 18px !important;
    gap: 14px;
    align-items: center;
    height: 100%;
    box-shadow: var(--ld-shadow-1);
    transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}

.features .card:hover {
    transform: translateY(-3px);
    border-color: var(--ld-accent-ring) !important;
    box-shadow: var(--ld-shadow-2);
}

/* The icon gets a plate of its own, so nine cards read as one set even though
   the nine SVGs were drawn to different weights. */
.features .card > div:first-child {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ld-radius-sm);
    background: var(--ld-accent-soft);
}

.features .card > div:first-child img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.features .card span {
    color: var(--ld-ink) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.008em;
}

/* --------------------------------------------------------------------------
   The school logos strip
   -------------------------------------------------------------------------- */

.school-logo-owl-carousel .card,
.swiperDataWrapper .card {
    border: 1px solid var(--ld-line) !important;
    border-radius: var(--ld-radius) !important;
    background: var(--ld-surface) !important;
    box-shadow: var(--ld-shadow-1);
    padding: 20px !important;
    height: 100%;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.school-logo-owl-carousel .card:hover {
    border-color: var(--ld-line-strong) !important;
    box-shadow: var(--ld-shadow-2);
}

.school-logo-owl-carousel .card img,
.swiperDataWrapper .card img {
    object-fit: contain;
}

/* One row of cards, all the same height, whether a school's name runs to one
   line or three. */
/* The carousel gives every .owl-item the same width; the .item inside it is
   a flex child and was sizing to its own contents, so a school with a short
   name got a narrower card than one with a long name. */
.school-logo-owl-carousel .item {
    height: 100%;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.school-logo-owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.school-logo-owl-carousel .owl-item {
    display: flex;
    height: auto;
}

.school-logo-owl-carousel .card {
    width: 100%;
    justify-content: flex-start !important;
    gap: 12px;
}

.school-logo-owl-carousel .card span,
.school-logo-owl-carousel .card p {
    color: var(--ld-ink-2) !important;
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

.owl-carousel .owl-dots .owl-dot span {
    background: var(--ld-line-strong) !important;
}

.owl-carousel .owl-dots .owl-dot.active span {
    background: var(--ld-accent) !important;
}

/* --------------------------------------------------------------------------
   Why it is best
   -------------------------------------------------------------------------- */

.whyBest .commonTitle {
    display: inline-flex;
    align-self: flex-start;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ld-accent) !important;
    border-left: 3px solid var(--ld-accent);
    padding-left: 12px;
    margin-bottom: 14px;
}

.whyBest .commonDesc,
.whyBest .sectionTitle span:first-child {
    font-size: clamp(27px, 2.8vw, 38px) !important;
    font-weight: 780 !important;
    letter-spacing: -0.022em;
    line-height: 1.16 !important;
    color: var(--ld-ink) !important;
}

.whyBestPara,
.whyBest .commonText {
    font-size: 16.5px !important;
    line-height: 1.7 !important;
    color: var(--ld-ink-3) !important;
    max-width: 52ch;
}

.whyBest .listWrapper span,
.whyBest .listWrapper li {
    color: var(--ld-ink-2) !important;
    font-weight: 550;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing {
    background: var(--ld-wash) !important;
    padding-bottom: var(--ld-section);
}

.pricingBox {
    background: var(--ld-surface) !important;
    border: 1px solid var(--ld-line) !important;
    border-radius: var(--ld-radius-lg) !important;
    box-shadow: var(--ld-shadow-1);
    padding: 28px 26px !important;
    transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}

.pricingBox:hover {
    transform: translateY(-4px);
    box-shadow: var(--ld-shadow-3);
}

/* The package the operator chose to highlight actually looks chosen. */
.pricingBox.premium {
    border-color: var(--ld-accent) !important;
    box-shadow: 0 0 0 4px var(--ld-accent-soft), var(--ld-shadow-2);
}

.pricingBox .title {
    color: var(--ld-ink) !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    letter-spacing: -0.015em;
}

.pricingBox .textDiv span {
    color: var(--ld-ink-3) !important;
    font-size: 15px;
}

.pricingBox .badge {
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px !important;
}

.pricingBox .badge.prepaid {
    background: var(--ld-accent-soft) !important;
    color: var(--ld-accent) !important;
}

.pricingBox .badge.postpaid {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
}

.pricingBox .rightTickImg,
.pricingBox .wrongTickImg {
    width: 18px;
    height: 18px;
}

.lineThrough {
    color: var(--ld-ink-4) !important;
}

/* --------------------------------------------------------------------------
   Custom package
   -------------------------------------------------------------------------- */

.customPack .wrapper {
    background: var(--ld-deep) !important;
    border-radius: var(--ld-radius-lg) !important;
    padding: 46px 44px !important;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ld-shadow-3);
    align-items: center;
    display: flex;
}

.customPack .wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 140% at 88% 10%, var(--ld-accent-ring), transparent 62%);
}

.customPack .wrapper > .row {
    position: relative;
    z-index: 1;
    width: 100%;
    align-items: center;
}

.customPack .title {
    color: #ffffff !important;
    font-size: clamp(26px, 2.6vw, 34px) !important;
    font-weight: 780 !important;
    letter-spacing: -0.02em;
    margin-bottom: 10px !important;
}

.customPack .desc {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
    max-width: 52ch;
}

.customPack .commonBtn {
    background: #ffffff !important;
    color: var(--ld-deep) !important;
    border-color: #ffffff !important;
    box-shadow: none;
}

.customPack .commonBtn:hover {
    background: #ffffff !important;
    color: var(--ld-accent) !important;
    border-color: #ffffff !important;
}

.customPack .col-lg-6:last-child {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 767px) {
    .customPack .wrapper {
        padding: 32px 24px !important;
    }

    .customPack .col-lg-6:last-child {
        justify-content: flex-start;
        margin-top: 24px;
    }
}

/* --------------------------------------------------------------------------
   Get in touch
   -------------------------------------------------------------------------- */

.getInTouch {
    background: var(--ld-wash) !important;
    padding-top: var(--ld-section);
    padding-bottom: var(--ld-section);
    margin-top: var(--ld-section) !important;
}

.getInTouch .php-email-form .card,
.getInTouch form .card {
    background: var(--ld-surface) !important;
    border: 1px solid var(--ld-line) !important;
    border-radius: var(--ld-radius-lg) !important;
    box-shadow: var(--ld-shadow-2);
    padding: 30px !important;
    gap: 14px;
}

.getInTouch input[type="text"],
.getInTouch input[type="email"],
.getInTouch textarea {
    width: 100%;
    background: var(--ld-surface) !important;
    border: 1px solid var(--ld-line-strong) !important;
    border-radius: var(--ld-radius-sm) !important;
    padding: 13px 15px !important;
    font-size: 15px;
    color: var(--ld-ink) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.getInTouch input::placeholder,
.getInTouch textarea::placeholder {
    color: var(--ld-ink-4) !important;
}

.getInTouch input:focus,
.getInTouch textarea:focus {
    outline: none;
    border-color: var(--ld-accent) !important;
    box-shadow: 0 0 0 4px var(--ld-accent-soft);
}

.getInTouch input[type="submit"] {
    width: 100%;
}

/* The three contact cards beside the form. */
.getInTouch .infoBox {
    background: var(--ld-surface) !important;
    border: 1px solid var(--ld-line) !important;
    border-radius: var(--ld-radius) !important;
    box-shadow: var(--ld-shadow-1);
    padding: 18px 20px !important;
    gap: 16px;
    align-items: center;
    transition: transform .16s ease, box-shadow .18s ease;
}

.getInTouch .infoBox:hover {
    transform: translateY(-2px);
    box-shadow: var(--ld-shadow-2);
}

.getInTouch .infoBox .icon {
    background: var(--ld-accent) !important;
    color: #ffffff !important;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.getInTouch .infoBox .icon i {
    color: #ffffff !important;
    font-size: 17px;
}

.getInTouch .infoBox .title,
.getInTouch .infoBox span:first-child {
    color: var(--ld-ink) !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
}

.getInTouch .infoBox .text,
.getInTouch .infoBox span + span {
    color: var(--ld-ink-3) !important;
    font-size: 14.5px !important;
}

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */

.accordion-item {
    border: 1px solid var(--ld-line) !important;
    border-radius: var(--ld-radius) !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--ld-surface) !important;
}

.accordion-button {
    font-size: 16px !important;
    font-weight: 650 !important;
    color: var(--ld-ink) !important;
    background: var(--ld-surface) !important;
    padding: 18px 20px !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: var(--ld-accent-softer) !important;
    color: var(--ld-accent) !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 4px var(--ld-accent-soft) !important;
    border-color: transparent !important;
}

.accordion-body {
    color: var(--ld-ink-3) !important;
    font-size: 15.5px !important;
    line-height: 1.7;
    padding: 4px 20px 20px !important;
}

/* --------------------------------------------------------------------------
   Download the app
   -------------------------------------------------------------------------- */

.ourApp .commonDesc,
.ourApp .title {
    font-size: clamp(27px, 2.8vw, 38px) !important;
    font-weight: 780 !important;
    letter-spacing: -0.022em;
    line-height: 1.16 !important;
    color: var(--ld-ink) !important;
}

.ourApp .commonText,
.ourApp p {
    font-size: 16.5px !important;
    line-height: 1.7 !important;
    color: var(--ld-ink-3) !important;
    max-width: 56ch;
}

.ourApp .storeImgs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.ourApp .storeImgs img {
    height: 48px;
    width: auto;
    border-radius: var(--ld-radius-sm);
    transition: transform .14s ease;
}

.ourApp .storeImgs img:hover {
    transform: translateY(-2px);
}

.student-web-btn,
.student-web-btn-link {
    border-radius: var(--ld-radius-sm) !important;
    height: 48px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* A dark foot closes the page and matches the panel's rail, instead of the
   pale tint that made the last section look unfinished. */
footer {
    background: var(--ld-deep) !important;
    color: rgba(255, 255, 255, 0.70) !important;
    padding: 64px 0 0 !important;
    margin-top: var(--ld-section) !important;
}

footer a,
footer span,
footer p,
footer li,
footer .text,
footer .desc {
    color: rgba(255, 255, 255, 0.70) !important;
}

footer a {
    font-size: 15px;
}

footer a:hover {
    color: #ffffff !important;
}

footer .title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

footer .commonDesc {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 15px !important;
    line-height: 1.65;
    max-width: 40ch;
    display: block;
}

footer .linksWrapper {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

footer .logo {
    height: 46px;
    margin-bottom: 14px;
}

/* Schools upload dark artwork on transparency; brightening or inverting it is
   a guess that ruins some logos, so it keeps a light plate — the same
   decision the panel's sidebar makes. */
footer .companyInfoWrapper > div:first-child {
    display: inline-block;
    background: #ffffff;
    border-radius: var(--ld-radius-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
}

footer .companyInfoWrapper > div:first-child .logo {
    margin-bottom: 0;
}

footer i {
    color: rgba(255, 255, 255, 0.55);
}

footer hr {
    border-color: rgba(255, 255, 255, 0.12) !important;
    opacity: 1;
    margin-top: 48px;
}

/* The copyright strip. */
footer .container > .row:last-child,
footer .copyRight,
footer .copyright {
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   The registration modal and any other form on the page
   -------------------------------------------------------------------------- */

.modal-content {
    border: 0 !important;
    border-radius: var(--ld-radius-lg) !important;
    box-shadow: var(--ld-shadow-3);
}

.modal-header {
    border-bottom: 1px solid var(--ld-line) !important;
    padding: 20px 26px !important;
}

.modal-title {
    color: var(--ld-ink) !important;
    font-weight: 750 !important;
    letter-spacing: -0.015em;
}

.modal-body {
    padding: 24px 26px !important;
}

.modal-body label,
.modal-body .form-label {
    color: var(--ld-ink-2) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px;
}

.modal-body .form-control,
.modal-body .form-select,
.modal-body select,
.modal-body input:not([type="checkbox"]):not([type="radio"]),
.modal-body textarea {
    border: 1px solid var(--ld-line-strong) !important;
    border-radius: var(--ld-radius-sm) !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    color: var(--ld-ink) !important;
    box-shadow: none !important;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus,
.modal-body select:focus,
.modal-body input:focus,
.modal-body textarea:focus {
    border-color: var(--ld-accent) !important;
    box-shadow: 0 0 0 4px var(--ld-accent-soft) !important;
}

.modal-footer {
    border-top: 1px solid var(--ld-line) !important;
    padding: 16px 26px !important;
}

/* --------------------------------------------------------------------------
   The mobile menu
   -------------------------------------------------------------------------- */

.offcanvas {
    border: 0 !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--ld-line);
    padding: 18px 20px;
}

.offcanvas-body .listItems {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100%;
}

.offcanvas-body .listItems > li {
    width: 100%;
}

.offcanvas-body .listItems > li > a {
    display: block;
    width: 100%;
    padding: 12px 10px !important;
    border-radius: var(--ld-radius-sm);
    font-size: 16px;
}

.offcanvas-body .listItems > li > a::after {
    display: none;
}

.offcanvas-body .listItems > li > a:hover {
    background: var(--ld-accent-soft);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
    .navbar .navbarWrapper {
        height: 64px;
    }

    .heroSection .flex_column_start {
        padding: 26px 0 8px;
        text-align: left;
    }

    .heroSection .commonText {
        font-size: 16px !important;
    }

    .sectionTitle {
        margin-bottom: 32px;
    }

    .sectionTitle span {
        width: 100%;
    }
}

@media screen and (max-width: 575px) {
    .heroSection .d-flex {
        flex-wrap: wrap;
        gap: 10px;
    }

    .heroSection .commonBtn {
        flex: 1 1 100%;
    }

    .heroSection .commonBtn.mx-5 {
        margin-left: 0 !important;
    }

    .getInTouch .php-email-form .card,
    .getInTouch form .card {
        padding: 22px !important;
    }

    footer {
        padding-top: 48px !important;
    }
}