/*-----------------------------------------------------------------------------------

    Coursable — brand layer + mobile-first corrections
    Author: AB DESIGNS — abdesigns.site

    main.css ships desktop-first (max-width queries). Everything here is written
    the other way round: the small-screen value is the base, and min-width
    queries scale it up. Loaded after main.css so it always wins.

    01. Brand tokens
    02. Wordmark
    03. Language switcher
    04. Icons
    05. Mobile-first typography
    06. Mobile-first section rhythm
    07. Component fixes (hero, courses, community, team, footer)
    08. Focus + motion

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  01. Brand tokens
/*----------------------------------------*/
:root {
   --cs-primary: #6d3bf5;
   --cs-primary-dark: #4c1fd4;
   --cs-accent: #17d5c0;
   --cs-ink: #1b1730;
   --cs-shell: 16px;              /* gutter on the smallest screens */
   --cs-section: 64px;            /* vertical rhythm on the smallest screens */
}

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

.tp-anchor {
   display: block;
   height: 0;
   scroll-margin-top: 90px;
}

/*----------------------------------------*/
/*  02. Wordmark
/*----------------------------------------*/
.tp-logo {
   display: inline-flex;
   align-items: center;
   line-height: 1;
   text-decoration: none;
}
.tp-logo-text {
   font-family: var(--tp-ff-heading);
   font-weight: 700;
   font-size: 22px;
   letter-spacing: -0.02em;
   color: var(--cs-ink);
   white-space: nowrap;
}
.tp-logo-light .tp-logo-text { color: #fff; }
.tp-logo:hover .tp-logo-text { color: var(--cs-primary); }
.tp-logo-light:hover .tp-logo-text { color: var(--cs-accent); }

@media (min-width: 768px) {
   .tp-logo-text { font-size: 25px; }
}

/*----------------------------------------*/
/*  03. Language switcher
/*----------------------------------------*/
.tp-lang-switch {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px;
   border: 1px solid var(--tp-border-1);
   border-radius: 999px;
   background: #fff;
}
.tp-lang-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 12px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 500;
   color: var(--tp-grey-1);
   background: transparent;
   white-space: nowrap;
   transition: all .25s ease;
}
.tp-lang-btn img { width: 18px; height: 18px; border-radius: 50%; }
.tp-lang-btn:hover { color: var(--cs-primary); }
.tp-lang-btn.is-active {
   background: var(--cs-primary);
   color: #fff;
}

.tp-lang-mini {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   flex: 0 0 40px;
   border-radius: 50%;
   border: 1px solid var(--tp-border-1);
   background: #fff;
   font-weight: 700;
   font-size: 14px;
   color: var(--cs-ink);
   transition: all .25s ease;
}
.tp-lang-mini:hover { background: var(--cs-primary); color: #fff; border-color: var(--cs-primary); }
@media (min-width: 1200px) { .tp-lang-mini { display: none; } }

/*----------------------------------------*/
/*  04. Icons (the Font Awesome Pro webfont is not part of this package,
/*      so every glyph is now an inline SVG)
/*----------------------------------------*/
.tp-star { color: var(--cs-primary); }
.tp-course-rating-icon { display: inline-flex; gap: 2px; align-items: center; }

/* The eyebrow keeps its accent colour, except over the hero photo. */
.tp-section-subtitle.text-white,
.tp-section-subtitle.text-white > span { color: #fff; }
.tp-search-form-icon svg,
.tp-search-close svg,
.tp-header-toogle svg,
.tp-offcanvas-close-button svg { display: block; }

/*----------------------------------------*/
/*  05. Mobile-first typography
/*----------------------------------------*/
h1 { font-size: clamp(34px, 8.6vw, 60px); }
h2 { font-size: clamp(28px, 7.2vw, 52px); }
h3 { font-size: clamp(24px, 5.6vw, 40px); }
h4 { font-size: clamp(21px, 4.4vw, 28px); }
h5 { font-size: clamp(19px, 3.6vw, 24px); }
h6 { font-size: clamp(17px, 3vw, 20px); }

body { font-size: 15px; }
@media (min-width: 768px) { body { font-size: 16px; } }

p { font-size: 15px; line-height: 1.7; }
@media (min-width: 768px) { p { font-size: 16px; } }

.tp-section-title { font-size: clamp(28px, 7vw, 52px); line-height: 1.18; }
.tp-section-title.fs-42 { font-size: clamp(28px, 6.4vw, 42px); }
.tp-section-dec { font-size: clamp(15px, 2.2vw, 18px); }
.tp-hero-2-title { font-size: clamp(38px, 10vw, 82px); line-height: 1.06; }
.tp-hero-2-dec { font-size: clamp(16px, 2.4vw, 22px); line-height: 1.5; }
.tp-hero-2-form-title { font-size: clamp(22px, 4.6vw, 32px); }
.tp-footer-2-top-title h2 { font-size: clamp(26px, 6vw, 48px); }
.tp-feature-title { font-size: clamp(19px, 3.4vw, 22px); }
.tp-service-title { font-size: clamp(20px, 3.6vw, 24px); }
.tp-course-title { font-size: clamp(18px, 3.2vw, 22px); }
.tp-blog-title { font-size: clamp(19px, 3.4vw, 24px); }
.tp-testimonial-2-dec { font-size: clamp(16px, 2.6vw, 20px); line-height: 1.55; }

/* line breaks that only make sense once there is room for them */
@media (max-width: 575.98px) {
   .tp-section-dec br,
   .tp-service-dec br,
   .tp-feature-dec br,
   .tp-about-mission-item p br,
   .tp-footer-link br,
   .tp-hero-2-dec br { display: none; }
}

/*----------------------------------------*/
/*  06. Mobile-first section rhythm
/*----------------------------------------*/
.container,
.container-fluid { padding-left: var(--cs-shell); padding-right: var(--cs-shell); }
@media (min-width: 576px) { :root { --cs-shell: 20px; } }
@media (min-width: 992px) { :root { --cs-shell: 24px; } }

/* Collapse the template's oversized desktop padding utilities on phones.  */
@media (max-width: 767.98px) {
   [class*="pt-1"], .pt-90, .pt-95 { padding-top: var(--cs-section) !important; }
   [class*="pb-1"], .pb-90, .pb-95 { padding-bottom: var(--cs-section) !important; }
   .mt-100, .mt-105, .mt-110, .mt-115, .mt-120, .mt-125, .mt-130, .mt-135,
   .mt-140, .mt-145, .mt-150, .mt-160, .mt-170, .mt-180, .mt-190, .mt-200 { margin-top: 32px !important; }
   .mb-100, .mb-105, .mb-110, .mb-115, .mb-120, .mb-125, .mb-130, .mb-135,
   .mb-140, .mb-145, .mb-150, .mb-160, .mb-170, .mb-180, .mb-190, .mb-200 { margin-bottom: 32px !important; }
   .ml-25, .ml-50, .ml-90, .ml-100, .ml-200 { margin-left: 0 !important; }
   .mr-30, .mr-50, .mr-80, .mr-100 { margin-right: 0 !important; }
   .mb-55, .mb-60, .mb-65, .mb-70, .mb-75, .mb-80, .mb-85 { margin-bottom: 28px !important; }
   .mb-35, .mb-40, .mb-45, .mb-50 { margin-bottom: 22px !important; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
   .pt-135, .pt-140, .pt-145, .pt-160 { padding-top: 88px !important; }
   .pb-125, .pb-135, .pb-140, .pb-160 { padding-bottom: 88px !important; }
   .ml-90, .ml-100, .ml-200 { margin-left: 0 !important; }
}

/*----------------------------------------*/
/*  07. Component fixes
/*----------------------------------------*/

/* --- header ------------------------------------------------------------ */
.tp-header-option { gap: 6px; }
/* Seven nav items plus the logo are tight at xl, and the Arabic labels are
   longer again — tighten the gaps instead of letting the bar wrap. */
.tp-main-menu nav > ul { display: flex; flex-wrap: nowrap; align-items: center; }
@media (min-width: 1200px) and (max-width: 1499.98px) {
   .tp-header-logo.mr-100 { margin-right: 40px !important; }
   [dir="rtl"] .tp-header-logo.mr-100 { margin-right: 0 !important; margin-left: 40px !important; }
   .tp-main-menu nav ul li:not(:last-child) { margin-right: 22px; }
   [dir="rtl"] .tp-main-menu nav ul li:not(:last-child) { margin-right: 0; margin-left: 22px; }
   .tp-main-menu-2 nav ul li a { font-size: 15px; }
}
@media (min-width: 1200px) {
   .lang-ar .tp-main-menu-2 nav ul li a { font-size: 15px; }
}
@media (max-width: 379.98px) {
   .tp-header-logo .tp-logo-text { font-size: 19px; }
   .tp-lang-mini { width: 36px; height: 36px; flex-basis: 36px; }
}

/* --- hero -------------------------------------------------------------- */
/* the replacement photograph is brighter than the original, so the scrim
   has to work harder to keep the white headline readable */
.tp-hero-2-overly::before { opacity: .86; }
.tp-hero-area { padding-top: 48px; }
.tp-hero-2-content { padding-bottom: 32px; }
.tp-hero-2-content .tp-btn { margin-bottom: 12px; }
.tp-hero-2-dec.mt-180 { margin-top: 40px !important; }
.tp-hero-2-form { padding: 24px 18px; border-radius: 18px; }
.tp-hero-2-form .tp-input { font-size: 15px; }
@media (min-width: 768px) {
   .tp-hero-area { padding-top: 72px; }
   .tp-hero-2-form { padding: 30px 26px; }
}
@media (min-width: 1200px) {
   .tp-hero-area { padding-top: 120px; }
   .tp-hero-2-dec.mt-180 { margin-top: 180px !important; }
}
@media (max-width: 575.98px) {
   .tp-hero-2-content .tp-btn.tp-btn-xl,
   .tp-hero-2-content .tp-btn-transparent { width: 100%; justify-content: center; margin-right: 0; }
}

/* --- courses ----------------------------------------------------------- */
.tp-course-item { height: 100%; }
.tp-course-thumb img { width: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.tp-course-meta { flex-wrap: wrap; gap: 6px 16px; }

/* --- brand strip ------------------------------------------------------- */
.tp-brand-area { padding-bottom: 24px; }

/* --- how it works ------------------------------------------------------
   This block used to follow the about section, which supplied its top
   padding. It now sits under the partner strip and needs its own.         */
.tp-feature-area { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px)  { .tp-feature-area { padding-top: 80px;  padding-bottom: 72px; } }
@media (min-width: 1200px) { .tp-feature-area { padding-top: 110px; padding-bottom: 96px; } }
.tp-feature-item { height: 100%; }
/* the doodle sits behind the heading — keep it out of the reading area */
.tp-feature-shape { top: 40px; opacity: .55; z-index: -1; }
@media (max-width: 1399.98px) { .tp-feature-shape { display: none !important; } }
@media (max-width: 991.98px) {
   .tp-feature-item.mt-40 { margin-top: 0 !important; }
}

/* --- services ---------------------------------------------------------- */
.tp-service-item { height: 100%; }
.tp-service-2-item .tp-service-icon.mb-70 { margin-bottom: 44px; }

/* --- about ------------------------------------------------------------- */
@media (max-width: 991.98px) {
   .tp-about-2-thumb-wrap { margin-right: 0 !important; }
   .tp-about-2-science { text-align: center !important; }
   .tp-about-2-science .mr-80 { margin-right: 0 !important; }
}
.tp-about-btn-wrap { gap: 10px 18px; }

/* --- community wall ----------------------------------------------------
   The wall is one flex row of nine staggered columns. Below xl it needs to
   wrap, and it must never collide with the heading that sits under it.     */
.tp-community-wrap { justify-content: center; }
.tp-community-item img { width: 100%; display: block; }

@media (max-width: 1199.98px) {
   .tp-community-wrap { flex-wrap: wrap; gap: 12px; }
   .tp-community-col { flex: 0 0 auto; width: 140px; }
   .tp-community-col.mt-65,
   .tp-community-col.mt-100 { margin-top: 0 !important; }
}
@media (max-width: 767.98px) {
   .tp-community-col { width: 30vw; max-width: 150px; }
   .tp-community-wrap .tp-community-col:nth-child(n + 7) { display: none; }
}
@media (max-width: 479.98px) {
   .tp-community-wrap .tp-community-col:nth-child(n + 5) { display: none; }
}

/* --- team -------------------------------------------------------------- */
.tp-team-thumb img { width: 100%; object-fit: cover; aspect-ratio: 4 / 4.5; }

/* --- testimonials ------------------------------------------------------ */
.tp-testimonial-2-item { height: 100%; }

/* --- blog -------------------------------------------------------------- */
.tp-blog-thumb img { width: 100%; object-fit: cover; aspect-ratio: 27 / 25; }
.tp-blog-meta-wrap { gap: 6px 14px !important; }

/* --- footer ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
   .tp-footer-widget.ml-200,
   .tp-footer-widget.ml-100,
   .tp-footer-widget.ml-90 { margin-left: 0 !important; }
}
.tp-footer-copyright p { font-size: 14px; }
.tp-footer-copyright a { color: var(--cs-accent); }

/* --- buttons ----------------------------------------------------------- */
.tp-btn { min-height: 44px; }          /* comfortable tap target */
.tp-btn, .tp-btn-xl { white-space: nowrap; }
@media (max-width: 400px) {
   .tp-btn-xl { padding-left: 20px; padding-right: 20px; }
}

/* --- offcanvas / search ------------------------------------------------ */
.tp-offcanvas { width: min(340px, 88vw); }
.tp-search-form-input input { font-size: clamp(18px, 5vw, 34px); }

/*----------------------------------------*/
/*  08. Focus + motion
/*----------------------------------------*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
   outline: 2px solid var(--cs-primary);
   outline-offset: 2px;
   border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
   }
}