:root {
   --clr-text-900: #3C3C3C;
   --clr-text-100: #ffffff;
   --clr-text-blue: #72D3E9;
   --clr-dark-text: black;
   --clr-button-text: #282828;
   --clr-accent-900: #A6371A;
   --clr-accent-100: #FFD932;

   --clr-hover: #04509C;
   --clr-pastel-dark-01: #985E97;
   --clr-pastel-dark-02: #248088;
   --clr-module-heading: #5E5E5E;
   --clr-mod-1: #FFDF9B;
   --clr-mod-2: #FF9E9B;
   --clr-mod-3: #96FDE0;
   --clr-mod-4: #DFFC9B;
   --clr-mod-5: #98E0FF;
   --clr-mod-7: #EADAE2;
   --clr-mod-6: #FFFECB;
   --clr-bg-dark: #212121;
   --clr-grey: rgba(124, 124, 124);
   --clr-light-grey: rgba(124, 124, 124, 30%);

   --clr-orange: rgba(255, 221, 199);
   --clr-light-orange: rgba(255, 221, 199, 50%);
   --clr-blue: rgba(146, 226, 243);
   --clr-light-blue: rgba(146, 226, 243, 25%);
   --clr-green: rgba(172, 219, 211);
   --clr-light-green: rgba(172, 219, 211, 50%);

   --course-outline-1: #173F50;
   --course-outline-2: #CAE2F8;
   --course-outline-3: #55558A;
   --course-outline-4: #063C5E;
   --course-outline-5: #A6371A;
   --text-yellow: #FFF056;
   --text-orange: rgba(236, 83, 13);
   --text-blue: #2AC9E7;
   --text-green: #2AAC96;

   --clr-pastel-01: #DED7E5;
   --clr-pastel-02: #FEF4D6;
   --clr-pastel-03: #CBE9EB;
   --clr-pastel-04: #E2F1F7;
   --clr-pastel-05: #EADAE2;
   --clr-pastel-06: #C6E6E7;
   --clr-pastel-07: #D8B9C0;

   /*FONTS*/
   --ff-primary: 'Raleway', sans-serif;
   --ff-heading: 'Yanone Kaffeesatz', sans-serif;

   --fw-light: 200;
   --fw-medium: 300;
   --fw-bold: 500;
   --fw-extra-bold: 700;

   --fs-primary-heading: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
   --fs-course-title: clamp(2rem, 3.375vw + 1rem, 3.375rem);
   --fs-secondary-heading: 2rem;
   --fs-small-caps: 2.25rem;
   --fs-big-heading: 2rem;
   --fs-small-heading: 1.5rem;
   --fs-body: 1.125rem;
   --fs-button: 0.8rem;
   --fs-small: 1rem;
   --fs-x-small: .875rem;

   /*SPACING*/
   --section-padding: 4.375rem;
}

@media (max-width: 1180px) {
   :root {
      --section-padding: 3.75rem;
   }
}

@media (max-width: 820px) {
   :root {
      --fs-secondary-heading: 1.8rem;
      --fs-small-caps: 2rem;
      --fs-body: 1rem;
      --fs-small-heading: 1.2rem;
      --section-padding: 2.5rem;
   }
}

@media (max-width: 600px) {
   :root {
      --fs-secondary-heading: 2.1rem;
      --fs-small-caps: 1.5rem;
      --fs-small-heading: 1rem;
      --section-padding: 2rem;
   }
}

/*UTILITY CLASSES*/
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.container {
   --max-width: 1280px;
   --side-padding: 1rem;
   width: min(var(--max-width), 100% - (var(--side-padding)*2));
   margin-inline: auto;
}

.container-wide {
   --max-width: 1440px;
   height: 100%;
   --side-padding: 1rem;
   width: min(var(--max-width), 100% - (var(--side-padding)*2));
   margin-inline: auto;
}

/*GRID AND FLEX*/
.even-columns {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.even-columns-home {
   display: grid;
   gap: 2rem;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

.small-even-columns {
   display: grid;
   gap: 0.1rem;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.flex {
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.content-wrapper {
   padding: 20px 0;
   gap: 5rem;
}

/*IMAGE RESPONSIVE*/
.responsive {
   width: 100%;
   height: auto;
}

/*TYPOGRAPHY*/
.text-900 {
   color: var(--clr-text-900);
}

.text-100 {
   color: var(--clr-text-100);
}

.text-blue {
   color: var(--clr-text-blue);
}

.dark-text {
   color: var(--clr-dark-text);
   font-weight: 500;
}

.small-caps {
   font-family: var(--ff-primary);
   font-size: var(--fs-small-caps);
   font-variant: small-caps;
}

.nav-text {
   font-family: var(--ff-heading);
   font-variant: small-caps;
   color: var(--clr-text-900);
   font-weight: 500;
}

.sub-heading {
   font-variant: small-caps;
   margin-bottom: 4px;
   font-size: var(--fs-small-heading);
   font-weight: 400;
}

.caps {
   text-transform: uppercase;
}

.ff-heading {
   font-family: var(-ff-heading);
}

.ff-body {
   font-family: var(--ff-body);
}

.fw-light {
   font-weight: var(--fw-light);
}

.fw-medium {
   font-weight: var(--fw-medium);
}

.fw-bold {
   font-weight: var(--fw-bold);
}

.fw-extra-bold {
   font-weight: var(--fw-extra-bold);
}

.fs-xs {
   font-size: var(--fs-x-small);
}

.fs-small {
   font-size: var(--fs-small);
}

.fs-big-heading {
   font-size: var(--fs-big-heading);
}

.fs-body {
   font-size: var(--fs-body);
}

h1 {
   font-family: var(--ff-heading);
   font-weight: 350;
   font-size: var(--fs-primary-heading);
   margin-bottom: 22px;
}

h2 {
   font-family: var(--ff-heading);
   color: var(--clr-dark-text);
   font-size: var(--fs-secondary-heading);
   line-height: 1.3;
   margin-bottom: 18px;
}

.uc-heading {
   font-size: var(--fs-small);
   text-transform: uppercase;
}

.lc-heading {
   font-family: var(--ff-heading);
   font-size: var(--fs-big-heading);
   font-weight: 300;
}

.numbers {
   font-family: Arial, Helvetica, sans-serif;
}

.course-title {
   font-size: var(--fs-course-title);
}

/*BACKGROUND COLOR */
.pastel-dark-01 {
   background-color: var(--clr-pastel-dark-01);
}

.pastel-dark-02 {
   background-color: var(--clr-pastel-dark-02);
}

.pastel-01 {
   background-color: var(--clr-pastel-01);
}

.pastel-02 {
   background-color: var(--clr-pastel-02);
}


.pastel-03 {
   background-color: var(--clr-pastel-03);
}

.pastel-04 {
   background-color: var(--clr-pastel-04);
}

.pastel-05 {
   background-color: var(--clr-pastel-05);
}

.pastel-06 {
   background-color: var(--clr-pastel-06);
}

.pastel-07 {
   background-color: var(--clr-pastel-07);
}

.bg-module-heading {
   background-color: var(--clr-module-heading);
}

.bg-mod-1 {
   background-color: var(--clr-mod-1);
}

.bg-mod-2 {
   background-color: var(--clr-mod-2);
}

.bg-mod-3 {
   background-color: var(--clr-mod-3);
}

.bg-mod-4 {
   background-color: var(--clr-mod-4);
}

.bg-mod-5 {
   background-color: var(--clr-mod-5);
}

.bg-mod-6 {
   background-color: var(--clr-mod-6);
}

.bg-course-outline-1 {
   background-color: var(--course-outline-1);
}

.bg-course-outline-2 {
   background-color: var(--course-outline-2);
}

.bg-course-outline-3 {
   background-color: var(--course-outline-3);
}

.bg-course-outline-4 {
   background-color: var(--course-outline-4);
}

.bg-course-outline-5 {
   background-color: var(--course-outline-5);
}

.bg-dark {
   background-color: var(--clr-bg-dark);
}

.bg-grey {
   background-color: var(--clr-grey);
}

.bg-light-grey {
   background-color: var(--clr-light-grey);
}

.bg-orange {
   background-color: var(--clr-orange);
}

.bg-light-orange {
   background-color: var(--clr-light-orange);
}

.bg-blue {
   background-color: var(--clr-blue);
}

.bg-light-blue {
   background-color: var(--clr-light-blue);
}

.bg-green {
   background-color: var(--clr-green);
}

.bg-light-green {
   background-color: var(--clr-light-green);
}

.accent-900 {
   color: var(--clr-accent-900);
}

.accent-100 {
   color: var(--clr-accent-100);
}

/*SPACING*/
section {
   padding: var(--section-padding) 0;
}

.spacing-top-12 {
   margin-top: 12px;
}

.spacing-top-18 {
   margin-top: 18px;
}

.spacing-top-28 {
   margin-top: 28px;
}

.spacing-top-60 {
   margin-top: 60px;
}

.spacing-top-100 {
   margin-top: 100px;
}

.spacing-bottom-200 {
   margin-bottom: 200px;
}

.padding-bottom-100 {
   padding-bottom: 100px;
}

.padding-20 {
   padding: 24px;
}

/*ALIGN*/
.align-text-right {
   text-align: right;
}

/*BUTTON*/
.button {
   color: var(--clr-text-900);
   font-weight: 500;
   font-size: var(--fs-button);
   text-transform: uppercase;
   padding: 8px 24px;
   letter-spacing: 0.2px;
   border-radius: 0.25rem;
   cursor: pointer;
   transition: all .2s ease-out;
}

.align-right {
   justify-content: right;
}

.button:hover {
   transform: translateY(-1px);
}

.button-accent-900 {
   background-color: var(--clr-accent-900);
   color: white;
   text-transform: uppercase;
   align-items: center;
   border: 1px solid var(--clr-accent-900);
   box-shadow: 0 4px 11px 0 rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 20%);
}

.button-accent-900:hover {
   background-color: transparent;
   box-shadow: 4px 4px 4px rgba(166, 54, 26, 0.20);
   color: var(--clr-accent-900);
   transform: translateY(-2px);
}

.button-accent-100 {
   background-color: var(--clr-accent-100);
   border: 1px solid #f8dd62;
   text-transform: uppercase;
   align-items: center;
   box-shadow: 0 4px 11px 0 rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 20%);
   transition: all 250ms ease-out;
}

.button-accent-100:hover {
   background-color: rgba(248, 221, 98, 0.142);
   box-shadow: 4px 4px 4px rgba(255, 217, 50, 0.24);
   color: var(--clr-text-100);
   transform: translateY(-2px);
}

.button-transparent-light,
.button-transparent-dark {
   background-color: transparent;
   border: 0;
   justify-content: start;
   padding-left: 0;
}

.button-transparent-light:hover .fa-angle-double-right {
   color: var(--clr-hover);
}

.button-transparent-dark a:hover {
   color: var(--clr-text-100);
}

.fa-angle-double-right {
   font-size: var(--fs-x-small);
   margin-left: 2px;
}

@media (max-width: 600px) {
   .even-columns {
      display: block;
   }

   .spacing-top-100 {
      margin-top: 40px;
   }
}

/*GENERAL STYLES*/
body {
   font-family: var(--ff-primary);
   font-size: var(--fs-body);
   color: var(--clr-text-900);
   overflow-x: hidden;
}

a {
   text-decoration: none;
   font-family: var(--ff-primary);
}

a:is(:hover, :focus) {
   color: var(--clr-hover);
}

/*NAVIGATION*/
.header-section {
   padding: 0;
   height: 70px;
}

.primary-header {
   justify-content: space-between;
   align-items: center;
}

.header-container {
   background-color: rgba(255, 255, 255, 0.96);
   position: fixed;
   z-index: 9999;
   top: 0;
   left: 0;
   width: 100%;
   transition: all 300ms ease-in-out;
}

.mobile-nav-toggle {
   display: none;
}

#logo {
   transition: all 300ms ease-in-out;
}

#header {
   transition: all 0.25s ease-in-out;
}

.logo img {
   width: 100px;
   height: auto;
   object-fit: cover;
}

/*FOOTER NAVIGATION*/
footer {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 3.125rem;
   background-color: rgba(146, 225, 243, 0.112);
   ;
}

.footer-wrapper {
   justify-content: space-between;
}

.copyright {
   flex-direction: column;
   gap: 0.5rem;
   text-align: center;
   padding-bottom: 1.875rem;
}

@media (max-width: 820px) {
   .primary-navigation {
      position: fixed;
      z-index: 1000;
      inset: 0 0 0 30%;
      flex-direction: column;
      gap: 2rem;
      padding: min(30vh, 10rem) 2rem;
      background: hsla(0, 0%, 100%, 0.97);
      transform: translateX(100%);
      transition: transform 350ms ease-out;
   }

   @supports (backdrop-filter: blur(1rem)) {
      .primary-navigation {
         background: hsla(0, 0%, 100%, 0.78);
         backdrop-filter: blur(1rem);
      }
   }

   .primary-navigation[data-visible='true'] {
      transform: translateX(0%);
   }

   .mobile-nav-toggle {
      display: block;
      position: absolute;
      z-index: 9999;
      background-image: url('/images/icon-open.svg');
      background-color: transparent;
      background-repeat: no-repeat;
      color: var(--clr-text-900);
      border: 0;
      width: 2rem;
      aspect-ratio: 1;
      /*top: 1.5rem;*/
      right: 2rem;
      transition: all 300ms ease-in-out;
   }

   .mobile-nav-toggle[aria-expanded='true'] {
      background-image: url('/images/icon-close.svg');
   }

   footer {
      padding-top: 40px;
   }

   .footer-logo {
      flex-basis: 100%;
   }

   .footer-nav {
      flex-basis: 40%;
   }

   .footer-contact {
      flex-basis: 40%;
   }

   .content-wrapper {
      gap: 1.3rem;
   }
}

@media (max-width: 600px) {
   footer {
      padding-top: 40px;
   }

   .footer-logo {
      flex-basis: 100%;
      order: 3;
      text-align: center;
   }

   .footer-logo img {
      display: none;
   }

   .footer-nav {
      flex-basis: 100%;
      order: 1;
      text-align: center;
   }

   .footer-contact {
      flex-basis: 100%;
      order: 2;
      text-align: center;
   }
}

/*******************  PAGE SPECIFIC *************/

/*******************  HOME  ********************/
/*HOME-----HERO SECTION*/
.hero-section {
   padding: 0;
   position: relative;
}

.home-hero-content {
   position: absolute;
   left: 2%;
   top: 28%;
}

.hero-content {
   margin-top: -40px;
   height: 100%;
   flex-direction: column;
   justify-content: center;
   gap: 0;
}

.hero-content h1 {
   letter-spacing: 0.8px;
}

/*HOME -------- STATS */
.small-cards {
   gap: 2rem;
   text-align: center;
}

.sm-card {
   padding: 20px;
   cursor: pointer;
   transition: box-shadow 0.8s ease-out, color 0.3s ease-out, background-color 0.4s ease-in-out, transform 0.3s ease-in;
}

.sm-card:nth-child(2n) {
   background-color: var(--clr-accent-100);
   box-shadow: 8px 8px 5px rgba(255, 217, 50, 0.24);
   color: var(--clr-text-900);
}

.sm-card:nth-child(2n-1) {
   background-color: var(--clr-text-900);
   box-shadow: 8px 8px 5px rgba(60, 60, 60, 0.24);
   color: var(--clr-accent-100);
}

.sm-card p:nth-child(1) {
   font-size: var(--fs-secondary-heading);
}

.sm-card:hover {
   background-color: white;
   box-shadow: 4px 4px 4px rgba(255, 217, 50, 0.24);
   color: var(--clr-text-900);
   transform: translateY(-3px);
}

/*HOME -------- CORE BELIEFS AND VALUES SECTION*/
.icon-card {
   padding: 20px;
   cursor: pointer;
}

.icon-card img {
   width: 5.9rem;
   height: auto;
   padding-bottom: 8px;
}

.icon-card-1 {
   background-color: #DED7E5;
}

.icon-card-2 {
   background-color: #FDF4D6;
}

.icon-card-3 {
   background-color: #E9F0EA;
}

.icon-card-4 {
   background-color: #FBDECE;
}

.icon-card-5 {
   background-color: #CBE8EB;
}

.icon-card-6 {
   background-color: #E9CFD4;
}

@media (max-width: 1366px) {
   .home-hero-image {
      height: 90svh;
   }

   .home-hero-image {
      height: 90svh;
   }

   .home-hero-image img {
      object-fit: cover;
      height: 90svh;
      object-position: 70% top;
   }
}

@media (max-width: 768px) {
   .sm-card {
      margin-top: 20px;
   }

   .icon-card:not(:first-child) {
      margin-top: 20px;
   }

   .even-columns-home {
      display: block;
   }
}

@media (max-width:600px) {
   .home-hero-image img {
      object-position: 66% top;
   }  

   .hero-content {
      margin-top: -60px;
   }
}

/*HOME-------WHAT WE DO SECTION*/
.col-small {
   flex-basis: 40%;
}

.col-big {
   flex-basis: 58%;
}

.card-image img {
   object-fit: cover;
   object-position: cen;
}

.card-image {
   flex-basis: 30%;
}

.card-image img {
   object-fit: cover;
   object-position: center;
   height: 100%;
}

.card-image-2 img {
   object-position: left;
}

.card-content {
   flex-basis: 65%;
}

@media (max-width: 1240px) {
   .hero-background {
      background-position: center;
   }

   .big-cards {
      display: flex;
      gap: 2rem;
   }

   .big-card-item {
      flex: 1 1;
   }

   .big-card-2,
   .big-card-3 {
      margin-top: 0;
   }

   .card-image {
      flex-basis: 100%;
   }

   .card-content {
      flex-basis: 100%;
   }

   .col-small {
      flex-basis: 100%;
   }

   .col-big {
      flex-basis: 100%;
   }
}

@media (max-width: 820px) {
   .big-cards {
      display: flex;
      flex-direction: column;
   }

   .card-image {
      flex-basis: 30%;
   }

   .card-content {
      flex-basis: 60%;
   }

   .big-card-1,
   .big-card-2,
   .big-card-3 {
      margin-top: 20px;
   }

   .col-small {
      flex-basis: 100%;
   }

   .col-big {
      flex-basis: 100%;
   }
}

@media (max-width: 600px) {
   .big-cards {
      display: block;
   }

   .card-image {
      flex-basis: 100%;
   }

   .card-content {
      flex-basis: 100%;
   }
}

/*HOME---------TESTIMONIAL SECTION*/
.client-image {
   border-radius: 100%;
   width: 5.937rem;
   height: auto;
   object-fit: cover;
}

.client-detail-wrapper {
   align-items: center;
}

ul {
   list-style: none;
}

.carousel {
   max-width: 60%;
   height: 540px;
   margin: 0 auto;
   position: relative;
}

.carousel-wrapper {
   height: 100%;
   position: relative;
   overflow: hidden;
}

.carousel-slides {
   height: 100%;
   transition: transform 250ms ease-in;
}

.carousel-item {
   padding: 40px 80px;
   position: absolute;
   top: 0;
   width: 100%;
}

.carousel-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: transparent;
   border: none;
   font-size: var(--fs-body);
   color: var(--clr-text-900);
   cursor: pointer;
}

.carousel-button-right {
   right: 0;
   z-index: 200;
}

.carousel-button-left {
   left: 0;
   z-index: 200;
}

.carousel-nav {
   justify-content: center;
   padding: 18px;
   position: absolute;
   bottom: 8%;
   left: 40%;
}

.carousel-indicator {
   border: 0;
   width: 12px;
   height: 12px;
   background: rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   cursor: pointer;
}

.carousel-indicator.current-slide {
   background: var(--clr-text-900)
}

.fa-2xl {
   position: absolute;
   left: 20px;
   color: rgba(0, 0, 0, 0.06);
   font-size: 3.5rem;
}

.is-hidden {
   display: none;
}

@media (max-width: 1024px) {
   .carousel {
      max-width: 100%;
      height: 510px;
   }

   .carousel-item {
      padding: 50px;
   }

   .fa-2xl {
      left: 0;
      font-size: 2.8rem;
   }
}

@media (max-width: 768px) {
   .carousel-item {
      padding: 40px;
   }

   .fa-2xl {
      font-size: 2.6rem;
   }
}

@media (max-width: 600px) {
   .carousel {
      height: 630px;
   }

   .footer-spacing {
      margin-top: 40px;
   }

   .carousel-nav {
      position: relative;
      bottom: auto;
      left: auto;
   }
}

/*****************   CONSULTING SERVICES     ******************/
.consulting-hero {
   padding: 0;
   position: relative;
}

.consulting-hero img {
   object-fit: cover;
}

.consulting-title {
   position: absolute;
   bottom: 10%;
   right: 8%;
   text-align: left;
}

.content-wrapper {
   justify-content: space-between;
   gap: 0.1rem;
}

.text-col {
   flex-basis: 48%;
}

.image-col {
   flex-basis: 48%;
}

.image-col img {
   object-fit: cover;
}

@media (max-width: 1368px) {
   .consulting-title {
      left: 2%;
   }
}

@media (max-width: 1024px) {
   .content-wrapper {
      margin-top: 60px;
   }
}

@media (max-width: 820px) {
   .content-wrapper button {
      margin-top: 12px;
   }
}

@media (max-width: 768px) {
   .consulting-hero {
      height: 90svh;
      background-image: url(/images/consultancy-mobile.webp);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
   }

   .consulting-hero img {
      display: none;
   }

   .consulting-title {
      left: 4%;
   }
}

@media (max-width: 600px) {
   .text-col {
      order: 2;
      flex-basis: 100%;
      margin-top: 18px;
   }

   .image-col {
      flex-basis: 100%;
      order: 1;
   }

   .consulting-wrapper .spacing-top-60 {
      margin: 40px 0;
   }

   .content-wrapper {
      margin-top: 20px;
   }
}

/***************   TRAINING PAGE      *********************/
.training-hero-background {
   width: 100svw;
   height: 92svh;
   position: relative;
   background-image: url('/images/Training\ Page\ V4.webp');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   padding: 0;
}

.training-hero-content {
   position: absolute;
   top: 40%;
   left: 3%;
}

.training-wrapper {
   width: 100%;
   height: 100%;
   align-items: center;
}

.quote {
   gap: 0;
   flex-direction: column;
   position: absolute;
   bottom: 10%;
   right: 14%;
}

.quote-detail {
   text-align: end;
}

.small-col-image {
   object-fit: cover;
   margin: auto;
}

.courses-hero {
   position: relative;
   padding: 0;
}

.courses-hero img {
   object-fit: cover;
}

.BC-content {
   position: absolute;
   bottom: 10%;
   left: 2%;
}

.AC-content {
   position: absolute;
   bottom: 5%;
   right: 2%;
   text-align: right;
}

.breadcrumbs {
   padding: 12px 0;
}

.breadcrumbs-item {
   display: inline;
}

.breadcrumbs-item:nth-child(n+2) {
   padding-left: 2px;
}

.breadcrumbs li::after {
   content: '>';
   padding: 8px;
}

.breadcrumbs li:last-child::after {
   content: ' ';
}

/***********   BASIC COURSE    *************/
.button-right {
   float: right;
}

.divider>img {
   display: block;
   height: 100%;
}

.outline-content {
   flex-basis: 20%;
}

.divider {
   flex-basis: 20px;
}

.outline-content li::before {
   content: '- ';
}

/* BASIC COURSE -PAG*/
.PAG-breadcrumbs-wrapper {
   background-color: #E1F0F8;
}

/* BASIC COURSE -PAT*/
.PAT-breadcrumbs-wrapper {
   background-color: #C2DAF4;
}

/* BASIC COURSE -PAD*/
.PAD-breadcrumbs-wrapper {
   background-color: #CBCDE0;
}

/* BASIC COURSE -PAI*/
.PAI-breadcrumbs-wrapper {
   background-color: #B9BDCA;
}

/* BASIC COURSE -ACP*/
.ACP-breadcrumbs-wrapper {
   background-color: #DBAF98;
}

/*TABLES*/
table {
   width: 100%;
   border-collapse: collapse;
}

th,
td {
   padding: 0.4rem;
   border: 2px solid var(--clr-pastel-05);
}

/****************   ADVANCED COURSES    ******************/

/*ADVANCED COURSE-AOP*/
.narrow-hero {
   width: 100%;
   padding: 0;
   gap: 0;
}

.narrow-hero .col-wrapper {
   text-align: right;
   align-items: end;
   gap: 0;
   justify-content: space-between;
}

.advanced-aop-content h1 {
   color: var(--text-yellow);
   margin-bottom: 8px;
}

.advanced-content {
   padding-bottom: 40px;
   margin-right: 5%;
}

/*ADVANCED COURSE-AGP*/
.advanced-agp-content h1 {
   color: var(--text-orange);
   margin-bottom: 8px;
}

.AGP-image img {
   object-fit: cover;
}

/*ADVANCED COURSE-AMP*/
.advanced-amp-content h1 {
   color: var(--text-blue);
   margin-bottom: 8px;
}

/*ADVANCED COURSE-ATP*/
.advanced-atp-content h1 {
   color: var(--text-green);
   margin-bottom: 8px;
}

/****************   CUSTOMIZED COURSES   *****************/
.cc-flex-wrapper {
   margin-top: -40px;

}

.cc-col-1 {
   flex-basis: 60%;

}

.cc-col-2 {
   flex-basis: 35%;
}

.cc-col-2 img {
   object-fit: cover;
}

.cc-col-1 button {
   float: right;
   margin-right: 1rem;
}

@media (max-width: 1366px) {
   .training-hero-background {
      height: 30svh;
   }
}

@media (max-width: 1366px) {
   .training-hero-background {
      height: 80svh;
      background-size: 100% 100%;
   }
}

@media (max-width: 1180px) {
   .quote {
      bottom: 5%;
   }

   .small-col-image {
      width: 40%;
      height: auto;
   }

   .button-right {
      float: none;
      margin-top: 40px;
   }

   .AC-content {
      bottom: -1%;
   }

   /*BASIC COURSE 01 */
   .outline-content {
      flex-basis: 43%;
   }

   .outline-wrapper>*:nth-child(4) {
      display: none;
   }

   .divider>img {
      height: 86%;
   }

   .bg-course-outline-1 {
      padding-bottom: 0;
   }

   /*ADVANCED COURSES*/
   .advanced-content {
      padding-bottom: 20px;
      margin-right: 4%;
   }
}

@media (max-width: 1024px) {
   .training-hero-background {
      height: 75svh;
      background-size: 100% 100%;
   }

   .training-hero-content {
      top: 46%;
      padding-bottom: 0;
   }

   .quote {
      bottom: 2%;
      right: 15%;
   }

   .cc-col-1 button {
      margin-top: 40px;
   }

   .training-hero-image {
      height: 60svh;
   }

   .training-hero-image img {
      height: 100%;
      object-fit: cover;
      object-position: 80% top;
   }
}

@media (max-width: 820px) {
   .training-hero-content {
      top: 48%;
   }

   .training-hero-image img {
      object-position: 60% bottom;
   }

   .training-hero-background {
      height: 70svh;
   }

   .training-wrapper {
      padding-top: 20%;
   }

   .narrow-hero-background {
      height: 40svh;
   }
}

@media (max-width: 768px) {
   .training-hero-content {
      top: 54%;
   }

   .BC-hero img {
      height: 60svh;
      object-fit: cover;
      object-position: 40% top;
   }

   .BC-content {
      bottom: 18%;
   }

   .BC01-hero img {
      height: 40svh;
      object-fit: cover;
      object-position: 60% center;
   }

   .BC02-hero img {
      height: 40svh;
      object-fit: cover;
      object-position: 60% center;
   }

   .BC03-hero img {
      height: 40svh;
      object-fit: cover;
      object-position: 40% center;
   }

   .BC04-hero img {
      height: 40svh;
      object-fit: cover;
      object-position: 60% center;
   }

   /*ADVANCED COURSES*/
   .col-wrapper {
      display: block;
   }

   .col-wrapper .col-small {
      margin-top: 20px;
   }

   .AC-hero img {
      height: 35svh;
      object-fit: contain;
      object-position: top 20%;
      background-color: #009293;
   }

   .AC-content {
      bottom: 2%;
   }

   .CC-hero img {
      height: 35svh;
      object-fit: cover;
      object-position: 40% top;
   }
}

@media (max-width: 600px) {
   .training-hero-image img {
      object-position: 50% bottom;
   }

   .training-hero-background {
      background-image: url('/images/Training\ Page-Mobile\ v4.webp');
      height: 90svh;
      background-position: bottom;
   }

   .training-wrapper {
      padding-top: 20%;
   }

   .training-hero-content {
      top: 50%;
   }

   .quote {
      bottom: 3%;
      left: 4%;
      right: 4%;
   }

   .small-col-image {
      width: 100%;
      height: auto;
   }

   .cc-col-1 {
      flex-basis: 100%;
   }

   .cc-col-2 {
      flex-basis: 100%;
      margin-top: 40px;
   }

   /*BASIC COURSES*/
   .narrow-hero-background {
      background-position: center top 40px;
   }

   /*TABLE*/
   table,
   thead,
   tbody,
   tr,
   th,
   td {
      display: block;
   }

   thead {
      border: none;
      clip-path: rect(0 0 0 0);
      position: absolute;
      overflow: hidden;
      height: 1px;
      margin-left: -1px;
      padding: 0;
      width: 1px;
   }

   tr {
      border: 0.5px solid var(--clr-module-heading);
   }

   tr:not(:last-child) {
      border-bottom: none;
   }

   td {
      border: none;
      position: relative;
      padding-left: 35%;
      padding-right: .4rem;
   }

   td::before {
      content: attr(data-label);
      position: absolute;
      top: 0.4rem;
      left: .4rem;
      font-variant: small-caps;
   }

   /*BASIC COURSE 01 */
   .outline-content {
      flex-basis: 100%;
   }

   .divider {
      display: none;
   }

   .bg-course-outline-1 {
      padding-bottom: 20px;
   }
}

/*******************   ABOUT   *******************/
.about-hero {
   background-image: url(/images/image-holder.webp);
   height: 65svh;
}

.narrow-1-col {
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.narrow-1-col {
   height: 100%;
}

.col-xs {
   flex-basis: 28%;
}

.col-xl {
   flex-basis: 65%;
}

.flex-content {
   gap: 4rem;
}

/****************   CONSULTING INNER PAGES   *****************/

/*POWER SYSTEM STUDIES*/
.services-hero {
   padding: 0;
}

.services-hero img {
   object-fit: cover;
}

.bg-pss {
   background-color: #B0DFDF;
}

.bg-pss-light {
   background-color: rgba(176, 223, 223, 0.25);
}

.list-style {
   list-style: square;
   margin-left: 1.5rem;
}

.list-check {
   list-style: url(/images/circle-check.svg);
   margin-left: 1.5rem;
}

.list-check li {
   margin-top: 12px;
}

/*POWER SYSTEM DESIGN*/
.bg-psd {
   background-color: #EBCBA3;
}

.bg-psd-light {
   background-color: rgba(235, 203, 163, 0.25);
}


/*PROTECTION AUDIT*/
.bg-pa {
   background-color: #DC9393;
}

.bg-pa-light {
   background-color: rgba(220, 147, 147, 0.25);
}

/*PROTECTION AUDIT*/
.bg-incident-analysis {
   background-color: #C0C6E0;
}

.bg-incident-analysis-light {
   background-color: rgba(192, 198, 224, 0.25);
}

/*PROTECTION AUDIT*/
.bg-research {
   background-color: #DADF42;
}

.bg-research-light {
   background-color: rgba(218, 223, 66, 0.6);
}

@media (max-width: 1180px) {

   /*PSS*/
   .col-xs {
      flex-basis: 100%;
      order: 2;
   }

   .col-xl {
      flex-basis: 100%;
      order: 1;
   }

   .padding-bottom-100 {
      padding-bottom: 50px;
   }

   .flex-content {
      gap: 2rem;
   }
}

@media (max-width: 768px) {
   .col-xl {
      margin-top: 40px;
   }
}

@media (max-width: 600px) {
   .services-hero img {
      height: 35svh;
      object-fit: cover;
   }

   .pss-hero img {
      object-position: 75% top;
   }

   .psd-hero img {
      object-position: center;
   }

   .ia-hero img {
      object-position: 10%;
   }
}