/* A2Z Test additions on top of the Examin template (style.css stays untouched).
   Mostly: illustrations and colour blocks where the template used photos. */

:root {
  /* Brand colours from the logo (brand/): navy #002259, teal #02BAC6 */
  --ex-navy: #002259;
  --ex-navy-2: #0a3278;
  --ex-amber: #02bac6; /* the accent; name kept from the template's amber */
  --ex-blue: #0b57e3;
  /* The template's own variables */
  --dark: var(--ex-navy);
  --dark-secondary: var(--ex-navy-2);
  --color-primary: var(--ex-amber);
}

/* The few places the template hard-codes its amber */
.wcs-area .site-heading h2::before,
.wcs-area .site-heading h2::after { background: var(--color-primary); }

/* Logo sizing (template expected a PNG of a fixed size) */
.navbar .navbar-brand img.logo,
.navbar-collapse > img { height: 40px; width: auto; }
footer .f-item img { height: 40px; width: auto; margin-bottom: 20px; }

/* Header: Login and Register buttons (they open the sign-in modal); in the phone menu, the same buttons */
.navbar-nav .nav-cta-mobile { display: none; }
@media (max-width: 1023px) {
  .attr-right .nav-cta { display: none; }
  .navbar-nav .nav-cta-mobile { display: block; }
}
/* ".validnavs a" in the template is more specific than a single class: these selectors beat it. */
.validnavs a.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 30px;
  border: 2px solid var(--ex-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.validnavs a.nav-btn i { font-size: 13px; }
.validnavs a.nav-btn:hover { transform: translateY(-1px); }
.validnavs a.nav-btn-login { background: #fff; color: var(--ex-navy); }
/* The template forces a transparent background on hovered links (!important), so these must too. */
.validnavs a.nav-btn-login:hover { background: var(--ex-navy) !important; color: #fff; }
.validnavs a.nav-btn-register {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--ex-navy);
  box-shadow: 0 6px 18px rgba(2, 186, 198, 0.35);
}
.validnavs a.nav-btn-register:hover { background: var(--ex-navy) !important; border-color: var(--ex-navy); color: #fff; box-shadow: 0 6px 18px rgba(0, 34, 89, 0.3); }
.attr-right .nav-btn + .nav-btn { margin-left: 12px; }
/* Keep the menu and the buttons at their natural width (they were squeezing the menu links together). */
.validnavs .attr-right { flex-shrink: 0; display: flex; align-items: center; }
.validnavs ul.navbar-nav > li { flex-shrink: 0; }
.navbar-nav .nav-cta-mobile-buttons { display: none; }
@media (max-width: 1023px) {
  nav.navbar.validnavs ul.nav > li.nav-cta-mobile-buttons { display: flex; gap: 10px; padding: 18px 0 8px; border: 0; }
  nav.navbar.validnavs ul.nav > li.nav-cta-mobile-buttons > a.nav-btn { display: flex; justify-content: center; flex: 1; padding: 11px 12px; border: 2px solid var(--ex-navy); margin: 0; }
  nav.navbar.validnavs ul.nav > li.nav-cta-mobile-buttons > a.nav-btn-register { border-color: var(--color-primary); }
}
.top-bar-area .address-info a { color: inherit; }
.top-bar-area .user-login a { color: var(--ex-navy); font-weight: 600; }

/* Hero: navy gradient with an illustration, instead of the photo carousel */
.banner-area.hero-illustrated {
  background: radial-gradient(circle at 80% 20%, var(--ex-navy-2), var(--ex-navy) 60%);
  padding: 90px 0 70px;
}
.hero-illustrated .content h3 { color: var(--ex-amber); font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
.hero-illustrated .content h1 { color: #fff; font-size: 46px; line-height: 1.2; margin-bottom: 20px; }
.hero-illustrated .content p { color: rgba(255, 255, 255, 0.85); font-size: 17px; }
.hero-illustrated .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 20px; }
.hero-illustrated .hero-actions .btn { margin: 0; }
.hero-illustrated .hero-institution a { color: var(--ex-amber); font-weight: 600; }
.hero-illustrated .thumb img { width: 100%; height: auto; }
@media (max-width: 991px) {
  .banner-area.hero-illustrated { padding: 50px 0; }
  .hero-illustrated .content h1 { font-size: 32px; }
  .hero-illustrated .thumb { margin-top: 40px; }
}

/* Illustrations in place of photos */
.about-area .thumb img,
.reg-area .thumb img,
.demo-illustration img { width: 100%; height: auto; }
.wcs-area .wcs-illustration {
  display: flex; align-items: center; justify-content: center;
  background: var(--ex-navy-2); padding: 60px 40px; min-height: 100%;
}
.wcs-area .wcs-illustration img { width: 100%; max-width: 520px; height: auto; }
.wcs-area .content .item .info h4 { color: #fff; }

/* Exam cards: coloured header per category instead of course photos */
.exam-thumb {
  position: relative; height: 170px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px 8px 0 0; overflow: hidden;
}
.exam-thumb i { font-size: 64px; color: rgba(255, 255, 255, 0.9); }
.exam-thumb i::before { margin: 0; }
.exam-thumb .exam-category {
  position: absolute; top: 15px; left: 15px; padding: 3px 12px; border-radius: 30px;
  background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 13px; font-weight: 600;
}
.tone-1 { background: linear-gradient(135deg, #0b57e3, #002147); }
.tone-2 { background: linear-gradient(135deg, #02bac6, #067d8a); }
.tone-3 { background: linear-gradient(135deg, #16a085, #0b5345); }
.tone-4 { background: linear-gradient(135deg, #8e44ad, #4a235a); }
.exam-thumb .price {
  position: absolute; right: 15px; bottom: 15px; left: auto; top: auto; margin: 0;
  padding: 4px 14px; border-radius: 30px; background: #fff; color: var(--ex-navy);
  font-size: 13px; font-weight: 700; text-transform: uppercase; box-shadow: none;
}
.popular-courses .section-more { margin-top: 40px; }

/* Category tiles: clean white cards instead of photos */
.top-cat-area .top-cat-items .item.cat-tile { background-image: none; }
.top-cat-area .top-cat-items .item.cat-tile::after { display: none; }

/* Sign-up call to action */
.reg-area .cta-points { list-style: none; padding: 0; margin: 0 0 30px; }
.reg-area .cta-points li { margin-bottom: 10px; font-size: 16px; }
.reg-area .cta-points i { color: var(--ex-amber); margin-right: 8px; }

/* Testimonials: initials instead of portraits */
.avatar-initials {
  width: 180px; height: 180px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ex-amber); color: var(--ex-navy); font: 700 56px/1 var(--font-heading, sans-serif);
}

/* Pricing: the highlighted plan */
.pricing-area .pricing-item.active { box-shadow: 0 10px 30px rgba(11, 87, 227, 0.25); transform: translateY(-6px); }
.pricing-area .pricing-header h2 sub {
  display: block; margin-top: 10px; font-size: 14px; bottom: 0; letter-spacing: 1px; text-transform: uppercase;
}

/* FAQ spacing on the home page */
.faq-area .accordion-item { margin-bottom: 12px; }

/* Book-a-demo form */
.contact-info-area .alert-error { display: block; color: #c0392b; font-size: 13px; margin-top: 4px; }
.contact-info-area .alert-msg { margin-top: 15px; font-weight: 600; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Plain page heading (exam catalogue, 404) instead of the photo breadcrumb */
.breadcrumb-area.page-heading {
  background: linear-gradient(135deg, var(--ex-navy-2), var(--ex-navy));
  padding: 80px 0; background-image: linear-gradient(135deg, var(--ex-navy-2), var(--ex-navy));
}
.breadcrumb-area.page-heading h1 { color: #fff; }
.breadcrumb-area.page-heading p { color: rgba(255, 255, 255, 0.85); margin-bottom: 20px; }

/* Policy pages: a readable column of text */
.legal-text { max-width: 800px; margin: 0 auto; font-size: 16px; line-height: 1.7; }
.legal-text h2 { font-size: 22px; margin: 32px 0 12px; }
.legal-text ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.legal-text ul li { list-style: disc outside; margin-bottom: 6px; }
.legal-text .legal-contact { font-size: 14px; color: #666; }

/* Contact page */
.contact-aside h3 { font-size: 18px; margin: 0 0 8px; }
.contact-aside p { margin-bottom: 24px; }
#support-form select.form-control { height: 55px; }
@media (max-width: 991px) { .contact-aside { margin-bottom: 30px; } }
/* The support form looks like the template's demo form (same input, textarea and button styles) */
#support-form input, #support-form select, #support-form textarea { border: 1px solid #e7e7e7; border-radius: inherit; box-shadow: inherit; }
#support-form textarea { min-height: 170px; }
#support-form button {
  background: #002147; border: none; color: #fff; font-family: var(--font-heading); font-weight: 600;
  padding: 10px 25px; text-transform: uppercase;
}
#support-form button i { margin-left: 3px; }
#support-form button:disabled { opacity: 0.6; }
#support-form .alert-msg { margin-top: 12px; }


/* For institutions (no prices: the sales team) */
.institution-points { margin-top: 10px; }
.institution-point { background: #fff; border-radius: 8px; padding: 26px 24px; margin-bottom: 24px; height: calc(100% - 24px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }
.institution-point i { font-size: 28px; color: var(--color-primary); margin-bottom: 14px; }
.institution-point h4 { font-size: 19px; margin-bottom: 8px; }
.institution-point p { margin: 0; }
.institution-cta { padding-top: 8px; }
.institution-cta p { margin-top: 18px; }

/* Web users' sign-in / sign-up modal */
body.auth-open { overflow: hidden; }
.auth-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-modal[hidden] { display: none; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(0, 20, 50, 0.55); }
.auth-dialog { position: relative; width: 100%; max-width: 430px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 12px; padding: 28px 28px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.auth-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 28px; line-height: 1; color: #666; cursor: pointer; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid #e7e7e7; }
.auth-tabs button { flex: 1; border: 0; background: none; padding: 10px 0; font-weight: 600; color: #777; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.auth-tabs button[aria-selected="true"] { color: var(--ex-navy); border-bottom-color: var(--color-primary); }
.auth-dialog label { display: block; font-weight: 600; font-size: 14px; margin: 10px 0 0; color: #333; }
.auth-dialog input:not([type="checkbox"]) { display: block; width: 100%; margin-top: 6px; border: 1px solid #d9d9d9; border-radius: 6px; padding: 10px 12px; font-weight: 400; }
.auth-dialog .auth-code { letter-spacing: 0.5em; text-align: center; font-size: 20px; }
.auth-dialog .auth-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin-top: 14px; }
.auth-dialog .auth-check input { margin-top: 5px; }
.auth-error { display: block; color: #c0392b; font-size: 13px; min-height: 0; margin-top: 3px; }
.auth-submit { width: 100%; margin-top: 18px; }
.auth-small { font-size: 13px; margin: 10px 0 0; text-align: center; }
.auth-message { border-radius: 6px; padding: 8px 12px; font-size: 14px; background: #fdecea; color: #a12a1f; }
.auth-message[data-kind="ok"] { background: #e6f7ee; color: #1d6b43; }
.auth-institution { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #eee; font-size: 13px; text-align: center; color: #666; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* How it works: the two audience headings */
.how-heading { margin: 10px 0 25px; font-weight: 700; }

/* ==========================================================================
   Spacing for the whole site (2026-10-01). The template gives every section 120px above and
   below plus 60px under each heading, which left 220-280px of empty space between sections.
   One rhythm instead: --section-y around each section, --heading-gap under each heading.
   ========================================================================== */
:root { --section-y: 72px; --heading-gap: 40px; }
@media (max-width: 991px) { :root { --section-y: 56px; --heading-gap: 32px; } }
@media (max-width: 767px) { :root { --section-y: 44px; --heading-gap: 26px; } }

.default-padding,
.default-padding.bottom-less,
.default-padding.bottom-20,
.default-padding.bottom-30,
.default-padding.carousel-shadow { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.default-padding-top { padding-top: var(--section-y); }
.default-padding-bottom { padding-bottom: var(--section-y); }
/* "bottom-less" sections end with a grid whose cards carry their own bottom margin */
.default-padding.bottom-less { padding-bottom: calc(var(--section-y) - 24px); }
.site-heading { margin-bottom: var(--heading-gap); }
.site-heading p { margin-bottom: 0; }
.site-heading h2 { padding-bottom: 16px; }

/* Why choose us: the template pads its text column by 120px */
.wcs-area .content { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.wcs-area .site-heading { margin-bottom: 28px; }

/* Sign-up band: the text column had its own 120px under it */
@media (max-width: 991px) { .reg-area { padding-bottom: var(--section-y); } .reg-area .reg-items .reg-form.default-padding-bottom { padding-bottom: 24px; } }
.reg-area .reg-items .reg-form.default-padding-bottom { padding-bottom: var(--section-y); }
.reg-area .reg-items .thumb img { max-height: 340px; width: auto; }

/* Category tiles and cards: the same 24px gap everywhere */
.top-cat-area .top-cat-items .item { margin-bottom: 0; }
.top-cat-area .top-cat-items .equal-height { margin-bottom: 24px; }
.popular-courses .section-more,
.top-cat-area .section-more { margin-top: 24px; }

/* How it works: less space between the two rows */
#how-it-works .how-heading { margin: 4px 0 20px; }
#how-it-works .institution-points + .how-heading { margin-top: 12px; }

/* FAQ: no extra space after the last question; the contact block follows directly */
.faq-area .accordion { margin: 0; }
.faq-area .accordion-item:last-child { margin-bottom: 0; }
.faq-area .accordion-body p:last-child { margin-bottom: 0; }

/* Footer: the template's 120px top */
footer.default-padding-top { padding-top: var(--section-y); }
footer .f-items .item { margin-bottom: 30px; }

/* Testimonials: an opening quote mark above the words (the template's huge ",," sat on top of
   longer quotes), smaller initials, and cards of equal height */
.clients-review-carousel .item .info p::after { content: none; }
.clients-review-carousel .item .info p::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  line-height: 0.8;
  height: 34px;
  color: var(--color-primary);
}
.clients-review-carousel .item .info p { margin-bottom: 18px; }
/* A small initials badge on the left, the words taking the rest of the card */
.testimonials-area .clients-review-carousel .item { padding: 26px 28px; height: 100%; width: 100%; }
.testimonials-area .testimonial-row { display: flex; align-items: flex-start; gap: 20px; }
.testimonials-area .testimonial-row .thumb { flex: 0 0 64px; }
.testimonials-area .testimonial-row .info { flex: 1; min-width: 0; padding: 0; text-align: left; }
.testimonials-area .avatar-initials { width: 64px; height: 64px; font-size: 24px; }
.clients-review-carousel .item .info p { font-size: 15px; line-height: 1.7; }
.clients-review-carousel .item .info h4 { font-size: 18px; }
.clients-review-carousel .item .info span { font-size: 12px; letter-spacing: 0.5px; }
.testimonials-area .owl-stage { display: flex; }
.testimonials-area .owl-item { display: flex; }
@media (max-width: 575px) {
  .testimonials-area .clients-review-carousel .item { padding: 22px 18px; }
  .testimonials-area .testimonial-row { gap: 14px; }
  .testimonials-area .testimonial-row .thumb { flex-basis: 48px; }
  .testimonials-area .avatar-initials { width: 48px; height: 48px; font-size: 18px; }
}
}

/* Inner pages' title banner (Exams, Contact, the policies) */
.breadcrumb-area.page-heading { padding-top: calc(var(--section-y) - 8px); padding-bottom: calc(var(--section-y) - 8px); }
.breadcrumb-area.page-heading h1 { margin-bottom: 8px; }
.breadcrumb-area.page-heading p:last-child, .breadcrumb-area.page-heading .breadcrumb { margin-bottom: 0; }

/* Exam category tiles: same height in a row, icons in the brand teal, the words as written */
.top-cat-area .top-cat-items .equal-height { display: flex; }
.top-cat-area .top-cat-items .item.cat-tile { width: 100%; }
.top-cat-area .top-cat-items .item.cat-tile > a { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 26px 22px; }
.top-cat-items .item.cat-tile i { display: block; flex: 0 0 44px; font-size: 36px; line-height: 1; color: var(--color-primary); text-align: center; }
.top-cat-items .item.cat-tile .info { display: block; padding-left: 0; }
.top-cat-items .item.cat-tile h4 { font-size: 18px; margin-bottom: 6px; text-transform: none; }
.top-cat-items .item.cat-tile .info span { display: block; font-size: 14px; line-height: 1.5; text-transform: none; }
.top-cat-items .item.cat-tile .info { text-align: left; }
@media (max-width: 767px) {
  /* Two tiles a row on phones: the icon above the words */
  .top-cat-area .top-cat-items .row { margin-left: -6px; margin-right: -6px; }
  .top-cat-area .top-cat-items .equal-height { padding-left: 6px; padding-right: 6px; margin-bottom: 12px; }
  .top-cat-area .top-cat-items .item.cat-tile > a { flex-direction: column; gap: 10px; padding: 16px 14px; }
  .top-cat-items .item.cat-tile i { flex: none; font-size: 28px; text-align: left; }
  .top-cat-items .item.cat-tile h4 { font-size: 15px; margin-top: 0; }
  .top-cat-items .item.cat-tile .info { margin-top: -4px; }
  .top-cat-items .item.cat-tile .info span { font-size: 12.5px; }
}

/* Public exams: what shows while there are none yet (exam-catalogue.js) */
.catalogue-empty { max-width: 640px; margin: 0 auto; padding: 36px 28px; text-align: center; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.catalogue-empty i { font-size: 34px; color: var(--color-primary); margin-bottom: 14px; display: block; }
.catalogue-empty h4 { margin-bottom: 10px; }
.catalogue-empty p { margin-bottom: 22px; }