/* ==========================================================================
 Fonts
 ========================================================================== */
@font-face {
 font-family: "4Text-ExtraLight";
 src: url("../Fonts/4Text/4Text-ExtraLight.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-ExtraLight.woff") format("woff");
 font-weight: 200;
 font-style: normal;
}

@font-face {
 font-family: "4Text-Light";
 src: url("../Fonts/4Text/4Text-Light.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Light.woff") format("woff");
 font-weight: 300;
 font-style: normal;
}

@font-face {
 font-family: "4Text-Italic";
 src: url("../Fonts/4Text/4Text-Italic.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Italic.woff") format("woff");
 font-weight: 400;
 font-style: italic;
}

@font-face {
 font-family: "4Text-Regular";
 src: url("../Fonts/4Text/4Text-Regular.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Regular.woff") format("woff");
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: "4Text-Medium";
 src: url("../Fonts/4Text/4Text-Medium.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Medium.woff") format("woff");
 font-weight: 500;
 font-style: normal;
}

@font-face {
 font-family: "4Text-MediumItalic";
 src: url("../Fonts/4Text/4Text-MediumItalic.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-MediumItalic.woff") format("woff");
 font-weight: 500;
 font-style: italic;
}

@font-face {
 font-family: "4Text-Bold";
 src: url("../Fonts/4Text/4Text-Bold.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Bold.woff") format("woff");
 font-weight: 700;
 font-style: normal;
}

@font-face {
 font-family: "4Text-BoldItalic";
 src: url("../Fonts/4Text/4Text-BoldItalic.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-BoldItalic.woff") format("woff");
 font-weight: 700;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-Regular";
 src: url("../Fonts/4Headline/4Headline-Regular.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Regular.woff") format("woff");
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: "4Headline-Italic";
 src: url("../Fonts/4Headline/4Headline-Italic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Italic.woff") format("woff");
 font-weight: 400;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-Medium";
 src: url("../Fonts/4Headline/4Headline-Medium.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Medium.woff") format("woff");
 font-weight: 500;
 font-style: normal;
}

@font-face {
 font-family: "4Headline-MediumItalic";
 src: url("../Fonts/4Headline/4Headline-MediumItalic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-MediumItalic.woff") format("woff");
 font-weight: 500;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-Bold";
 src: url("../Fonts/4Headline/4Headline-Bold.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Bold.woff") format("woff");
 font-weight: 700;
 font-style: normal;
}

@font-face {
 font-family: "4Headline-BoldItalic";
 src: url("../Fonts/4Headline/4Headline-BoldItalic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-BoldItalic.woff") format("woff");
 font-weight: 700;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-ExtraBoldItalic";
 src: url("../Fonts/4Headline/4Headline-ExtraBoldItalic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-ExtraBoldItalic.woff") format("woff");
 font-weight: 800;
 font-style: italic;
}

/* ==========================================================================
CSS Variables (Font-Related)
========================================================================== */
:root {
 /* Font Families */
 --fnt-light: "4Text-Light";
 --fnt-x-light: "4Text-ExtraLight";
 --fnt-regular: "4Text-Regular";
 --fnt-italic: "4Text-Italic";
 --fnt-medium: "4Text-Medium";
 --fnt-medium-italic: "4Text-MediumItalic";
 --fnt-bold: "4Text-Bold";
 --fnt-bold-italic: "4Text-BoldItalic";
 --fnt-hln-regular: "4Headline-Regular";
 --fnt-hln-italic: "4Headline-Italic";
 --fnt-hln-medium: "4Headline-Medium";
 --fnt-hln-medium-italic: "4Headline-MediumItalic";
 --fnt-hln-bold: "4Headline-Bold";
 --fnt-hln-bold-italic: "4Headline-BoldItalic";
 --fnt-hln-x-bold-italic: "4Headline-ExtraBoldItalic";
}

/* ==========================================================================
Global Styles
========================================================================== */
html, body {
 max-width: 100%;
 overflow-x: hidden;
 overflow-y: unset;
}

html {
  scroll-behavior: smooth;
}


body,.rz-paginator-elxt, .ement .rz-button-terz-button .rz-button-text {
 margin: 0;
 font-family: "4 Text", var(--fnt-regular), Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"!important;
 font-size: clamp(15px, 0.75rem + 0.5vw, 17px);
 line-height: clamp(21px, 1.1rem + 0.5vw, 23px);
 font-weight: 400; 
 color: #15162A;
 leading-trim: NONE;
 letter-spacing: 0; 
}

/* ==========================================================================
Typography
========================================================================== */
a {
 color: var(--clr-info);
 text-decoration: none;
 transition: color 0.3s;
}

a:hover {
 color: var(--clr-info-hover);
}

.bg-info a {
 color: var(--clr-text-white);
}

.bg-info a:hover {
 color:#15162A;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
 margin-bottom: 0.5rem;
 /*line-height: 1.2;*/
}
h1, .h1 {
  font-family: "4Headline-Bold", serif;
  font-size: clamp(2.75rem, calc(2.107rem + 3.214vw), 5rem);
  line-height: clamp(2.938rem, calc(2.295rem + 3.214vw), 5.188rem);
  letter-spacing: 0%;
}

h2, .h2 {
  font-family: var(--fnt-hln-bold), sans-serif;
  font-size: clamp(1.75rem, calc(1.357rem + 1.964vw), 3.125rem);
  line-height: clamp(1.938rem, calc(1.545rem + 1.964vw), 3.313rem);
  letter-spacing: 0%;
}

h3, .h3 {
  font-family: var(--fnt-bold), sans-serif;
  font-size: clamp(1.25rem, calc(0.964rem + 1.429vw), 2.25rem);
  leading-trim: NONE;
  line-height: clamp(1.438rem, calc(1.152rem + 1.429vw), 2.438rem);
  letter-spacing: 0%;
}

h4, .h4 {
  font-family: var(--fnt-bold), sans-serif;
  font-size: clamp(1.125rem, calc(0.911rem + 1.071vw), 1.875rem);
  leading-trim: NONE;
  line-height: clamp(1.313rem, calc(1.098rem + 1.071vw), 2.063rem);
  letter-spacing: 0%;
}

h5, .h5 {
  font-family: var(--fnt-hln-regular), sans-serif;
  font-size: clamp(1.375rem, calc(1.054rem + 1.607vw), 2.5rem);
  leading-trim: NONE;
  line-height: clamp(1.563rem, calc(1.241rem + 1.607vw), 2.688rem);
  letter-spacing: 0%;
}

h6, .h6 {
  font-family: var(--fnt-bold), sans-serif;
  font-size: clamp(1rem, calc(0.929rem + 0.357vw), 1.25rem);
  leading-trim: NONE;
  line-height: clamp(1.188rem, calc(1.116rem + 0.357vw), 1.438rem);
  letter-spacing: 0%;
}
.subheader {
font-family: var(--fnt-x-light), sans-serif;
font-weight: 250; /* Extra Light */
/* RESPONSIVE CLAMP ADDED */
font-size: clamp(24px, 1.1rem + 1.5vw, 33px);
line-height: clamp(30px, 1.3rem + 1.5vw, 40px);
letter-spacing: 0; /* 0% */
}

.body-medium {
 font-family: var(--fnt-regular), sans-serif; /* Fallback to sans-serif if var(--fnt-regular) is unavailable */
 font-weight: 400;
 font-style: normal; /* 'Regular' is equivalent to 'normal' in CSS */
 font-size: clamp(15px, 0.75rem + 0.5vw, 17px);

 line-height: clamp(21px, 1.1rem + 0.5vw, 23px);
 letter-spacing: 0%;
 leading-trim: none;
}

.body-large {
 font-family: var(--fnt-regular), sans-serif; 
 font-weight: 500;
 font-style: normal; 
 font-size: clamp(17px, 0.8rem + 0.5vw, 19px);
 one is fixed at 23px) */
 line-height: 23px; 
 letter-spacing: 0%;
 leading-trim: none;
}

.display-1 {
 font-size: var(--fnt-size-display-1);
 font-family: var(--fnt-hln-regular);
 font-weight: 500;
 line-height: 1.2;
}

.display-2 {
 font-size: var(--fnt-size-display-2);
 font-family: var(--fnt-hln-regular);
 font-weight: 500;
 line-height: 1.2;
}

.display-3 {
 font-size: var(--fnt-size-display-3);
 font-family: var(--fnt-hln-regular);
 font-weight: 700;
 line-height: 1.2;
}

.display-4 {
 font-size: var(--fnt-size-display-4);
 font-family: var(--fnt-hln-regular);
 font-weight: 700;
 line-height: 1.2;
}

.display-5 {
 font-size: var(--fnt-size-display-5);
 font-family: var(--fnt-hln-regular);
 font-weight: 700;
 line-height: 1.2;
}

.display-6 {
 font-size: var(--fnt-size-display-6);
 font-family: var(--fnt-hln-regular);
 font-weight: 700;
 line-height: 1.2;
}

.display-7 {
 font-size: var(--fnt-size-display-7);
 font-family: var(--fnt-hln-regular);
 font-weight: 700;
 line-height: 1.2;
}

.lead {
 font-size: var(--fnt-lead);
 font-weight: 300;
}

.mark, mark {
 padding: 0.2em;
 background-color: var(--clr-mark);
}

.rz-fieldset-legend-text {
 font-family: var(--fnt-bold);
 color: black !important;
}
 /* ==========================================================================
 Buttons
 ========================================================================== */

 /* 🎨 Color Variables (from your code) */
 :root {
  --arsenic-blue: #72DDE8;
  --green: #89FFA0;
  --grey: #EDEDED;
  --dark-navy: #15162A;
  --dark-powder: #1B2A96;
  --candy: #FF99DD;
  --beach: #FFE589;
  --sky: #89CDFF;
  --leaf: #E2FF89;
  --bs-primary: #0d6efd;
 }

 .dark-navy {
  background-color: #15162A;
 }

 /*  Navigation Styles */
 .nav-group {
  position: relative;
  display: inline-flex; 
 }

 .navbar-nav {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  margin: 0 auto;
  padding: 0rem 0; 
 }

 .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0; 
  border-radius: 0; 
  z-index: 1; 
 }

 .nav-link {
  font-family: '4 Headline', sans-serif; 
  font-weight: 500;
 
  font-size: 16px; 
  text-transform: capitalize;
  color: #15162A;
  text-decoration: none;
  padding: 2px 10px; 
  border-radius: 0px; 
  transition: color 0.3s ease;
 }

 .nav-link:hover {
  color: var(--bs-primary); 
 }


 .nav-link.active {
  color: var(--bs-primary);
  font-weight: 600;
  border-bottom: 3px solid #89FFA0 ;
 }


 .nav-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--green); /* #89FFA0 */
  border-radius: 8px;
  z-index: 0; /* Behind nav items */
  transition: transform 0.3s ease, width 0.3s ease;
  transform-origin: left;
 }


 .nav-item:hover .nav-link {
  color: var(--bs-primary);
 }

 .offcanvas-backdrop.show {
    background-color: rgba(0, 0, 0, 0.6);
}


.btn, .rz-button {
    position: relative;
 font-family: var(--fnt-hln-bold), sans-serif;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0 33px;
 font-size: 16px;
 gap: 10px;
 min-width: 169px;
 height: 56px;
line-height: 81px;
text-transform: capitalize;
text-align: center;
vertical-align: middle;
border-radius: 0px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-nav {
    font-family: var(--fnt-hln-bold), sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 33px;
    font-size: 16px;
    gap: 10px;
    min-width: 169px;
    height: 56px;
    line-height: 81px;
    text-transform: capitalize;
    text-align: center;
    vertical-align: middle;
    border-radius: 0px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}


@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-primary,
.list-group-item-primary {
  /* position: relative; */
  color: #15162A !important;
  background-color: #89FFA0 !important;
  border-color: #89FFA0 !important;
  font-family: var(--fnt-hln-bold);
  line-height: 81px;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  border-radius: 0rem;
  border: none;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.4s ease;
  z-index: 1;
}

/* Multicolor gradient border layer */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* controls border thickness */
  border-radius: inherit;
  background: linear-gradient(270deg, rgba(202, 254, 44, 1), rgba(255, 107, 206, 1), rgba(255, 229, 137, 1), rgba(83, 182, 255, 1));
  background-size: 400% 400%;
  animation: gradientMove 4s ease infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

/* Solid green background layer */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: #89FFA0;
  border-radius: inherit;
  z-index: -1;
}

/* Reveal animated border on hover */
.btn-primary:hover::before {
  opacity: 1;
}

/* Optional subtle background color shift on hover */
.btn-primary:hover {
  background-color: #89FFA0 !important; /* keep consistent */
}

.btn-secondary, .list-group-item-secondary {
 color: #fff!important;
 background-color:#15162A !important;
 border-color: #15162A !important;
 font-family: var(--fnt-hln-bold);
 line-height: 81px;
 letter-spacing: 0%;
 text-align: center;
 vertical-align: middle;
}




@media all {
a.btn-primary.btn-primary:hover, a.btn-primary.btn-primary:link, a.btn-primary.btn-primary:visited {
 color: inherit;
}
}

  footer a,footer a:visited {
    text-decoration: none;
    color: #fff;
  }
}

.btn-primary {
 padding: 0 33px;
}

/* ==========================================================================
Navigation
========================================================================== */
header nav.navbar {
 /*position: fixed;*/
 width: 100%;
 z-index: 100;
}

  .navbar .collapse {
    visibility: visible !important;
  }

header nav.navbar .container-top {
 padding: 0;
}

.navbar .nav-item {
 margin-bottom: 0 !important;

}

 .nav-item:has(.nav-link.active) {
  background-color: var(--green); 
 }

.nav-link {
 color: var(--clr-nav-link);
 font-family: var(--fnt-medium), serif;
 font-weight: 500;

 font-size: 15px; 
 leading-trim: NONE;
 line-height: 100%;
 letter-spacing: 0%;
 width: 100%;
 /*padding: 1rem 3rem;*/
}

.nav-link:hover {
 color: var(--clr-nav-link-hover);
}

.navbar .nav-link {
 color: #15162A;
 border: 0 solid transparent;
 transition: color 0.5s;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 padding-inline: 1.5rem;
}

 
 .navbar .nav-link:hover {
  background-color: #89FFA0;
 }

.navbar .nav-link:focus, .navbar .nav-link:hover, footer a:hover {
 background-color: transparent;
 /* color: var(--clr-secondary) !important; */
}

/* .navbar .nav-link:after {
 content: "";
 height: 1px;
 width: 0;
 background: var(--clr-secondary);
 position: absolute;
 left: 0;
 bottom: 0;
 transition: width 0.4s;
} */

.navbar-dark .navbar-nav .active > .nav-link, 
.navbar-dark .navbar-nav .nav-link.active, 
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #000;
}

.navbar .nav-link:hover::after {
 width: 100%;
}

.navbar-dark .navbar-nav .nav-link {
 color: #fff;
}

.nav-link {
    padding-inline: 1.2rem!important;
    padding-block: 0.6rem!important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #15162A !important;
    color: #89FFA0 !important;
}

.navbar-light .navbar-nav .nav-link {
 color: var(--clr-body);

}

@media (max-width: 992px) {
 .navbar-nav .nav-link {
  display: block;
  padding: 0.4rem 0;
  border-bottom: 0;
 }
}


/* ==========================================================================
   Backgrounds
   ========================================================================== */
.bg-primary {
    background-color: #15162A !important;
}
    
.nav-btn {
    width: 151;
    height: 40;
    opacity: 1;
    top: 16px;
    left: 1097px;
    padding-right: 33px;
    padding-left: 33px;
    gap: 10px;
}
    
    a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
    background-color:#15162A !important;
    box-shadow: inset 0 0 0 10em rgb(255 255 255 / 5%);
}

.bg-secondary {
    background-color: var(--clr-secondary) !important;
}

.bg-success {
    background-color: var(--clr-success) !important;
}

.bg-info {
    background-color: var(--clr-info) !important;
}

.bg-warning {
    background-color: var(--clr-warning) !important;
}

.bg-light {
    background-color: var(--clr-light);
}

.bg-white {
    background-color: var(--clr-text-white);
}

.bg-orange {
    background-color: var(--clr-secondary) !important;
}

.slanted_bg-secondary {
    background: linear-gradient(105deg, #db5844 75%, #db5844 75%) !important;
}

/* ==========================================================================
   Text Colors
   ========================================================================== */
.text-primary {
    color:#15162A !important;
}

.text-secondary {
    color: var(--clr-secondary) !important;
}

.text-success {
    color: var(--clr-success);
}

.text-info {
    color: var(--clr-info);
}

.text-dark {
    color: var(--clr-body);
}

.text-danger {
    color: var(--clr-danger) !important;
}

.text-yellow {
    color: #fec900;
}

.text-midgrey {
    color: #a1a1a1;
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0;
}
/* 
.alert-primary {
    color:#15162A;
    background-color: var(--clr-alert-primary);
    border-color: var(--clr-alert-primary);
}

.alert-secondary {
    color:#15162A;
    background-color: var(--clr-alert-secondary);
    border-color: var(--clr-alert-secondary);
}

.alert-success {
    color:#15162A;
    background-color: var(--clr-alert-success);
    border-color: var(--clr-alert-success);
}

.alert-warning {
    color: #664d03;
    background-color: var(--clr-alert-warning);
    border-color: var(--clr-alert-warning);
}

.alert-info {
    color: #055160;
    background-color: var(--clr-alert-info);
    border-color: var(--clr-alert-info);
}

.alert-light {
    color: #636464;
    background-color: var(--clr-alert-light);
    border-color: var(--clr-alert-light);
}

.alert-dark {
    color: var(--clr-text-white);
    background-color: var(--clr-alert-dark);
    border-color: var(--clr-alert-dark);
}

.alert-dark .alert-link {
    color: var(--clr-text-white);
} */

/* ==========================================================================
   Modals
   ========================================================================== */
.modal {
    background-color: var(--clr-info);
}

.modal-content {
    background-color:#15162A;
    color: var(--clr-text-white);
}

.modal-title, .modal h5 {
    color: var(--clr-info);
}

.rz-dialog, .rz-dialog-content, .rz-dialog-titlebar {
    /* background-color:#15162A !important; */
}

.rz-dialog-titlebar {
    font-family: var(--fnt-hln-bold);
    font-size: 20px;
    color: var(--clr-secondary);
}

.rz-dialog .rz-button.btn-secondary:focus {
    color:#15162A !important;
    background-color: var(--clr-secondary) !important;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    background-color: var(--clr-text-white);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0;
}

.card-img, .card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.card-header, .card-footer {
    padding: 0.5rem 1rem;
    background-color: var(--clr-secondary);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child, .card-footer:last-child {
    border-radius: 0;
}

.careerCard {
    display: flex;
    flex-direction: column;
    border: none;
    padding: 1em;
    margin: 20px;
}

.careerCard * {
    color: white;
    text-align: center;
}

.careerCard svg {
    height: 100px;
    color: var(--clr-secondary);
    fill: var(--clr-secondary) !important;
    margin: 30px 0;
}

.programme-cards .rz-g > div, .programme-cards.rz-datalist-data > li {
    margin: 0;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: none !important;
}

.programme-cards .card {
    min-height: 300px;
}

.wexmodules .card {
    background-color: #f7f7f7 !important;
}

.wexmodules .card-body {
    position: relative;
}

.wexmodules .card-body .btn-link {
    position: absolute;
    bottom: 44px;
    left: 0;
    right: 0;
}

.wexmodules .card-body .btn-info,
.wexmodules .card-body .btn-primary,
.wexmodules .card-body .rz-primary {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.wexmodules .card-body .btn-cert,
.wexmodules .card-body .rz-secondary {
    position: absolute;
    bottom: 82px;
    left: 0;
    right: 0;
    border: 1px solid #191242;
    color: #191242 !important;
}

/* ==========================================================================
   Hero Sections
   ========================================================================== */
.heroFull {
    background-size: cover;
    width: 100%;
    height: 450px;
    position: relative;
    background-position-y: center;
}

.heroMedium {
    height: 350px;
    margin-bottom: 50px;
}

.heroFull h2 {
    margin-bottom: 0 !important;
}

.heroFull .container-fluid {
    position: absolute;
    bottom: 0;
}

.hero {
    position: relative;
}

.hero > .card {
    position: absolute;
    right: 120px;
    bottom: -20px;
}

.heroAbout {
    background-image: url('/img/4school_hero2.jpg');
    background-position-y: 20px;
}

.heroEvents {
    background-image: url('/img/4school_hero3.jpg');
    background-position-y: 0;
}

.heroCareers {
    background-image: url('/img/4school_hero4.jpg');
    background-position-y: 0;
}

.heroNews {
    background-image: url('/img/4school_hero7.jpg');
    background-position-y: -90px;
}

.heroRoutes {
    background-image: url('/img/hero_routes.jpg');
}

.hero1 { background-image: url('/img/c4wex1.jpg'); }
.hero2 { background-image: url('/img/c4wex2.jpg'); }
.hero3 { background-image: url('/img/c4wex3.jpg'); }
.hero4 { background-image: url('/img/c4wex4.jpg'); }
.hero5 { background-image: url('/img/c4wex5.jpg'); }
.hero6 { background-image: url('/img/c4wex6.jpg'); }
.hero7 { background-image: url('/img/c4wex7.jpg'); }
.hero8 { background-image: url('/img/c4wex8.jpg'); background-position-y: top !important; }
.hero9 { background-image: url('/img/c4wex9.jpg'); }
.hero10 { background-image: url('/img/c4wex10.jpg'); }
.hero11 { background-image: url('/img/c4wex11.jpg'); }
.herodashboard1 { background-image: url('/img/c4wex-dashboard1.jpg'); }
.herodashboard2 { background-image: url('/img/c4wex-dashboard2.jpg'); }
.herodashboard3 { background-image: url('/img/c4wex-dashboard3.jpg'); }
.herodashboard4 { background-image: url('/img/c4wex-dashboard4.jpg'); }
.herodashboard5 { background-image: url('/img/c4wex-dashboard5.jpg'); }
.herodashboard6 { background-image: url('/img/c4wex-dashboard6.jpg'); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: var(--clr-table-border-color);
    --bs-table-bg: var(--clr-table-bg);
    --bs-table-accent-bg: var(--clr-table-accent-bg);
    --bs-table-striped-color: var(--clr-table-striped-color);
    --bs-table-striped-bg: var(--clr-table-striped-bg);
    --bs-table-active-color: var(--clr-table-active-color);
    --bs-table-active-bg: var(--clr-table-active-bg);
    --bs-table-hover-color: var(--clr-table-hover-color);
    --bs-table-hover-bg: var(--clr-table-hover-bg);
}

.table-primary {
    --bs-table-bg: var(--clr-alert-primary);
    --bs-table-hover-bg: var(--clr-alert-primary-hover);
    --bs-table-striped-bg: #c5d7f2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bacbe6;
}

.table-secondary {
    --bs-table-bg: var(--clr-alert-secondary);
    --bs-table-hover-bg: var(--clr-alert-secondary-hover);
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #cbccce;
    --bs-table-active-color: #000;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #cbccce;
}

.table-success {
    --bs-table-bg: var(--clr-alert-success);
    --bs-table-hover-bg: var(--clr-alert-success-hover);
    --bs-table-striped-bg: #c7dbd2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bcd0c7;
    --bs-table-active-color: #000;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bcd0c7;
}

.table-danger {
    --bs-table-bg: var(--clr-alert-danger);
    --bs-table-hover-bg: var(--clr-alert-danger-hover);
    --bs-table-striped-bg: #eccccf;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfc2c4;
    --bs-table-active-color: #000;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfc2c4;
}

.table-warning {
    --bs-table-bg: var(--clr-alert-warning);
    --bs-table-hover-bg: var(--clr-alert-warning-hover);
    --bs-table-striped-bg: #f2e7c3;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #e6dbb9;
    --bs-table-active-color: #000;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #e6dbb9;
}

.table-info {
    --bs-table-bg: var(--clr-alert-info);
    --bs-table-hover-bg: var(--clr-alert-info-hover);
    --bs-table-striped-bg: #c5e8ef;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #badce3;
    --bs-table-active-color: #000;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #badce3;
}

.table-light {
    --bs-table-bg: var(--clr-alert-light);
    --bs-table-hover-bg: var(--clr-alert-light-hover);
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfe0e1;
}

.table-dark {
    --bs-table-bg: var(--clr-alert-dark);
    --bs-table-hover-bg: var(--clr-alert-dark-hover);
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e !important;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination-lg .page-item:last-child .page-link,
.page-item:last-child .page-link,
.pagination,
.page-item:first-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color:#15162A;
    border-color:#15162A;
}

.page-link {
    color: var(--clr-text-white);
    background-color: var(--clr-secondary);
    border: 1px solid var(--clr-text-white);
}

.page-link:hover {
    z-index: 2;
    color: var(--clr-secondary);
    background-color: var(--clr-warning);
    border-color: var(--clr-warning-hover);
}

/* ==========================================================================
   Ribbons
   ========================================================================== */
.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

.ribbon span {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    width: 100px;
    display: block;
    background: linear-gradient(#EF0093 0%, #EF0093 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px;
}

.ribbon span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    border: 3px solid #EF0093;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.ribbon span::after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    z-index: -1;
    border: 3px solid #EF0093;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.ribbon-corner {
    background-color: #201944;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    clip-path: var(--tor-ribbon-polygon);
    transform: rotate(var(--tor-ribbon-rotate)) translateY(var(--tor-ribbon-translateY)) translateX(var(--tor-ribbon-translateX));
    transform-origin: var(--tor-ribbon-origin);
    width: calc((var(--tor-ribbon-size) + 1em) * 2);
    height: 2em;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.ribbon-corner {
    --tor-ribbon-size: 3em;
    --tor-ribbon-rotate: 45deg;
    --tor-ribbon-translateX: 50%;
    --tor-ribbon-translateY: calc((var(--tor-ribbon-size) + 1em) - 100%);
    --tor-ribbon-origin: 100% 0%;
    --tor-ribbon-polygon: polygon(0% 100%, 50% calc(100% - (var(--tor-ribbon-size) + 1em)), 100% 100%);
}

/* ==========================================================================
   Chat
   ========================================================================== */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.chat-container .messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-container .message {
    margin-bottom: 10px;
    padding: 18px;
    border-radius: 5px;
    position: relative;
}

.chat-container .user-message {
    text-align: right;
    background-color: #00bbfe;
}

.chat-container .user-message::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 10px;
    border: 5px solid transparent;
    border-left-color: #00bbfe;
    border-right: 0;
}

.chat-container .bot-message {
    text-align: left;
    background-color: var(--clr-secondary);
}

.chat-container .bot-message::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 10px;
    border: 5px solid transparent;
    border-right-color: var(--clr-secondary);
    border-left: 0;
}

.chat-container .icon {
    display: inline-block;
    margin-right: 5px;
}

.chat-container .timestamp {
    display: block;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
}

.chat-container .input-area {
    display: flex;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #ccc;
}

.chat-container .input-area input {
    flex-grow: 1;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.chat-container .input-area button {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

/* ==========================================================================
   Miscellaneous Components
   ========================================================================== */
.container-fluid {
    max-width: unset !important;
    margin: 0 !important;
    width: 100% !important;
}

.container-top {
    max-width: 100% !important;
}

.offsetImageBlock {
    position: relative;
    height: 500px;
}

.offsetImageBlock img {
    height: 400px;
    width: auto;
    position: absolute;
    right: -80px;
    top: 50px;
    z-index: 1;
}

.slantBlock {
    position: relative;
}

.slantBlock img {
    position: absolute;
    right: 0;
    height: 100%;
}

.nagscreen {
    padding: 0 !important;
    margin: 40px 0 0 0 !important;
}

.registerNowCard.bg-secondary h4, .registerNowCard.bg-secondary small {
    color:#15162A !important;
}

footer.bg-info, footer .list-group-horizontal .list-group-item.bg-info {
    background-color:#15162A !important;
}

footer .text-dark, footer .text-black-50 {
    color: white !important;
}

footer a.text-dark:hover {
    color: var(--clr-secondary) !important;
    text-decoration: none !important;
}

footer ul.list-group li.list-group-item {
    padding: 0 !important;
}

.toast {
    width: 350px;
    max-width: 100%;
    font-size: 0.875rem;
    background-color: var(--clr-secondary-hover);
    border: 1px solid#15162A;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0;
}

.toast-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color:#15162A;
    background-color: var(--clr-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

.accordion-button {
    color: var(--clr-primary-hover);
    background-color: var(--clr-success);
}

.accordion-button:not(.collapsed) {
    color: var(--clr-primary-hover);
    background-color: var(--clr-info);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.13);
}

.badge {
    padding: 0.4em 0.65em;
    color: var(--clr-text-white);
    border-radius: 0;
}

.badge-info, .rz-badge-info {
    background-color: var(--clr-secondary) !important;
    color:#15162A;
}

.rz-badge {
    font-size: 80%;
    padding: 9px !important;
}

.dropdown-item {
    color:#15162A !important;
}

.rz-progressbar, .rz-progressbar-value {
    border-radius: 0;
}

.rz-progressbar-value {
    background-color: #fec900;
}

.rz-rating .rzi-star {
    color: #fec900;
}

.rz-progressbar-indeterminate .rz-progressbar-value:before, .rz-progressbar-value:after {
    background-color: #fec900 !important;
}

.moduleTabs .rz-tabview-panel .rz-datalist-content .rz-g .col-12 a.h6 {
    color:#15162A;
}

.moduleTabs .rz-tabview-panel .rz-datalist-content .rz-g .col-12 button.btn-success {
    color: #fff !important;
    background-color:#15162A !important;
    border-color:#15162A !important;
}

.moduleTabs .rz-tabview-panel .rz-datalist-content .rz-g .col-12 button.btn-success:hover {
    background-color: var(--clr-primary-hover) !important;
    border-color: var(--clr-primary-hover) !important;
    color: var(--clr-text-white) !important;
}

.card-wrapper {
    position: relative;
}

.card-wrapper i {
    position: absolute;
    z-index: 1;
    top: 12%;
    left: 41%;
    color: #000;
}

.card-wrapper .overlayimage {
    position: absolute;
    z-index: 1;
    top: 12%;
    left: 41%;
    width: 75px;
}

#myform {
    background: #fff !important;
    padding: 20px !important;
}

#fixedbutton {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 0;
    z-index: 1000;
}

.fixed-button-container {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

.fixed-button-container .btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fnt-regular), serif;
}

.fixed-button-container .btn-block i {
    margin-right: 8px;
}

.commentholder {
    border-radius: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
}

img.module-icon {
    width: 80%;
    filter: brightness(100%) saturate(100%);
}

.awardholder .awardimg {
    width: 100%;
}

.awardholder .opacity-90 {
    opacity: 0.1;
}

.beforestart .rz-dark {
    border: 10px solid #fec900;
}

#scrollbox a {
    color: #fec900 !important;
}

.footer-small-print {
    font-size: 12px;
}

.profile-img {
    width: 30px;
    height: auto;
}

.h-160 {
    height: 160px;
}

.h_160 {
    min-height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.disabled-link {
    pointer-events: none;
    cursor: pointer;
}

.rz-button.rz-warning.rz-shade-default {
    background-color: #f9c710 !important;
    color: var(--rz-on-warning);
}

.rz-dialog-content {
    background-image: url('/img/Images-2025/About/About-2.png')!important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (min-width: 1200px) {
    :root {
        --fnt-size-display-1: 5rem;
        --fnt-size-display-2: 4.5rem;
        --fnt-size-display-3: 4rem;
        --fnt-size-display-4: 3.5rem;
        --fnt-size-display-5: 3rem;
        --fnt-size-display-6: 2.5rem;
        --fnt-size-h1: 2.8rem;
        --fnt-size-h2: 2.5rem;
        --fnt-size-h3: 2.2rem;
        --fnt-size-h4: 1.7rem;
        --fnt-size-h5: 1.4rem;
        --fnt-size-h6: 1rem;
    }
}

@media (max-width: 1700px) {
    .whatsInvolvedDash {
        display: none !important;
    }
}

@media (max-width: 990px) {
    header nav .navbar-collapse .navbar-nav {
        gap: 0.6em;
    }

    .hero {
        position: static !important;
        padding: 0 !important;
    }

    .hero > .card {
        position: static !important;
        width: unset !important;
    }

    .heroFull {
        background-position: top !important;
    }

    .hero8 {
        background-position-x: 80% !important;
    }

    .navbar-brand.ly-logo img {
        max-height: 40px;
    }

    .loginButtonsContainer .btn {
        min-width: fit-content!important;
        height: 33px;
        margin-right: 5px;
        padding: 0 20px;
        /* margin-top: 20px; */
    }

    
}

@media (max-width: 770px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        margin: 5px 0;
        padding: 0;
    }

    /* section {
        padding: 10px 0;
    } */

    .col-md-7 .row .col-md-6 {
        padding: 10px 0;
    }

    .bg-primary-whenMobile {
        background-color:#15162A !important;
    }

    .offsetImageBlock {
        position: unset;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .offsetImageBlock img {
        position: unset;
    }

    .whatsInvolvedDash {
        transform: rotate(90deg);
        padding: 50px;
    }
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect width='30' height='30' fill='rgba(21,22,42,1)'/%3E%3Cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: #fff;
  background: rgba(21,22,42,1) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: .375rem;
  opacity: .8;
}

}

@media (max-width: 400px) {
    .navbar-brand.ly-logo img {
        max-height: 30px;
    }
}
    


/* ==========================================================================
   Routes
   ========================================================================== */
.icon-wrapper {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.icon-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(126, 58, 255, 0.8) 0%,   /* bright purple center */
    rgba(126, 58, 255, 0.2) 60%,  /* more vibrant fade */
    rgba(126, 58, 255, 0) 100%     /* fully transparent edges */
  );
  filter: blur(60px);             /* stronger blur for soft glow */
  transform: translate(-50%, -50%) scaleX(1) scaleY(1);
  z-index: -1;
  opacity: 0;
}


/* Carousel Indicators */
.carousel-indicators [data-bs-target] {
    background-color: #1B2A96;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.carousel-indicators .active {
    opacity: 1;
    transform: scale(1.2);
}

/* Disable wrapping inside a slide */
#testimonialCarousel .carousel-item {
    overflow: hidden;
}

/* Force cards in a single row */
#testimonialCarousel .slide-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    box-sizing: border-box;
    padding: 0.75rem;
}

/* 1 per slide default (mobile) */
.resource-card {
    flex: 0 0 100%;
    min-width: 0;
}

/* tablet: 2 per slide */
@media (min-width: 640px) {
    .resource-card {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

/* desktop: 4 per slide */
@media (min-width: 1024px) {
    .resource-card {
        flex: 0 0 calc(25% - 0.75rem);
    }
}

/* card inner */
.card-inner {
    padding: 1.5rem;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.25s ease;
}
.js-parallax-image {
    /* Scale the image up slightly to fill the space left by the yPercent movement */
    transform: scale(1.15); 
}





/* .routes-section {
    display: grid;
    grid-template-columns: 30% 1fr; /* mobile start */
    overflow: hidden;
    container-type: inline-size;
} */

/* @container (min-width: 769px) {
    .routes-section {
        grid-template-columns: 35% 65%; /* desktop start */
    }
} */

.routes-section > div:last-child {
    overflow: hidden;
}

.routes-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}