/*
Theme Name: ITCS 
Description: ITCS n-ergy WordPress Theme — Modern Redesign 2.0
Version: 2.0
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --navy: #2d295f;
  --navy-dark: #1e1b45;
  --navy-mid: #3d3870;
  --navy-light: #4a4690;
  --teal: #13b69f;
  --teal-dark: #0d9080;
  --teal-light: #1fd4b8;
  --teal-ultra: #e6faf7;
  --white: #ffffff;
  --off-white: #f7f8fc;
  --grey-100: #f0f2f8;
  --grey-200: #e0e4ee;
  --grey-400: #9099b3;
  --text-dark: #1a1c2e;
  --text-body: #3d4260;
  --shadow-sm: 0 2px 12px rgba(45, 41, 95, .08);
  --shadow-md: 0 8px 32px rgba(45, 41, 95, .14);
  --shadow-lg: 0 20px 60px rgba(45, 41, 95, .18);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', 'Poppins', system-ui, sans-serif;
  color: var(--text-body);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ============================================================
   GLOBAL TYPOGRAPHY — dark on white by default
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Sora', 'Poppins', 'DM Sans', sans-serif;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .75rem;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

/* GLOBAL: all p and li are DARK unless explicitly overridden in a dark section */
p {
  color: var(--text-body) !important;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 1rem;
}

li {
  color: var(--text-body) !important;
  font-size: 16px;
  line-height: 1.7;
}

a {
  color: var(--teal-dark);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--navy) !important;
  text-decoration: none;
}

a {
  font-weight: bold;
}

hr {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--navy));
  border-radius: 2px;
  width: 60px;
  margin: 1.5rem 0 2rem;
}

img {
  width: auto;
  max-width: 100%;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 13px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--transition) !important;
  box-shadow: 0 4px 18px rgba(19, 182, 159, .35) !important;
  text-transform: uppercase;
  display: inline-block;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(19, 182, 159, .4) !important;
  color: #fff !important;
}

input[type="submit"] {
  width: auto !important;
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--grey-200);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text-dark) !important;
  background: var(--white);
  transition: var(--transition);
  outline: none;
  margin-bottom: 12px;
  overflow: visible;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 182, 159, .15);
}

textarea {
  overflow: visible;
}

input {
  overflow: visible;
}

/* ============================================================
   UNIFIED NAVBAR 
   ============================================================ */

/* Outer wrapper: sticky, full-width, dark navy */
.thenavbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  box-shadow: 0 2px 20px rgba(30, 27, 69, .35);
}

/* Inner flex row: logo | menu (grows) | phone */
.thenavbar-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 64px;
}

/* ── Logo ─────────────────────────────────────── */
.thenavbar-logo {
  display: flex;
  align-items: center;
  padding: 0 24px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.thenavbar-logo a {
  display: flex;
  align-items: center;
}

.thenavbar-logo img {
  max-height: 46px;
  width: auto;
  transition: var(--transition);
}

.thenavbar-logo img:hover {
  opacity: .85;
}

/* ── Menu (Mega Menu takes flex-1) ───────────── */
.thenavbar-menu {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: visible;
}

.thenavbar-menu #mega-menu-wrap-max_mega_menu_1 {
  background: transparent !important;
  border: none !important;
  width: 100%;
}

#mega-menu-wrap-max_mega_menu_1 {
  background: transparent !important;
  border: none !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link {
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 18px !important;
  height: 64px;
  line-height: 64px !important;
  transition: var(--transition) !important;
  border-bottom: 3px solid transparent !important;
  border-top: 3px solid transparent !important;
  text-align: center;
  font-family: 'DM Sans', sans-serif !important;
  display: flex !important;
  align-items: center !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link:focus {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
  border-bottom-color: var(--teal) !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link {
  background: rgba(19, 182, 159, .12) !important;
  color: var(--teal-light) !important;
  border-bottom-color: var(--teal) !important;
}

/* Dropdown sub-menu */
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  background: var(--navy-dark) !important;
  color: rgba(255, 255, 255, .82) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  border-top: 0 !important;
  font-size: 13px !important;
  padding: 13px 22px !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-align: left !important;
  transition: var(--transition) !important;
  display: block !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
  background: var(--teal-dark) !important;
  color: #fff !important;
  padding-left: 30px !important;
}

/* ── Phone number ─────────────────────────────── */
.thenavbar-phone {
  display: flex;
  align-items: center;
  padding: 0 24px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.thenavbar-phone a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px;
  white-space: nowrap;
  transition: var(--transition);
  text-decoration: none;
}

.thenavbar-phone a:hover {
  color: var(--teal-light) !important;
}

.thenavbar-phone .fa-phone {
  color: var(--teal) !important;
  font-size: 15px !important;
  padding-right: 0 !important;
}

/* ── Mobile collapse ──────────────────────────── */
@media (max-width: 992px) {
  .thenavbar-inner {
    flex-wrap: wrap;
  }

  .thenavbar-logo {
    flex: 1;
    border-right: none;
    padding: 10px 16px;
  }

  .thenavbar-logo img {
    max-height: 40px;
  }

  .thenavbar-phone {
    border-left: none;
    padding: 10px 16px;
  }

  .thenavbar-phone span {
    display: none;
  }

  .thenavbar-menu {
    order: 3;
    width: 100%;
    background: var(--navy-dark);
    overflow: visible;
  }

  /* Max Mega Menu mobile toggle: force a single full-height row */
  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 {
    width: 100%;
    display: block;
  }

  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle {
    min-height: 56px;
    height: 56px;
    width: 100%;
    display: flex;
    align-items: stretch;
    background: var(--navy-dark);
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-blocks-left,
  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-blocks-center {
    display: none !important;
  }

  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-blocks-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
  }

  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    margin: 0;
  }

  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-animated {
    height: 56px;
    width: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    border-top: none !important;
    display: block !important;
  }

  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item.mega-toggle-on>a.mega-menu-link {
    background: var(--teal-dark) !important;
    color: #fff !important;
  }

  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    text-align: center !important;
  }
}

@media (max-width: 992px) {

  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-animated-inner,
  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-animated-inner::before,
  .thenavbar-menu #mega-menu-wrap-max_mega_menu_1 .mega-toggle-animated-inner::after {
    background-color: #fff !important;
  }
}

@media (min-width: 769px) {

  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link:hover,
  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link:focus {
    background: rgba(255, 255, 255, .06) !important;
  }
}

/* ============================================================
   HERO / CAROUSEL
   ============================================================ */
.slider {
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.homecat {
  padding: 0 !important;
}

.carousel {
  position: relative !important;
  background: var(--navy-dark) !important;
}

.carousel-inner img {
  object-fit: cover;
  width: 100%;
  max-height: 800px;
  filter: brightness(.5);
  display: block;
}

/* Dark overlay on top of image */
.carousel-item {
  position: relative;
}

.carousel-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30, 27, 69, .75) 0%, rgba(19, 182, 159, .15) 100%);
  z-index: 1;
}

/* Caption always centred, never a coloured box */
.carousel-caption {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 65% !important;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  padding: 0 !important;
  height: fit-content !important;
  z-index: 2;
}

/* Force ALL text inside carousel caption to white — no exceptions */
.carousel-caption,
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption h4,
.carousel-caption h5,
.carousel-caption h6,
.carousel-caption p,
.carousel-caption li,
.carousel-caption a,
.carousel-caption span {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.carousel-caption h1 {
  font-family: 'Sora', 'Poppins', 'DM Sans', sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  padding-bottom: 0 !important;
  margin-bottom: .8rem !important;
}

.carousel-caption p {
  font-size: 18px !important;
  font-weight: 400 !important;
  opacity: .92;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1200px) {
  .carousel-caption {
    width: 80% !important;
    top: 50% !important;
    text-align: center !important;
  }

  .carousel-caption h1 {
    font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
  }
}

@media (max-width: 670px) {
  .carousel-caption {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    padding: 30px 20px !important;
    background: var(--navy) !important;
  }

  .carousel-inner img {
    max-height: 320px;
  }
}

/* ============================================================
   HOME — ABOUT / WELCOME SECTION
   ============================================================ */
.homeaboutus {
  padding: 70px 0;
}

.aboutusleft {
  padding: 5% 8% !important;
}

.aboutusleft h2 {
  color: var(--navy) !important;
}

.aboutusright {
  padding: 5% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutusright img {
  width: 100% !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.aboutusright img:hover {
  transform: scale(1.02);
}

/* ============================================================
   HOME — CATEGORY CARDS
   ============================================================ */
.homecategorylist {
  padding: 16px !important;
}

.homecategorylist .card {
  background: var(--white) !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

.homecategorylist .card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.homecategorylist .card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--navy));
  transform: scaleX(0);
  transition: var(--transition);
}

.homecategorylist .card:hover::after {
  transform: scaleX(1);
}

.homecategorylist img {
  height: 180px !important;
  width: 100% !important;
  object-fit: cover !important;
  transition: var(--transition);
  display: block;
}

.homecategorylist .card:hover img {
  transform: scale(1.05);
}

.homecategorylist .card-body {
  background: var(--navy);
  padding: 18px 20px !important;
}

.card-text {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin: 0 !important;
  text-align: left !important;
}

.fa-arrow-right {
  float: none !important;
  color: var(--teal-light) !important;
  padding-right: 0 !important;
  font-size: 14px !important;
  transition: var(--transition);
}

.homecategorylist .card:hover .fa-arrow-right {
  transform: translateX(5px);
}

/* ============================================================
   HOME — ACCREDITATIONS
   ============================================================ */
.trustedmembers {
  padding: 50px 0;
}

.trustmembers {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trustmembers img {
  width: auto !important;
  max-height: 70px;
  filter: grayscale(30%);
  opacity: .75;
  transition: var(--transition);
}

.trustmembers img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 670px) {
  .trustmembers img {
    padding: 10% !important;
  }
}

/* ============================================================
   HOME — BOTTOM TEXT / BANNER BLOCKS
   ============================================================ */
.homebottomtextleft {
  font-size: 18px !important;
  padding: 5% 8% !important;
}

.homebottomtextleft li {
  color: var(--navy) !important;
  font-size: 17px !important;
  font-weight: 500;
}

.homebottomtextright {
  padding: 5% !important;
}

@media (max-width: 670px) {
  .homebottomtextleft {
    padding: 10% 8% !important;
  }
}

/* ============================================================
   INTERNAL PAGE HERO BANNER
   Only the banner div gets the dark gradient.
   The content area (.internalpages) is always light.
   ============================================================ */
.internalpage {
  padding: 70px 20px 45px !important;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
  text-align: center;
  margin: 0;
}

/* Everything inside the dark banner hero = white */
.internalpage h1,
.internalpage h2,
.internalpage h3 {
  color: #ffffff !important;
  font-family: 'Sora', 'Poppins', 'DM Sans', sans-serif;
  font-weight: 800;
  margin: 0;
}

.internalpage h1 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
}

.internalpage h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--teal);
  border-radius: 2px;
  margin: 1rem auto 0;
}

/* p and li inside banner (unusual but safe) */
.internalpage p {
  color: rgba(255, 255, 255, .85) !important;
}

.internalpage li {
  color: rgba(255, 255, 255, .85) !important;
}

/* ============================================================
   CONTENT AREA 
   ============================================================ */
.internalpages,
.internalpages *:not(a) {
  /* Reset: nothing should be white here */
}

.internalpages {
  padding: 60px 20px !important;
}

.internalpagecol {
  padding: 10px 20px !important;
}

/* Ensure ALL headings in content areas are dark navy */
.internalpages h1,
.internalpages h2,
.internalpages h3,
.internalpages h4,
.internalpagecol h1,
.internalpagecol h2,
.internalpagecol h3,
.internalpagecol h4,
.qualifications h1,
.qualifications h2,
.qualifications h3,
.qualificationdesc h1,
.qualificationdesc h2,
.qualificationdesc h3,
.visionblocks h1,
.visionblocks h2,
.visionblocks h3,
.learnerblocks h1,
.learnerblocks h2,
.learnerblocks h3,
.whychoose h1,
.whychoose h2,
.whychoose h3,
.qualityblocks h1,
.qualityblocks h2,
.qualityblocks h3,
.qualitytext h1,
.qualitytext h2,
.qualitytext h3,
.visiontext h1,
.visiontext h2,
.visiontext h3 {
  color: var(--navy) !important;
}

/* Ensure ALL paragraphs and lists in content areas are readable */
.internalpages p,
.internalpagecol p,
.qualifications p,
.qualificationdesc p,
.visionblocks p,
.visiontext p,
.learnerblocks p,
.whychoose p,
.qualityblocks p,
.qualitytext p,
.thesublink p,
.historytext1 p {
  color: var(--text-body) !important;
  font-size: 16px;
  line-height: 1.8;
}

.internalpages li,
.internalpagecol li,
.qualifications li,
.qualificationdesc li,
.visionblocks li,
.learnerblocks li,
.whychoose li,
.qualityblocks li,
.qualitytext li,
.historytext1 li {
  color: var(--text-body) !important;
  font-size: 16px;
  line-height: 1.7;
}

/* Links inside content areas */
.internalpages a,
.internalpagecol a,
.qualificationdesc a {
  color: var(--teal-dark) !important;
}

.internalpages a:hover,
.internalpagecol a:hover {
  color: var(--navy) !important;
}

/* Images inside content areas */
.internalpagecol img {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0 !important;
  margin-bottom: 1.5rem;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contacttitle {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
  padding: 70px 20px 50px !important;
  text-align: center;
}

.contacttitle h1 {
  color: #fff !important;
  font-family: 'Sora', 'Poppins', 'DM Sans', sans-serif;
  font-weight: 800;
  margin: 0;
}

.contacttitle h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--teal);
  border-radius: 2px;
  margin: 1rem auto 0;
}

.thecontactsectionback {
  background: var(--off-white);
  padding: 0;
}

.thecontactsection {
  background: var(--off-white);
  padding: 0;
}

.rightcontacttext {
  background: var(--navy) !important;
  border: none !important;
  padding: 50px 40px !important;
}

/* White text in dark contact panel */
.rightcontacttext h2,
.rightcontacttext h3 {
  color: #fff !important;
}

.rightcontacttext p {
  color: rgba(255, 255, 255, .85) !important;
}

.rightcontacttext a {
  color: var(--teal-light) !important;
}

.rightcontacttext a:hover {
  color: #fff !important;
}

.rightcontacttext li {
  color: rgba(255, 255, 255, .85) !important;
}

.rightcontactmap {
  border: none !important;
  padding: 0 !important;
  overflow: hidden;
}

.rightcontactmap iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
}

.contactustext {
  background: var(--white) !important;
  border: none !important;
  padding: 50px 40px !important;
  box-shadow: var(--shadow-sm);
}

.contactustext h2,
.contactustext h3 {
  color: var(--navy) !important;
}

.contactustext label {
  color: var(--navy) !important;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}

.contactustext p {
  color: var(--text-body) !important;
}

/* ============================================================
   JOBS / VACANCIES PAGE
   ============================================================ */
.jobresults {
  background: var(--white) !important;
  border: 2px solid var(--grey-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 30px !important;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  color: var(--text-body) !important;
}

.jobresults:hover {
  border-color: var(--teal) !important;
  box-shadow: var(--shadow-md);
}

.jobresults h1,
.jobresults h2,
.jobresults h3 {
  color: var(--navy) !important;
}

.jobresults p {
  color: var(--text-body) !important;
}

.jobresults li {
  color: var(--text-body) !important;
}

.jobresults h3 {
  margin-bottom: .6rem;
}

.jobresults .job-title-link {
  color: var(--navy) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0;
  font-weight: 700;
  display: inline;
}

.jobresults .job-title-link:hover {
  color: var(--teal-dark) !important;
  text-decoration: underline;
}

.jobresults .jobresults-btn {
  display: inline-block;
  background: var(--teal) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-top: 12px;
  transition: var(--transition);
}

.jobresults .jobresults-btn:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

.vacancy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vacancy-action-btn {
  display: inline-block;
  background: var(--teal) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: var(--transition);
}

.vacancy-action-btn:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

.vacancy-action-secondary {
  background: var(--navy-light) !important;
}

.jobsbox {
  background: var(--navy) !important;
  border-radius: var(--radius-md) !important;
  padding: 36px 30px !important;
  box-shadow: var(--shadow-md);
  height: fit-content !important;
  position: sticky;
  top: 100px;
}

.jobsbox h3 {
  color: #fff !important;
  margin-bottom: 1.5rem;
}

.jobsbox label {
  color: rgba(255, 255, 255, .85) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.jobsbox select,
.jobsbox input[type="text"] {
  background: rgba(255, 255, 255, .1) !important;
  border: 1.5px solid rgba(255, 255, 255, .25) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}

.jobsbox select option {
  background: var(--navy-dark);
  color: #fff;
}

/* ============================================================
   QUALIFICATIONS PAGE
   ============================================================ */
.qualifications h1 {
  color: var(--navy) !important;
}

.qualifications p {
  color: var(--text-body) !important;
}

.qualifications a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy) !important;
  font-weight: 600;
  padding: 12px 20px;
  margin: 6px 0;
  border-radius: var(--radius-sm);
  background: var(--grey-100);
  border: 2px solid var(--grey-200);
  width: 100%;
  transition: var(--transition);
}

.qualifications a:hover {
  background: var(--teal-ultra) !important;
  border-color: var(--teal) !important;
  color: var(--teal-dark) !important;
  transform: translateX(4px);
}

.qualificationdesc {
  padding: 20px 0;
}

.thequalimage img {
  width: 100% !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Sub-page links */
.thesublink {
  padding: 3% !important;
  text-align: left;
}

.thesublink h1,
.thesublink h2,
.thesublink h3 {
  color: var(--navy) !important;
}

.thesublink p {
  color: var(--text-body) !important;
}

.thesublink a {
  display: inline-block;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff !important;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(19, 182, 159, .3);
  margin: 6px;
}

.thesublink a:hover {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.thesubimage img {
  border-radius: var(--radius-md);
  padding: 0 !important;
  box-shadow: var(--shadow-sm);
  width: 100%;
  margin-bottom: 1rem;
}

@media (max-width: 1000px) {
  .thesublink {
    text-align: center !important;
  }
}

/* ============================================================
   QUALITY & EXCELLENCE PAGE
   ============================================================ */
.qualityblocks {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid var(--grey-200);
}

.qualityblocks:last-of-type {
  border-bottom: none;
}

.qualityimage img {
  width: 100% !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.qualitytext {
  padding-left: 40px;
}

.qualitytext h2,
.qualitytext h3 {
  color: var(--navy) !important;
}

.qualitytext p {
  color: var(--text-body) !important;
}

.qualitytext li {
  color: var(--text-body) !important;
}

@media (max-width: 1000px) {
  .qualitytext {
    padding-left: 0;
    padding-top: 20px;
  }
}

/* ============================================================
   VISION / MISSION PAGE
   ============================================================ */
.visionblocks {
  padding: 40px 0;
}

.visionimage img {
  width: auto !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.visiontext h1,
.visiontext h2,
.visiontext h3 {
  color: var(--navy) !important;
}

.visiontext p {
  color: var(--text-body) !important;
}

@media (max-width: 1000px) {
  .visionimage img {
    width: 100% !important;
  }

  .learnerimage img {
    width: 100% !important;
  }
}

/* ============================================================
   LEARNER TESTIMONIALS PAGE
   ============================================================ */
.learnerblocks {
  padding: 30px 0;
}

.learnerimage img {
  width: auto !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
}

@media (max-width: 1000px) {
  .learnerimage img {
    width: 100% !important;
  }
}

/* ============================================================
   WHY CHOOSE PAGE
   ============================================================ */
.whychoose {
  padding: 40px 0 !important;
}

.whyimage {
  text-align: center !important;
}

.whyimage img {
  width: auto !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: 2rem auto;
}

@media (max-width: 670px) {
  .whyimage img {
    width: 100% !important;
  }
}

/* ============================================================
   HISTORY PAGE
   ============================================================ */
.historytext1 {
  padding-left: 5% !important;
  padding-top: 3% !important;
}

.historyimage1 img {
  border-radius: var(--radius-md);
}

@media (max-width: 1000px) {
  .historyimage1 img {
    width: 100% !important;
  }
}

/* ============================================================
   DOCUMENTS PAGE
   ============================================================ */
.documentspage p {
  color: var(--text-body) !important;
  font-weight: 500 !important;
}

.documentspage li {
  color: var(--text-body) !important;
}

.documentspage a {
  display: inline-block;
  color: var(--teal-dark) !important;
  font-weight: 600 !important;
  border: 2px solid var(--teal) !important;
  padding: 10px 22px !important;
  border-radius: var(--radius-sm) !important;
  margin: 6px 4px;
  transition: var(--transition);
  background: var(--teal-ultra);
}

.documentspage a:hover {
  background: var(--teal) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.documentspage a:active {
  color: #fff !important;
}

/* ============================================================
   FOOTER — dark navy, white text
   ============================================================ */
.footer {
  background: var(--navy) !important;
  padding: 70px 40px 50px !important;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--navy-light), var(--teal));
}

/* Override global p/li white rules for footer specifically */
.footer p {
  color: rgba(255, 255, 255, .6) !important;
  font-size: 14px;
  line-height: 1.7;
}

.footer li {
  color: rgba(255, 255, 255, .6) !important;
  font-size: 14px;
}

.footer a {
  color: rgba(255, 255, 255, .7) !important;
  font-weight: 300 !important;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
  transition: var(--transition);
}

.footer a:hover {
  color: var(--teal-light) !important;
  padding-left: 4px;
}

.footer h3 {
  color: #fff !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding-bottom: 1.2rem !important;
  font-weight: 700;
  position: relative;
}

.footer h3::after {
  content: '';
  position: absolute;
  bottom: 0.4rem;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}

.footerlogo {
  text-align: left !important;
  padding-left: 0 !important;
  margin-bottom: 2rem;
}

.footerlogo img {
  max-height: 70px;
  width: auto;
  opacity: .9;
}

.footerlogo p {
  color: rgba(255, 255, 255, .5) !important;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 1rem;
  font-weight: 300;
}

.footerquicklinks,
.footeraddress,
.footercontactus {
  text-align: left !important;
  padding-top: 0 !important;
}

/* Footer base bar */
.footerbase {
  background: var(--navy-dark) !important;
  padding: 18px 40px !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footerbaseleft p,
.footerbaseright p {
  color: rgba(255, 255, 255, .4) !important;
  font-size: 13px;
  margin: 0;
}

.footerbase a {
  color: rgba(255, 255, 255, .4) !important;
  font-weight: 400;
  font-size: 13px;
  display: inline;
  transition: var(--transition);
}

.footerbase a:hover {
  color: var(--teal-light) !important;
  padding-left: 0;
}

@media (max-width: 670px) {
  .footer {
    text-align: center !important;
    padding: 50px 20px 30px !important;
  }

  .footerlogo {
    text-align: center !important;
    padding: 5% !important;
  }

  .footerquicklinks,
  .footeraddress,
  .footercontactus {
    text-align: center !important;
    margin-bottom: 2rem;
  }

  .footer h3::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer a {
    display: inline;
  }
}

/* ============================================================
   FONT AWESOME ICONS
   ============================================================ */
.fa-solid,
.fas {
  font-size: 18px !important;
  padding-right: 8px !important;
  color: var(--teal) !important;
}

.fa-arrow-right {
  padding-right: 0 !important;
  font-size: 14px !important;
}

/* ============================================================
   MISC / UTILITIES
   ============================================================ */
.fullback {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
}

.ngg-slideshow .ngg-gallery-slideshow-image img {
  border: 8px solid white !important;
  border-radius: var(--radius-sm);
}

.wpcf7-spinner {
  display: none !important;
}

.wpcf7-response-output {
  border-radius: var(--radius-sm) !important;
  padding: 12px 20px !important;
  margin-top: 1rem !important;
  font-size: 14px !important;
  border: none !important;
}

.wpcf7-mail-sent-ok {
  background: #e6faf7 !important;
  color: var(--teal-dark) !important;
  border: 2px solid var(--teal) !important;
}

.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
  background: #fff0f0 !important;
  color: #c0392b !important;
  border: 2px solid #e74c3c !important;
}

/* Prevent embedded content and tables from forcing horizontal scroll */
.internalpagecol table,
.single-news-content table,
.documentspage table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.internalpagecol iframe,
.single-news-content iframe {
  max-width: 100%;
}

.internalpages a,
.single-news-content a {
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  .jobsbox {
    position: static;
    top: auto;
    margin-top: 20px;
  }

  .footer,
  .footerbase {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 992px) {
  .jobresults .jobresults-btn,
  .vacancy-actions .vacancy-action-btn {
    width: 100%;
    text-align: center;
  }

  .qualityblocks {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

@media (max-width: 767px) {
  .internalpage {
    padding: 54px 16px 34px !important;
  }

  .internalpages {
    padding: 38px 16px !important;
  }

  .homecategorylist {
    padding: 10px !important;
  }

  .homecategorylist img {
    height: 160px !important;
  }

  .rightcontacttext,
  .contactustext {
    padding: 32px 22px !important;
  }

  .rightcontactmap iframe {
    min-height: 320px;
  }
}

/* Big image pages */
.bigimage img {
  width: auto !important;
}

@media (max-width: 1000px) {
  .bigimage img {
    width: 100% !important;
  }

  .thequalimage img {
    width: 100% !important;
  }
}