/* ===== Royal Crown School — custom overrides on top of Kidza template ===== */
:root {
--rc-primary: #6754E9;
--rc-secondary: #F15F25;
}
/* Brand color can be overridden dynamically from admin settings (see ). */
.theme-btn,
.program-box-item .program-content .link-btn:hover,
.copyright a:hover { }
/* Logo sizing (real raster logo instead of template SVG) */
.header-logo img,
.offcanvas__logo img,
.widget-head img,
.mobile-logo img { max-height: 62px; width: auto; object-fit: contain; }
.footer-section .widget-head img { max-height: 70px; }
/* Real photos in cards — keep consistent ratios */
.team-image img { width: 100%; height: 320px; object-fit: cover; border-radius: 20px; }
.news-image > img { width: 100%; height: 260px; object-fit: cover; }
.classes-image img { width: 100%; height: 260px; object-fit: cover; }
.gallery-grid-item img { width: 100%; height: 260px; object-fit: cover; border-radius: 16px; }
.about-image img { width: 100%; object-fit: cover; }
.hero-img img { width: 100%; height: auto; }
/* Gallery grid (custom page) */
.gallery-grid-item { position: relative; overflow: hidden; border-radius: 16px; display:block; }
.gallery-grid-item img { transition: transform .5s ease; }
.gallery-grid-item:hover img { transform: scale(1.08); }
.gallery-grid-item .gallery-icon {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(103,84,233,.55); color: #fff; font-size: 26px; opacity: 0; transition: .4s;
}
.gallery-grid-item:hover .gallery-icon { opacity: 1; }
/* Schedule image cards */
.schedule-card { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 25px rgba(0,0,0,.06); background:#fff; }
.schedule-card img { width: 100%; height: auto; display: block; }
/* Video cards */
.video-card { position: relative; border-radius: 16px; overflow: hidden; display:block; }
.video-card img { width: 100%; height: 240px; object-fit: cover; }
.video-card .play-btn {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background:rgba(0,0,0,.25); color:#fff; font-size:28px; transition:.3s;
}
.video-card:hover .play-btn { background:rgba(103,84,233,.45); }
/* Remove the template's dark navy backdrop behind the video section (.video-section::before → var(--bg-3)) */
.video-section::before { display: none !important; }
/* News listing — equal-height cards + uniform image size.
Template's .news-image img is width/height:100% with no fixed box, so images
keep their own aspect ratio and cards end up different heights. Fix both. */
.news-standard .row > [class*="col-"] { display: flex; }
.news-standard .news-card-items { height: 100%; display: flex; flex-direction: column; margin-top: 0; }
.news-standard .news-image { height: 240px; flex-shrink: 0; }
.news-standard .news-image img { height: 100%; object-fit: cover; }
.news-standard .news-content { flex: 1 1 auto; display: flex; flex-direction: column; }
/* keep the excerpt from collapsing and push the author/date row to the bottom so every card lines up */
.news-standard .news-content h3 { flex-shrink: 0; }
.news-standard .news-content .author-items { margin-top: auto; }
/* News detail — "Recent Posts" sidebar. The template thumbs are ~80px squares with
NO width rule; our full-size post photos blow the item up and crush the date/title
(very visible in RTL, where the sidebar sits on the left). Constrain the thumbnail. */
.recent-post-area .recent-items .recent-thumb { flex-shrink: 0; width: 85px; height: 85px; }
.recent-post-area .recent-items .recent-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.recent-post-area .recent-items .recent-content { min-width: 0; }
/* ===== Purple newsletter band (template "newsletter-two" look), self-contained ===== */
.rc-newsletter {
position: relative;
background: var(--rc-primary, #6754E9);
padding: 125px 0 95px;
overflow: hidden;
z-index: 1;
}
/* Wavy white top edge — mirrors the template's purple band meeting the light area above. */
.rc-newsletter::before {
content: "";
position: absolute;
top: -1px; left: 0; right: 0;
height: 80px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V40 C1160,78 860,14 560,44 C380,62 190,56 0,46 Z'/%3E%3C/svg%3E") no-repeat top center;
background-size: 100% 100%;
z-index: 2;
}
.rc-newsletter .container { position: relative; z-index: 3; }
.rc-newsletter .section-title h2 { color: #fff; }
.rc-newsletter .sub-title.tittle-bg { background: var(--rc-secondary, #F15F25) !important; color: #fff !important; }
/* Decorative shapes — positions mirror the template's .pricing-section shapes. */
.rc-newsletter .busket-shape { position: absolute; left: 2%; bottom: 4%; max-width: 235px; z-index: 1; }
.rc-newsletter .sky-shape { position: absolute; left: 22%; bottom: 32%; max-width: 155px; z-index: 1; animation: rc-nl-float 6s linear infinite; }
.rc-newsletter .star-shape { position: absolute; right: 24%; bottom: 42%; max-width: 30px; z-index: 1; animation: rc-nl-zoom 1.6s linear infinite; }
.rc-newsletter .flower-shape { position: absolute; right: 6%; bottom: -8px; max-width: 180px; z-index: 1; }
.rc-newsletter .signUp-box input[type=email] { background: #fff; }
html[dir="rtl"] .rc-newsletter .house-icon { right: auto; left: 15px; }
/* Detailed fee tables sit right below the blue band now — trim their top padding
so there isn't a huge empty gap between the purple band and the tables. */
.rc-fees-tables { padding-top: 55px; }
/* Fees page uses the template's own purple wave (.pricing-section::after) with the
newsletter (.newsletter-two) sitting inside the section — nothing to connect here. */
@keyframes rc-nl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes rc-nl-zoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
/* AJAX feedback */
.rc-newsletter-feedback { max-width: 560px; margin: 0 auto; text-align: center; font-weight: 600; }
.rc-newsletter-feedback.is-success,
.rc-newsletter-feedback.is-error { margin-bottom: 18px; padding: 12px 18px; border-radius: 12px; color: #fff; }
.rc-newsletter-feedback.is-success { background: #22B07D; }
.rc-newsletter-feedback.is-error { background: var(--rc-secondary, #F15F25); }
@media (max-width: 767px) {
.rc-newsletter { padding: 90px 0 70px; margin-top: 0; }
.rc-newsletter .busket-shape, .rc-newsletter .flower-shape,
.rc-newsletter .sky-shape, .rc-newsletter .star-shape { opacity: .2; max-width: 90px; }
}
/* Inline form field validation error chip (readable on both light and dark form backgrounds) */
.rc-field-error { display: block; margin-top: 6px; padding: 4px 10px; border-radius: 6px;
background: rgba(220, 53, 69, .92); color: #fff; font-size: 12.5px; font-weight: 500; }
/* About: breathing room between the yellow "Glance" card and the Vision/Mission cards */
.rc-vision-gap { padding-top: 80px; }
@media (max-width: 767px) { .rc-vision-gap { padding-top: 50px; } }
/* Values / vision cards on About */
.value-card { background:#fff; border:1px solid var(--border,#E6EFFF); border-radius:20px; padding:30px; height:100%; transition:.3s; }
.value-card:hover { box-shadow:0 10px 40px rgba(0,0,0,.08); transform:translateY(-6px); }
.value-card .icon { width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:rgba(103,84,233,.1); color:var(--rc-primary); font-size:28px; margin-bottom:18px; }
/* Registration / contact forms */
.rc-form .form-control, .rc-form .form-select {
border:1px solid var(--border,#E6EFFF); border-radius:12px; padding:14px 18px; margin-bottom:18px; width:100%;
background:#F7F8FC; font-size:15px;
}
.rc-form .form-control:focus, .rc-form .form-select:focus { outline:none; border-color:var(--rc-primary); box-shadow:0 0 0 3px rgba(103,84,233,.12); }
.rc-form label { font-weight:600; margin-bottom:8px; display:block; color:var(--header,#070713); }
/* Alerts */
.rc-alert { border-radius:12px; padding:14px 20px; margin-bottom:20px; font-weight:600; }
.rc-alert-success { background:#e7f8ee; color:#127a45; border:1px solid #b6ecc9; }
.rc-alert-danger { background:#fdeaea; color:#b02a2a; border:1px solid #f5c2c2; }
/* Language switcher */
.lang-switcher { position:relative; display:inline-block; }
.lang-switcher > a { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--header,#070713); padding:6px 0; cursor:pointer; }
.lang-switcher .lang-dropdown {
position:absolute; top:100%; inset-inline-end:0; margin-top:8px; background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.12);
min-width:150px; padding:8px; display:none; z-index:1000;
}
/* transparent bridge over the gap so the mouse never leaves the hover area */
.lang-switcher .lang-dropdown::before { content:""; position:absolute; top:-12px; inset-inline:0; height:12px; }
.lang-switcher:hover .lang-dropdown,
.lang-switcher:focus-within .lang-dropdown { display:block; }
.lang-switcher .lang-dropdown a { display:block; padding:8px 14px; border-radius:8px; color:var(--text,#4B5563); }
.lang-switcher .lang-dropdown a:hover, .lang-switcher .lang-dropdown a.active { background:rgba(103,84,233,.1); color:var(--rc-primary); }
/* Fee image page */
.fee-image { border-radius:20px; overflow:hidden; box-shadow:0 4px 25px rgba(0,0,0,.06); }
.fee-image img { width:100%; height:auto; display:block; }
/* Breadcrumb link color */
.breadcrumb-items li a { color:#fff; }
/* Vertically center the arrow icon inside buttons (was floating high) */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.theme-btn i { margin-left: 0; line-height: 1; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; }
.link-btn i { margin-left: 0; }
/* Hero parachute/crown: nudge down 10px from the template's own position at
every breakpoint, without touching size, opacity, or horizontal placement. */
@media (min-width: 1400px) {
.hero-1 .perasute-shape { top: 348px; } /* template: 338px, +10px */
.hero-1 .crown-shape { top: 232px; } /* template: 222px, +10px */
}
@media (max-width: 1399px) {
.hero-1 .perasute-shape { top: calc(14% + 10px); }
.hero-1 .crown-shape { top: calc(12% + 10px); }
}
/* Equalize program card heights across the row (dynamic text can vary in length) */
.program-section .row > [class*="col-"] { display: flex; }
.program-section .program-box-item { width: 100%; display: flex; flex-direction: column; }
.program-section .program-content { display: flex; flex-direction: column; flex-grow: 1; }
.program-section .program-content p { flex-grow: 1; }
/* Our Features — split layout (text / real photo / text), matching the
original site's design: colored circular icons + colored headings. */
.features-split-section { position: relative; background: #F7F8FC; }
.features-split-section .section-title h2 span { color: var(--rc-secondary); }
.feature-split-image {
max-width: 100%;
width: 100%;
height: auto;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.feature-split-item { max-width: 360px; }
.feature-split-item:not(.text-lg-end) { margin-inline-start: auto; }
.feature-split-item.text-lg-end { margin-inline-start: auto; margin-inline-end: 0; }
.feature-split-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.feature-split-text h4 { font-weight: 700; margin-bottom: 8px; font-size: 19px; }
.feature-split-text p { margin-bottom: 0; color: var(--text, #4B5563); font-size: 14.5px; line-height: 1.6; }
/* Team — pop-out cards: person cut-out popping from a solid brand-colour disc.
Clean, decent, fully dynamic — swapping a teacher is just swapping their -cut.png. */
.team-section .rc-pop { text-align: center; margin-top: 30px; transition: transform .4s ease; }
.team-section .rc-pop:hover { transform: translateY(-8px); }
.team-section .rc-pop .rc-disc { position: relative; width: 280px; max-width: 84%; aspect-ratio: 1 / 1; margin: 0 auto; }
.team-section .rc-pop .rc-disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rc-c, #6754E9); }
.team-section .rc-pop .rc-disc .rc-person { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 108%; width: auto; max-width: 100%; }
.team-section .rc-pop .team-content { margin-top: 26px; }
.team-section .rc-pop .team-content h3 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.team-section .rc-pop .team-content h3 a { color: var(--header, #070713); transition: color .3s ease; }
.team-section .rc-pop .team-content h3 a:hover { color: var(--rc-c, #6754E9); }
.team-section .rc-pop .team-content p { color: var(--rc-c, #6754E9); font-weight: 600; margin: 0; }
.team-section .rc-team-row > div:nth-child(3n+1) .rc-pop { --rc-c: #6754E9; }
.team-section .rc-team-row > div:nth-child(3n+2) .rc-pop { --rc-c: #F15F25; }
.team-section .rc-team-row > div:nth-child(3n+3) .rc-pop { --rc-c: #22B07D; }
/* equal-height cards: columns stretch, card fills, role reserves 2 lines so names/roles line up */
.team-section .rc-team-row > [class*="col-"] { display: flex; }
.team-section .rc-pop { width: 100%; display: flex; flex-direction: column; }
.team-section .rc-pop .team-content { flex-grow: 1; }
.team-section .rc-pop .team-content p { min-height: 44px; }
@media (max-width: 991px) {
.feature-split-item,
.feature-split-item.text-lg-end {
justify-content: flex-start !important;
text-align: start !important;
margin-inline: auto;
}
}
/* ===== Gallery — chic mosaic (interlocking big/small, no gaps) =====
Reuses the template's .gallery-wrapper .gallery-image hover (orange overlay +
plus icon + 16px radius from main.css); layout is a CSS-Grid mosaic so every
cell is filled (object-fit: cover) with no empty holes. */
.gallery-section .gallery-mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 240px;
gap: 16px;
}
.gallery-section .gallery-mosaic .gallery-image {
height: 100%;
margin: 0;
}
/* Chic interlocking mosaic (like the homepage): alternating wide cells give the
varied, magazine feel — but only horizontal spans, so every 4-column band is
complete and all rows share the same height. No holes, no shrunken tail cell,
for ANY photo count (works for AJAX-appended images too).
Per block of 6: band A = wide+normal+normal (2+1+1), band B = normal+normal+wide (1+1+2). */
.gallery-section .gallery-mosaic .gallery-image:nth-child(6n + 1) { grid-column: span 2; }
.gallery-section .gallery-mosaic .gallery-image:nth-child(6n) { grid-column: span 2; }
@media (max-width: 991px) {
.gallery-section .gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 12px; }
.gallery-section .gallery-mosaic .gallery-image:nth-child(6n + 1),
.gallery-section .gallery-mosaic .gallery-image:nth-child(6n) { grid-column: auto; }
}
@media (max-width: 575px) {
.gallery-section .gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 8px; }
.gallery-section .gallery-mosaic .gallery-image { grid-column: auto !important; }
}
/* Make the whole gallery image open the lightbox — the hover overlay (::before) and
the plus icon must not swallow the click. */
.gallery-section .gallery-image .img-popup { position: relative; z-index: 3; display: block; height: 100%; cursor: pointer; }
.gallery-section .gallery-image::before,
.gallery-section .gallery-image .icon { pointer-events: none; }
/* Magnific zoom-in/out transition when the lightbox opens/closes */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg { opacity: 0; transition: all 0.3s ease-out; }
.mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; }
.mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.85; }
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; }
/* AJAX loader (button + spinner) for the gallery + videos pages */
.rc-infinite { margin-top: 45px; }
.rc-infinite .rc-infinite-loader { display: none; }
.rc-infinite.is-loading .rc-infinite-loader { display: block; }
.rc-infinite.is-loading .rc-load-more { display: none; }
.rc-infinite-loader .rc-spinner {
display: inline-block; width: 42px; height: 42px; border-radius: 50%;
border: 4px solid rgba(103, 84, 233, .18); border-top-color: var(--rc-primary, #6754E9);
animation: rc-spin .8s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
/* The counter's blue band (template ::before is 700px tall) intentionally overflows
below the counter so the yellow Session Times card rides on the blue with no white
gap. The Session section sits between the counter and the gallery, so this overflow
no longer reaches the gallery. */
/* ===== Testimonials — "Happy Parents Say": classic white cards on a blue wavy band
(same blue band + floating cloud as the Nurturing Young Minds section). ===== */
.testimonial-classic-section { position: relative; }
.testimonial-classic-section::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background-color: var(--theme-color);
-webkit-mask: url('data:image/svg+xml;utf8,') center / cover no-repeat;
mask: url('data:image/svg+xml;utf8,') center / cover no-repeat;
}
.testimonial-classic-section .container { position: relative; z-index: 2; }
.testimonial-classic-section .cloud-shape { position: absolute; inset-inline-start: 6%; top: 20%; z-index: 1; }
.testimonial-classic-section .sun-shape { position: absolute; inset-inline-end: 6%; top: 14%; z-index: 1; }
@media (max-width: 1199px) {
.testimonial-classic-section .cloud-shape,
.testimonial-classic-section .sun-shape { display: none; }
}
.testimonial-classic-section .section-title h2 span { color: #F8BC26; }
.testimonial-classic-section .section-title p { max-width: 620px; margin: 14px auto 0; opacity: .92; }
.testi-classic-card {
background: #fff;
border-radius: 24px;
padding: 34px 30px;
height: 100%;
box-shadow: 0 24px 55px rgba(0, 0, 0, 0.14);
position: relative;
transition: transform .4s ease;
}
.testi-classic-card:hover { transform: translateY(-8px); }
.testi-classic-card .quote-mark { font-size: 32px; line-height: 1; color: var(--rc-secondary); margin-bottom: 14px; }
.testi-classic-text { color: var(--text, #4B5563); font-size: 16px; line-height: 1.75; margin-bottom: 26px; }
.testi-classic-foot { display: flex; align-items: center; gap: 16px; }
.testi-classic-avatar img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testi-classic-info h4 { font-size: 18px; font-weight: 700; margin: 0 0 2px; }
.testi-classic-info span { color: var(--rc-primary); font-weight: 600; font-size: 14px; }
.testi-classic-info .testi-stars { display: flex; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; color: #FFB020; font-size: 13px; }
/* slider (2 cards + arrows) */
.testimonial-classic-section .happy-parents-wrap { position: relative; z-index: 2; }
.testimonial-classic-section .happy-parents-slider { padding: 10px; margin: -10px; }
.testimonial-classic-section .happy-parents-slider .swiper-slide { height: auto; }
.testimonial-classic-section .array-button { display: flex; justify-content: center; gap: 14px; margin-top: 38px; }
.testimonial-classic-section .array-button button {
width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
background: #fff; color: var(--rc-primary); font-size: 16px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); transition: all .3s ease;
}
.testimonial-classic-section .array-button button:hover { background: var(--rc-secondary); color: #fff; }
.testimonial-classic-section .array-button button.swiper-button-disabled { opacity: .5; cursor: default; }
/* ============================================================
RTL (Arabic) — mirror the header/hero decorative shapes.
The template pins them with left/right that don't flip, so in
Arabic they sat on the wrong side. Swap sides + flip the
directional graphics (balloon, car, crown, header strip). */
html[dir="rtl"] .header-top-section .header-shape img { transform: scaleX(-1); }
html[dir="rtl"] .hero-1 .perasute-shape { left: auto; right: 2%; }
html[dir="rtl"] .hero-1 .perasute-shape img { transform: scaleX(-1); }
html[dir="rtl"] .hero-1 .car-shape { left: auto; right: 41%; }
html[dir="rtl"] .hero-1 .car-shape img { transform: scaleX(-1); }
html[dir="rtl"] .hero-1 .crown-shape { right: auto; left: 31%; }
html[dir="rtl"] .hero-1 .crown-shape img { transform: scaleX(-1); }
html[dir="rtl"] .hero-1 .tree-shape { left: auto; right: 32%; }
html[dir="rtl"] .hero-1 .frame-shape { right: auto; left: 0; }
html[dir="rtl"] .hero-1 .hero-img .text-shape { left: auto; right: -15%; }
@media (max-width: 1399px) {
html[dir="rtl"] .hero-1 .crown-shape { right: auto; left: 10%; }
html[dir="rtl"] .hero-1 .hero-img .text-shape { left: auto; right: 60px; }
}
@media (max-width: 991px) {
html[dir="rtl"] .hero-1 .hero-img .text-shape { left: auto; right: 0; }
}
/* RTL: "Quick Facts / Royal Crown at a Glance" — mirror the dashed dividers */
html[dir="rtl"] .session-wrapper .vertical-dashed { left: auto; right: 46%; }
html[dir="rtl"] .session-wrapper .session-box p { margin-left: 0; margin-right: 20px; }
@media (min-width: 1200px) {
html[dir="rtl"] .session-wrapper .session-box h3 { border-right: none; border-left: 1.5px dashed rgba(7, 7, 19, 0.28); }
}
/* RTL: program cards — the "learn more" link sits on the left (mirrored) */
html[dir="rtl"] .program-section .program-content .link-btn { align-self: flex-end; }
/* RTL: breadcrumb "/" separator sits between items (flip from right to left) */
html[dir="rtl"] .breadcrumb-wrapper .page-heading .breadcrumb-items li a::before { right: auto; left: -16px; }
/* RTL: slider navigation arrows point the correct direction */
html[dir="rtl"] .array-button i { display: inline-block; transform: scaleX(-1); }
/* RTL: pricing feature check icons sit on the right with a proper gap (fixes overlap) */
html[dir="rtl"] .pricing-wrapper .pricing-items .pricing-content .pricing-list li i { margin-right: 0; margin-left: 10px; }
/* Pricing cards: keep the template design exactly (connected + overlapping middle).
The template padding is 40px 10px 40px 40px (LTR) — mirror it in RTL so the right-aligned
text keeps its 40px on the right and the overlapping middle card no longer clips it. */
html[dir="rtl"] .pricing-wrapper .pricing-items .pricing-content { padding: 40px 40px 40px 10px; }
/* RTL: mirror the fused-pill outer corners so the first card is rounded on the right
(outer) edge and the last on the left — matching the template pill in Arabic. */
@media (min-width: 1200px) {
html[dir="rtl"] .pricing-wrapper .pricing-items:first-child { border-radius: 0 32px 32px 0; }
html[dir="rtl"] .pricing-wrapper .pricing-items.items-three { border-radius: 32px 0 0 32px; }
}
/* RTL: newsletter email icon sits on the left — give the input left padding so the placeholder doesn't overlap it */
html[dir="rtl"] .signUp-box .input-style input[type=email] { padding-left: 52px; padding-right: 22px; }
html[dir="rtl"] .house-icon { right: auto; left: 15px; }
/* Unified footer — contact list (readable on the cream footer-section-three) */
.footer-section-three .footer-contact-3 { list-style: none; padding: 0; margin: 0; }
.footer-section-three .footer-contact-3 li { display: flex; gap: 10px; align-items: flex-start; color: #385469; font-weight: 500; margin-bottom: 13px; line-height: 1.6; }
.footer-section-three .footer-contact-3 li i { color: var(--rc-secondary); margin-top: 4px; flex-shrink: 0; }
.footer-section-three .footer-contact-3 li a { color: #385469; transition: color .3s ease; }
.footer-section-three .footer-contact-3 li a:hover { color: var(--rc-primary); }
.footer-section-three .footer-menu { display: flex; gap: 22px; list-style: none; padding: 0; margin: 0; }
.footer-section-three .footer-menu li a { color: #385469; }
.footer-section-three .footer-menu li a:hover { color: var(--rc-primary); }
.footer-section-three .footer-credit { margin: 0; color: #385469; }
.footer-section-three .footer-credit a { color: var(--rc-primary); font-weight: 700; }
.footer-section-three .footer-credit a:hover { color: var(--rc-secondary); }
/* Curriculum — clean icon cards for the content aspects (equal height) */
.curriculum-cards-section .row > [class*="col-"] { display: flex; }
.curriculum-card { width: 100%; background: #fff; border: 1px solid #f0f0f5; border-radius: 24px; padding: 34px 30px; box-shadow: 0 12px 40px rgba(0, 0, 0, .06); text-align: start; transition: transform .4s ease; }
.curriculum-card:hover { transform: translateY(-8px); }
.curriculum-card-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: var(--cc, #6754E9); margin-bottom: 22px; }
.curriculum-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.curriculum-card p { color: var(--text, #4B5563); line-height: 1.8; margin: 0; }
/* ============ Interactive weekly timetables ============ */
.rc-timetable { background: #fff; border: 1px solid #eef0f6; border-radius: 24px; box-shadow: 0 18px 50px rgba(20, 20, 60, .08); overflow: hidden; margin-bottom: 40px; }
.rc-tt-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 24px 28px; background: linear-gradient(120deg, var(--rc-primary, #6754E9), #8b7bff); color: #fff; }
.rc-tt-head h3 { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.rc-tt-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0; }
.rc-tt-meta li { font-size: 14px; font-weight: 500; opacity: .95; }
.rc-tt-meta li i { margin-inline-end: 6px; opacity: .9; }
.rc-tt-meta li b { font-weight: 800; }
.rc-tt-badge { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4); padding: 6px 16px; border-radius: 100px; font-weight: 700; font-size: 14px; }
.rc-tt-scroll { overflow-x: auto; padding: 8px; }
.rc-tt { width: 100%; border-collapse: separate; border-spacing: 6px; min-width: 820px; }
.rc-tt th, .rc-tt td { text-align: center; }
.rc-tt thead th { position: sticky; top: 0; background: #f4f5fb; color: var(--header, #070713); font-weight: 800; padding: 10px 8px; border-radius: 12px; z-index: 2; }
.rc-tt thead .rc-tt-pn { display: block; font-size: 15px; }
.rc-tt thead .rc-tt-time { display: block; font-size: 11px; color: #8a90a6; font-weight: 600; margin-top: 2px; }
.rc-tt-corner { background: var(--rc-secondary, #F15F25) !important; color: #fff !important; }
.rc-tt-day { position: sticky; inset-inline-start: 0; background: #2a2350; color: #fff; font-weight: 800; padding: 10px 14px; border-radius: 12px; white-space: nowrap; z-index: 1; }
.rc-tt tbody td { background: var(--cell, #eef); color: var(--ink, #333); border-radius: 12px; padding: 10px 8px; min-width: 112px; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; cursor: default; }
.rc-tt tbody td .rc-tt-subj { display: block; font-weight: 800; font-size: 14px; line-height: 1.3; }
.rc-tt tbody td .rc-tt-teacher { display: block; font-size: 12px; opacity: .78; margin-top: 3px; font-weight: 600; }
.rc-tt tbody tr:hover td { filter: saturate(1.15); }
.rc-tt tbody td:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 26px rgba(20, 20, 60, .18); filter: saturate(1.3) brightness(1.02); z-index: 3; }
.rc-tt td.col-hot { box-shadow: inset 0 0 0 2px rgba(103, 84, 233, .45); }
.rc-tt thead th.col-hot { background: #e7e3ff; }
@keyframes rc-tt-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rc-timetable .rc-tt tbody tr { animation: rc-tt-in .5s both; }
.rc-timetable .rc-tt tbody tr:nth-child(1) { animation-delay: .05s; }
.rc-timetable .rc-tt tbody tr:nth-child(2) { animation-delay: .12s; }
.rc-timetable .rc-tt tbody tr:nth-child(3) { animation-delay: .19s; }
.rc-timetable .rc-tt tbody tr:nth-child(4) { animation-delay: .26s; }
.rc-timetable .rc-tt tbody tr:nth-child(5) { animation-delay: .33s; }
.rc-timetable .rc-tt tbody tr:nth-child(6) { animation-delay: .40s; }
/* class tabs */
.rc-tt-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.rc-tt-tab { border: 2px solid #e9e9f3; background: #fff; color: var(--header, #070713); font-weight: 800; padding: 10px 22px; border-radius: 100px; cursor: pointer; transition: all .3s ease; font-size: 15px; }
.rc-tt-tab:hover { border-color: var(--rc-primary, #6754E9); color: var(--rc-primary, #6754E9); transform: translateY(-2px); }
.rc-tt-tab.active { background: var(--rc-primary, #6754E9); border-color: var(--rc-primary, #6754E9); color: #fff; box-shadow: 0 8px 20px rgba(103, 84, 233, .35); }
.rc-tt-panel { display: none; }
.rc-tt-panel.active { display: block; animation: rc-tt-in .45s both; }
@media (max-width: 575px) { .rc-tt-head { padding: 18px; } .rc-tt-head h3 { font-size: 18px; } }
/* Stamped-timetable image slider — equal cards + arrows + gallery lightbox */
.schedules-img-wrap { position: relative; margin-top: 12px; }
.schedules-img-slider { padding: 12px; }
.schedules-img-slider .swiper-slide { height: auto; }
.sched-img-card { display: block; position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 34px rgba(0, 0, 0, .10); background: #fff; height: 100%; }
.sched-img-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; display: block; transition: transform .5s ease; }
.sched-img-card:hover img { transform: scale(1.06); }
.sched-img-card .sched-img-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(103, 84, 233, .34); color: #fff; font-size: 30px; opacity: 0; transition: opacity .3s ease; }
.sched-img-card:hover .sched-img-zoom { opacity: 1; }
.sched-img-card .sched-img-title { position: absolute; inset-inline: 0; bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; padding: 26px 16px 12px; font-weight: 700; font-size: 14px; text-align: center; }
.schedules-img-wrap .array-button { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.schedules-img-wrap .array-button button { width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--rc-primary, #6754E9); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); transition: all .3s ease; }
.schedules-img-wrap .array-button button:hover { background: var(--rc-secondary, #F15F25); transform: translateY(-2px); }
/* ============ Interactive fee tables (tabbed) ============ */
.rc-fees { margin-top: 40px; }
.rc-fees-panel { display: none; }
.rc-fees-panel.active { display: block; animation: rc-tt-in .45s both; }
/* fee tabs in the maroon theme (not the brand purple) so nothing "blue" sits on the tables */
.rc-fees .rc-tt-tab:hover { border-color: #8a1538; color: #8a1538; }
.rc-fees .rc-tt-tab.active { background: #8a1538; border-color: #8a1538; color: #fff; box-shadow: 0 8px 20px rgba(138, 21, 56, .3); }
.rc-fees-note { text-align: center; color: #8a90a6; font-weight: 600; margin-bottom: 26px; }
.rc-fees-block { background: #fff; border: 1px solid #eef0f6; border-radius: 22px; box-shadow: 0 16px 44px rgba(20, 20, 60, .07); overflow: hidden; margin-bottom: 30px; }
.rc-fees-title { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, #8a1538, #b02a4e); color: #fff; font-size: 18px; font-weight: 800; padding: 16px 24px; }
.rc-fees-num { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.rc-fees-scroll { overflow-x: auto; }
.rc-fees-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.rc-fees-table th, .rc-fees-table td { padding: 13px 14px; text-align: center; border-bottom: 1px solid #f0f1f6; }
.rc-fees-table thead th { background: #faf5f2; color: #8a1538; font-weight: 800; font-size: 14px; position: sticky; top: 0; }
.rc-fees-corner { background: #8a1538 !important; color: #fff !important; text-align: start !important; }
.rc-fees-label { text-align: start; font-weight: 800; color: var(--header, #070713); background: #fbfbfd; position: sticky; inset-inline-start: 0; white-space: nowrap; z-index: 1; }
.rc-fees-table tbody td { font-weight: 700; color: #2a2350; transition: background .2s ease, color .2s ease; }
.rc-fees-table tbody tr:hover td, .rc-fees-table tbody tr:hover .rc-fees-label { background: #f3ecff; }
.rc-fees-table tbody tr:hover td { color: var(--rc-primary, #6754E9); }
/* Inner-page header — solid white nav bar (like the template's header-4), readable on the purple breadcrumb */
.header-inner .mega-menu-wrapper { box-shadow: 0 12px 34px rgba(0, 0, 0, .10); margin-top: 8px; }
.header-inner .header-main { padding: 8px 0; }
.header-inner .main-menu > ul > li > a { color: var(--header, #070713); }
.header-inner .lang-switcher > a,
.header-inner .header__hamburger .sidebar__toggle { color: var(--header, #070713); }
/* About — Principal profile (real bilingual text; replaces the old CV image) */
.about-principal .principal-card { background:#fff; border-radius:24px; padding:22px; box-shadow:0 12px 40px rgba(0,0,0,.07); text-align:center; }
.about-principal .principal-photo { border-radius:18px; overflow:hidden; aspect-ratio:4/5; margin-bottom:18px; }
.about-principal .principal-photo img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.about-principal .principal-card h3 { font-size:21px; font-weight:800; margin-bottom:4px; }
.about-principal .principal-card > span { display:block; color:var(--rc-primary); font-weight:600; margin-bottom:16px; }
.about-principal .principal-highlight { display:flex; gap:8px; align-items:flex-start; text-align:start; background:rgba(103,84,233,.08); color:var(--rc-primary); border-radius:12px; padding:12px 15px; font-weight:600; font-size:14px; line-height:1.6; margin:0; }
.about-principal .principal-highlight i { margin-top:3px; flex-shrink:0; }
.about-principal .qualification-list { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; }
.about-principal .qualification-list li { display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:14px; padding:14px 18px; box-shadow:0 6px 22px rgba(0,0,0,.05); }
.about-principal .qualification-list li i { color:var(--rc-secondary); margin-top:4px; flex-shrink:0; font-size:15px; }
.about-principal .qualification-list li span { color:var(--text,#4B5563); line-height:1.7; font-size:15px; }
@media (min-width:992px){
.about-principal .principal-card { position:sticky; top:100px; }
.about-principal .qualification-list { grid-template-columns:1fr 1fr; }
}
/* ===== RTL mobile (offcanvas) menu — meanmenu is LTR-only, so mirror it in Arabic.
Without this the links keep the plugin's float:left / text-align:left and pin the
"+" expander to right:0, which pushes the Arabic labels off the left edge (clipped). */
html[dir="rtl"] .mean-container .mean-bar,
html[dir="rtl"] .mean-container .mean-nav,
html[dir="rtl"] .mean-container .mean-nav > ul,
html[dir="rtl"] .mean-container .mean-nav ul li { float: right; }
html[dir="rtl"] .mean-container .mean-nav ul li a { float: right; text-align: right; box-sizing: border-box; padding-right: 0; padding-left: 34px; }
html[dir="rtl"] .mean-container .mean-nav ul li a.mean-expand { right: auto; left: 0; padding: 0 !important; }
/* Mobile: the offcanvas panel is 350px pinned to right:0, so on narrow screens (≤350px,
e.g. 320px) its left strip — where the orange X close button sits — falls off-screen
and looks clipped. Cap the panel to the viewport width so the X is always fully visible. */
.offcanvas__info { max-width: 100vw; }
/* Homepage "Accredited & Trusted" strip — clean icon+text cards that sit between the
orange contact section and the purple newsletter (replaces the empty partners slider). */
.rc-trust-card {
display: flex; align-items: flex-start; gap: 16px; height: 100%;
background: #fff; border: 1px solid #eef0f6; border-radius: 18px; padding: 24px 22px;
box-shadow: 0 10px 34px rgba(20, 20, 60, .06); transition: transform .3s ease, box-shadow .3s ease;
}
.rc-trust-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20, 20, 60, .12); }
.rc-trust-icon {
width: 56px; height: 56px; flex-shrink: 0; border-radius: 15px;
display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;
}
.rc-trust-text { min-width: 0; }
.rc-trust-card h3 { font-size: 17px; font-weight: 800; margin: 2px 0 6px; line-height: 1.35; }
.rc-trust-card p { margin: 0; font-size: 13.5px; color: #6b7280; line-height: 1.65; }