/* ==========================================================================
   iStudy landing page — modernization pass
   Loaded after style.css / style-rtl.css, so rules here win the cascade.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
    --shadow-tint: color-mix(in srgb, var(--secondary-color) 18%, transparent);
    --shadow-tint-strong: color-mix(in srgb, var(--secondary-color) 30%, transparent);
    --primary-tint: color-mix(in srgb, var(--primary-color) 14%, transparent);
    --surface-radius: 20px;
}

html {
    scroll-behavior: smooth;
}

body,
.commonTitle,
.sectionTitle span,
.faqs .accordion-button span,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

*:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

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

.commonBtn {
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 20px -8px var(--shadow-tint-strong);
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.commonBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px var(--shadow-tint-strong);
    filter: brightness(1.04);
}

.commonBtn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px -6px var(--shadow-tint-strong);
}

a, button {
    transition: color 200ms ease, background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

/* ---------- Nav ---------- */

.navbar {
    background-color: #ffffffcc;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.navbar .listItems a {
    position: relative;
    font-weight: 500;
    padding-bottom: 4px;
}

.navbar .listItems a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--primary-color);
    transition: width 220ms ease;
}

.navbar .listItems a:hover::after {
    width: 100%;
}

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

.heroSection {
    background: radial-gradient(120% 140% at 100% 0%, var(--primary-tint) 0%, transparent 55%),
                radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--secondary-color) 10%, transparent) 0%, transparent 55%),
                #F8FBFD;
    padding: 88px 0;
    overflow: hidden;
}

.heroSection .colorBg {
    background-color: transparent;
}

.commonTitle {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--secondary-color);
    background: var(--primary-tint);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.commonDesc {
    display: block;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.25;
    color: #17222a;
    letter-spacing: -0.3px;
    text-wrap: balance;
    margin-bottom: 18px;
}

.commonText {
    display: block;
    max-width: 60ch;
    color: var(--text--secondary-color);
    line-height: 1.85;
}

.heroSection .heroImg svg {
    width: 88%;
    display: block;
    margin: auto;
    filter: drop-shadow(0 24px 40px var(--shadow-tint));
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .heroSection .heroImg svg {
        width: 100%;
    }
}

.heroSection .heroImg img {
    border-radius: 24px;
    box-shadow: 0 28px 54px -22px var(--shadow-tint-strong);
}

.heroSection .topRated {
    background: #fff;
    box-shadow: 0 16px 32px -12px var(--shadow-tint-strong);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.heroSection .textWrapper {
    background: #fff;
    box-shadow: 0 12px 26px -10px var(--shadow-tint-strong);
}

/* ---------- Section titles ---------- */

.sectionTitle {
    margin-bottom: 20px;
}

.sectionTitle::before,
.sectionTitle::after {
    display: none;
}

.sectionTitle span {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.2px;
    position: relative;
    padding-bottom: 18px;
}

.sectionTitle span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color1, var(--primary-color)));
}

.sectionTitle .greenText {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--primary-color);
    background: var(--primary-tint);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

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

.features .card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--surface-radius);
    padding: 28px 24px;
    gap: 18px;
    background: #fff;
    box-shadow: 0 10px 24px -16px rgba(20, 40, 60, 0.18);
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.features .card::before {
    display: none;
}

.features .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -18px var(--shadow-tint-strong);
    border-color: var(--primary-tint);
}

.features .card img {
    width: 44px;
    height: 44px;
    padding: 10px;
    box-sizing: content-box;
    background: var(--primary-tint);
    border-radius: 14px;
}

.features .card span {
    font-weight: 700;
    letter-spacing: -0.1px;
}

/* ---------- Counters ---------- */

.counterSect .counterBG {
    border-radius: var(--surface-radius);
    overflow: hidden;
}

.counterSect .card div:first-child span {
    font-variant-numeric: tabular-nums;
}

/* ---------- Why-best / about ---------- */

.whyBest .whyBestTextWrapper::before {
    border-radius: 999px;
}

/* The base stylesheet hardcodes left-edge accent bars, which sit on the
   wrong side once the page is rendered RTL (Arabic). Flip them. */
html[dir="rtl"] .whyBest .whyBestTextWrapper::before,
html[dir="rtl"] .formModal .rightSide .headingWrapper span::before,
html[dir="rtl"] .formModal .adminFormWrapper .headingWrapper span::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .whyBest .whyBestTextWrapper p {
    margin-left: 0;
    margin-right: 18px;
}

.whyBest img {
    border-radius: var(--surface-radius);
}

/* ---------- FAQ ---------- */

.faqs .accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px -14px rgba(20, 40, 60, 0.25);
}

.faqs .accordion-button {
    padding: 18px 22px;
}

.faqs .accordion-button:not(.collapsed) {
    border-radius: 13px 13px 0 0 !important;
}

.faqs .accordion-body {
    padding: 18px 22px 24px;
}

/* ---------- Contact form ---------- */

.getInTouch .card {
    border-radius: var(--surface-radius);
    box-shadow: 0 16px 40px -20px rgba(20, 40, 60, 0.3);
}

.getInTouch input,
.getInTouch textarea {
    border-radius: 12px !important;
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.getInTouch input:focus,
.getInTouch textarea:focus {
    box-shadow: 0 0 0 3px var(--primary-tint) !important;
    border-color: var(--primary-color) !important;
}

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

footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ---------- Motion respect ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .commonBtn,
    .features .card,
    a, button {
        transition: none !important;
    }
}