/*
Theme Name: Edunity Child
Theme URI: https://techvander.com/edunity/
Template: edunity
Author: Ordainit
Author URI: https://themeforest.net/user/ordainit/portfolio
Description: Edunity - University, Online Courses, School & Education WordPress Theme
Tags: one-column,right-sidebar,custom-menu,featured-images,post-formats,sticky-post,translation-ready
Version: 1.0.5

*/

/* --------------------------------------------------------------------------
   Bhaskar Children Academy brand overrides.
   Palette is sampled from the school crest and lives in the Customizer
   (Theme Colors); these rules only catch the demo colours the theme hardcodes
   in markup, where the Customizer cannot reach.
   -------------------------------------------------------------------------- */

/* Retire the theme's navy and purple.
   Edunity drives almost every colour through these :root variables (167 rules
   reference --it-common-black alone), so remapping them here recolours the
   whole site in one place. Values come from the crest: saffron, maroon, gold
   and the deep brown of the motto lettering. */
:root {
    /* The theme's own Theme Colors (Customizer > Theme Colors) drive
       --it-theme-1 (saffron) and --it-theme-2 (maroon). Everything below
       points at those rather than repeating hex values, so if the client
       changes the brand colours in the Customizer the whole site follows -
       including any page they add later. */

    /* Neutral dark used for body-weight text and dark sections. */
    --it-common-black: #3A2418;
    --it-common-black-2: #5A4A3E;

    /* Headings lead with the brand saffron, deepened for legibility: the
       Customizer saffron (#E08A2E) reads about 2.6:1 on white, under the 3:1
       floor for large text. This tone keeps the hue and clears it. */
    --bca-saffron-ink: #B4661A;
    --it-common-black-3: var(--bca-saffron-ink);
    --it-heading-primary: var(--bca-saffron-ink);

    /* Demo purples folded onto the brand pair. */
    --it-common-purple-2: var(--it-theme-1);
    --it-common-purple-3: var(--it-theme-2);

    /* Demo accents folded onto the brand pair. */
    --it-common-orange: var(--it-theme-2);
    --it-common-orange-2: var(--it-theme-1);
    --it-common-orange-3: var(--it-theme-1);
    --it-common-yellow: var(--it-theme-1);

    /* Was a cool grey tint. */
    --it-grey-4: #F1E7DA;
}

/* A handful of headings still resolve to the old navy #0E2A46 through a
   var() fallback the variable remap above cannot reach, and the theme sets
   several of them from higher-specificity selectors, so force them here. */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.ed-section-title,
.ed-category-title,
.it-section-title,
.it-blog-title,
.it-blog-title a,
.it-team-author-name {
    color: var(--it-heading-primary) !important;
}

/* Dark sections keep light headings. */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer h1 a, footer h2 a, footer h3 a, footer h4 a, footer h5 a, footer h6 a,
footer .ed-section-title,
footer .it-blog-title,
footer .it-blog-title a,
.it-footer-widget-title,
.ed-footer-widget-title,
.turbo-header-template h1, .turbo-header-template h2, .turbo-header-template h3,
.turbo-header-template h4, .turbo-header-template h5, .turbo-header-template h6,
.turbo-footer-template h1, .turbo-footer-template h2, .turbo-footer-template h3,
.turbo-footer-template h4, .turbo-footer-template h5, .turbo-footer-template h6 {
    color: inherit !important;
}

/* Lavender tints the demo used behind section labels and small buttons. */
.ed-section-subtitle,
.ed-btn-blog,
.it-choose-content,
.it-choose-item i,
.it-funfact-icon i {
    background-color: #FBEBD8;
}

/* Stray blue icon fills from the demo SVG sprites. */
[fill="#1B75E8"], [fill="#1b75e8"],
[fill="#00A9ED"], [fill="#00a9ed"] {
    fill: var(--it-theme-1);
}

[stroke="#1B75E8"], [stroke="#1b75e8"],
[stroke="#00A9ED"], [stroke="#00a9ed"] {
    stroke: var(--it-theme-1);
}

/* Preloader bar, shown on every page load. */
.it-loading-stroke,
.preloader .it-loading-stroke {
    background: var(--it-theme-1) !important;
}

/* Remaining demo hexes baked into inline SVG markup. */
[fill="#4500D0"], [fill="#4500d0"],
[fill="#0E2A46"], [fill="#0e2a46"],
[fill="#0011BB"], [fill="#0011bb"],
[fill="#785DD7"], [fill="#7768E5"] {
    fill: var(--it-theme-2);
}

/* Category cards used a pale blue tint. */
.ed-category-item {
    background-color: #FDF4E8;
}

[stroke="#4500D0"], [stroke="#4500d0"],
[stroke="#0E2A46"], [stroke="#0e2a46"],
[stroke="#785DD7"], [stroke="#7768E5"] {
    stroke: var(--it-theme-2);
}

/* Pale lavender chips and icon tiles the demo uses for social links,
   category icons and the small blog button. */
.it-team-link a,
.it-footer-social a,
.ed-category-icon span {
    background-color: #FBEBD8 !important;
}



/* Several Edunity widgets ship inline SVG decorations with the demo purple
   baked into the stroke/fill attribute. CSS beats a presentation attribute,
   so recolour them to the brand saffron. */
[stroke="#704FE6"],
[stroke="#704fe6"] {
    stroke: var(--it-theme-1);
}

[fill="#704FE6"],
[fill="#704fe6"] {
    fill: var(--it-theme-1);
}

/* Full-bleed header.
   The theme wraps the top bar and the main header row in Bootstrap's 1350px
   .container, which leaves wide gutters on large screens. Widen those two
   containers only - page content keeps its normal measure. */
header.it-header-height .container {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

/* Logo was rendering at 434x107; bring it down by a quarter. */
header.it-header-height .ed-header-logo img {
    max-height: 80px;
    max-width: 326px;
    width: auto;
    height: auto;
}

/* Centre the menu in its column. The column is the middle third of the row,
   so centring inside it centres the menu in the header. The login button's
   column already aligns to the right. */
header.it-header-height .ed-header-main-menu > nav > ul {
    text-align: center;
}

/* Dropdowns stay left-aligned. */
header.it-header-height .ed-header-main-menu > nav > ul ul {
    text-align: left;
}

@media (max-width: 1199px) {
    header.it-header-height .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    header.it-header-height .ed-header-logo img {
        max-height: 62px;
    }
}

@media (max-width: 767px) {
    header.it-header-height .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* The page-title banner ships four purple/coral decoration PNGs from the demo.
   The brand banner behind them already carries its own shapes, so hide them
   rather than leaving the old palette floating over it. */
.it-breadcrumb-area img[src*="/breadcrumb/shape-"] {
    display: none;
}


/* Last of the demo blues. These live as inline colours and SVG attributes in
   the bundled homepage widgets, so they are matched by value. */
[fill="#1B75E8"], [fill="#1b75e8"],
[fill="#00A9ED"], [fill="#00a9ed"],
[fill="#0011BB"], [fill="#0011bb"],
[fill="#4500D0"], [fill="#4500d0"] {
    fill: var(--it-theme-1) !important;
}

[stroke="#1B75E8"], [stroke="#1b75e8"],
[stroke="#00A9ED"], [stroke="#00a9ed"],
[stroke="#0011BB"], [stroke="#0011bb"],
[stroke="#4500D0"], [stroke="#4500d0"] {
    stroke: var(--it-theme-1) !important;
}

[style*="#1B75E8"], [style*="#1b75e8"],
[style*="#00A9ED"], [style*="#00a9ed"],
[style*="#0011BB"], [style*="#0011bb"],
[style*="#4500D0"], [style*="#4500d0"] {
    color: var(--it-theme-1) !important;
    border-color: var(--it-theme-1) !important;
}

/* Contact Form 7 uses its own blue for the response notice. */
.wpcf7-response-output {
    border-color: var(--it-theme-1) !important;
}

/* --------------------------------------------------------------------------
   Buttons: two styles only.
     default          saffron pill, maroon circle, white icon
     .theme-2/.orange maroon pill, saffron circle, white icon
   The theme shipped several one-off variants (teal, coral); they are folded
   into these two so the site keeps a single button language.
   -------------------------------------------------------------------------- */

.ed-btn-theme,
.ed-btn-theme.error-btn {
    background-color: var(--it-theme-1) !important;
    color: var(--it-common-white) !important;
}

.ed-btn-theme i,
.ed-btn-theme.error-btn i {
    background-color: var(--it-theme-2) !important;
    color: var(--it-common-white) !important;
}

/* Second style: maroon pill with the saffron circle. */
.ed-btn-theme.theme-2,
.ed-btn-theme.orange {
    background-color: var(--it-theme-2) !important;
}

.ed-btn-theme.theme-2 i,
.ed-btn-theme.orange i {
    background-color: var(--it-theme-1) !important;
}

/* Icons inside the circle are always white. The theme draws them with
   currentcolor, so the colour above carries, but the explicit stroke and fill
   catch the SVGs that hardcode their own. */
.ed-btn-theme i svg,
.ed-btn-theme i svg path {
    stroke: var(--it-common-white) !important;
}

.ed-btn-theme i svg path[fill]:not([fill="none"]) {
    fill: var(--it-common-white) !important;
}

/* The bundled homepage widgets also set these demo blues as the inherited
   text colour on their icon wrappers. The fills are already overridden above;
   this stops the colour leaking into anything drawn with currentcolor. */
[fill="#4500D0"], [fill="#4500d0"],
[fill="#0011BB"], [fill="#0011bb"],
[fill="#1B75E8"], [fill="#1b75e8"],
[fill="#00A9ED"], [fill="#00a9ed"] {
    color: var(--it-theme-1) !important;
}

svg:has(> [fill="#4500D0"]),
svg:has(> [fill="#0011BB"]),
svg:has(> [fill="#1B75E8"]),
svg:has(> [fill="#00A9ED"]) {
    color: var(--it-theme-1) !important;
}

/* Every remaining theme button variant folds into the two approved styles.
   The theme ships dark, yellow and blog variants with their own pill and
   circle colours; none of them are saffron+maroon or maroon+saffron. */
.ed-btn-dark,
.ed-btn-yellow,
.ed-btn-blog {
    background-color: var(--it-theme-1) !important;
    color: var(--it-common-white) !important;
}

.ed-btn-dark i,
.ed-btn-yellow i,
.ed-btn-blog i {
    background-color: var(--it-theme-2) !important;
    color: var(--it-common-white) !important;
}

.ed-btn-dark i svg,
.ed-btn-yellow i svg,
.ed-btn-blog i svg,
.ed-btn-dark i svg path,
.ed-btn-yellow i svg path,
.ed-btn-blog i svg path {
    stroke: var(--it-common-white) !important;
}

/* The hero's "200+ Instructor" badge is demo furniture: the figure is
   invented and the avatars are stock. The widget hardcodes the markup, so it
   is removed here rather than through a setting. */
.ed-slider-instructor-box {
    display: none !important;
}

/* Hero: keep the text column clear of the photograph.
   The theme sizes the content to the full row, which is fine when a
   background image sits behind the words. With the photo in the right-hand
   half instead, the headline ran underneath it and was clipped. */
.ed-slider-content {
    position: relative;
    z-index: 2;
    /* The theme puts this text in a col-xl-8 while the photograph's column
       starts around the half-way mark, so the text column genuinely overlaps
       the image. A fixed cap cannot track that across widths - at 1920 the
       photo starts at 931px, at 1366 it starts at 710px - so the limit is a
       share of the column, with a ceiling for very wide screens. */
    max-width: min(680px, 68%);
}

@media (max-width: 1199px) {
    .ed-slider-content {
        max-width: 100%;
    }
}

/* Facts strip: three of the four entries are statements, not counts, so they
   carry no number. The theme's counter script renders an empty value as NaN,
   so hide the counter when there is nothing to count and let the label stand
   on its own. */
.it-funfact-content h6 .purecounter[data-purecounter-end=""] {
    display: none;
}

.it-funfact-content h6:empty,
.it-funfact-content h6:has(> .purecounter[data-purecounter-end=""]) {
    display: none;
}

.it-funfact-content h6:has(> .purecounter[data-purecounter-end=""]) + span,
.it-funfact-content span {
    display: block;
}

/* Headings on a brand-coloured panel.
   The global heading rule above paints every h1-h6 saffron, which disappears
   against the saffron and maroon section backgrounds the theme uses for its
   call-to-action bands. White reads on both. */
.elementor-widget-tp-cta .ed-section-title,
.elementor-widget-tp-cta .ed-section-subtitle,
.it-cta-area .ed-section-title,
.it-cta-area h1, .it-cta-area h2, .it-cta-area h3,
.it-cta-area h4, .it-cta-area h5, .it-cta-area h6,
.theme-bg .ed-section-title,
.theme-bg h1, .theme-bg h2, .theme-bg h3,
.theme-bg h4, .theme-bg h5, .theme-bg h6,
.yellow-bg .ed-section-title,
.yellow-bg h1, .yellow-bg h2, .yellow-bg h3,
.yellow-bg h4, .yellow-bg h5, .yellow-bg h6 {
    color: var(--it-common-white) !important;
}

/* Paired buttons: the first keeps the primary style, the second takes the
   alternate so the two read as a hierarchy rather than a repeat. Positional
   rather than class-based, because the theme reuses the same button classes
   for both primary and secondary actions depending on the section. */
[class*="ed-btn-"] + [class*="ed-btn-"] {
    background-color: var(--it-theme-2) !important;
}

[class*="ed-btn-"] + [class*="ed-btn-"] i {
    background-color: var(--it-theme-1) !important;
}

/* --------------------------------------------------------------------------
   Facts band
   Four plain statements about the school. The theme's icon font resolves to
   empty glyphs here (content: "") so the icons were blank boxes - they are
   dropped rather than replaced, since none of the four facts needs one.
   -------------------------------------------------------------------------- */

.it-funfact-area {
    padding-top: 100px;
    padding-bottom: 20px;
}

.it-funfact-bg-wrap {
    background-image: none !important;
    background-color: #FDF7EF;
    border: 1px solid rgba(58, 36, 24, 0.10);
    border-radius: 16px;
    padding: 38px 16px;
}

.it-funfact-icon {
    display: none !important;
}

.it-funfact-item {
    justify-content: center;
    text-align: center;
    padding: 6px 26px;
}

/* Hairline between the columns, so the four read as one set. */
.it-funfact-bg-wrap [class*="col-"]:not(:last-child) .it-funfact-item {
    border-right: 1px solid rgba(58, 36, 24, 0.12);
}

.it-funfact-content {
    position: relative;
    padding-top: 18px;
}

/* A short saffron rule in place of the dead icon. */
.it-funfact-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background-color: var(--it-theme-1);
}

.it-funfact-content span {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--it-common-black);
}

@media (max-width: 767px) {
    .it-funfact-area {
        padding-top: 60px;
    }

    .it-funfact-bg-wrap [class*="col-"] .it-funfact-item {
        border-right: 0;
        padding: 18px 12px;
    }
}

/* About section: even 100px band top and bottom, replacing the theme's 185px. */
.it-about-area.ed-about-style-2 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* Why-choose section: match the About band's rhythm (theme ships 180/110). */
.it-choose-area {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* ==========================================================================
   Premium pass
   The surfaces a browser draws for us still carry the design. Left at their
   defaults they belong to no design system, and they are the clearest tell
   that a page was assembled rather than built.
   ========================================================================== */

/* Selection: brand, not the OS blue. */
::selection {
    background-color: rgba(224, 138, 46, 0.22);
    color: var(--it-common-black);
}

::-moz-selection {
    background-color: rgba(224, 138, 46, 0.22);
    color: var(--it-common-black);
}

/* Caret in every field. */
input,
textarea,
select,
[contenteditable] {
    caret-color: var(--it-theme-1);
}

/* Keyboard focus: visible, branded, and never removed. Pointer users do not
   see it because of :focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--it-theme-1);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Links: the underline sits off the baseline rather than through descenders. */
.it-about-text a,
.it-choose-text a,
.entry-content a,
.bca-portal a {
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

/* Scrollbar, themed for both engines. */
html {
    scrollbar-color: rgba(224, 138, 46, 0.55) #F4EDE4;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background-color: #F4EDE4;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(224, 138, 46, 0.55);
    border: 3px solid #F4EDE4;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--it-theme-1);
}

/* Figures that are read as data line up column by column. */
.it-funfact-content,
.bca-portal .bca-table,
.site-footer__copyright {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Motion: the theme fires the same entrance on every section. Respect the
   system setting and let the page render at rest for anyone who asked for
   less movement. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .wow,
    [class*="itfade"] {
        visibility: visible !important;
        animation-name: none !important;
        opacity: 1 !important;
    }
}

/* Images keep their box while loading, so nothing jumps as they arrive. */
.it-blog-thumb img,
.ed-about-thumb-1 img,
.ed-about-thumb-2 img,
.ed-about-thumb-3 img,
.it-choose-thumb img {
    display: block;
    height: auto;
}

/* ==========================================================================
   Premium pass - defects found in the batched desktop/mobile round
   ========================================================================== */

/* 1. Button labels.
   White on the brand saffron measures 2.68:1 - below the floor at any size.
   The pill keeps its saffron and the label takes the deep brown instead,
   which clears 4.5:1 without giving up the button's identity. The maroon
   alternate keeps white, which already reads at ~6.6:1. */
.ed-btn-theme,
.ed-btn-dark,
.ed-btn-yellow,
.ed-btn-blog,
.bca-header__login nav.it-menu-content > ul > li > a {
    color: var(--it-common-black) !important;
    font-weight: 600;
}

[class*="ed-btn-"] + [class*="ed-btn-"],
.ed-btn-theme.theme-2,
.ed-btn-theme.orange,
.bca-header__login--secondary nav.it-menu-content > ul > li > a {
    color: var(--it-common-white) !important;
}

/* The icon in the circle stays white on both styles. */
.ed-btn-theme i,
.ed-btn-dark i,
.ed-btn-yellow i,
.ed-btn-blog i {
    color: var(--it-common-white) !important;
}

/* 2. Small brand-coloured labels.
   Section eyebrows and meta text ran 2.29-2.68:1 in the Customizer saffron.
   Tinted from the same hue rather than dropped to grey, per the contrast
   rule for coloured text. */
:root {
    --bca-saffron-ink-strong: #8A4E12;
}

.ed-section-subtitle,
.it-testimonial-designation,
.it-team-designation,
.ed-slider-subtitle,
.it-about-experience span,
.it-blog-meta span {
    color: var(--bca-saffron-ink-strong) !important;
}

/* 3. Measure.
   Body copy ran to 155ch on the wider pages; comfortable reading is 65-75ch. */
.entry-content > p,
.it-about-text p,
.it-choose-text p,
.page-content p,
.elementor-widget-text-editor p {
    max-width: 70ch;
}

/* 4. Mobile overflow.
   A few decorative shapes sit a little past the viewport at 390px, which was
   producing a 3px horizontal scroll on several pages. */
@media (max-width: 991px) {
    body {
        overflow-x: hidden;
    }
}

/* The real cause of the sideways drag on phones: the theme gives every .row a
   30px gutter (-15px margins) but leaves .container on Bootstrap's 1.5rem
   (12px padding), so each row pokes 3px past both screen edges. Phone browsers
   ignore overflow:hidden when sizing the page and widen it to fit, letting the
   page slide 3px. Matching the container to the rows' gutter closes the gap.
   Above 575px the container has side margins, so the 3px never reaches the
   screen edge. */
@media (max-width: 575px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 30px;
    }
}

/* Final batch from the confirmation round. */

/* Remaining small brand-coloured labels, matched by their containers since
   the theme leaves these spans unclassed. */
.ed-testimonial-author-box span,
.it-video-content span,
.it-about-content h5,
.it-choose-content h5 {
    color: var(--bca-saffron-ink-strong) !important;
}

/* Measure: the hero paragraph and page prose were running past 150ch on the
   wider pages. */
.ed-slider-content p,
.it-video-content p,
.elementor-widget-container > p,
article p,
.page p {
    max-width: 70ch;
}

/* Horizontal scroll on mobile came from the off-canvas panel parked off the
   right edge. Clamp at the root, since overflow on body alone does not stop
   the document from scrolling. */
@media (max-width: 991px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* The off-canvas panel is fixed-position, so clamping html/body does not
   contain it. Park it with a transform instead of an offset that widens the
   document. */
@media (max-width: 991px) {
    .itoffcanvas {
        right: 0 !important;
        max-width: 100vw;
        transform: translateX(100%);
        transition: transform 0.4s ease;
    }

    .itoffcanvas.info-open,
    .itoffcanvas.opened,
    .itoffcanvas.active {
        transform: translateX(0);
    }
}

/* Video call-to-action band.
   The theme overlays the photograph in navy (#0E2A46). Brand orange instead,
   deepened from the Customizer saffron so white type clears the contrast
   floor on top of it - the plain saffron would land around 2.7:1. */
.it-video-bg::after {
    background-color: #A85916 !important;
    opacity: 0.92 !important;
}

.it-video-bg,
.it-video-content,
.it-video-content h1, .it-video-content h2, .it-video-content h3,
.it-video-content h4, .it-video-content h5, .it-video-content h6,
.it-video-content p,
.it-video-content span,
.it-video-content a:not([class*="ed-btn-"]),
.it-video-area .ed-section-title,
.it-video-area .ed-section-subtitle {
    color: var(--it-common-white) !important;
}

/* The home headline is the school's tagline, written exactly as the school
   writes it ("Empowering Leaders, Not Just Learners", as on its report card). */
.ed-slider-title {
    text-transform: none !important;
}

.ed-about-experience{
	background-color: var(--it-theme-2);
	padding-top: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ed-about-experience span {
    color: #fff;
    font-family: Montserrat;
    font-size: 18px;
}

.ed-about-thumb-2 {
    max-width: 300px;
    height: 280px;
}
.ed-about-thumb-2 img{
	width:100%;
	height: 100%; 
	object-fit: cover;
}
.ed-about-thumb-3 {
    max-width: 230px;
    height: 220px;
    width: 100%;
}
.ed-about-thumb-3 img{
	width:100%;
	height: 100%; 
	object-fit: cover;
}

.ed-testimonial-ptb {
	margin-top: 0px;
    padding-top: 120px;
    padding-bottom: 120px;
    background-size: cover;
}

/* ---------------------------------------------------------------------------
   About page: the school's own prospectus, laid out.

   One grid. The theme's sections sit in a Bootstrap .container; the bands
   written here from plain widgets sit on exactly the same measure, so every
   left edge on the page lines up. Backgrounds run full bleed, content does
   not.

   One type system. Headings Montserrat 700, body Playfair Display, buttons
   the theme's 58px pill in Playfair 600. Elementor's kit would set all of
   this in Roboto, and writes a rule per element to do it, hence the weight
   on some declarations below.

   One palette. The theme's leftover demo art - a teal dart, a violet
   squiggle, navy dashed rules, bright yellow frames - is replaced with the
   school's cream, saffron and maroon.
   -------------------------------------------------------------------------- */

/* The content width of the theme's .container at each breakpoint. */
:root {
    --bca-wrap: calc(100% - 30px);
}

@media (min-width: 576px) {
    :root { --bca-wrap: 516px; }
}

@media (min-width: 768px) {
    :root { --bca-wrap: 696px; }
}

@media (min-width: 992px) {
    :root { --bca-wrap: 936px; }
}

@media (min-width: 1200px) {
    :root { --bca-wrap: 1116px; }
}

@media (min-width: 1400px) {
    :root { --bca-wrap: 1320px; }
}

/* ===================================================== the opening story */

.it-about-5-area {
    padding-top: 100px !important;
    padding-bottom: 100px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFAF2 100%);
}

/* The teal paper dart. */
.ed-about-5-shape-1,
.ed-about-5-shape-2 {
    display: none !important;
}

.it-about-5-area .it-section-title-5 {
    font-size: 48px;
    line-height: 1.14;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.it-about-5-text {
    margin-bottom: 34px !important;
}

/* The two paragraphs are one block joined by line breaks, and the theme
   hides line breaks on phones, which ran them together ("mind.Our"). */
.it-about-5-text p br {
    display: inline !important;
}

.it-about-5-text p {
    max-width: none;
    font-size: 17px;
    line-height: 1.8;
    color: var(--it-common-black-2);
    text-wrap: pretty;
}

/* The two tick lists become one even grid of four tiles. */
.ed-about-5-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 38px;
}

.ed-about-5-content .it-about-5-list {
    margin-bottom: 0 !important;
}

.ed-about-5-content .it-about-5-list ul {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ed-about-5-content .it-about-5-list ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 14px 18px !important;
    background: #FFF8EE;
    border: 1px solid #F3E4D1;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--it-common-black);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ed-about-5-content .it-about-5-list ul li:hover {
    transform: translateY(-2px);
    border-color: #E8CDA6;
    box-shadow: 0 12px 26px rgba(58, 36, 24, 0.09);
}

/* The theme pins the tick to the corner of the line; it belongs beside
   the words, in a small saffron disc. */
.ed-about-5-content .it-about-5-list ul li i {
    position: static !important;
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FBEEDC;
    color: var(--it-theme-2);
    font-size: 12px;
}

/* The square maroon button, as the site's pill. */
.it-feature-button .ed-btn-square {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 34px;
    border-radius: 200px;
    background: var(--it-theme-1) !important;
    color: var(--it-common-black) !important;
    font-family: "Playfair Display", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.it-feature-button .ed-btn-square:hover {
    background: var(--it-theme-2) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* The two photographs, as a matched pair the height of each other. */
.ed-about-5-right {
    align-items: flex-start !important;
    gap: 18px;
}

.ed-about-5-right > div {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.ed-about-5-right img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 24px 50px rgba(58, 36, 24, 0.14);
}

/* One sits lower than the other, so the pair reads as a composition. */
.ed-about-5-right > div:first-child img {
    margin-top: 56px;
}

/* ============================================================ the figures */

.elementor-element-15ddcf5 {
    background: #FFFFFF;
    /* The dividers were drawn past the last column, which pushed the page
       wider than a phone. */
    overflow-x: clip;
}

/* The same space above the card as below it. */
.elementor-element-15ddcf5 .ed-funfact-area {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.elementor-element-15ddcf5 .ed-funfact-shape-1 {
    display: none;
}

/* Inside the card, the same space above the figures as below them. The
   theme gives every column a 30px bottom margin, the last one included,
   which left the bottom heavier than the top once they stacked on a phone;
   the gaps between figures come from row-gap instead. */
.elementor-element-15ddcf5 .row {
    row-gap: 34px;
    margin-left: 0;
    margin-right: 0;
    padding: 40px 10px;
    background: #FFFAF2;
    border: 1px solid #F3E4D1;
    border-radius: 22px;
}

.elementor-element-15ddcf5 .row > div {
    margin-bottom: 0 !important;
}

.elementor-element-15ddcf5 .it-funfact-item {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.elementor-element-15ddcf5 .it-funfact-content {
    margin: 0 !important;
}

.elementor-element-15ddcf5 .it-funfact-content span {
    display: block;
    margin-bottom: 0 !important;
}

/* Navy dashed rules, as a warm hairline of one even height. */
.elementor-element-15ddcf5 .it-funfact-item::after {
    border-left: 1px solid #EAD7BD !important;
    border-right: 0 !important;
    top: 50% !important;
    height: 72px !important;
    transform: translateY(-50%);
}

.elementor-element-15ddcf5 .col-xl-3:last-child .it-funfact-item::after {
    display: none;
}

.elementor-element-15ddcf5 .it-funfact-content h6 {
    font-size: 40px;
}

.elementor-element-15ddcf5 .it-funfact-content span {
    font-size: 16px;
}

/* ================================================ the bands written here */

.bca-band {
    padding: 100px 0;
}

/* Every widget in a band sits on the theme's grid. Elementor writes a
   width rule per element, so this needs the weight to answer it. */
.bca-band > .elementor-widget.elementor-widget,
.bca-band > .e-con.e-con {
    width: var(--bca-wrap) !important;
    max-width: var(--bca-wrap) !important;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

.bca-band .elementor-heading-title {
    font-family: Montserrat, sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.18;
    letter-spacing: -0.015em;
    text-align: center;
    text-wrap: balance;
}

/* The rule under each heading, as the footer headings carry. */
.bca-band .elementor-widget-heading .elementor-heading-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 22px auto 0;
    border-radius: 3px;
    background: var(--it-theme-1);
}

.bca-band .elementor-widget-heading {
    margin-bottom: 26px;
}

.bca-band .elementor-widget-text-editor,
.bca-band .elementor-icon-list-text {
    font-family: "Playfair Display", serif !important;
}

.bca-band .elementor-widget-text-editor {
    font-size: 17.5px;
    line-height: 1.85;
    color: var(--it-common-black-2);
    text-align: center;
}

/* The site caps paragraphs at 70ch for reading comfort but leaves the
   capped box hard against the left edge, so centred copy drifted left of
   centre. The measure stays; the box is centred under its heading. */
.bca-band .elementor-widget-text-editor p {
    max-width: 760px;
    margin: 0 auto 16px;
    text-wrap: pretty;
}

.bca-band .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

.bca-band .elementor-widget-text-editor + .elementor-widget {
    margin-top: 40px;
}

/* ---- icon lists ---- */

.bca-band .elementor-icon-list-items {
    margin: 0;
    padding: 0;
}

.bca-band .elementor-icon-list-item,
.bca-band .elementor-icon-list-text {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--it-common-black) !important;
}

/* A label that runs to two lines used to leave its tick floating between
   them, so the icon is boxed to one line's height and pinned to the top. */
.bca-band .elementor-icon-list-item {
    align-items: flex-start;
}

.bca-band .elementor-icon-list-icon {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 1.6em;
}

/* The icons are inline SVG, which takes a fill rather than a colour. */
.bca-band .elementor-icon-list-icon svg {
    fill: var(--it-theme-2) !important;
}

/* ---- buttons ---- */

.bca-band .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 0 34px;
    border-radius: 200px;
    background: var(--it-theme-1);
    color: var(--it-common-black);
    font-family: "Playfair Display", serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: capitalize;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.bca-band .elementor-button:hover {
    background: var(--it-theme-2);
    color: #fff;
    transform: translateY(-2px);
}

.bca-band .bca-btn--ghost .elementor-button {
    background: transparent;
    border: 2px solid var(--it-theme-2);
    color: var(--it-theme-2);
}

.bca-band .bca-btn--ghost .elementor-button:hover {
    background: var(--it-theme-2);
    color: #fff;
}

/* ======================= "quality education within every family's reach" */

.bca-band--promise {
    background: linear-gradient(180deg, #FFFAF2 0%, #FBF1E2 100%);
}

.bca-band--promise .elementor-icon-list-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.bca-band--promise .elementor-icon-list-item {
    align-items: center;
    margin: 0 !important;
    padding: 12px 24px;
    background: #fff;
    border: 1px solid #EFDCC2;
    border-radius: 200px;
    box-shadow: 0 8px 20px rgba(58, 36, 24, 0.05);
    font-weight: 600;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bca-band--promise .elementor-icon-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(58, 36, 24, 0.10);
}

.bca-band--promise .elementor-icon-list-icon {
    height: auto;
}

.bca-band--promise .elementor-icon-list-icon svg {
    width: 8px;
    height: 8px;
    fill: var(--it-theme-1) !important;
}

/* ===================================================== "what we offer" */

.elementor-element-bcaoff1 .it-choose-area {
    padding-top: 110px !important;
    padding-bottom: 80px;
}

/* A violet squiggle beside the heading, and two bright yellow frames. */
.elementor-element-bcaoff1 .it-choose-shape-1,
.elementor-element-bcaoff1 .it-choose-shape-2,
.elementor-element-bcaoff1 .it-choose-shape-3,
.elementor-element-bcaoff1 .it-choose-shape-4 {
    display: none !important;
}

/* In their place, a saffron block set behind the photograph. */
.elementor-element-bcaoff1 .it-choose-thumb img {
    border-radius: 24px;
    box-shadow: 22px 22px 0 #F6DDBB, 0 30px 60px rgba(58, 36, 24, 0.14);
}

.elementor-element-bcaoff1 .ed-section-title {
    text-wrap: balance;
}

/* The four cards: equal heights, and room for their text. */
.elementor-element-bcaoff1 .it-choose-content-box .row {
    row-gap: 18px;
}

.elementor-element-bcaoff1 .it-choose-content-box .col-md-6 {
    display: flex;
    margin-bottom: 0 !important;
}

.elementor-element-bcaoff1 .it-choose-content {
    flex: 1 1 auto;
    padding: 26px 24px !important;
    border: 1px solid #F1DCC1;
    border-radius: 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.elementor-element-bcaoff1 .it-choose-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(58, 36, 24, 0.10);
}

.elementor-element-bcaoff1 .it-choose-content h5 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.35;
}

.elementor-element-bcaoff1 .it-choose-content h5 i {
    flex: none;
    margin-top: 3px;
}

.elementor-element-bcaoff1 .it-choose-content p {
    max-width: none;
    margin: 0;
    padding-right: 0;
    font-size: 15.5px;
    line-height: 1.7;
    text-wrap: pretty;
}

/* ============================================= "why families choose us" */

.bca-band--why {
    background: #fff;
}

.bca-band--why .elementor-icon-list-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bca-band--why .elementor-icon-list-item {
    margin: 0 !important;
    padding: 22px 24px;
    background: #FFF8EE;
    border: 1px solid #F3E4D1;
    border-radius: 18px;
    font-weight: 600;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bca-band--why .elementor-icon-list-item:hover {
    transform: translateY(-3px);
    border-color: #E8CDA6;
    box-shadow: 0 16px 34px rgba(58, 36, 24, 0.10);
}

/* =================================== "education that gives more than marks" */

.bca-band--marks {
    background: var(--it-common-black);
}

/* Montserrat like every other heading on the page; only the colour turns. */
.bca-band--marks .elementor-heading-title {
    color: #fff !important;
}

.bca-band--marks .elementor-widget-text-editor,
.bca-band--marks .elementor-widget-text-editor p {
    color: #EBDDCF !important;
    font-size: 18px;
}

.bca-band--marks .elementor-widget-text-editor p.bca-closer {
    max-width: 640px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 24px;
    line-height: 1.5;
    color: var(--it-theme-1) !important;
    text-wrap: balance;
}

/* ========================================================== admissions */

.bca-band--admissions {
    background: linear-gradient(180deg, #FBF1E2 0%, #FFFAF2 100%);
}

/* The steps keep a reading measure, centred on the grid. */
.bca-band--admissions > .elementor-widget-icon-list.elementor-widget {
    width: min(760px, var(--bca-wrap)) !important;
    max-width: min(760px, var(--bca-wrap)) !important;
}

.bca-band--admissions .elementor-icon-list-items {
    display: grid;
    gap: 12px;
    counter-reset: bca-step;
}

.bca-band--admissions .elementor-icon-list-item {
    align-items: center;
    margin: 0 !important;
    padding: 16px 22px;
    background: #fff;
    border: 1px solid #F0DFC8;
    border-radius: 14px;
}

/* Numbered, because the order matters. */
.bca-band--admissions .elementor-icon-list-icon {
    counter-increment: bca-step;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--it-theme-1);
}

.bca-band--admissions .elementor-icon-list-icon svg {
    display: none;
}

.bca-band--admissions .elementor-icon-list-icon::before {
    content: counter(bca-step);
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--it-common-black);
}

.bca-band--admissions .bca-cta-row.e-con {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 36px !important;
    padding: 0;
}

.bca-band--admissions .bca-cta-row > .elementor-widget {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* ========================================== the sample parent quotes */

/* A violet world map behind them. */
.elementor-element-160d038 .it-testimonial-area {
    background-color: #FFFAF2 !important;
    background-image: none !important;
}

/* ============================================== come and see the school */

.bca-band--visit {
    background: #fff;
}

.bca-visit-row.e-con {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 64px;
    padding: 0;
}

/* Seven columns of words, five of photograph. */
.bca-visit-text.e-con {
    flex: 0 0 calc(58.333% - 32px);
    max-width: calc(58.333% - 32px);
    padding: 0;
}

.bca-visit-media.e-con {
    flex: 0 0 calc(41.667% - 32px);
    max-width: calc(41.667% - 32px);
    padding: 0;
}

.bca-visit-text > .elementor-widget {
    width: 100%;
    max-width: none !important;
}

.bca-visit-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
    /* Offset to the left, so it stays inside the grid's right edge. */
    box-shadow: -22px 22px 0 #F6DDBB, 0 30px 60px rgba(58, 36, 24, 0.14);
}

/* This one reads as a column beside a picture, so it is set left. */
.bca-band--visit .elementor-heading-title,
.bca-band--visit .elementor-widget-text-editor {
    text-align: left;
}

.bca-band--visit .elementor-widget-heading .elementor-heading-title::after {
    margin-left: 0;
    margin-right: auto;
}

.bca-band--visit .elementor-widget-text-editor p {
    margin-left: 0;
}

.bca-band--visit .elementor-widget-text-editor + .elementor-widget {
    margin-top: 28px;
}

.bca-band--visit .elementor-icon-list-items {
    display: grid;
    gap: 14px;
}

.bca-band--visit .elementor-icon-list-item {
    align-items: center;
    font-size: 17px;
}

.bca-band--visit .elementor-icon-list-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 6px;
    border-radius: 50%;
    background: #FBEEDC;
}

.bca-band--visit .elementor-icon-list-icon svg {
    width: 15px;
    height: 15px;
}

.bca-band--visit .elementor-widget-button {
    margin-top: 34px;
    text-align: left;
}

/* ============================================================= smaller */

@media (max-width: 1199px) {
    .bca-band--why .elementor-icon-list-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ed-about-5-right img {
        height: 360px;
    }
}

@media (max-width: 991px) {
    .bca-band {
        padding: 70px 0;
    }

    .bca-band .elementor-heading-title,
    .bca-band--marks .elementor-heading-title {
        font-size: 32px !important;
    }

    .it-about-5-area {
        padding-top: 64px !important;
        padding-bottom: 64px;
    }

    .it-about-5-area .it-section-title-5 {
        font-size: 34px;
    }

    .ed-about-5-right {
        margin-top: 40px;
    }

    .bca-visit-row.e-con {
        flex-direction: column;
        gap: 44px;
    }

    .bca-visit-text.e-con,
    .bca-visit-media.e-con {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    .elementor-element-15ddcf5 .it-funfact-item::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .ed-about-5-content,
    .bca-band--why .elementor-icon-list-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .ed-about-5-right img {
        height: 260px;
    }

    .ed-about-5-right > div:first-child img {
        margin-top: 32px;
    }

    .bca-band--marks .elementor-widget-text-editor p.bca-closer {
        font-size: 20px;
    }

    .bca-band--admissions .bca-cta-row > .elementor-widget,
    .bca-band--admissions .elementor-button,
    .bca-band--visit .elementor-button {
        width: 100% !important;
    }

    .elementor-element-bcaoff1 .it-choose-thumb img {
        box-shadow: 12px 12px 0 #F6DDBB, 0 20px 40px rgba(58, 36, 24, 0.12);
    }

    .bca-visit-media img {
        box-shadow: -12px 12px 0 #F6DDBB, 0 20px 40px rgba(58, 36, 24, 0.12);
    }
}

/* About page block ends here */

/* ---------------------------------------------------------------------------
   Contact page
   The theme ships this section as a flat grey slab with a violet wedge. The
   rest of the site is cream, saffron and maroon, so it is rebuilt here in
   that language: a warm page behind one raised card, and each detail given
   its own tile.
   -------------------------------------------------------------------------- */

.it-contact__area {
    background: linear-gradient(180deg, #FFFDFA 0%, #FDF3E6 100%);
    padding-top: 100px;
    padding-bottom: 110px;
}

.it-contact__wrap {
    background: #fff;
    border: 1px solid #F3E4D1;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(58, 36, 24, 0.09);
    padding: 70px 64px 64px;
}

/* The violet wedge belongs to no other part of this site. */
.it-contact__shape-1 {
    display: none !important;
}

/* The two columns met at the baseline, which left a well of empty space
   above the form on wide screens. */
.it-contact__wrap > .row.align-items-end {
    align-items: flex-start !important;
}

.it-contact__title {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.it-contact__section-box > p {
    max-width: 30em;
    font-size: 17px;
    line-height: 1.75;
    color: var(--it-common-black-2);
}

/* A rule under the heading, the same one the footer headings use. */
.it-contact__section-box {
    position: relative;
    padding-bottom: 22px !important;
    margin-bottom: 14px;
}

.it-contact__section-box::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--it-theme-1);
}

/* ---- the three details, each on its own tile ---- */

/* The theme pads this block for a layout it no longer has, and spaces the
   rows with a bottom margin the grid gap now handles. */
.it-contact__content {
    margin-top: 0 !important;
    margin-bottom: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.it-contact__content li {
    margin-bottom: 0 !important;
}

.it-contact__content ul {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-contact__list {
    gap: 18px;
    background: #FFFBF4;
    border: 1px solid #F3E4D1;
    border-radius: 18px;
    padding: 22px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.it-contact__list:hover {
    transform: translateY(-3px);
    border-color: #E8CDA6;
    box-shadow: 0 16px 34px rgba(58, 36, 24, 0.10);
}

.it-contact__icon span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FBEEDC;
    color: var(--it-theme-2);
    font-size: 17px;
}

.it-contact__list:hover .it-contact__icon span {
    background: var(--it-theme-1);
    color: #fff;
}

.it-contact__text > span:first-child {
    display: block;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bca-saffron-ink-strong);
    margin-bottom: 4px;
}

/* Anything after the value is a footnote, not another label. */
.it-contact__text > span:not(:first-child) {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--it-common-black-2);
}

.it-contact__text a {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--it-common-black);
    word-break: break-word;
}

.it-contact__text a:hover {
    color: var(--it-theme-2);
}

/* ---- the call to action under the details ---- */

.it-contact__bottom-box {
    justify-content: flex-start;
}

/* Every social link on this site still points at "#". */
.it-contact__bottom-box .it-footer-social {
    display: none !important;
}

.it-contact__scrool.smooth a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 34px;
    border-radius: 200px;
    background: var(--it-theme-2);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.it-contact__scrool.smooth a:hover {
    background: #7E1D1C;
    color: #fff;
    transform: translateY(-2px);
}

.it-contact__scrool.smooth a i {
    transform: rotate(-90deg);
}

/* ---- the form ---- */

.it-contact__form-box {
    background: #FFFBF4;
    border: 1px solid #F3E4D1;
    border-radius: 22px;
    padding: 34px 32px 30px;
}

.it-contact-input-box label,
.it-contact-textarea-box label {
    font-size: 14px;
    font-weight: 600;
    color: var(--it-common-black);
    margin-bottom: 8px;
}

.it-contact__form-box input:not([type="submit"]),
.it-contact__form-box textarea {
    border: 1px solid #EADCC8;
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.it-contact__form-box input:not([type="submit"]):focus,
.it-contact__form-box textarea:focus {
    outline: none;
    border-color: var(--it-theme-1);
    box-shadow: 0 0 0 3px rgba(224, 138, 46, 0.18);
}

/* Contact Form 7's submit is a bare <input>, so it carries no icon circle:
   the pill's right-hand room for one has to come back off, and it should
   not stretch to the width of the form either. */
input.wpcf7-submit.ed-btn-theme {
    width: auto;
    padding: 0 40px;
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

input.wpcf7-submit.ed-btn-theme:hover {
    background-color: var(--it-theme-2) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

.wpcf7-form .wpcf7-spinner {
    vertical-align: middle;
}

/* ---- the map ---- */

/* Full bleed, edge to edge, the way the home page runs its wide images. */
.elementor-element-bcamap1 {
    padding: 0;
}

.elementor-element-bcamap1 > .elementor-widget-google_maps {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.elementor-element-bcamap1 iframe {
    display: block;
    width: 100%;
    filter: saturate(0.92);
}

@media (max-width: 991px) {
    .it-contact__wrap {
        padding: 44px 26px 40px;
        border-radius: 22px;
    }

    .it-contact__title {
        font-size: 34px;
    }

    .it-contact__area {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .it-contact__form-box {
        margin-top: 34px;
        padding: 26px 20px 24px;
    }
}

@media (max-width: 767px) {
    .it-contact__text a[href^="tel"],
    .it-contact__text a[href^="mailto"] {
        display: block;
    }

    input.wpcf7-submit.ed-btn-theme,
    .it-contact__scrool.smooth a {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   Launch: Disclosure tables, the Coming Soon page, and the footer's social
   row, which has no real accounts to point at yet.
   -------------------------------------------------------------------------- */

.bca-disclosure {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

.bca-disclosure__lead {
    max-width: none !important;
    margin-bottom: 40px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--it-common-black-2);
}

.bca-disclosure h3 {
    margin: 44px 0 16px;
    font-family: Montserrat, sans-serif;
    font-size: 24px;
}

.bca-disclosure__table {
    overflow-x: auto;
    border: 1px solid #F3E4D1;
    border-radius: 16px;
}

.bca-disclosure table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 16px;
}

.bca-disclosure th,
.bca-disclosure td {
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #F3E4D1;
    text-align: left;
    vertical-align: top;
}

.bca-disclosure th {
    background: #FBEEDC;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--it-common-black);
}

.bca-disclosure tr:last-child td {
    border-bottom: 0;
}

.bca-disclosure tbody tr:nth-child(even) td {
    background: #FFFBF5;
}

.bca-disclosure td:first-child,
.bca-disclosure th:first-child {
    width: 80px;
    white-space: nowrap;
}

.bca-disclosure td:nth-child(2) {
    width: 45%;
    font-weight: 600;
    color: var(--it-common-black);
}

.bca-disclosure em {
    font-style: normal;
    color: #9A7B5E;
}

/* Coming Soon: the band fills the screen so the footer does not ride up. */
.bca-band--soon {
    min-height: 56vh;
    justify-content: center;
}

.bca-band--soon .bca-cta-row.e-con {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 36px !important;
    padding: 0;
}

.bca-band--soon .bca-cta-row > .elementor-widget {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.bca-band--soon .elementor-widget-text-editor a {
    color: var(--it-theme-2);
    font-weight: 600;
}

/* Every social link in the footer still points at "#". */
.elementor-4504 .elementor-widget-social-icons {
    display: none !important;
}

/* Home, before launch: the video play button opened a demo clip that has
   nothing to do with the school, one decorative shape shipped missing, and
   the hero's floating shapes pushed a phone 4px wide. */
.elementor-element-d546227 .it-video-play-wrap,
.it-video-shape-1 {
    display: none !important;
}

.elementor-element-a60f58b {
    overflow-x: clip;
}

/* The teachers' heading sits in a narrow column beside the cards; at 45px
   it ran into them between roughly 1000px and 1200px wide. */
.ed-team-area .ed-section-title {
    font-size: clamp(30px, 3.1vw, 45px);
    line-height: 1.15;
    overflow-wrap: break-word;
    text-wrap: balance;
}