/*
================================================================================
CAREER LINES — OPTIMIZED STYLESHEET MAP
================================================================================
This file keeps the existing visual design and page-specific styles.

SECTION ORDER
01. Theme / Common styles
02. Buttons
03. Navigation
04. Banners / Hero
05. Section headings / Typography
06. Cards / Components
07. Portfolio / Pagination / Sliders / Accordions
08. Shared page utilities
09. Career Lines home + shared components
10. About Us
11. Students
12. Institutions
13. Consultants
14. Contact
15. FAQ
16. Career dimension / assessment pages
17. Remaining page-specific components
18. Footer / Final responsive fixes

CLEANUP NOTE
- Removed the older duplicated Home/mobile override block.
- Removed the global typography override layer that was affecting every page.
- The latest Home responsive layer remains active.
- Page-specific CSS is kept intact.
================================================================================
*/

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

    Theme Name: Motivo - Life & Business Coach HTML Template
    Description: Life & Business Coach HTML Template
    Author: Website Design Templates
    Version: 1.0.0

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

    01. Common styles
    02. Button styles
    03. Navigation
    04. Banner
    05. Section Heading
    06. Page titles
    07. Cards
    08. Portfolio
    09. Pagination
    10. Owl Carousel
    11. Accordion
    12. Pages
    13. Others
    14. Scroll Section
    15. Page Navigation
    16. Footer
    
---------------------------------- */
:root {
  --primary-color: #61CE70;
  --secondary-color: #006D77; }

/*==============================
 *    Common styles
 *    ================================ */
/* loader */
#preloader {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999999;
  transition: 0.3s ease opacity;
  text-align: center;
  width: 100%;
  height: 100%; }
  #preloader:before {
    content: "";
    width: 80px;
    height: 80px;
    border: 3px solid #61CE70;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-name: LoaderCicle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }
  #preloader:after {
    content: "";
    width: 80px;
    height: 80px;
    border: 3px solid #61CE70;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-name: LoaderCicle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 1s; }

@keyframes LoaderCicle {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  10% {
    width: 10px;
    height: 10px;
    opacity: 1; }
  80% {
    width: 60px;
    height: 60px;
    opacity: 0.1; }
  100% {
    width: 70px;
    height: 70px;
    opacity: 0; } }
/* theme color and basic options */
a:hover,
a:active {
  color: #61CE70;
  text-decoration: none; }

.card {
  color: #575a7b; }
  .card .card-body {
    color: #575a7b; }

.ls-minus-2px {
  letter-spacing: -2px; }

.bg-primary {
  background-color: #61CE70 !important; }

.bg-secondary {
  background-color: #006D77 !important; }

.bg-dark {
  background-color: #00353A !important; }

.primary-overlay[data-overlay-dark]:before {
  background: #61CE70; }

.secondary-overlay[data-overlay-dark]:before {
  background: #006D77; }

.left-overlay-secondary[data-overlay-dark]:before {
  background: rgba(0, 109, 119, 0.76);
  background: linear-gradient(-90deg, transparent, #006D77 65%); }

.left-overlay-primary[data-overlay-dark]:before {
  background: rgba(97, 203, 112, 0.76);
  background: linear-gradient(-90deg, transparent, #61CE70 65%); }

.left-overlay-white[data-overlay-dark]:before {
  background: rgba(243, 245, 250, 0.76);
  background: linear-gradient(40deg, #f3f5fa 25%, transparent 75%); }

.bg-light {
  background-color: rgba(0, 109, 119, 0.085) !important; }

.text-primary {
  color: #61CE70 !important; }

.text-primary-hover:hover {
  color: #61CE70 !important; }

.text-secondary {
  color: #006D77 !important; }

.text-secondary-hover:hover {
  color: #006D77 !important; }

a.text-primary:focus {
  color: #61CE70 !important; }

a.text-primary:hover {
  color: #61CE70 !important; }

a.text-primary:active {
  color: #61CE70 !important; }

a.text-primary.text-secondary-hover:focus {
  color: #006D77 !important; }

a.text-primary.text-secondary-hover:hover {
  color: #006D77 !important; }

a.text-primary.text-secondary-hover:active {
  color: #006D77 !important; }

.cursor-pointer {
  cursor: pointer; }

/*min-vh-560px*/
.min-vh-560px {
  min-height: 560px; }

@media screen and (max-width: 767px) {
  .min-vh-560px {
    min-height: 500px; } }
/*min-vh-300px*/
.min-vh-300px {
  min-height: 300px; }

@media screen and (min-width: 768px) {
  .w-100vw {
    width: 100vw; } }
/*w-180px*/
.w-180px {
  width: 180px; }

.gradient-overlay[data-overlay-dark]:before {
  background: rgba(27, 31, 59, 0.76);
  background: linear-gradient(1deg, #61CE70, #006D77 45%); }

a.text-white-hover:hover {
  color: #fff !important; }

.border-color-primary {
  border-color: #61CE70 !important; }

.primary-shadow {
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1); }

.overflow-x-clip {
  overflow-x: clip; }

/*sticky-top-style*/
.sticky-top-style {
  position: sticky;
  top: 130px;
  z-index: 1; }

/*bg-gradient*/
.bg-linear-gradient {
  position: relative; }
  .bg-linear-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: linear-gradient(180deg, #dfecf0 20%, #fff 100%);
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 0; }
  .bg-linear-gradient .container {
    position: relative;
    z-index: 1; }

.bottom-overlay {
  position: relative;
  overflow: hidden; }
  .bottom-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12%, #006D77 74%, #006D77 100%); }

/*linear-text*/
.linear-gradient-text {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

.linear-gradient-text.odometer .odometer-value {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

/*linear-gradient-text-secondary*/
.linear-gradient-text-secondary {
  background: linear-gradient(180deg, #006D77 0%, rgba(238, 248, 248, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

.linear-gradient-text-secondary.odometer .odometer-value {
  background: linear-gradient(180deg, #006D77 0%, rgba(238, 248, 248, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

/*linear-text-primary*/
.linear-gradient-text-primary {
  background: linear-gradient(180deg, #61CE70 0%, rgba(238, 248, 248, 0) 100%);
  -webkit-background-clip: text;
  color: transparent; }

.linear-gradient-text-primary.odometer .odometer-value {
  background: linear-gradient(180deg, #61CE70 0%, rgba(238, 248, 248, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

/*rotate*/
.rotate {
  -ms-animation: rotate 12s linear infinite;
  -o-animation: rotate 12s linear infinite;
  -moz-animation: rotate 12s linear infinite;
  -webkit-animation: rotate 12s linear infinite;
  animation: rotate 12s linear infinite; }

@-webkit-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-moz-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
/*floating-particles*/
.floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden; }

/* cd-headline */
.cd-headline {
  font-size: 18px;
  color: #006D77; }

.cd-headline.clip .cd-words-wrapper:after {
  content: none; }

/* image effect */
.image-hover {
  position: relative;
  overflow: hidden; }
  .image-hover:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1; }
  .image-hover:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent; }
  .image-hover:active:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent; }
  .image-hover:focus:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent; }

/*display-custom-1*/
.display-custom-1 {
  font-size: 145px;
  font-weight: 700;
  line-height: 80%;
  background: linear-gradient(180deg, #61CE70 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@media screen and (max-width: 991px) {
  .display-custom-1 {
    font-size: 134px; } }
@media screen and (max-width: 575px) {
  .display-custom-1 {
    font-size: 107px; } }
/*display-custom-2*/
.display-custom-2 {
  font-size: 128px;
  font-weight: 800;
  line-height: 0.9em;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #61CE70 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@media screen and (max-width: 1199px) {
  .display-custom-2 {
    font-size: 97px; } }
@media screen and (max-width: 991px) {
  .display-custom-2 {
    font-size: 89px; } }
@media screen and (max-width: 575px) {
  .display-custom-2 {
    font-size: 72px; } }
/*display-custom-3*/
.display-custom-3 {
  font-size: 145px;
  font-weight: 700;
  line-height: 80%;
  background: linear-gradient(180deg, #61CE70 0%, rgba(238, 248, 248, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
  .display-custom-3 .linear-gradient-text.odometer {
    color: transparent; }
    .display-custom-3 .linear-gradient-text.odometer .odometer-value {
      background: linear-gradient(180deg, #61CE70 0%, #eef8f8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
  .display-custom-3 sup {
    background: linear-gradient(180deg, #61CE70 0%, rgba(238, 248, 248, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

@media screen and (max-width: 1399px) {
  .display-custom-3 {
    font-size: 125px; } }
@media screen and (max-width: 1199px) {
  .display-custom-3 {
    font-size: 100px; } }
/*border-text*/
.border-text {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.border-text.primary {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #61CE70;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.border-text.dark {
  text-fill-color: transparent;
  text-stroke-color: #006D77;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #006D77;
  -webkit-text-stroke-width: 1px;
  stroke-width: 1px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.border-text.secondary {
  text-fill-color: transparent;
  text-stroke-color: #063232;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #063232;
  -webkit-text-stroke-width: 1px;
  stroke-width: 1px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease; }

/* list-style01 */
.list-style01 li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 30px; }
  .list-style01 li:after {
    content: "\e64c";
    font-family: 'themify';
    position: absolute;
    left: 0px;
    top: 1px;
    z-index: 1;
    font-weight: 600;
    color: #61CE70; }
  .list-style01 li:last-child {
    padding-bottom: 0;
    margin-bottom: 0; }

/*.list-style02*/
.list-style02 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .list-style02 li a {
    position: relative;
    padding: 8px 16px 8px 16px !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #FFFFFF14 !important;
    border-radius: 30px 30px 30px 30px;
    color: #FFFFFF;
    margin-left: 16px;
    display: block;
    transition: all .3s;
    color: #fff; }
    .list-style02 li a:hover {
      color: #61CE70;
      background-color: #fff; }
  .list-style02 li:first-child {
    margin-left: 0; }

@media screen and (max-width: 991px) {
  .list-style02 li a {
    margin-bottom: 10px; } }
/* list-style03 */
.list-style03 li {
  margin-bottom: 22px; }
  .list-style03 li:last-child {
    margin-bottom: 0; }
  .list-style03 li a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400; }
    .list-style03 li a:hover {
      color: #61CE70; }

/* list-style04 */
.list-style04 li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
  padding: 15px 0; }
  .list-style04 li:last-child {
    border-bottom: unset;
    padding-bottom: 0; }

/* list-style05 */
.list-style05 li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 25px; }
  .list-style05 li:last-child {
    margin-bottom: 0; }
  .list-style05 li:before {
    content: "\e64c";
    font-family: 'themify';
    position: absolute;
    left: 0;
    top: 4px; }

.list-style05.white li {
  color: #fff; }
  .list-style05.white li .h6 {
    color: rgba(255, 255, 255, 0.9); }

.list-style05.dark li {
  color: #191919; }
  .list-style05.dark li .h6 {
    color: rgba(25, 25, 25, 0.9); }

/* list-style06 */
.list-style06 {
  list-style: none;
  padding-left: 0; }
  .list-style06 li {
    line-height: 32px;
    padding-left: 30px;
    position: relative;
    margin-bottom: 8px; }
    .list-style06 li:last-child {
      margin-bottom: 0; }
    .list-style06 li:before {
      content: '\f058';
      font-family: "Font Awesome 7 Free";
      font-size: 18px;
      position: absolute;
      top: 0;
      left: 0;
      font-weight: 800;
      line-height: 35px;
      color: #61CE70; }

.list-style06.second li {
  color: #fff; }
  .list-style06.second li:before {
    color: #fff; }

/* list-style07*/
.list-style07 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; }
  .list-style07 li {
    position: relative;
    color: #fff;
    padding-left: 35px;
    font-size: 14px;
    justify-content: center; }
    .list-style07 li:before {
      content: '\f058';
      position: absolute;
      font-family: 'Font Awesome 7 Free';
      font-weight: 600;
      top: -3px;
      left: 0;
      font-size: 18px;
      color: #61CE70; }

@media screen and (max-width: 1399px) {
  .list-style07 {
    gap: 20px 40px; } }
@media screen and (max-width: 767px) {
  .list-style07 {
    gap: 15px;
    justify-content: start; } }
/* arrow circle */
.arrow-circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  margin-right: 20px;
  width: 50px;
  height: 50px;
  border: 2px solid #61CE70;
  border-radius: 50%; }

/* scroll to top */
.scroll-top-percentage {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  position: fixed;
  bottom: 40px;
  color: #fff;
  right: 50px;
  -webkit-transform: scale(0);
  transform: scale(0);
  display: -ms-grid;
  display: grid;
  place-items: center;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 100; }

.scroll-top-percentage.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running scrollToTop;
  animation: 500ms ease-in-out 0s normal none 1 running scrollToTop;
  -webkit-transition: 0.3s;
  transition: 0.3s; }

#scroll-value {
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  color: #fff;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600; }
  #scroll-value i {
    font-size: 20px; }

@media (max-width: 575px) {
  .scroll-top-percentage {
    right: 30px;
    bottom: 20px; } }
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .scroll-top-percentage {
    right: 30px;
    bottom: 20px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-top-percentage {
    right: 30px;
    bottom: 20px; } }
@-webkit-keyframes "scrollToTop" {
  0% {
    -webkit-transform: translate3d(0, 80%, 0);
    transform: translate3d(0, 80%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes "scrollToTop" {
  0% {
    -webkit-transform: translate3d(0, 80%, 0);
    transform: translate3d(0, 80%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
/*==============================
 *    Button styles
 *    ================================ */
/* butn-style01 */
.butn-style01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #61CE70;
  color: #fff;
  line-height: 1.5;
  font-weight: 700;
  position: relative;
  outline: none;
  transition: all 0.4s ease;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  font-size: 14px !important;
  padding: 15px 34px !important;
  z-index: 9;
  border-radius: 4px;
  text-transform: uppercase; }
  .butn-style01:hover {
    color: #fff;
    background: #006D77; }
  .butn-style01:active {
    color: #fff;
    background: #006D77; }
  .butn-style01:focus {
    color: #fff;
    background: #006D77; }

.butn-style01.md {
  padding: 12px 30px !important; }

.butn-style01.sm {
  padding: 10px 26px !important; }

.butn-style01.white {
  background: #fff;
  color: #61CE70 !important; }
  .butn-style01.white:hover {
    background-color: #006D77;
    color: #fff !important; }

.butn-style01.secondary {
  background: #006D77;
  color: #fff !important; }
  .butn-style01.secondary:hover {
    background-color: #61CE70;
    color: #fff !important; }

.butn-style01.white-hover:hover {
  background-color: #fff !important;
  color: #61CE70 !important; }
.butn-style01.white-hover:active {
  background-color: #fff !important;
  color: #61CE70 !important; }
.butn-style01.white-hover:focus {
  background-color: #fff !important;
  color: #61CE70 !important; }

@media screen and (min-width: 992px) {
  .header-style1.scrollHeader .attr-nav > ul > li > a.butn-style01 {
    color: #fff !important;
    border: 1px solid transparent; }
    .header-style1.scrollHeader .attr-nav > ul > li > a.butn-style01:hover {
      color: #61CE70 !important;
      border: 1px solid #61CE70; }
    .header-style1.scrollHeader .attr-nav > ul > li > a.butn-style01:active {
      color: #61CE70 !important;
      border: 1px solid #61CE70; }
    .header-style1.scrollHeader .attr-nav > ul > li > a.butn-style01:focus {
      color: #61CE70 !important;
      border: 1px solid #61CE70; }

  .header-style3.scrollHeader .attr-nav > ul > li > a.butn-style01 {
    color: #fff !important;
    border: 1px solid transparent; }
    .header-style3.scrollHeader .attr-nav > ul > li > a.butn-style01:hover {
      color: #61CE70 !important;
      border: 1px solid #61CE70; }
    .header-style3.scrollHeader .attr-nav > ul > li > a.butn-style01:active {
      color: #61CE70 !important;
      border: 1px solid #61CE70; }
    .header-style3.scrollHeader .attr-nav > ul > li > a.butn-style01:focus {
      color: #61CE70 !important;
      border: 1px solid #61CE70; } }
/* btn-style02 */
.butn-style02 {
  background-color: #61CE70;
  color: #fff !important;
  font-size: 14px !important;
  padding: 12px 30px !important;
  display: inline-block;
  border: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  width: auto;
  white-space: normal;
  word-wrap: break-word;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 0.15rem; }
  .butn-style02:hover {
    color: #fff !important;
    -webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0); }

.butn-style02.white {
  background-color: #fff;
  color: #1e3238 !important; }

.butn-style02.secondary {
  background-color: #61CE70;
  color: #fff !important; }

.butn-style02.md {
  padding: 10px 26px !important; }

.butn-style02.sm {
  padding: 8px 24px !important; }

/* butn-style03 */
.butn-style03 {
  font-size: 15px !important;
  font-weight: 700;
  padding: 12px 34px !important;
  -webkit-transition: all 200ms linear 0ms;
  -khtml-transition: all 200ms linear 0ms;
  -moz-transition: all 200ms linear 0ms;
  -ms-transition: all 200ms linear 0ms;
  -o-transition: all 200ms linear 0ms;
  transition: all 200ms linear 0ms;
  -webkit-border-radius: 0;
  -khtml-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 50px;
  position: relative;
  overflow: hidden !important;
  display: inline-block;
  text-align: center;
  border: 2px solid #61CE70;
  color: #fff;
  z-index: 1;
  white-space: normal;
  word-wrap: break-word;
  background-color: #61CE70;
  vertical-align: middle;
  text-transform: uppercase; }
  .butn-style03:after {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    -webkit-transform: skewX(-20deg);
    -khtml-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    z-index: -1; }
  .butn-style03:hover {
    background-color: #61CE70;
    color: #fff; }
    .butn-style03:hover:after {
      -webkit-animation: btn_shine 1.2s ease;
      animation: btn_shine 1.2s ease;
      -webkit-animation-delay: .1s;
      animation-delay: .1s; }
  .butn-style03:focus {
    background-color: #61CE70;
    color: #fff; }
    .butn-style03:focus:after {
      -webkit-animation: btn_shine 1.2s ease;
      animation: btn_shine 1.2s ease;
      -webkit-animation-delay: .1s;
      animation-delay: .1s; }
  .butn-style03:active {
    background-color: #61CE70;
    color: #fff; }
    .butn-style03:active:after {
      -webkit-animation: btn_shine 1.2s ease;
      animation: btn_shine 1.2s ease;
      -webkit-animation-delay: .1s;
      animation-delay: .1s; }

.butn-style03.secondary {
  border: 2px solid #006D77;
  background-color: #006D77; }

.butn-style03.md {
  padding: 8px 26px !important;
  font-size: 15px; }

.butn-style03.sm {
  padding: 6px 20px !important; }

@media screen and (max-width: 1399px) {
  .butn-style03 {
    padding: 10px 30px !important;
    font-size: 16px; } }
@media screen and (max-width: 767px) {
  .butn-style03 {
    padding: 8px 25px !important;
    font-size: 14px; } }
@-webkit-keyframes "btn_shine" {
  100% {
    left: 200%; } }
@keyframes "btn_shine" {
  100% {
    left: 200%; } }
/* button-link */
.button-link {
  padding: 0 0 2px;
  position: relative;
  border: 0;
  border-bottom: 2px solid;
  letter-spacing: 0;
  background-color: transparent;
  font-size: 14px;
  display: inline-block;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  width: auto;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }
  .button-link:hover {
    opacity: 0.7; }

.button-link.contact-link {
  font-size: 14px; }

/*circle button */
.circle-btn.circle-hover {
  position: relative;
  overflow: hidden; }

.circle-btn {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  border: 1px solid #006D77;
  color: #006D77;
  font-weight: 700;
  font-size: 16px;
  text-transform: capitalize; }
  .circle-btn .btn-text {
    position: relative;
    color: #006D77;
    transition: 0.6s ease; }
  .circle-btn .btn-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #61CE70;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none;
    z-index: 1;
    bottom: -15px; }
  .circle-btn:hover {
    border: 1px solid #61CE70; }
    .circle-btn:hover .btn-text {
      color: #fff;
      z-index: 999; }

@media screen and (max-width: 1399px) {
  .circle-btn {
    width: 155px;
    height: 153px; } }
/*magnetic-circle*/
.magnetic-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #61CE70;
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transform: translate(0, 0) scale(1);
  will-change: transform;
  transition: box-shadow 0.35s ease, background 0.35s ease; }
  .magnetic-circle span {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease; }
  .magnetic-circle::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 0%;
    background: #ffffff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    z-index: 1; }
  .magnetic-circle:hover::before {
    width: 220%;
    height: 220%; }
  .magnetic-circle:hover span {
    color: #61CE70; }

.magnetic-circle.magnetizing {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
  .magnetic-circle.magnetizing::before {
    width: 220%;
    height: 220%; }
  .magnetic-circle.magnetizing span {
    color: #61CE70; }

@media screen and (max-width: 991px) {
  .magnetic-circle {
    width: 180px;
    height: 180px; } }
/*video_btn*/
.video_btn {
  position: relative;
  height: 80px;
  width: 80px;
  background: #61CE70;
  text-align: center;
  display: inline-block;
  line-height: 80px;
  color: #fff;
  border-radius: 50%;
  transition-duration: 0s;
  -ms-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s; }
  .video_btn:hover i {
    color: #fff; }
  .video_btn:focus i {
    color: #fff; }
  .video_btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 80px;
    width: 80px;
    border: 2px solid #61CE70;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: .3;
    animation: pulse-border 1500ms ease-out infinite; }
  .video_btn:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 95px;
    width: 95px;
    border: 2px solid #61CE70;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: .3;
    animation: pulse-border 1500ms ease-out infinite; }

.video_btn.small {
  width: 50px;
  height: 50px;
  line-height: 50px; }
  .video_btn.small:after {
    height: 50px;
    width: 50px; }
  .video_btn.small:before {
    height: 65px;
    width: 65px; }

@media screen and (max-width: 1199px) {
  .video_btn {
    height: 75px;
    width: 75px;
    line-height: 75px; }
    .video_btn:after {
      height: 75px;
      width: 75px; }
    .video_btn:before {
      height: 90px;
      width: 90px; } }
@media screen and (max-width: 991px) {
  .video_btn {
    height: 70px;
    width: 70px;
    line-height: 70px; }
    .video_btn:after {
      height: 70px;
      width: 70px; }
    .video_btn:before {
      height: 85px;
      width: 85px; } }
@media screen and (max-width: 767px) {
  .video_btn {
    height: 60px;
    width: 60px;
    line-height: 60px; }
    .video_btn:after {
      height: 60px;
      width: 60px; }
    .video_btn:before {
      height: 75px;
      width: 75px; } }
@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1; }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0; } }
/*==============================
 *    Navigation
 *    ================================ */
/* top bar  */
/* menu area light */
/* header style 2 */
/* headerstyle03 */
.top-bar-info {
  display: inline-block;
  vertical-align: middle; }
  .top-bar-info ul {
    margin-bottom: 0; }
  .top-bar-info li {
    font-weight: 500;
    color: #fff;
    list-style-type: none;
    font-size: 14px;
    padding: 0 5px 0;
    display: inline-block;
    margin-bottom: 0; }
    .top-bar-info li i {
      font-size: 16px;
      color: #fff;
      margin-right: 8px;
      margin-top: 0;
      display: inline-block;
      vertical-align: text-bottom; }

.top-bar {
  display: block;
  position: relative;
  z-index: 999;
  padding: 7px 0; }

.top-social-icon {
  padding: 0;
  float: right;
  margin: 0; }
  .top-social-icon li {
    font-size: 14px;
    list-style-type: none;
    float: left;
    text-align: center;
    margin: 0;
    padding: 0 7px; }
    .top-social-icon li:last-child {
      padding-right: 0; }
      .top-social-icon li:last-child a {
        padding-right: 0; }
    .top-social-icon li a {
      color: #fff;
      line-height: 28px;
      -webkit-transition-duration: .3s;
      transition-duration: .3s;
      padding: 0 3px; }
      .top-social-icon li a:hover {
        color: rgba(255, 255, 255, 0.65); }

.navbar-nav li.current > a {
  color: #61CE70 !important; }
.navbar-nav li.active > a {
  color: #61CE70 !important; }

.attr-nav > ul > li > a.butn {
  color: #fff; }

.navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent !important; }

.menu_area-light .navbar-nav li.current > a {
  color: #61CE70; }
.menu_area-light .navbar-nav li.active > a {
  color: #61CE70; }
.menu_area-light .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent; }

.menu_area-light.scrollHeader .navbar-nav li.current > a {
  color: #61CE70; }
  .menu_area-light.scrollHeader .navbar-nav li.current > a:hover {
    color: #61CE70; }
.menu_area-light.scrollHeader .navbar-nav li.active > a {
  color: #61CE70; }
.menu_area-light.scrollHeader .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent; }

.header-style2 .navbar-nav li.current > a {
  color: #61CE70; }
.header-style2 .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent; }

.header-style2.scrollHeader .navbar-nav li.current > a {
  color: #61CE70; }
  .header-style2.scrollHeader .navbar-nav li.current > a:hover {
    color: #61CE70; }
.header-style2.scrollHeader .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent; }

.header-style3 .navbar-nav li.current > a {
  color: #61CE70; }
.header-style3 .navbar-nav li.active > a {
  color: #61CE70; }

@media screen and (min-width: 992px) {
  .menu_area-light .navbar ul ul li.active > a {
    color: #61CE70; }
  .menu_area-light .navbar > ul > li.has-sub > a:hover:after {
    border-color: #61CE70; }
  .menu_area-light .navbar-nav li.has-sub a:hover {
    color: #61CE70; }
  .menu_area-light .navbar-light .navbar-nav > li > a:hover {
    color: #61CE70; }
  .menu_area-light .navbar-light .navbar-nav > li > a:active {
    color: #61CE70; }
  .menu_area-light .navbar-light .navbar-nav > li > a:focus {
    color: #61CE70; }

  .menu_area-light.scrollHeader .navbar-nav > li.has-sub > a:hover {
    color: #61CE70; }

  .header-style2.scrollHeader .navbar-nav > li.has-sub > a:hover {
    color: #61CE70; }
    .header-style2.scrollHeader .navbar-nav > li.has-sub > a:hover:after {
      border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style2.scrollHeader .navbar-nav li.current > a {
    color: #61CE70; }
    .header-style2.scrollHeader .navbar-nav li.current > a:hover {
      color: #61CE70; }
  .header-style2.scrollHeader .navbar > ul > li.current > a:after {
    border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style2.scrollHeader .butn.secondary:before {
    background: #61CE70; }
  .header-style2.scrollHeader .butn.secondary:hover {
    color: #fff !important; }
  .header-style2.scrollHeader .butn.secondary:focus {
    color: #fff !important; }
  .header-style2.scrollHeader .butn.secondary:active {
    color: #fff !important; }

  .header-style2 .navbar > ul > li.has-sub.current > a:hover:after {
    border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style2 .navbar > ul > li.has-sub > a:hover:after {
    border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style2 .navbar > ul > li.has-sub > a:active:after {
    border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style2 .navbar > ul > li.has-sub > a:focus:after {
    border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style2 .navbar ul ul li.active > a {
    color: #61CE70;
    color: #61CE70; }
  .header-style2 .navbar-nav li.has-sub a:hover {
    color: #61CE70; }
  .header-style2 .navbar-nav li.has-sub a:active {
    color: #61CE70; }
  .header-style2 .navbar-nav li.has-sub a:focus {
    color: #61CE70; }
  .header-style2 .navbar-nav li.current > a {
    color: #61CE70; }
  .header-style2 .navbar-nav li.active > a {
    color: #61CE70; }
  .header-style2 .butn.secondary:before {
    background: #ffffff; }
  .header-style2 .butn.secondary:hover {
    color: #006D77 !important; }
  .header-style2 .butn.secondary:focus {
    color: #006D77 !important; }
  .header-style2 .butn.secondary:active {
    color: #006D77 !important; }

  .header-style3 .navbar-nav li.active > a {
    color: #61CE70; }
  .header-style3 .navbar-nav > li > a:hover {
    color: #61CE70; }
  .header-style3 .navbar-nav > li > a:active {
    color: #61CE70; }
  .header-style3 .navbar-nav > li > a:focus {
    color: #61CE70; }
  .header-style3 .navbar-nav li.has-sub a:hover {
    color: #61CE70; }
  .header-style3 .navbar-nav li.current > a {
    color: #61CE70; }
  .header-style3 .navbar-nav > li.has-sub > a:hover {
    color: #61CE70; }
  .header-style3 .navbar ul ul li.active > a {
    color: #61CE70; }
  .header-style3 .navbar > ul > li.has-sub > a:hover:after {
    border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style3 .navbar > ul > li.current > a:after {
    border-color: transparent #61CE70 #61CE70 transparent; }

  .header-style3.scrollHeader .navbar-nav > li.has-sub > a:hover {
    color: #61CE70; }
  .header-style3.scrollHeader .navbar-nav > li.active > a {
    color: #61CE70; }
  .header-style3.scrollHeader .navbar-nav li.current > a {
    color: #61CE70; }
    .header-style3.scrollHeader .navbar-nav li.current > a:hover {
      color: #61CE70; }
  .header-style3.scrollHeader .navbar > ul > li.has-sub > a:hover:after {
    border-color: transparent #61CE70 #61CE70 transparent; }
  .header-style3.scrollHeader .navbar > ul > li.current > a:after {
    border-color: transparent #61CE70 #61CE70 transparent; } }
@media screen and (max-width: 991px) {
  .header-style1 .navbar-toggler {
    background: #61CE70; }
    .header-style1 .navbar-toggler:after {
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff; }
    .header-style1 .navbar-toggler:before {
      background: #fff; }
  .header-style1 .navbar-toggler.menu-opened:after {
    background: #fff; }
  .header-style1 .navbar-toggler.menu-opened:before {
    background: #fff; }

  .header-style3 .navbar-toggler {
    background: #61CE70; }
    .header-style3 .navbar-toggler:after {
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff; }
    .header-style3 .navbar-toggler:before {
      background: #fff; }
  .header-style3 .navbar-toggler.menu-opened:after {
    background: #fff; }
  .header-style3 .navbar-toggler.menu-opened:before {
    background: #fff; } }
/*==============================
 *    Main Banner
 *    ================================ */
/* slider-fade1 */
.slider-fade1 .bg-img {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 8000ms linear;
  -moz-transition: all 8000ms linear;
  -ms-transition: all 8000ms linear;
  -o-transition: all 8000ms linear;
  transition: all 8000ms linear; }
.slider-fade1 .owl-item.active .bg-img {
  -webkit-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25); }
.slider-fade1 .item {
  min-height: 700px; }
.slider-fade1 .owl-item {
  position: relative; }
.slider-fade1 .owl-nav {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0; }
  .slider-fade1 .owl-nav button.owl-prev {
    height: 45px;
    width: 45px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: #fff;
    margin: 0;
    border-radius: 50px;
    display: block; }
  .slider-fade1 .owl-nav button.owl-next {
    height: 45px;
    width: 45px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: #fff;
    margin: 0;
    border-radius: 50px;
    display: block;
    margin-top: 9px; }
  .slider-fade1 .owl-nav [class*="owl-"]:hover {
    background: #61CE70;
    color: #fff;
    transition: 0.3s; }

.slider-fade1.owl-carousel .owl-dots {
  position: absolute;
  margin-top: 20px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  bottom: 10px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%); }

.slider-thumb-img {
  position: absolute !important;
  right: 2%;
  top: 50%;
  transform: translateY(-50%); }
  .slider-thumb-img .owl-thumb-item {
    display: block; }

.slider-thumb-img.owl-thumbs .owl-thumb-item {
  border-radius: 50%;
  border: 2px solid transparent; }
.slider-thumb-img.owl-thumbs .owl-thumb-item.active {
  opacity: 1;
  border: 2px solid #61CE70;
  border-radius: 50%; }

@media screen and (max-width: 991px) {
  .slider-fade1 .owl-nav button.owl-prev {
    width: 49px;
    height: 49px; }
  .slider-fade1 .owl-nav button.owl-next {
    width: 49px;
    height: 49px; } }
@media screen and (max-width: 767px) {
  .slider-thumb-img {
    display: none; } }
/*banner-style01*/
.banner-style01 .container-fluid {
  padding: 0 5.5rem; }

@media screen and (max-width: 1599px) {
  .banner-style01 .container-fluid {
    padding: 0 2rem; } }
@media screen and (max-width: 575px) {
  .banner-style01 .container-fluid {
    padding: 0 1.5rem; } }
/*banner-style02*/
.banner-style02 h1 {
  letter-spacing: -5px;
  font-size: 130px;
  line-height: 120px;
  text-shadow: 0 0 60px #1b1f3b; }

@media screen and (max-width: 1199px) {
  .banner-style02 h1 {
    font-size: 110px;
    line-height: 100px; } }
@media screen and (max-width: 991px) {
  .banner-style02 h1 {
    font-size: 90px;
    line-height: 85px; } }
@media screen and (max-width: 767px) {
  .banner-style02 h1 {
    letter-spacing: -4px;
    font-size: 72px;
    line-height: 60px; } }
@media screen and (max-width: 575px) {
  .banner-style02 h1 {
    letter-spacing: -2px;
    font-size: 60px;
    line-height: 48px; } }
/* gradient banner */
.gradient-overlay[data-overlay-dark]:before {
  background: rgba(0, 109, 119, 0.76);
  background: linear-gradient(-45deg, #61CE70, #006D77 45%); }

.gradient-banner {
  background: rgba(0, 109, 119, 0.76);
  background: linear-gradient(-45deg, #61CE70, #006D77 45%); }
  .gradient-banner .floating-particles {
    z-index: 9; }

@media screen and (max-width: 1199px) {
  .gradient-banner h1 {
    font-size: 110px;
    line-height: 100px; } }
@media screen and (max-width: 991px) {
  .gradient-banner h1 {
    font-size: 90px;
    line-height: 85px; } }
@media screen and (max-width: 767px) {
  .gradient-banner h1 {
    letter-spacing: -4px;
    font-size: 72px;
    line-height: 60px; } }
@media screen and (max-width: 575px) {
  .gradient-banner h1 {
    letter-spacing: -2px;
    font-size: 60px;
    line-height: 48px; } }
/*==============================
 *    Section heading
 *    ================================ */
/*title-style01*/
.title-style01 i {
  color: #61CE70;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 120px #006d77; }
.title-style01 .sub-title {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5em;
  letter-spacing: -0.02em;
  width: fit-content;
  background: linear-gradient(100deg, #61CE70 0%, rgba(97, 203, 112, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  padding-left: 10px; }
.title-style01 .sub-title.primary {
  background: linear-gradient(100deg, #61CE70 0%, rgba(97, 203, 112, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; }

/*title-style02*/
.title-style02 .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  line-height: 1;
  background-color: #61CE70;
  color: #fff;
  font-weight: 800;
  border-radius: 30px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 12px; }
  .title-style02 .sub-title i {
    transform: rotate(-45deg); }
.title-style02 .sub-title.white {
  background-color: #fff;
  color: #006D77; }

/* ===================================
    Page title
====================================== */
.page-title-section {
  padding: 250px 0 150px;
  text-align: center; }
  .page-title-section h1 {
    font-size: 72px;
    line-height: 1;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    margin-bottom: 10px;
    position: relative;
    z-index: 9;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: normal; }
  .page-title-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    line-height: 1.2; }
    .page-title-section ul li {
      display: inline-block;
      color: #ffffff;
      opacity: 0.80;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px; }
      .page-title-section ul li:last-child {
        /* color: #61CE70; */
        opacity: 0.70;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px; }
        .page-title-section ul li:last-child a {
          color: #ffffff;
          opacity: 0.70;
          font-size: 15px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1px; }
        .page-title-section ul li:last-child:after {
          content: none; }
      /* .page-title-section ul li:after {
        content: "";
        font-weight: 700;
        vertical-align: middle;
        background-color: #fff;
        width: 10px;
        padding: 0 5px 0 10px;
        height: 2px;
        display: inline-block;
        margin: 0 15px; } */
      .page-title-section ul li a {
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px; }
  .page-title-section .active a {
    color: #fff; }
  .page-title-section li.active:last-child a {
    color: #fff; }

@media screen and (max-width: 1199px) {
  .page-title-section {
    padding: 180px 0 80px 0; }
    .page-title-section h1 {
      font-size: 60px;
      margin-bottom: 10px; } }
@media screen and (max-width: 991px) {
  .page-title-section {
    padding: 160px 0 80px 0; }
    .page-title-section h1 {
      font-size: 54px; } }
@media screen and (max-width: 575px) {
  .page-title-section {
    padding: 140px 0 70px 0; }
    .page-title-section h1 {
      font-size: 42px; } }
/*==============================
 *    Story video
 *    ================================ */
.height-400 {
  height: 400px; }

/*==============================
 *    Card styles
 *    ================================ */
/* card-style01 */
.card-style01 {
  border: none;
  border-radius: 0.375rem;
  height: 100%;
  box-shadow: 0px 3px 10px 0px rgba(41, 45, 194, 0.08); }
  .card-style01 .blog-img img {
    will-change: transform;
    -webkit-transition: -webkit-transform .3s ease;
    -ms-transition: -ms-transform .3s ease;
    transition: transform .3s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: scale(1.01, 1.01);
    -ms-transform: scale(1.01, 1.01);
    transform: scale(1.01, 1.01); }
  .card-style01:hover .blog-img img {
    -webkit-transform: scale(1.07, 1.07);
    -ms-transform: scale(1.07, 1.07);
    transform: scale(1.07, 1.07); }
  .card-style01:active .blog-img img {
    -webkit-transform: scale(1.07, 1.07);
    -ms-transform: scale(1.07, 1.07);
    transform: scale(1.07, 1.07); }
  .card-style01:focus .blog-img img {
    -webkit-transform: scale(1.07, 1.07);
    -ms-transform: scale(1.07, 1.07);
    transform: scale(1.07, 1.07); }
  .card-style01 .post-date {
    position: absolute;
    right: 30px;
    top: -42px;
    background: #61CE70;
    color: #fff;
    border-radius: 3px;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    padding: 14px 15px;
    min-width: 78px; }
    .card-style01 .post-date .month {
      font-size: 12px;
      text-transform: uppercase; }
  .card-style01 .text-uppercase.display-31 a {
    margin-right: 15px;
    margin-top: 5px;
    display: inline-block;
    vertical-align: top; }
  .card-style01 .blog-tag:before {
    content: "";
    margin: 0 0.75em;
    width: 3px;
    height: 3px;
    background-color: #8E919D;
    top: 50%;
    transform: translateY(-50%);
    left: -30%;
    display: inline-block;
    position: absolute;
    border-radius: 50%; }
  .card-style01 > .card-body:nth-child(1) .post-date {
    display: none; }

/*card-style02*/
.card-style02 {
  border: none;
  background-color: transparent; }
  .card-style02 .card-body {
    padding: 0; }
    .card-style02 .card-body .card-img-text a {
      display: inline-block;
      font-size: 12px;
      background: #61CE70;
      color: #fff;
      border-radius: 100px;
      padding: 8px 16px;
      transition: all 0.2s ease-in-out 0s;
      text-transform: uppercase;
      line-height: 1;
      margin: 2px; }
      .card-style02 .card-body .card-img-text a:hover {
        background: #006D77;
        color: #fff; }
      .card-style02 .card-body .card-img-text a:active {
        background: #006D77;
        color: #fff; }
      .card-style02 .card-body .card-img-text a:focus {
        background: #006D77;
        color: #fff; }
    .card-style02 .card-body .card-text .card-line {
      position: relative; }
      .card-style02 .card-body .card-text .card-line span::before {
        content: "";
        position: absolute;
        left: 10%;
        top: 50%;
        background-color: #61CE70;
        width: 20px;
        height: 1px;
        transform: translateY(-50%); }

/*.card-style03*/
.card-style03 {
  border: 0; }
  .card-style03 .card-body {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    align-items: end;
    z-index: 2; }
  .card-style03 .team-butn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 100%;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    z-index: 2; }
    .card-style03 .team-butn i {
      color: #fff;
      transition: all 0.3s ease-in-out; }
  .card-style03:after {
    content: "";
    position: absolute;
    border-radius: 10px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 24, 38, 0) 30%, #006D77 100%);
    z-index: 1; }
  .card-style03:hover .team-butn {
    background-color: #61CE70;
    transition: all 0.3s ease-in-out; }

/*card-style04*/
.card-style04 {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.35s ease-in-out 0s;
  transition: all 0.35s ease-in-out 0s; }
  .card-style04 .team-img {
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s; }
    .card-style04 .team-img img {
      position: relative;
      overflow: hidden;
      -webkit-transition: all 0.35s ease-in-out 0s;
      transition: all 0.35s ease-in-out 0s;
      border-radius: 0.375rem;
      width: 100%; }
    .card-style04 .team-img:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(0deg, rgba(0, 109, 119, 0.9) 0%, transparent 30%);
      -webkit-transition: all 0.35s ease-in-out 0s;
      transition: all 0.35s ease-in-out 0s;
      backface-visibility: hidden;
      will-change: transform;
      z-index: 1;
      margin: auto; }
  .card-style04 .card-body {
    align-content: end;
    color: #fff;
    padding: 30px;
    z-index: 2;
    position: absolute;
    bottom: -50px;
    width: 100%;
    overflow: hidden;
    -webkit-transition: 375ms cubic-bezier(0.7, 0, 0.3, 1), transform 375ms ease;
    transition: 375ms cubic-bezier(0.7, 0, 0.3, 1), transform 375ms ease; }
    .card-style04 .card-body .team-icon {
      display: flex;
      align-items: center;
      justify-content: inherit;
      gap: 10px;
      padding: 0;
      list-style: none;
      margin: 0; }
      .card-style04 .card-body .team-icon li {
        display: block;
        overflow: hidden;
        position: relative;
        transform: translateY(50px);
        opacity: 0;
        -webkit-transition: 375ms cubic-bezier(0.7, 0, 0.3, 1), transform 375ms ease;
        transition: 375ms cubic-bezier(0.7, 0, 0.3, 1), transform 375ms ease; }
        .card-style04 .card-body .team-icon li a {
          width: 35px;
          height: 35px;
          font-size: 16px;
          background-color: #61CE70;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          -webkit-transition: 375ms cubic-bezier(0.7, 0, 0.3, 1), transform 375ms ease;
          transition: 375ms cubic-bezier(0.7, 0, 0.3, 1), transform 375ms ease;
          -webkit-border-radius: 0.375rem;
          border-radius: 0.375rem;
          overflow: hidden;
          position: relative; }
        .card-style04 .card-body .team-icon li:nth-child(1) {
          transition-delay: 0ms; }
        .card-style04 .card-body .team-icon li:nth-child(2) {
          transition-delay: 100ms; }
        .card-style04 .card-body .team-icon li:nth-child(3) {
          transition-delay: 200ms; }
        .card-style04 .card-body .team-icon li:nth-child(4) {
          transition-delay: 300ms; }
  .card-style04 .banner-text {
    width: 200px;
    height: 200px;
    color: #000;
    font-weight: 600;
    position: relative;
    border-radius: 50%;
    background: transparent;
    margin: auto; }
    .card-style04 .banner-text .coloring {
      fill: #000;
      text-transform: uppercase;
      word-spacing: 17px; }
    .card-style04 .banner-text svg {
      -webkit-animation: rotated_circle 12s linear infinite;
      animation: rotated_circle 12s linear infinite; }
    .card-style04 .banner-text .banner-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center; }
  .card-style04:hover .team-img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  .card-style04:hover .team-img:before {
    -webkit-transform: translateY(0);
    transform: scaleY(2);
    transform-origin: bottom;
    opacity: 1; }
  .card-style04:hover .card-body {
    bottom: 0; }
    .card-style04:hover .card-body .team-icon li {
      transform: translateY(0px);
      opacity: 1; }

/*==============================
 *    Pagination
 *    ================================ */
/*pagination*/
.pagination {
  border-radius: 0; }
  .pagination ul {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin: 0 auto;
    padding: 0; }
  .pagination li {
    display: inline; }
    .pagination li:first-child a {
      border-left-width: 1px; }
  .pagination a {
    float: left;
    padding: 0 16px;
    line-height: 40px;
    text-decoration: none;
    border: 1px solid #dbdbdb;
    border-left-width: 0;
    background: #fff; }
    .pagination a:hover {
      background-color: #006D77;
      color: #fff; }
  .pagination .active a {
    background-color: #f7f7f7;
    color: #999;
    cursor: default; }
  .pagination .disabled span {
    color: #999;
    background-color: transparent;
    cursor: default; }
  .pagination .disabled a {
    color: #999;
    background-color: transparent;
    cursor: default; }
    .pagination .disabled a:hover {
      color: #999;
      background-color: transparent;
      cursor: default; }

.page-item:not(:first-child) .page-link {
  margin-left: 0; }

/* pagination-style01 */
.pagination-style01 {
  margin-top: 4%;
  width: 100%;
  display: flex;
  justify-content: center; }
  .pagination-style01 ul {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 0;
    padding-left: 0; }
    .pagination-style01 ul li {
      list-style: none; }
      .pagination-style01 ul li a {
        border: 0;
        padding: 0 2px;
        margin: 0 7px;
        background: 0 0;
        color: #828282;
        min-width: 45px;
        font-size: inherit;
        text-align: center;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        line-height: 45px;
        min-height: 45px;
        display: block;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
        .pagination-style01 ul li a i {
          line-height: 40px;
          font-size: 18px;
          display: inline-block; }
        .pagination-style01 ul li a:hover {
          background: #fff;
          color: #006D77;
          box-shadow: 0 0 10px rgba(23, 23, 23, 0.15) !important; }
    .pagination-style01 ul li.active a {
      background: #006D77;
      color: #fff;
      box-shadow: 0 0 10px rgba(23, 23, 23, 0.15) !important; }

@media screen and (max-width: 575px) {
  .pagination-style01 ul {
    margin-top: 10px; }
    .pagination-style01 ul li a {
      min-width: 40px;
      min-height: 40px;
      line-height: 40px;
      margin: 0 4px; } }
/*==============================
*    Tabs
*    ================================ */
/* vertical tabs */
/* accordion styles */
ul.resp-tabs-list {
  margin: 0px;
  padding: 0px; }

.resp-tabs-list li {
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  padding: 13px 15px;
  margin: 0 4px 0 0;
  list-style: none;
  cursor: pointer; }
  .resp-tabs-list li:last-child {
    margin-right: 0; }
  .resp-tabs-list li i {
    font-size: 20px;
    padding-right: 5px;
    vertical-align: text-bottom; }
.resp-tabs-list li.resp-tab-active {
  border: 1px solid #006D77;
  border-bottom: none;
  border-color: #006D77 !important;
  margin-bottom: -1px;
  padding: 12px 14px 14px 14px;
  border-top: 4px solid #006D77 !important;
  border-bottom: 0px #fff solid;
  border-bottom: none;
  background-color: #fff;
  color: #006D77; }

.resp-tabs-container {
  padding: 0px;
  background-color: #fff;
  clear: left; }

.resp-tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #c1c1c1;
  border-top-color: #c1c1c1;
  float: left;
  width: 100%; }

.resp-content-active {
  display: block; }

.resp-accordion-active {
  display: block; }

h2.resp-accordion {
  cursor: pointer;
  display: none;
  font-size: 14px;
  border: 1px solid #c1c1c1;
  border-top: 0px solid #c1c1c1;
  margin: 0px;
  padding: 14px 15px;
  float: left;
  width: 100%; }
  h2.resp-accordion:first-child {
    border-top: 1px solid #c1c1c1; }

h2.resp-tab-active {
  border-bottom: 0px solid #c1c1c1 !important;
  background-color: #006D77 !important;
  color: #fff; }
  h2.resp-tab-active span.resp-arrow {
    border-color: #fff transparent transparent #fff;
    border-style: solid;
    border-width: 1px 0 0 1px;
    float: right;
    display: block;
    height: 8px;
    transform: rotate(45deg);
    width: 8px;
    margin-top: 7px; }

h2.resp-tab-title:last-child {
  border-bottom: 12px solid #c1c1c1 !important;
  background: blue; }

.resp-vtabs ul.resp-tabs-list {
  float: left;
  width: 30%;
  margin-top: 0; }
.resp-vtabs .resp-tabs-list li {
  display: block;
  padding: 15px 15px !important;
  margin: 0 0 4px;
  cursor: pointer;
  float: none; }
.resp-vtabs .resp-tabs-container {
  padding: 0px;
  background-color: #fff;
  border: 1px solid #006D77 !important;
  float: left;
  width: 70%;
  min-height: 250px;
  clear: none; }
.resp-vtabs .resp-tab-content {
  border: none;
  word-wrap: break-word; }
.resp-vtabs li.resp-tab-active {
  position: relative;
  z-index: 1;
  margin-right: -1px !important;
  padding: 14px 15px 15px 11px !important;
  border-top: 1px solid;
  border: 1px solid #006D77 !important;
  border-left: 4px solid #006D77 !important;
  margin-bottom: 4px !important;
  border-right: 1px #FFF solid !important; }

.resp-arrow {
  border-color: transparent #1e2022 #1e2022 transparent;
  border-style: solid;
  border-width: 0 1px 1px 0;
  float: right;
  display: block;
  height: 8px;
  transform: rotate(45deg);
  width: 8px;
  margin-top: 4px; }

.resp-easy-accordion h2.resp-accordion {
  display: block; }
.resp-easy-accordion .resp-tab-content {
  border: 1px solid #c1c1c1; }
  .resp-easy-accordion .resp-tab-content:last-child {
    border-bottom: 1px solid #c1c1c1; }

.resp-jfit {
  width: 100%;
  margin: 0px; }

.resp-tab-content-active {
  display: block;
  border-color: #006D77 !important; }

h2.resp-accordion.resp-tab-active {
  border-color: #006D77 !important; }

@media only screen and (max-width: 991px) {
  ul.resp-tabs-list {
    display: none; }

  h2.resp-accordion {
    display: block; }
    h2.resp-accordion i {
      margin-right: 8px;
      font-size: 18px; }

  .resp-vtabs .resp-tab-content {
    border: 1px solid #C1C1C1; }
    .resp-vtabs .resp-tab-content:last-child {
      border-bottom: 1px solid #c1c1c1 !important; }
  .resp-vtabs .resp-tabs-container {
    border: none !important;
    float: none;
    width: 100%;
    min-height: 100px;
    clear: none; }

  .resp-accordion-closed {
    display: none !important; }

  .resp-tab-content {
    background-color: #fff; } }
/*==============================
 *    Owl carousel
 *    ================================ */
/* owl-carousel */
.owl-thumbs {
  z-index: 9;
  position: relative;
  border: none; }
  .owl-thumbs button {
    border: 0;
    background: transparent; }
  .owl-thumbs img {
    opacity: 1; }

.owl-thumbs.active img {
  opacity: 1; }

.owl-carousel .owl-item img {
  width: auto;
  display: inline-block; }
.owl-carousel .owl-nav.disabled + .owl-dots {
  margin-top: 10px; }
.owl-carousel .owl-dots {
  margin-top: 20px;
  text-align: center;
  -webkit-tap-highlight-color: transparent; }
  .owl-carousel .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1; }
    .owl-carousel .owl-dots .owl-dot span {
      width: 10px;
      height: 10px;
      margin: 5px 7px;
      background: #D6D6D6;
      display: block;
      -webkit-backface-visibility: visible;
      transition: opacity 200ms ease;
      border-radius: 30px; }
    .owl-carousel .owl-dots .owl-dot:hover span {
      background: #61CE70; }
  .owl-carousel .owl-dots .owl-dot.active span {
    background: #61CE70; }

/*service-carousel-one*/
.service-carousel-one.owl-theme .owl-nav {
  margin-top: 28px; }
  .service-carousel-one.owl-theme .owl-nav [class*='owl-']:hover {
    background-color: #fff;
    color: rgba(255, 255, 255, 0.6); }

.service-carousel-one.owl-carousel .owl-nav button.owl-prev {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: #61CE70;
  border-radius: 50%;
  line-height: 50px;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  color: #FFF;
  margin-left: 0; }
  .service-carousel-one.owl-carousel .owl-nav button.owl-prev i {
    font-size: 14px; }
  .service-carousel-one.owl-carousel .owl-nav button.owl-prev:hover {
    color: #61CE70; }
.service-carousel-one.owl-carousel .owl-nav button.owl-next {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: #61CE70;
  border-radius: 50%;
  line-height: 50px;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  color: #FFF;
  margin-right: 0; }
  .service-carousel-one.owl-carousel .owl-nav button.owl-next i {
    font-size: 14px; }
  .service-carousel-one.owl-carousel .owl-nav button.owl-next:hover {
    color: #61CE70; }

/* testimonial-carousel-one */
.testimonial-carousel-one.center .owl-nav {
  text-align: center; }

.testimonial-carousel-one .owl-nav {
  margin-top: 32px;
  text-align: left; }
  .testimonial-carousel-one .owl-nav i {
    font-size: 28px;
    color: #fff; }
  .testimonial-carousel-one .owl-nav span {
    font-size: 28px;
    color: #fff; }
  .testimonial-carousel-one .owl-nav [class*='owl-'] {
    width: 40px;
    height: 40px;
    color: #191919; }
    .testimonial-carousel-one .owl-nav [class*='owl-']:hover {
      background: unset;
      color: #61CE70; }
  .testimonial-carousel-one .owl-nav .owl-prev {
    margin-right: 30px;
    position: relative; }
    .testimonial-carousel-one .owl-nav .owl-prev:before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: #61CE70;
      position: absolute;
      right: -20px;
      top: 15px;
      border-radius: 50%; }
.testimonial-carousel-one .testimonial-carousel-quote:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -1px;
  width: 30px;
  height: 30px;
  line-height: 32px;
  overflow: hidden;
  font-size: 7px;
  font-weight: 400;
  text-align: center;
  text-indent: 1px;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff; }
.testimonial-carousel-one .testimonial-carousel-quote img {
  max-width: 20px !important;
  position: absolute;
  bottom: 5px;
  right: 3px;
  z-index: 9; }

.testimonial-carousel-one.owl-carousel .owl-dots {
  position: absolute;
  margin-top: 0;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  top: 33%;
  right: -61px;
  transform: translate(10px, 10px);
  transform: rotateZ(90deg); }

@media screen and (max-width: 1399px) {
  .testimonial-carousel-one.owl-carousel .owl-dots {
    top: 13%;
    right: -11px; } }
@media screen and (max-width: 1199px) {
  .testimonial-carousel-one.owl-carousel .owl-dots {
    right: -44px; } }
@media screen and (max-width: 575px) {
  .testimonial-carousel-one.owl-carousel .owl-dots {
    right: -29px; } }
/*testimonial-carousel-two*/
.testimonial-carousel-two .owl-nav {
  text-align: start; }

.testimonial-carousel-two.owl-carousel .owl-nav button.owl-prev {
  height: 56px;
  width: 56px;
  display: inline-flex;
  justify-content: center;
  border-radius: 100%;
  position: relative;
  bottom: inherit;
  left: 0;
  top: inherit;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: .3s;
  transition: .3s;
  border: 1px solid #e4e4e4; }
  .testimonial-carousel-two.owl-carousel .owl-nav button.owl-prev i {
    font-size: 18px;
    -webkit-transition: .3s;
    transition: .3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0c3344; }
  .testimonial-carousel-two.owl-carousel .owl-nav button.owl-prev:hover i {
    opacity: 0.4; }
.testimonial-carousel-two.owl-carousel .owl-nav button.owl-next {
  height: 56px;
  width: 56px;
  display: inline-flex;
  justify-content: center;
  border-radius: 100%;
  position: relative;
  bottom: inherit;
  left: 0;
  top: inherit;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: .3s;
  transition: .3s;
  border: 1px solid #e4e4e4; }
  .testimonial-carousel-two.owl-carousel .owl-nav button.owl-next i {
    font-size: 18px;
    -webkit-transition: .3s;
    transition: .3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0c3344; }
  .testimonial-carousel-two.owl-carousel .owl-nav button.owl-next:hover i {
    opacity: 0.4; }

.testimonial-carousel-two.owl-theme .owl-nav [class*='owl-']:hover {
  background: transparent; }

/* portfolio-carousel-one */
.portfolio-carousel-one.owl-theme .owl-dots {
  text-align: left; }
.portfolio-carousel-one.owl-theme .owl-nav {
  text-align: left;
  margin-top: 60px; }
  .portfolio-carousel-one.owl-theme .owl-nav button {
    width: 60px;
    height: 60px;
    line-height: 65px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0;
    margin-left: 0;
    border-radius: 6px; }
  .portfolio-carousel-one.owl-theme .owl-nav button.owl-next {
    margin-right: 0; }
  .portfolio-carousel-one.owl-theme .owl-nav i {
    padding-top: 0;
    color: #fff; }
  .portfolio-carousel-one.owl-theme .owl-nav [class*='owl-']:hover {
    background: #61CE70;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    .portfolio-carousel-one.owl-theme .owl-nav [class*='owl-']:hover i {
      color: #fff; }

@media screen and (max-width: 991px) {
  .portfolio-carousel-one.owl-theme .owl-nav button {
    width: 50px;
    height: 50px;
    line-height: 55px; } }
/*==============================
 *    Accordion styles
 *    ================================ */
/*accordion-style*/
.accordion-style .card {
  background: transparent;
  box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.03);
  border: none;
  margin-top: 0 !important;
  border-radius: 0.3rem; }
  .accordion-style .card:hover {
    background: #fff; }
    .accordion-style .card:hover .btn-link.collapsed {
      color: #006D77; }
      .accordion-style .card:hover .btn-link.collapsed:after {
        color: #fff;
        background-color: #006D77; }
.accordion-style .card-header {
  border: 0px;
  padding: 0;
  border-bottom: none;
  background: none; }
.accordion-style .btn-link {
  color: #006D77;
  line-height: 26px;
  position: relative;
  border: 1px solid transparent;
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 20px 55px 20px 30px;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  background-color: #ffffff; }
  .accordion-style .btn-link:active, .accordion-style .btn-link:focus {
    text-decoration: none;
    color: #006D77;
    background-color: #fff; }
  .accordion-style .btn-link:after {
    content: "-";
    right: 26px;
    left: inherit;
    font-size: 20px;
    transform: none;
    top: 20px;
    position: absolute;
    color: #fff;
    background-color: #006D77;
    border-radius: .3rem;
    line-height: 22px;
    width: 25px;
    height: 25px;
    text-align: center; }
.accordion-style .btn-link.collapsed {
  color: #fff;
  line-height: 26px;
  position: relative;
  border: none;
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  padding: 20px 55px 20px 30px;
  font-weight: 700;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 0.3rem; }
  .accordion-style .btn-link.collapsed:after {
    content: "+";
    right: 25px;
    left: inherit;
    font-size: 20px;
    transform: none;
    top: 19px;
    position: absolute;
    background-color: #fff;
    border-radius: .3rem;
    line-height: 25px;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #006D77; }
.accordion-style .card-body {
  padding: 0px 55px 25px 30px;
  line-height: 24px;
  text-align: left;
  border: none;
  border-left: none;
  background: #fff;
  border-top: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem; }

@media screen and (max-width: 991px) {
  .accordion-style .card-body {
    padding: 10px 25px 30px 25px; } }
/*accordion-style*/
.accordion .card {
  background: transparent;
  box-shadow: none;
  margin-bottom: 20px;
  border: 0;
  border-radius: 0; }
  .accordion .card:last-child {
    margin-bottom: 0; }
.accordion .card-header {
  border: 0;
  padding: 0;
  background: none; }
.accordion .accordion-collapse {
  border: none; }
.accordion .accordion-button {
  border-bottom: none;
  color: #fff;
  font-size: 18px;
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  box-shadow: none;
  font-weight: 500;
  padding: 16px 64px 16px 20px;
  text-decoration: none;
  background: #006D77;
  border: 1px solid transparent;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px; }
  .accordion .accordion-button:hover {
    text-decoration: none; }
  .accordion .accordion-button:after {
    background: #fff;
    border: none;
    content: "-";
    right: 20px;
    border-radius: 5px;
    left: inherit;
    font-size: 18px;
    border: 1px solid #fff;
    transform: none;
    width: 25px;
    height: 25px;
    line-height: 21px;
    top: 14px;
    position: absolute;
    color: #61CE70;
    text-align: center; }
.accordion .accordion-button.collapsed {
  background: #fff;
  color: #575a7b;
  border: 1px solid #cdd2cf;
  border-radius: 5px; }
  .accordion .accordion-button.collapsed:after {
    background: #006D77;
    border: none;
    content: "+";
    right: 20px;
    left: inherit;
    font-size: 18px;
    transform: none;
    width: 25px;
    height: 25px;
    line-height: 20px;
    top: 14px;
    border-radius: 5px;
    text-align: center;
    color: #fff; }
.accordion .card-body {
  color: #575a7b;
  font-size: 16px;
  padding: 20px 25px;
  line-height: 28px;
  text-align: left;
  border-top: 0;
  border-bottom: 1px solid #cdd2cf;
  border-left: 1px solid #cdd2cf;
  border-right: 1px solid #cdd2cf;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px; }

@media screen and (max-width: 991px) {
  .accordion .accordion-button {
    padding: 15px 50px 15px 15px;
    font-size: 16px; }
    .accordion .accordion-button:after {
      right: 15px;
      font-size: 16px;
      height: 22px;
      line-height: 18px;
      width: 22px;
      top: 13px; }
  .accordion .accordion-button.collapsed:after {
    right: 15px;
    font-size: 16px;
    height: 22px;
    line-height: 18px;
    width: 22px;
    top: 13px; }
  .accordion .card-body {
    padding: 20px 15px; } }
@media screen and (max-width: 575px) {
  .accordion .accordion-button {
    padding: 15px 50px 15px 15px; } }
/* accordion.style01 */
.accordion.style01 .card {
  background-color: transparent;
  margin-bottom: 30px; }
  .accordion.style01 .card:last-child {
    margin-bottom: 0; }
.accordion.style01 .card-header {
  padding: 0;
  border-radius: 0;
  border: 0;
  background-color: transparent; }
.accordion.style01 .accordion-button {
  background-color: transparent;
  color: #fff;
  padding: 21px 52px 21px 21px;
  font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
  display: flex; }
  .accordion.style01 .accordion-button:focus {
    box-shadow: none; }
  .accordion.style01 .accordion-button::after {
    content: "\e71d";
    font-family: 'themify';
    margin-left: unset;
    position: absolute;
    right: 21px;
    top: 22px;
    font-size: 17px;
    font-weight: 500;
    transform: unset;
    background: radial-gradient(#006D77, transparent);
    border: none;
    color: #fff; }
.accordion.style01 .card-body {
  background-color: rgba(255, 255, 255, 0.02);
  padding: 30px;
  color: rgba(255, 255, 255, 0.7);
  border: none; }
.accordion.style01 .accordion-button.collapsed::after {
  content: "\e71a";
  font-family: 'themify';
  margin-left: unset;
  position: absolute;
  right: 21px;
  top: 22px;
  font-size: 17px;
  font-weight: 500;
  opacity: 0.3; }

/*==============================
 *    Pages
 *    ================================ */
/*service-sidebar*/
.service-sidebar .contact-icons {
  display: block;
  color: #fff;
  background: #61CE70;
  font-size: 20px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  transition: all .45s ease-out; }

.cetegory li a {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 15px 20px 15px 30px;
  border-radius: 0.375rem;
  color: #fff;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center; }
.cetegory li:hover a {
  background-color: #61CE70;
  color: #fff; }
.cetegory li:focus a {
  background-color: #61CE70;
  color: #fff; }
.cetegory li:active a {
  background-color: #61CE70;
  color: #fff; }
.cetegory li.active a {
  background-color: #61CE70;
  color: #fff; }

.widget {
  margin-bottom: 30px;
  padding: 30px 25px;
  border-radius: 0.375rem;
  position: relative;
  display: block; }
  .widget .widget-brochure {
    margin-bottom: 0;
    padding: 0;
    list-style: none; }
    .widget .widget-brochure li {
      position: relative;
      margin-bottom: 12px;
      display: inline-block;
      width: 100%;
      border-radius: 0.375rem;
      background: rgba(255, 255, 255, 0.1);
      color: #fff; }
      .widget .widget-brochure li a {
        position: relative;
        display: block;
        padding: 16px 15px 16px 75px;
        font-size: 15px;
        font-weight: 600;
        color: #fff; }
        .widget .widget-brochure li a:hover {
          color: #61CE70; }
        .widget .widget-brochure li a i {
          position: absolute;
          left: 0;
          top: 0;
          width: 60px;
          height: 100%;
          line-height: 3;
          text-align: center;
          font-size: 20px;
          background: #61CE70;
          color: #ffffff;
          border-top-left-radius: 0.375rem;
          border-bottom-left-radius: 0.375rem; }
  .widget:last-child {
    margin-bottom: 0; }

.banner-wrapper .icon-boxs {
  position: absolute;
  top: -43px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center; }
.banner-wrapper img {
  margin-top: 0;
  clip-path: polygon(0 0, 100% 0, 102% 87%, 0% 100%);
  width: 100%; }

.sidebar .banner-wrapper .icon-boxs i {
  line-height: 80px; }

@media screen and (max-width: 767px) {
  .service-sidebar .widget {
    padding: 25px 20px; } }
/* blog-sidebar */
.blog-sidebar .input-group-append .btn-style01 {
  padding: 14px 30px !important;
  color: #212529 !important; }
  .blog-sidebar .input-group-append .btn-style01:before {
    background-color: #fff; }
.blog-sidebar .widget {
  padding: 30px 25px;
  border-radius: 0.375rem;
  position: relative;
  display: block; }
  .blog-sidebar .widget .widget-content {
    position: relative; }
  .blog-sidebar .widget .category-list li {
    margin-bottom: 0.5rem; }
    .blog-sidebar .widget .category-list li:last-child {
      margin-bottom: 0px; }
    .blog-sidebar .widget .category-list li a {
      background: rgba(255, 255, 255, 0.1);
      padding: 14px 20px 14px 28px;
      padding: 15px 20px 15px 30px;
      border-radius: 0.375rem;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff; }
      .blog-sidebar .widget .category-list li a span {
        z-index: 9;
        position: relative; }
      .blog-sidebar .widget .category-list li a:after {
        content: "\e649";
        font-family: 'themify';
        font-size: 12px;
        font-weight: bold;
        margin-left: -10px; }
      .blog-sidebar .widget .category-list li a:hover {
        background: white;
        color: #191919; }
      .blog-sidebar .widget .category-list li a:active {
        background: white;
        color: #191919; }
      .blog-sidebar .widget .category-list li a:focus {
        background: white;
        color: #191919; }
    .blog-sidebar .widget .category-list li:hover a:after {
      margin-left: 10px;
      opacity: 1;
      transition: all 0.3s ease-in-out; }
  .blog-sidebar .widget .category-list li.active a:after {
    margin-left: 10px;
    opacity: 1;
    transition: all 0.3s ease-in-out; }
.blog-sidebar .blog-tags a {
  background-color: #61CE70;
  padding: 7px 12px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  margin: 0.6rem 5px 0 0;
  display: inline-block;
  vertical-align: top;
  border: 1px solid #61CE70;
  border-radius: 3px; }
  .blog-sidebar .blog-tags a:hover {
    background-color: #fff;
    color: #61CE70; }
  .blog-sidebar .blog-tags a:active {
    background-color: #fff;
    color: #61CE70; }
  .blog-sidebar .blog-tags a:focus {
    background-color: #fff;
    color: #61CE70; }

.blog-tags a {
  background-color: #61CE70;
  padding: 7px 12px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  margin: 0.6rem 5px 0 0;
  display: inline-block;
  vertical-align: top;
  border: 1px solid #61CE70;
  border-radius: 3px; }
  .blog-tags a:hover {
    background-color: #fff;
    color: #61CE70; }
  .blog-tags a:active {
    background-color: #fff;
    color: #61CE70; }
  .blog-tags a:focus {
    background-color: #fff;
    color: #61CE70; }

.comment-reply-link {
  color: #191919;
  background: rgba(25, 25, 25, 0.1);
  padding: 5px 18px;
  font-weight: 500;
  border-radius: 4px;
  font-size: 14px; }
  .comment-reply-link:hover {
    color: #fff;
    background: #191919; }
  .comment-reply-link:active {
    color: #fff;
    background: #191919; }
  .comment-reply-link:focus {
    color: #fff;
    background: #191919; }

/*blog-detail leftbar*/
.blogs .posts-wrapper .meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 30px;
  padding-left: 0;
  padding-bottom: 10px;
  position: relative;
  font-weight: 600; }
  .blogs .posts-wrapper .meta-list:before {
    background: #cdd2cf;
    bottom: -1px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%; }
  .blogs .posts-wrapper .meta-list li {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    color: #777;
    margin-right: 20px; }
.blogs .posts-wrapper .post-content-details {
  padding: 1.75rem; }
.blogs .posts-wrapper .blog-detail-list {
  padding-left: 0;
  list-style: none;
  margin: 0; }
  .blogs .posts-wrapper .blog-detail-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px;
    text-transform: capitalize;
    font-size: 16px; }
    .blogs .posts-wrapper .blog-detail-list li:after {
      content: '\f0a9';
      font-family: Font Awesome\ 5 Free;
      position: absolute;
      left: 0px;
      top: 1px;
      z-index: 1;
      font-weight: 600;
      color: #61CE70; }
.blogs .posts-wrapper .share-post {
  text-align: right;
  padding-left: 10px; }
  .blogs .posts-wrapper .share-post ul li {
    display: inline-block;
    margin: 0 0 0 10px; }

@media screen and (max-width: 991px) {
  .blogs .posts-wrapper .meta-list {
    margin: 0 0 15px;
    padding-bottom: 15px; } }
@media screen and (max-width: 767px) {
  .blogs .posts-wrapper .blog-detail-list li {
    font-size: 14.4px; }
  .blogs .posts-wrapper .share-post {
    text-align: unset; }
    .blogs .posts-wrapper .share-post ul li {
      font-size: 15px;
      margin: 0 8px; }
  .blogs .posts-wrapper .meta-list li {
    margin-right: 15px; }
  .blogs .posts-wrapper .separator {
    margin-top: 20px; } }
/* blog tags*/
.blog-tags {
  margin-bottom: 0;
  padding-left: 0; }
  .blog-tags li {
    display: inline-block;
    list-style: none; }
    .blog-tags li a {
      font-size: 14px;
      display: inline-block;
      font-weight: 600;
      text-transform: capitalize;
      padding: 3px 8px;
      margin: 4px 4px 4px 0;
      border: 1px solid #cdd2cf;
      line-height: 30px;
      border-radius: 4px; }
      .blog-tags li a:hover {
        background: #61CE70;
        color: #ffffff;
        border: 1px solid #61CE70;
        color: #fff; }

@media screen and (max-width: 991px) {
  .widget-title {
    font-size: 18px;
    margin-bottom: 25px; } }
@media screen and (max-width: 767px) {
  .side-bar .widget {
    margin-bottom: 25px; } }
@media screen and (max-width: 575px) {
  .side-bar .widget {
    padding: 20px; } }
/*404 page*/
.error-wrapper {
  text-align: center; }
  .error-wrapper h1 {
    font-size: 250px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
    color: transparent;
    letter-spacing: 30px;
    -webkit-text-stroke: 2px #006D77; }

@media screen and (max-width: 1199px) {
  .error-wrapper h1 {
    font-size: 220px; } }
@media screen and (max-width: 991px) {
  .error-wrapper h1 {
    font-size: 200px; } }
@media screen and (max-width: 767px) {
  .error-wrapper h1 {
    font-size: 180px;
    letter-spacing: 20px; } }
@media screen and (max-width: 575px) {
  .error-wrapper h1 {
    font-size: 130px;
    letter-spacing: 10px; } }
/* animation */
.ani-left-right {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: LeftRight;
  animation-timing-function: ease-in-out; }

@keyframes LeftRight {
  0% {
    transform: translate(0px, 0px); }
  65% {
    transform: translate(30px, 0); }
  100% {
    transform: translate(0px, 0px); } }
.ani-top-bottom {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: TopBottom;
  animation-timing-function: ease-in-out; }

@keyframes TopBottom {
  0% {
    transform: translate(0px, 0px); }
  65% {
    transform: translate(0, 30px); }
  100% {
    transform: translate(0px, 0px); } }
/* coming soon page */
.countdown {
  padding: 0; }
  .countdown li {
    background: transparent;
    border-top: 1px solid rgba(0, 109, 119, 0.2);
    display: inline-block;
    min-width: 220px;
    overflow: hidden;
    margin-right: 40px;
    position: relative; }
    .countdown li:last-child {
      margin-right: 0; }
    .countdown li span {
      font-size: 100px;
      font-weight: 600;
      text-align: center;
      line-height: 1;
      position: relative; }
    .countdown li p.timeRefWeeks {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
      z-index: 2;
      position: relative;
      padding-top: 26px;
      text-transform: capitalize; }
    .countdown li p.timeRefDays {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
      z-index: 2;
      position: relative;
      padding-top: 26px;
      text-transform: capitalize; }
    .countdown li p.timeRefHours {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
      z-index: 2;
      position: relative;
      padding-top: 26px;
      text-transform: capitalize; }
    .countdown li p.timeRefMinutes {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
      z-index: 2;
      position: relative;
      padding-top: 26px;
      text-transform: capitalize; }
    .countdown li p.timeRefSeconds {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
      z-index: 2;
      position: relative;
      padding-top: 26px;
      text-transform: capitalize; }

.countdown-box h2 {
  font-size: 70px; }

@media screen and (max-width: 1599px) {
  .countdown li {
    min-width: 240px;
    margin-bottom: 50px;
    margin-right: 50px; } }
@media screen and (max-width: 1399px) {
  .countdown li {
    min-width: 180px;
    margin-right: 30px; }
    .countdown li span {
      font-size: 80px; } }
@media screen and (max-width: 1199px) {
  .countdown-box h2 {
    font-size: 50px; } }
@media screen and (max-width: 991px) {
  .countdown li {
    min-width: 155px;
    margin-right: 20px; }
    .countdown li span {
      font-size: 65px; }

  .countdown-box h2 {
    font-size: 40px; } }
@media screen and (max-width: 767px) {
  .countdown li {
    min-width: 130px;
    margin-right: 15px;
    margin-bottom: 20px; }
    .countdown li span {
      font-size: 58px; }
    .countdown li p.timeRefWeeks {
      font-size: 12px;
      padding-top: 15px; }
    .countdown li p.timeRefDays {
      font-size: 12px;
      padding-top: 15px; }
    .countdown li p.timeRefHours {
      font-size: 12px;
      padding-top: 15px; }
    .countdown li p.timeRefMinutes {
      font-size: 12px;
      padding-top: 15px; }
    .countdown li p.timeRefSeconds {
      font-size: 12px;
      padding-top: 15px; } }
@media screen and (max-width: 575px) {
  .countdown-box h2 {
    font-size: 30px; }

  .countdown li {
    min-width: 130px;
    margin-right: 8px;
    margin-bottom: 20px;
    margin-left: 8px; } }
/* social-icon */
.social-icon {
  margin-bottom: 0;
  list-style: none;
  padding: 0; }
  .social-icon li {
    display: inline-block;
    margin-right: 5px; }
    .social-icon li a {
      text-align: center;
      height: 35px;
      width: 35px;
      line-height: 35px;
      font-size: 14px;
      border-radius: 5px;
      display: inline-block;
      background: #61CE70;
      color: #ffffff; }
      .social-icon li a:hover {
        background-color: #006D77; }
    .social-icon li:last-child {
      margin-right: 0; }

/* map */
.contact-map {
  width: 100%;
  height: 400px;
  vertical-align: top;
  border: 0; }

/* popup gallery */
.lg-backdrop {
  z-index: 99999; }

.lg-outer {
  z-index: 999999; }
  .lg-outer .lg-thumb-item.active {
    border-color: #61CE70; }
  .lg-outer .lg-thumb-item:hover {
    border-color: #61CE70; }

.lg-progress-bar .lg-progress {
  background-color: #61CE70; }

.lg-backdrop.in {
  opacity: 0.85; }

/*==============================
 *    Portfolio
 *    ================================ */
/* filtering */
.filtering {
  margin-bottom: 40px; }
  .filtering span {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 15px;
    border-radius: 4px;
    background: #006D77;
    color: #ffffff;
    text-transform: uppercase; }
    .filtering span:last-child {
      margin: 0; }
  .filtering .active {
    color: #ffffff;
    background: #61CE70; }

@media screen and (max-width: 575px) {
  .filtering {
    margin-bottom: 30px; }
    .filtering span {
      padding: 6px 8px;
      margin-right: 5px;
      font-size: 13px; } }
/* portfolio-style01 */
.portfolio-style01 .portfolio-msg .portfolio-content {
  margin: 0 70px 0 0;
  padding: 20px 50px 20px 150px;
  background-color: #fff;
  border-radius: 58px;
  position: relative; }
.portfolio-style01 .portfolio-msg .msg-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  background-color: #61CE70;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center; }

/* portfolio-style02 */
.portfolio-style02 .portfolio-img {
  position: relative;
  padding-top: 77%;
  background-color: #006D77;
  border-radius: 6px; }
  .portfolio-style02 .portfolio-img:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: rgba(0, 109, 119, 0.4);
    border-radius: 6px; }
  .portfolio-style02 .portfolio-img img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
    transition: all .3s ease;
    border-radius: 6px; }
.portfolio-style02 .portfolio-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  padding: 26px 60px 30px 40px;
  z-index: 5; }
  .portfolio-style02 .portfolio-content:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(1deg, #61CE70, transparent 100%);
    transition: all ease .35s;
    z-index: -1;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px; }
.portfolio-style02 .portfolio-link {
  color: #fff;
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 20px;
  transition: all ease 0.35s; }
.portfolio-style02 .portfolio-inner {
  overflow: hidden;
  position: relative;
  border-radius: 6px; }
  .portfolio-style02 .portfolio-inner:hover .portfolio-link {
    transform: rotate(45deg); }
  .portfolio-style02 .portfolio-inner:hover .portfolio-content:before {
    height: 100%; }
  .portfolio-style02 .portfolio-inner:hover .portfolio-img img {
    transform: translateY(-30px); }
.portfolio-style02 .portfolio-categories a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4285714286;
  padding: 4px 20px;
  border: 1px solid;
  border-radius: 30px;
  color: #fff; }

@media screen and (max-width: 575px) {
  .portfolio-style02 .portfolio-content {
    padding: 20px 40px 25px 20px; }
  .portfolio-style02 .portfolio-link {
    right: 20px; } }
/*==============================
 *    Others
 *    ================================ */
/*about-style01*/
.about-style01 .about-content {
  position: relative;
  z-index: 0;
  transition: all 0.4s ease; }
  .about-style01 .about-content .about-icon {
    position: relative;
    z-index: 0; }
    .about-style01 .about-content .about-icon .about-circle {
      width: 45px;
      height: 45px;
      background-color: rgba(97, 203, 112, 0.3);
      border-radius: 100px 100px 100px 100px;
      bottom: -7px;
      left: 33px;
      position: absolute;
      z-index: -1;
      transition: all 0.3s ease; }
    .about-style01 .about-content .about-icon img {
      position: relative;
      z-index: 0;
      transition: all 0.4s ease; }
  .about-style01 .about-content:hover .about-icon img {
    transform: rotateY(180deg); }
.about-style01 .about-call {
  display: flex;
  align-items: center; }
  .about-style01 .about-call .about-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 15px 0px 0px;
    background-color: #006D77;
    width: 50px;
    height: 50px;
    color: #fff;
    border-radius: 50%;
    transition: all 0.4s ease; }
  .about-style01 .about-call:hover .about-icon {
    transform: rotateY(180deg); }

/*about-style02*/
.about-style02 .num-text {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 90px;
  z-index: 1; }
  .about-style02 .num-text span {
    display: inline-block;
    position: relative;
    font-size: 12.5rem;
    line-height: 1;
    font-weight: 600;
    color: #61CE70;
    padding: 0 20%;
    letter-spacing: -10px; }
    .about-style02 .num-text span:before {
      content: "";
      display: inline-block;
      height: 1px;
      width: 100%;
      background: rgba(0, 81, 83, 0.2);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0; }
.about-style02 .about-text {
  position: absolute;
  right: 71px;
  top: 30px;
  text-align: right;
  line-height: 1; }
  .about-style02 .about-text .inner-text {
    display: block;
    font-size: 46px;
    color: black;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1; }
  .about-style02 .about-text .about-num {
    display: block;
    font-weight: 600;
    color: #61CE70;
    font-size: 5.625rem;
    line-height: 1; }
.about-style02 .bg-img1 {
  position: absolute;
  right: 15px;
  bottom: -60px; }
.about-style02 img {
  box-shadow: 0 20px 100px rgba(0, 0, 0, 0.1); }

@media screen and (max-width: 1399px) {
  .about-style02 .about-text {
    right: 21px; }
  .about-style02 .num-text span {
    font-size: 11rem; } }
@media screen and (max-width: 1199px) {
  .about-style02 .num-text {
    top: 40px; }
    .about-style02 .num-text span {
      font-size: 7rem;
      padding: 0 10%; } }
/*service-style01*/
.service-style01 .service-item {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 30px; }
  .service-style01 .service-item .service-bg {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    padding-right: 100px;
    transition: all 500ms linear; }
    .service-style01 .service-item .service-bg .service-img {
      position: relative;
      display: block;
      border-radius: 0.375rem; }
      .service-style01 .service-item .service-bg .service-img .service-link {
        bottom: 25px;
        right: 25px;
        position: absolute; }
        .service-style01 .service-item .service-bg .service-img .service-link i {
          position: relative;
          display: inline-block;
          width: 80px;
          height: 48px;
          line-height: 52px;
          background-color: #fff;
          text-align: center;
          border-radius: 50px;
          font-size: 24px;
          color: #000; }
    .service-style01 .service-item .service-bg .service-content {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 100px;
      height: 100%;
      padding-top: 20px;
      text-align: center; }
      .service-style01 .service-item .service-bg .service-content span {
        position: relative;
        display: block;
        font-size: 36px;
        line-height: 46px;
        color: #fff;
        font-weight: 500;
        margin-bottom: 15px; }
      .service-style01 .service-item .service-bg .service-content .h3 {
        position: absolute;
        left: -34px;
        bottom: 130px;
        width: 100%;
        font-size: 24px;
        line-height: 32px;
        writing-mode: vertical-lr;
        transform: rotate(180deg); }
      .service-style01 .service-item .service-bg .service-content .icon {
        position: absolute;
        left: 0px;
        bottom: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .service-style01 .service-item .service-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    overflow: hidden;
    z-index: 1;
    transform: rotateY(180deg);
    opacity: 0;
    transition: all 500ms linear; }
    .service-style01 .service-item .service-overlay .bg-img {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      padding: 15px 30px 50px 30px; }
    .service-style01 .service-item .service-overlay .num {
      position: relative;
      display: block;
      text-align: right;
      font-size: 120px;
      line-height: 120px;
      font-weight: 500;
      color: transparent;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: rgba(255, 255, 255, 0.35); }
  .service-style01 .service-item:hover .service-bg {
    transform: rotateY(180deg);
    opacity: 0; }
  .service-style01 .service-item:hover .service-overlay {
    transform: rotateY(0deg);
    opacity: 1; }

@media screen and (max-width: 767px) {
  .service-style01 .service-item .service-overlay .num {
    font-size: 94px; } }
/* services-block */
.services-block {
  margin-top: -125px;
  position: relative;
  z-index: 9;
  overflow: visible;
  background-color: rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2); }

@media screen and (max-width: 991px) {
  .services-block {
    margin-top: 0;
    background-color: #006D77; } }
/*service-style02*/
.service-style02 .service-grid {
  display: flex;
  flex-direction: row;
  --cards-count: 5; }
.service-style02 .service-item {
  flex: calc(20% / (var(--cards-count) - 1));
  transition: all 0.6s cubic-bezier(0.38, 0.005, 0.215, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-right: -1px;
  min-height: 640px;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative; }
  .service-style02 .service-item:hover {
    flex: 28%; }
    .service-style02 .service-item:hover .service-content .service-content-wrap {
      opacity: 1;
      visibility: visible;
      transform: translateX(0); }
    .service-style02 .service-item:hover .service-post-thumbnail img {
      transform: scale(1.08); }
  .service-style02 .service-item .service-inner {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    padding: clamp(15px, 3vmax, 60px) clamp(15px, 3vmax, 45px); }
    .service-style02 .service-item .service-inner .icon-wrap {
      margin-bottom: auto; }
    .service-style02 .service-item .service-inner .service-title {
      max-width: 215px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      writing-mode: sideways-lr;
      font-size: clamp(36px, 4vmax, 48px);
      line-height: 1.125;
      margin-bottom: 0;
      position: relative;
      z-index: 99; }
  .service-style02 .service-item .service-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 10; }
    .service-style02 .service-item .service-content .service-content-wrap {
      height: 100%;
      max-height: 650px;
      position: relative;
      overflow: hidden;
      border-radius: 0.375rem;
      opacity: 0;
      width: calc(100% - clamp(100px, 13.8vmax, 265px));
      transform: translateX(100%);
      transition: all 0.6s cubic-bezier(0.38, 0.005, 0.215, 1); }
    .service-style02 .service-item .service-content .service-post-thumbnail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 0.375rem; }
      .service-style02 .service-item .service-content .service-post-thumbnail:before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #006D77;
        z-index: 1;
        opacity: 0.5; }
      .service-style02 .service-item .service-content .service-post-thumbnail img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 0.375rem;
        transition: transform 0.6s ease;
        transform: scale(1); }
    .service-style02 .service-item .service-content .service-content-inner {
      position: absolute;
      padding: 30px;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 3;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); }
      .service-style02 .service-item .service-content .service-content-inner .description p {
        color: #ffffff;
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 20px; }
    .service-style02 .service-item .service-content .service-bottom-wrap .service-button {
      display: inline-block;
      background: #ff2d55;
      color: #fff;
      padding: 10px 25px;
      border-radius: 0.375rem;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.3s ease; }

@media screen and (max-width: 1199px) {
  .service-style02 .service-grid {
    flex-direction: column; }
  .service-style02 .service-item {
    flex: 1 1 100%;
    width: 100%;
    min-height: auto;
    padding: 40px 20px;
    flex-direction: row;
    align-items: start;
    justify-content: flex-start; }
    .service-style02 .service-item:hover {
      flex: 1 1 100%; }
      .service-style02 .service-item:hover .service-content .service-content-wrap {
        transform: translateX(0); }
    .service-style02 .service-item .service-inner {
      height: auto;
      padding: 0;
      width: 30%;
      gap: 20px; }
      .service-style02 .service-item .service-inner .icon-wrap {
        margin-bottom: 0; }
      .service-style02 .service-item .service-inner .service-title {
        writing-mode: horizontal-tb;
        max-width: 100%;
        -webkit-line-clamp: initial; }
    .service-style02 .service-item .service-content {
      position: relative;
      width: 70%;
      padding: 0;
      height: auto;
      justify-content: flex-start; }
      .service-style02 .service-item .service-content .service-content-wrap {
        opacity: 1;
        visibility: visible;
        width: 100%;
        max-height: none;
        transform: translateX(0);
        position: relative; }
      .service-style02 .service-item .service-content .service-post-thumbnail {
        position: relative;
        height: 350px;
        width: 100%; } }
@media screen and (max-width: 767px) {
  .service-style02 .service-grid {
    flex-direction: column;
    gap: 30px; }
  .service-style02 .service-item {
    flex: 1 1 100%;
    width: 100%;
    min-height: auto;
    padding: 20px 10px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .service-style02 .service-item:hover {
      flex: 1 1 100%; }
      .service-style02 .service-item:hover .service-content .service-content-wrap {
        transform: translateY(0); }
    .service-style02 .service-item .service-inner {
      height: auto;
      padding: 0 0 20px 0;
      width: 100%;
      gap: 15px; }
      .service-style02 .service-item .service-inner .icon-wrap {
        margin-bottom: 0; }
      .service-style02 .service-item .service-inner .service-title {
        writing-mode: horizontal-tb;
        max-width: 100%;
        -webkit-line-clamp: initial;
        font-size: clamp(24px, 5vw, 32px); }
    .service-style02 .service-item .service-content {
      position: relative;
      width: 100%;
      padding: 0;
      height: auto; }
      .service-style02 .service-item .service-content .service-content-wrap {
        opacity: 1;
        visibility: visible;
        width: 100%;
        max-height: none;
        transform: translateY(0);
        position: relative; }
      .service-style02 .service-item .service-content .service-post-thumbnail {
        position: relative;
        height: 260px;
        width: 100%; }
      .service-style02 .service-item .service-content .service-content-inner {
        padding: 20px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100__); }
        .service-style02 .service-item .service-content .service-content-inner .description p {
          font-size: 14px;
          margin-bottom: 15px; } }
/*service-style03*/
.service-style03 .service-bg {
  display: flex;
  align-items: center;
  padding: 15px 30px 15px 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 200px; }
  .service-style03 .service-bg .service-img {
    border-radius: 50%;
    position: relative;
    margin-right: 20px; }
    .service-style03 .service-bg .service-img .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%); }
      .service-style03 .service-bg .service-img .icon a {
        color: #fff; }
  .service-style03 .service-bg .service-text span {
    display: block;
    font-size: 15px;
    margin: 7px 0;
    color: #fff; }
.service-style03 .service-items .item {
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative; }
  .service-style03 .service-items .item h3 {
    font-size: 80px;
    font-weight: 600;
    color: #fff; }
  .service-style03 .service-items .item .service-content {
    margin-top: 15px; }
    .service-style03 .service-items .item .service-content span {
      font-size: 14px;
      font-weight: 300;
      position: relative;
      margin-right: 50px;
      color: #fff; }
      .service-style03 .service-items .item .service-content span:after {
        content: '';
        position: absolute;
        top: 50%;
        right: -30px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff; }
      .service-style03 .service-items .item .service-content span:last-child {
        margin-right: 0; }
        .service-style03 .service-items .item .service-content span:last-child:after {
          display: none; }
  .service-style03 .service-items .item:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .service-style03 .service-items .item .service-img {
    width: 0;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    right: 25px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s; }
  .service-style03 .service-items .item:hover .service-img {
    width: 200px; }
  .service-style03 .service-items .item:active .service-img {
    width: 200px; }
  .service-style03 .service-items .item:focus .service-img {
    width: 200px; }

@media screen and (max-width: 1599px) {
  .service-style03 .service-items .item h3 {
    font-size: 63px; } }
@media screen and (max-width: 1399px) {
  .service-style03 .service-items .item h3 {
    font-size: 55px; } }
@media screen and (max-width: 1199px) {
  .service-style03 .service-items .item h3 {
    font-size: 41px; } }
@media screen and (max-width: 767px) {
  .service-style03 .service-items .item .service-img {
    right: 0; }
  .service-style03 .service-items .item h3 {
    font-size: 34px; }
  .service-style03 .service-items .item:hover .service-img {
    width: 160px; }
  .service-style03 .service-items .item:active .service-img {
    width: 160px; }
  .service-style03 .service-items .item:focus .service-img {
    width: 160px; } }
@media screen and (max-width: 575px) {
  .service-style03 .service-items .item .service-img {
    display: none; }
  .service-style03 .service-items .item h3 {
    font-size: 30px; } }
/*why-choose-style01*/
.why-choose-style01 .why-choose-box {
  position: relative; }
  .why-choose-style01 .why-choose-box .why-choose-butn {
    width: 70px;
    height: 70px;
    border: 1px solid #dee2e6;
    background-color: transparent;
    transition: all 0.3s ease-in-out 0s;
    font-size: 24px;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #61CE70;
    overflow: hidden; }
    .why-choose-style01 .why-choose-box .why-choose-butn i {
      webkit-transform: rotate(-45deg) translateX(0);
      text-shadow: -45px 0 0;
      -ms-transform: rotate(-45deg) translateX(0);
      transform: rotate(-45deg) translateX(0);
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      transition: -webkit-transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; }
  .why-choose-style01 .why-choose-box:before {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    left: -1px;
    top: 0;
    height: 1px;
    background-color: #61CE70;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94); }
  .why-choose-style01 .why-choose-box:after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    left: -1px;
    top: 0;
    height: 1px;
    background-color: #DCDCDC;
    transform: scaleX(1);
    transform-origin: 100% 0;
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94) 0.2s; }
  .why-choose-style01 .why-choose-box:hover .why-choose-butn {
    background-color: #61CE70;
    border-color: #61CE70;
    color: #fff; }
    .why-choose-style01 .why-choose-box:hover .why-choose-butn i {
      -webkit-transform: rotate(-45deg) translateX(45px);
      -ms-transform: rotate(-45deg) translateX(45px);
      transform: rotate(-45deg) translateX(45px); }
  .why-choose-style01 .why-choose-box:hover:before {
    transform: scaleX(1);
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94) 0.2s; }
  .why-choose-style01 .why-choose-box:hover:after {
    transform: scaleX(0);
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94); }
.why-choose-style01 .why-choose-video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .why-choose-style01 .why-choose-video a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    background: #61CE70;
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    border-radius: 50%;
    position: relative;
    border: 1px solid #61CE70; }
    .why-choose-style01 .why-choose-video a:before {
      content: " ";
      width: 130%;
      height: 130%;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      position: absolute;
      left: -8px;
      top: -8px;
      -webkit-animation: pulse 1s infinite;
      animation: pulse 1s infinite;
      z-index: -1; }

@media screen and (max-width: 767px) {
  .why-choose-style01 .why-choose-box .why-choose-butn {
    width: 60px;
    height: 60px; } }
@media screen and (max-width: 575px) {
  .why-choose-style01 .why-choose-box .why-choose-butn {
    width: 50px;
    height: 50px;
    font-size: 19px; } }
/*.testimonial-style01 */
@-webkit-keyframes "rotated_circle" {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@keyframes "rotated_circle" {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
/* testimonials-style01 */
.testimonials-style01 .left-box {
  position: absolute;
  left: 30px;
  bottom: 85px;
  width: 230px;
  border-radius: 0.375rem;
  background-color: #006D77;
  animation: float 2s linear .5s infinite alternate both;
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  text-align: center; }
  .testimonials-style01 .left-box .inner-box {
    top: -1px;
    margin-bottom: 15px;
    padding-bottom: 35px;
    padding-top: 35px;
    background-color: #fff;
    position: relative; }
    .testimonials-style01 .left-box .inner-box h1 {
      letter-spacing: -3px;
      color: #0f313a;
      font-size: 4.375rem;
      line-height: 4.375rem;
      word-spacing: -2px; }
    .testimonials-style01 .left-box .inner-box .box-tag {
      padding: 0 20px;
      border-radius: 100px;
      background-color: #61CE70;
      -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
      -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
      transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
      color: #fff;
      line-height: 30px;
      font-size: 12px;
      display: inline-block;
      text-transform: uppercase;
      margin-top: 3px; }
.testimonials-style01 .fas.fa-star {
  letter-spacing: -4px; }

@media screen and (max-width: 1199px) {
  .testimonials-style01 .left-box {
    left: -40px; }
    .testimonials-style01 .left-box .inner-box {
      padding-bottom: 25px;
      padding-top: 15px; }
      .testimonials-style01 .left-box .inner-box h1 {
        font-size: 2.875rem;
        margin-bottom: 0; } }
@keyframes "float" {
  0% {
    transform: translateY(0px); }
  50% {
    transform: translateY(5px); }
  100% {
    transform: translateY(10px); } }
/* video-style01 */
.video-style01 .video-text {
  width: 200px;
  height: 200px;
  color: white;
  padding: 13px;
  font-weight: 600;
  border-radius: 50%;
  border: 1px solid #FFFFFF33;
  position: relative;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  margin: 0 auto; }
  .video-style01 .video-text .coloring {
    fill: white;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-weight: 600; }
  .video-style01 .video-text svg {
    -webkit-animation: rotated_circle 12s linear infinite;
    animation: rotated_circle 12s linear infinite; }
  .video-style01 .video-text .video-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; }

@media screen and (max-width: 991px) {
  .video-style01 .video-text {
    width: 168px;
    height: 168px; } }
@media screen and (max-width: 575px) {
  .video-style01 .video-text {
    width: 145px;
    height: 145px; } }
/*.extra-style01*/
.extra-style01 {
  min-height: 900px;
  position: relative;
  align-content: end; }
  .extra-style01 .video_btn {
    width: 60px;
    height: 60px;
    line-height: 60px;
    position: relative;
    background: #61CE70;
    text-align: center;
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    transition-duration: 0s;
    -ms-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -webkit-transition-duration: 0s;
    -o-transition-duration: 0s; }
    .extra-style01 .video_btn:before {
      width: 75px;
      height: 75px;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      height: 95px;
      width: 95px;
      border: 2px solid #61CE70;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      opacity: .3;
      animation: pulse-border 1500ms ease-out infinite; }
    .extra-style01 .video_btn:after {
      width: 60px;
      height: 60px;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      height: 80px;
      width: 80px;
      border: 2px solid #61CE70;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      opacity: .3;
      animation: pulse-border 1500ms ease-out infinite; }
    .extra-style01 .video_btn:hover i {
      color: #fff; }
    .extra-style01 .video_btn:focus i {
      color: #fff; }
  .extra-style01 .video_btn.small {
    width: 55px;
    height: 55px;
    line-height: 55px; }
    .extra-style01 .video_btn.small:after {
      height: 50px;
      width: 50px; }
    .extra-style01 .video_btn.small:before {
      height: 65px;
      width: 65px; }

@media screen and (max-width: 991px) {
  .extra-style01 .video_btn {
    height: 55px;
    width: 55px;
    line-height: 55px; }
    .extra-style01 .video_btn:after {
      height: 75px;
      width: 75px; }
    .extra-style01 .video_btn:before {
      height: 90px;
      width: 90px; } }
@media screen and (max-width: 1399px) {
  .extra-style01 {
    min-height: 850px; } }
@media screen and (max-width: 1199px) {
  .extra-style01 {
    min-height: 680px; } }
@media screen and (max-width: 767px) {
  .extra-style01 .video_btn {
    height: 50px;
    width: 50px;
    line-height: 50px; }
    .extra-style01 .video_btn:after {
      height: 70px;
      width: 70px; }
    .extra-style01 .video_btn:before {
      height: 85px;
      width: 85px; } }
@media screen and (max-width: 575px) {
  .extra-style01 {
    min-height: 400px; } }
@keyframes "pulse-border" {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.2); } }
/*.client-style01*/
.client-style01 .client-logo {
  opacity: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
  -moz-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
  -ms-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
  -o-transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1);
  transition: all 0.4s cubic-bezier(0.2, 0, 0.3, 1); }
.client-style01:hover .client-logo {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  opacity: .6; }
.client-style01 .client-logo:hover {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0); }

/* counter-style01 */
.counter-style01 .counter-no {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 175px;
  line-height: 1em;
  font-weight: 700;
  letter-spacing: -11px;
  opacity: 1;
  white-space: nowrap;
  color: rgba(97, 203, 112, 0.1); }
.counter-style01 .counter-no.black {
  color: rgba(0, 0, 0, 0.1); }
.counter-style01 .counter-num {
  font-size: 85px;
  line-height: 1;
  font-weight: 700;
  color: #006D77; }

@media screen and (max-width: 1399px) {
  .counter-style01 .counter-no {
    font-size: 125px; }
  .counter-style01 .counter-num {
    font-size: 60px; } }
@media screen and (max-width: 1199px) {
  .counter-style01 .counter-no {
    font-size: 105px; } }
@media only screen and (max-width: 991px) {
  .counter-style01 .counter-item:after {
    display: none; }
  .counter-style01 .counter-num {
    font-size: 50px; } }
/*process-style01*/
.process-style01 .process-box {
  text-align: center;
  position: relative;
  padding: 40px 20px;
  border-radius: 6px;
  transition: background-color 0.4s ease, box-shadow 0.4s ease; }
  .process-style01 .process-box .process-step {
    padding: 10px 30px;
    color: #fff;
    background-color: #61CE70;
    text-transform: uppercase;
    display: inline-block;
    transition: background-color 0.4s ease, color 0.4s ease;
    position: relative;
    z-index: 1;
    border-radius: 50px; }
  .process-style01 .process-box .process-line {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-color: #e9ecef;
    transition: background-color 0.4s ease;
    z-index: 0; }
  .process-style01 .process-box:hover {
    background-color: #61CE70;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }
    .process-style01 .process-box:hover .diamond-shape {
      background-color: #fff; }
    .process-style01 .process-box:hover .h5 {
      color: #ffffff; }
    .process-style01 .process-box:hover p {
      color: #ffffff; }
    .process-style01 .process-box:hover .process-step {
      background-color: #ffffff;
      color: #61CE70; }
    .process-style01 .process-box:hover .process-line {
      background-color: rgba(255, 255, 255, 0.2); }
  .process-style01 .process-box:active {
    background-color: #61CE70;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }
    .process-style01 .process-box:active .diamond-shape {
      background-color: #fff; }
    .process-style01 .process-box:active .h5 {
      color: #ffffff; }
    .process-style01 .process-box:active p {
      color: #ffffff; }
    .process-style01 .process-box:active .process-step {
      background-color: #ffffff;
      color: #61CE70; }
    .process-style01 .process-box:active .process-line {
      background-color: rgba(255, 255, 255, 0.2); }
  .process-style01 .process-box:focus {
    background-color: #61CE70;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }
    .process-style01 .process-box:focus .diamond-shape {
      background-color: #fff; }
    .process-style01 .process-box:focus .h5 {
      color: #ffffff; }
    .process-style01 .process-box:focus p {
      color: #ffffff; }
    .process-style01 .process-box:focus .process-step {
      background-color: #ffffff;
      color: #61CE70; }
    .process-style01 .process-box:focus .process-line {
      background-color: rgba(255, 255, 255, 0.2); }
.process-style01 .process-box.active {
  background-color: #61CE70;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }
  .process-style01 .process-box.active .diamond-shape {
    background-color: #fff; }
  .process-style01 .process-box.active .h5 {
    color: #ffffff; }
  .process-style01 .process-box.active p {
    color: #ffffff; }
  .process-style01 .process-box.active .process-step {
    background-color: #ffffff;
    color: #61CE70; }
  .process-style01 .process-box.active .process-line {
    background-color: rgba(255, 255, 255, 0.2); }
.process-style01 [class^="col-"]:first-child .process-line {
  left: 50%;
  transform: none;
  width: 50%; }
.process-style01 [class^="col-"]:last-child .process-line {
  left: 0;
  transform: none;
  width: 50%; }

@media screen and (max-width: 991px) {
  .process-style01 .process-box {
    padding: 20px 20px; }
    .process-style01 .process-box .process-step {
      display: block; }
  .process-style01 [class^="col-"] .process-line {
    display: none; } }
/*process-style02*/
.process-style02 .process-hover {
  display: flex;
  position: relative;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  -webkit-transition: 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  will-change: transform; }
  .process-style02 .process-hover .process-num span {
    -webkit-transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1);
    transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1);
    will-change: transform;
    will-change: transform;
    -webkit-transition: 350ms cubic-bezier(0.165, 0.84, 0.44, 1.7);
    transition: 350ms cubic-bezier(0.165, 0.84, 0.44, 1.7);
    height: 60px !important;
    width: 60px !important;
    -webkit-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05);
    font-size: 16px;
    font-weight: 700;
    align-items: center !important;
    display: flex;
    justify-content: center;
    background: #fff;
    border-radius: 50%; }
  .process-style02 .process-hover .process-line {
    position: absolute;
    bottom: 15px;
    width: 1px;
    left: 50%;
    height: calc(100% - 100px);
    bottom: -10px;
    height: 100%;
    z-index: -1;
    opacity: .1;
    background-color: #252840; }
  .process-style02 .process-hover:hover .process-num span {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #61CE70;
    color: #fff; }
.process-style02 .right-content .blur-box {
  bottom: 25px;
  right: 25px;
  padding: 18px 30px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  --webkit-backdrop-filter: blur(5px);
  text-align: center; }
.process-style02 .icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(66, 34, 220, 0.1);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; }

@media screen and (max-width: 1199px) {
  .process-style02 .right-content .blur-box {
    padding: 10px 20px; } }
/*.faq-style01*/
.faq-style01 .faq-bg {
  padding: 9.5rem 12.5rem; }

@media screen and (max-width: 1599px) {
  .faq-style01 .faq-bg {
    padding: 7.5rem 6.5rem; } }
@media screen and (max-width: 1399px) {
  .faq-style01 .faq-bg {
    padding: 6.5rem 4.5rem; } }
@media screen and (max-width: 991px) {
  .faq-style01 .faq-bg {
    padding: 3.5rem 4.5rem; } }
@media screen and (max-width: 575px) {
  .faq-style01 .faq-bg {
    padding: 2.5rem 1rem; } }
/* process-bar */
.progress-style01 .progress {
  height: 8px; }
  .progress-style01 .progress .progress-bar {
    background-color: #61CE70; }

/*==============================
*    Scroll Section
*    ================================ */
/* animation track */
/* pause on hover */
/* scroll direction */
/* grouping taglines together */
/* single scroll item styling */
.scroll-section {
  width: 100%;
  overflow: hidden;
  position: relative; }

.scroll-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running; }

.pause-on-hover:hover {
  animation-play-state: paused; }
.pause-on-hover:active {
  animation-play-state: paused; }
.pause-on-hover:focus {
  animation-play-state: paused; }

.scroll-left {
  animation-name: scroll-left; }

.scroll-right {
  animation-name: scroll-right; }

.scroll-group {
  display: inline-flex;
  white-space: nowrap; }

.scroll-item {
  display: inline-block;
  white-space: nowrap;
  line-height: 1; }

.scroll-item.with-img {
  min-width: 256px;
  height: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: inline-flex; }
  .scroll-item.with-img img {
    vertical-align: middle; }

/* keyframes */
@keyframes scroll-left {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-200%); } }
@keyframes scroll-right {
  0% {
    transform: translateX(-200%); }
  100% {
    transform: translateX(0); } }
.scroll-icon-rotated {
  -webkit-animation: icon-rotated 2s linear infinite;
  animation: icon-rotated 2s linear infinite; }

@keyframes icon-rotated {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
/* speed control */
.scroll-speed-1 {
  animation-duration: 10s; }

/* Ultra Fast */
.scroll-speed-2 {
  animation-duration: 15s; }

/* Extra Fast */
.scroll-speed-3 {
  animation-duration: 20s; }

/* Fast */
.scroll-speed-4 {
  animation-duration: 30s; }

/* Medium */
.scroll-speed-5 {
  animation-duration: 40s; }

/* Slow */
.scroll-speed-6 {
  animation-duration: 60s; }

/* Super Slow */
.scroll-speed-7 {
  animation-duration: 80s; }

/* Ultra Slow */
.scroll-speed-8 {
  animation-duration: 100s; }

/* Glacial */
.scroll-speed-9 {
  animation-duration: 120s; }

/*scroll-style01*/
.scroll-section.scroll-style01 .scroll-item {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  font-size: 120px;
  font-weight: 800;
  line-height: 1.05em;
  letter-spacing: -0.02em;
  color: rgba(0, 109, 119, 0.08);
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-family: "Marcellus", serif; }
  .scroll-section.scroll-style01 .scroll-item:hover {
    color: #61CE70; }

@media screen and (max-width: 991px) {
  .scroll-section.scroll-style01 .scroll-item {
    font-size: 109px; } }
@media screen and (max-width: 767px) {
  .scroll-section.scroll-style01 .scroll-item {
    font-size: 97px; } }
@media screen and (max-width: 575px) {
  .scroll-section.scroll-style01 .scroll-item {
    font-size: 79px; } }
/*==============================
*    Page navigation
*    ================================ */
.page-navigation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background-color: rgba(0, 109, 119, 0.085); }

.prev-page {
  position: relative;
  width: 50%;
  max-width: 350px;
  margin: 10px; }
  .prev-page:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(34, 35, 40, 0);
    transform: scale(1.04, 1.12);
    transition: .3s ease-in-out;
    pointer-events: none; }
  .prev-page .page-info > a {
    display: flex;
    align-items: center;
    position: relative;
    padding: 16px 20px;
    min-height: 110px;
    transition: 0.8s; }
  .prev-page .page-info .image-prev {
    position: relative;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    vertical-align: middle;
    transition: inherit;
    overflow: hidden; }
  .prev-page .page-info .image-next {
    position: relative;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    vertical-align: middle;
    transition: inherit;
    overflow: hidden; }
  .prev-page .page-info .prev-title {
    display: inline-block;
    position: relative;
    max-width: 220px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
    word-wrap: break-word;
    vertical-align: middle;
    transition: 0.45s; }
    .prev-page .page-info .prev-title:empty {
      display: none; }
  .prev-page .page-info .next-title {
    display: inline-block;
    position: relative;
    max-width: 220px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
    word-wrap: break-word;
    vertical-align: middle;
    transition: 0.45s; }
    .prev-page .page-info .next-title:empty {
      display: none; }
  .prev-page:hover:before {
    background-color: white;
    transform: scale(1);
    box-shadow: 0 10px 30px 0 rgba(34, 35, 40, 0.1); }
  .prev-page a {
    justify-content: flex-start;
    text-align: left; }
    .prev-page a:hover .image-prev:after {
      visibility: visible;
      opacity: 1; }
    .prev-page a:hover .image-prev:before {
      visibility: visible;
      opacity: 1;
      margin-left: 0; }
  .prev-page .image-prev {
    margin-right: 20px; }
    .prev-page .image-prev:after {
      background-color: #61CE70;
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: .3s ease-in-out; }
    .prev-page .image-prev:before {
      display: block;
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      margin-left: 20px;
      content: "\e64a";
      font-family: 'themify';
      font-size: 21px;
      line-height: 70px;
      color: #fff;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      transition: .3s ease-in-out; }

.next-page {
  position: relative;
  width: 50%;
  max-width: 350px;
  margin: 10px;
  margin-left: auto; }
  .next-page:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(34, 35, 40, 0);
    transform: scale(1.04, 1.12);
    transition: .3s ease-in-out;
    pointer-events: none; }
  .next-page .page-info > a {
    display: flex;
    align-items: center;
    position: relative;
    padding: 16px 20px;
    min-height: 110px;
    transition: 0.8s; }
  .next-page .page-info .image-prev {
    position: relative;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    vertical-align: middle;
    transition: inherit;
    overflow: hidden; }
  .next-page .page-info .image-next {
    position: relative;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    vertical-align: middle;
    transition: inherit;
    overflow: hidden; }
  .next-page .page-info .prev-title {
    display: inline-block;
    position: relative;
    max-width: 220px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
    word-wrap: break-word;
    vertical-align: middle;
    transition: 0.45s; }
    .next-page .page-info .prev-title:empty {
      display: none; }
  .next-page .page-info .next-title {
    display: inline-block;
    position: relative;
    max-width: 220px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
    word-wrap: break-word;
    vertical-align: middle;
    transition: 0.45s; }
    .next-page .page-info .next-title:empty {
      display: none; }
  .next-page:hover:before {
    background-color: white;
    transform: scale(1);
    box-shadow: 0 10px 30px 0 rgba(34, 35, 40, 0.1); }
  .next-page .image-next {
    margin-left: 20px; }
    .next-page .image-next:after {
      background-color: #61CE70;
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      transition: .3s ease-in-out; }
    .next-page .image-next:before {
      display: block;
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      margin-right: 20px;
      content: "\e64a";
      font-family: 'themify';
      font-size: 21px;
      line-height: 70px;
      color: #fff;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      transition: .3s ease-in-out;
      transform: scaleX(-1); }
  .next-page a {
    justify-content: flex-end;
    text-align: right; }
    .next-page a:hover .image-next:after {
      visibility: visible;
      opacity: 1; }
    .next-page a:hover .image-next:before {
      visibility: visible;
      opacity: 1;
      margin-right: 0; }
  .next-page .next-title {
    text-align: right; }

.prev-link-page-info > span {
  display: block; }
.prev-link-page-info .date-details {
  font-size: 14px;
  letter-spacing: .025em;
  line-height: 20px;
  margin-bottom: -2px; }
  .prev-link-page-info .date-details > div {
    line-height: inherit;
    transition: 0.45s;
    font-weight: 500; }
  .prev-link-page-info .date-details > span {
    line-height: inherit;
    transition: 0.45s;
    font-weight: 500; }
  .prev-link-page-info .date-details:only-child {
    margin-top: 0; }

.next-link-page-info > span {
  display: block; }
.next-link-page-info .date-details {
  font-size: 14px;
  letter-spacing: .025em;
  line-height: 20px;
  margin-bottom: -2px; }
  .next-link-page-info .date-details > div {
    line-height: inherit;
    transition: 0.45s;
    font-weight: 500; }
  .next-link-page-info .date-details > span {
    line-height: inherit;
    transition: 0.45s;
    font-weight: 500; }
  .next-link-page-info .date-details:only-child {
    margin-top: 0; }

@media (max-width: 767px) {
  .prev-page {
    width: calc(100% - 20px);
    max-width: unset; }

  .next-page {
    width: calc(100% - 20px);
    max-width: unset; }

  .prev-page + .next-page {
    margin-top: 0; }

  .page-navigation {
    flex-direction: column; } }
@media (max-width: 575px) {
  .prev-page .page-info > a {
    padding: 10px; }
  .prev-page .page-info .prev-title {
    max-width: 168px; }
  .prev-page .page-info .next-title {
    max-width: 168px; }

  .next-page .page-info > a {
    padding: 10px; }
  .next-page .page-info .prev-title {
    max-width: 168px; }
  .next-page .page-info .next-title {
    max-width: 168px; } }
/* quform */
.form-group {
  margin-bottom: 1rem; }
  .form-group label {
    margin-bottom: .5rem; }

.form-control:focus {
  border-color: #61CE70; }

.form-check-input:checked {
  border-color: #61CE70;
  background-color: #61CE70; }

.quform-input {
  position: relative; }
  .quform-input .form-control {
    border-radius: 5px; }
  .quform-input .quform-errors-wrap {
    position: absolute;
    right: 8px;
    top: 0;
    line-height: normal;
    z-index: 1; }

.quform-element > label {
  font-weight: normal;
  padding-bottom: 5px;
  margin-bottom: 0;
  color: #6a747b;
  font-size: 16px; }
  .quform-element > label .quform-required {
    color: #cc0101;
    font-size: 10px; }

.quform-inner input {
  width: 100%; }

.quform-elements .quform-element textarea {
  margin-bottom: 0;
  padding: 8px 15px;
  vertical-align: top; }
.quform-elements .quform-element select {
  margin-bottom: 0;
  padding: 8px 35px 8px 15px; }

.quform-errors {
  padding: 0;
  margin: 0;
  line-height: normal; }
  .quform-errors > .quform-error {
    padding: 0;
    background: none;
    border: none;
    float: none;
    color: #f5543f;
    font-size: 11px;
    line-height: normal;
    letter-spacing: normal; }

.quform-outer-no-js .quform-error {
  padding: 0;
  background: none;
  border: none;
  float: none;
  color: #f5543f;
  font-size: 11px;
  line-height: normal;
  letter-spacing: normal; }
.quform-outer-no-js .quform-success-message {
  padding: 0.75rem 1.25rem 0.75rem 3rem; }

.quform-has-error input {
  border-color: #f5543f !important; }
.quform-has-error textarea {
  border-color: #f5543f !important; }
.quform-has-error select {
  border-color: #f5543f !important; }
.quform-has-error input[type=file] {
  border-color: #f5543f !important; }
.quform-has-error .custom-file-label {
  border-color: #f5543f !important; }

.quform-success-message {
  padding: 0.75rem 1.25rem 0.75rem 3rem; }

.quform-submit-inner {
  float: none; }

.quform-loading-wrap {
  float: none; }
  .quform-loading-wrap .quform-loading {
    display: inline-block; }

.light-validation .quform-errors > .quform-error {
  color: #fff; }

/* Dark Form */
.quform.dark .form-control {
  min-height: 55px;
  border-radius: 0.375rem;
  resize: none;
  /* background: transparent; */
  border-color: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  color: #fff;
  opacity: 0.65; }
  .quform.dark .form-control:focus {
    border-color: #61CE70;
    background-color: transparent;
    color: #fff;
    opacity: 0.95; }
  .quform.dark .form-control:active {
    border-color: #61CE70;
    background-color: transparent;
    color: #fff;
    opacity: 0.95; }
  .quform.dark .form-control:hover {
    border-color: #61CE70;
    background-color: transparent;
    color: #fff;
    opacity: 0.95; }

/* newsletter */
.newsletter-form .quform-submit-inner button {
  font-size: 18px;
  border: none;
  position: absolute;
  right: -10px;
  top: -1px;
  height: 55px;
  width: 55px;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 0; }
.newsletter-form .quform-submit-inner button.newsletter-btn {
  right: 0;
  top: 0; }
.newsletter-form .quform-element .quform-input .form-control.news-box {
  min-height: 55px;
  border-radius: 5px;
  padding: 0 70px 0 20px; }

/* newsletter */
.newsletter-form-icon .quform-elements {
  position: relative;
  border-radius: 10px; }
.newsletter-form-icon .quform-submit-inner {
  position: absolute;
  right: 1px;
  top: 1px;
  width: auto;
  background: transparent;
  height: 48px; }
  .newsletter-form-icon .quform-submit-inner .btn {
    padding: 0.441rem 1rem; }
    .newsletter-form-icon .quform-submit-inner .btn:focus {
      border: 1px solid transparent; }
    .newsletter-form-icon .quform-submit-inner .btn:active {
      border: 1px solid transparent; }
.newsletter-form-icon .quform-loading-wrap {
  margin-top: 15px;
  margin-bottom: 0;
  margin-left: 0; }
.newsletter-form-icon input {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.2);
  height: 50px;
  padding: 0.5rem 4rem 0.5rem 1rem;
  color: #fff; }
.newsletter-form-icon .form-control:focus {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff; }
.newsletter-form-icon .form-control:active {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff; }
.newsletter-form-icon .quform-has-error input {
  border-color: #61CE70; }
.newsletter-form-icon .quform-has-error textarea {
  border-color: #61CE70; }
.newsletter-form-icon .quform-has-error select {
  border-color: #61CE70; }
.newsletter-form-icon .quform-input .quform-errors-wrap {
  right: 15px; }
.newsletter-form-icon i {
  font-size: 1.2rem;
  line-height: 2rem; }

/*newsletter-one*/
.newsletter-one .form-control {
  min-height: 55px;
  border-radius: 50px;
  padding: 18px 70px 18px 28px;
  border: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  background: transparent;
  color: #fff; }
.newsletter-one .quform-submit-inner {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: unset; }
  .newsletter-one .quform-submit-inner .butn {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #61CE70 !important;
    border-radius: 50%;
    border: none;
    padding: 0;
    transition: all 0.3s ease-in-out; }

/* social-icon-style1 */
.social-icon-style1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 30px 0;
  padding: 35px 0;
  border-top: 1px solid #cdd2cf;
  border-bottom: 1px solid #cdd2cf; }
  .social-icon-style1 ul {
    margin-left: 30px;
    padding-left: 0;
    margin-bottom: 0; }
    .social-icon-style1 ul li {
      display: inline-block;
      list-style: none;
      margin: 4px; }
      .social-icon-style1 ul li a {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #cdd2cf;
        color: #0c3344;
        -webkit-transition: all 0.4s ease-out 0s;
        transition: all 0.4s ease-out 0s; }
        .social-icon-style1 ul li a:hover {
          color: #fff;
          border-color: #61CE70;
          background: #61CE70; }

/*social-icon-style2*/
.social-icon-style2 {
  margin-bottom: 0;
  display: inline-block;
  padding-left: 0px;
  list-style: none; }
  .social-icon-style2 li {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px; }
    .social-icon-style2 li a {
      display: inline-flex;
      font-size: 14px;
      text-align: center;
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.1);
      height: 50px;
      width: 50px;
      justify-content: center;
      align-items: center;
      border-radius: 50%; }
      .social-icon-style2 li a:hover {
        background: #61CE70; }
    .social-icon-style2 li:last-child {
      margin-right: 0; }

/* .social-icon-style3*/
.social-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; }
  .social-wrapper::before {
    content: "";
    flex: 2;
    height: 1px;
    background: rgba(255, 255, 255, 0.3); }
  .social-wrapper::after {
    content: "";
    flex: 2;
    height: 1px;
    background: rgba(255, 255, 255, 0.3); }

.social-icon-style3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none; }
  .social-icon-style3 li a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    text-decoration: none; }

/* social-icon-style4 */
.social-icon-style4 li {
  display: inline-block;
  margin-right: 5px;
  -moz-transition-duration: .3s;
  -ms-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  -o-transition-duration: .3s;
  transition-duration: 0.3s;
  margin-bottom: 10px; }
  .social-icon-style4 li:last-child {
    margin-right: 0; }
  .social-icon-style4 li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 15px;
    border-radius: 50%; }
    .social-icon-style4 li a:hover {
      color: rgba(255, 255, 255, 0.6); }

@media screen and (max-width: 1599px) {
  .social-icon-style4 li a {
    width: 38px;
    height: 38px;
    font-size: 13px; } }
/* social-icon-style5 */
.social-icon-style5 li {
  display: inline-block;
  margin-right: 5px;
  -moz-transition-duration: .3s;
  -ms-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  -o-transition-duration: .3s;
  transition-duration: 0.3s;
  margin-bottom: 10px; }
  .social-icon-style5 li:last-child {
    margin-right: 0; }
  .social-icon-style5 li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 15px;
    border-radius: 50%; }
    .social-icon-style5 li a:hover {
      color: rgba(255, 255, 255, 0.6); }

@media screen and (max-width: 1599px) {
  .social-icon-style5 li a {
    width: 38px;
    height: 38px;
    font-size: 13px; } }
/*==============================
*    Footer
*    ================================ */
/* footer */
footer {
  overflow: hidden; }
  footer .email {
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    display: inline-block;
    padding-bottom: 5px; }
    footer .email a {
      color: rgba(255, 255, 255, 0.7);
      position: relative;
      transition: all 0.8s ease; }
      footer .email a:hover {
        color: #61CE70 !important; }
        footer .email a:hover:after {
          width: 100%; }
      footer .email a:active {
        color: #61CE70 !important; }
        footer .email a:active:after {
          width: 100%; }
      footer .email a:focus {
        color: #61CE70 !important; }
        footer .email a:focus:after {
          width: 100%; }
      footer .email a:after {
        border-bottom: 1px solid #fff;
        transition: all 0.8s ease;
        content: "";
        display: inline-block;
        position: absolute;
        bottom: -10px;
        right: 0;
        width: 0; }
  footer .phone {
    padding-bottom: 0;
    margin-bottom: 0; }
    footer .phone a {
      padding-bottom: 0;
      letter-spacing: -0.05rem;
      color: white; }
      footer .phone a:hover {
        color: #61CE70 !important; }
      footer .phone a:active {
        color: #61CE70 !important; }
      footer .phone a:focus {
        color: #61CE70 !important; }
  footer li {
    list-style: none;
    word-wrap: break-word; }
    footer li:first-child {
      margin-top: 0;
      border-top: 0;
      padding-top: 0; }
    footer li a {
      color: #fff; }
      footer li a:hover {
        color: #61CE70; }
      footer li a:active {
        color: #61CE70; }
      footer li a:focus {
        color: #61CE70; }
  footer label {
    color: #fff; }

.footer-logo {
  max-width: 215px;
  width: 100%;
  display: block; }

.footer-logo.small {
  max-width: 90px;
  width: 100%;
  display: block; }

.footer-list {
  list-style: none; }
  .footer-list li {
    margin-bottom: 15px; }
    .footer-list li:last-child {
      margin-bottom: 0; }
    .footer-list li a {
      color: rgba(255, 255, 255, 0.7);
      transition-duration: .2s;
      font-size: 15px; }
      .footer-list li a:hover {
        color: #61CE70; }
      .footer-list li a:active {
        color: #61CE70; }
      .footer-list li a:focus {
        color: #61CE70; }

.left-icon i {
  margin-right: 6px;
  margin-left: 0; }

@media screen and (max-width: 767px) {
  footer .email a:after {
    bottom: -10px; } }
/*footer-style01*/
.footer-style01 .h2 {
  font-size: 100px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 76px;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 0; }

@media screen and (max-width: 1399px) {
  .footer-style01 .h2 {
    font-size: 84px; } }
@media screen and (max-width: 1199px) {
  .footer-style01 .h2 {
    font-size: 71px; } }
@media screen and (max-width: 767px) {
  .footer-style01 .h2 {
    font-size: 44px; } }
/*footer-style02*/
.footer-style02 .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 60px;
  margin-bottom: 60px; }
  .footer-style02 .footer-top .footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .footer-style02 .footer-top .footer-contact .icon-box {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #61CE70;
      border-radius: 50%;
      margin-right: 15px; }

@media screen and (max-width: 1199px) {
  .footer-style02 .footer-top {
    padding-bottom: 46px;
    margin-bottom: 54px; } }
@media screen and (max-width: 991px) {
  .footer-style02 .footer-top {
    padding-bottom: 40px;
    margin-bottom: 37px; } }


/* faiz */


    /* ==========================================================================
   CAREER LINES — ALL-IN-ONE CUSTOM CSS
   SAFE PAGE INDEX — ORIGINAL CASCADE PRESERVED
   ==========================================================================

   IMPORTANT
   --------------------------------------------------------------------------
   This file keeps every CSS rule in its ORIGINAL working position.
   Only documentation/comments are improved.
   Do NOT rearrange existing CSS blocks because later rules can intentionally
   override earlier rules.

   PAGE / GLOBAL INDEX
   --------------------------------------------------------------------------
   00. GLOBAL FOOTER
       Search: CAREER LINES — GLOBAL FOOTER

   01. HOME PAGE
       Search: CAREER LINES — HOME PAGE

   02. ABOUT US PAGE
       Search: CAREER LINES — ABOUT US PAGE

   03. STUDENTS & PARENTS PAGE
       Search: CAREER LINES — STUDENTS & PARENTS PAGE

   04. CONTACT US PAGE
       Search: CAREER LINES — CONTACT US PAGE

   05. JOIN AS CONSULTANT PAGE
       Search: CAREER LINES — JOIN AS CONSULTANT PAGE

   06. INSTITUTIONS PAGE
       Search: CAREER LINES — INSTITUTIONS PAGE

   07. FAQ PAGE
       Search: CAREER LINES — FAQ PAGE

   08. VOCATIONAL INTERESTS
       Search: CAREER LINES — VOCATIONAL INTERESTS PAGE

   09. BEHAVIOUR & WORK APPROACH
       Search: CAREER LINES — BEHAVIOUR & WORK APPROACH PAGE

   10. SOCIAL & EMOTIONAL INTELLIGENCE
       Search: CAREER LINES — SOCIAL & EMOTIONAL INTELLIGENCE PAGE

   11. LEADERSHIP & INFLUENCE
       Search: CAREER LINES — LEADERSHIP & INFLUENCE PAGE

   12. ABILITIES
       Search: CAREER LINES — ABILITIES PAGE

   MERGED OVERRIDES
   --------------------------------------------------------------------------
   • Institutions former inline CSS is intentionally kept later in this file.
   • FAQ former inline CSS is intentionally kept later in this file.
   • These later blocks are part of the working cascade. Do not move them.

   FUTURE EDITING RULE
   --------------------------------------------------------------------------
   Add new CSS near the relevant existing page block, but if an override must
   win over older rules, place it after the rules it needs to override.
   ========================================================================== */


/* ==========================================================================
   01. CAREER LINES — HOME PAGE
   Motivo Home 02 custom integration styles
   ========================================================================== */
/*
===============================================================================
CAREER LINES — ORGANIZED STYLESHEET
===============================================================================
01. BASE / THEME
02. UTILITIES / COMMON COMPONENTS
03. CAREER LINES DESIGN TOKENS
04. GLOBAL TYPOGRAPHY
05. GLOBAL CAREER LINES SECTIONS
06. HERO
07. FRAMEWORK / PILLARS
08. METRICS / DEEP-DIVE
09. DIRECTION / DIAGNOSTIC
10. AUDIENCE / PACKAGE
11. NAVBAR / HEADER
12. ANIMATIONS
13. RESPONSIVE — LARGE
14. RESPONSIVE — TABLET
15. RESPONSIVE — MOBILE
16. CHATBOT / FLOATING UI
17. SCROLL-TO-TOP
18. ACCESSIBILITY
===============================================================================
*/

/*
===============================================================================
CAREER LINES — HOME / GLOBAL STYLES
===============================================================================
SECTION MAP
01. Base / Utilities
02. Buttons & Global Controls
03. Legacy Theme Compatibility
04. Career Lines Design Tokens
05. Global Career Lines Sections
06. Hero
07. Framework / Pillars
08. Metrics / Deep-Dive
09. Direction / Diagnostic
10. Audience / Package
11. Navbar / Header
12. Scroll & Reveal Animations
13. Responsive — Large Screens
14. Responsive — Tablet
15. Responsive — Mobile
16. Chatbot / Floating UI
17. Accessibility / Reduced Motion
18. Page-Specific Home Overrides
===============================================================================
*/

:root {
  --primary-color: #61CE70;
  --secondary-color: #006D77;
}

#preloader {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999999;
  transition: 0.3s ease opacity;
  text-align: center;
  width: 100%;
  height: 100%;
}

#preloader:before {
  content: "";
  width: 80px;
  height: 80px;
  border: 3px solid #61CE70;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation-name: LoaderCicle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#preloader:after {
  content: "";
  width: 80px;
  height: 80px;
  border: 3px solid #61CE70;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation-name: LoaderCicle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}

/* ================================================================
   12.1 KEYFRAME ANIMATIONS
   ================================================================ */

@keyframes LoaderCicle {
  0% { width: 0;
  height: 0;
  opacity: 0;
  } 10% { width: 10px;
  height: 10px;
  opacity: 1;
  } 80% { width: 60px;
  height: 60px;
  opacity: 0.1;
  } 100% { width: 70px;
  height: 70px;
  opacity: 0;
  };
}

a:hover,
a:active {
  color: #61CE70;
  text-decoration: none;
}

.ls-minus-2px {
  letter-spacing: -2px;
}

.bg-secondary {
  background-color: #006D77 !important;
}

.bg-linear-gradient {
  position: relative;
}

.bg-linear-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg, #dfecf0 20%, #fff 100%);
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 0;
}

.bg-linear-gradient .container {
  position: relative;
  z-index: 1;
}

.rotate {
  -ms-animation: rotate 12s linear infinite;
  -o-animation: rotate 12s linear infinite;
  -moz-animation: rotate 12s linear infinite;
  -webkit-animation: rotate 12s linear infinite;
  animation: rotate 12s linear infinite;
}

@-webkit-keyframes rotate {
  from { -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  } to { -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  };
}

@-moz-keyframes rotate {
  from { -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  } to { -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  };
}

@-ms-keyframes rotate {
  from { -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  } to { -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  };
}

@keyframes rotate {
  from { -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  } to { -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  };
}

/* ================================================================
   17. SCROLL-TO-TOP
   ================================================================ */

.scroll-top-percentage {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  position: fixed;
  bottom: 40px;
  color: #fff;
  right: 50px;
  -webkit-transform: scale(0);
  transform: scale(0);
  display: -ms-grid;
  display: grid;
  place-items: center;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 100;
}

.scroll-top-percentage.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running scrollToTop;
  animation: 500ms ease-in-out 0s normal none 1 running scrollToTop;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#scroll-value {
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  color: #fff;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
}

#scroll-value i {
  font-size: 20px;
}

/* ================================================================
   15.1 RESPONSIVE — SMALL MOBILE
   ================================================================ */

@media (max-width: 575px) {
  .scroll-top-percentage { right: 30px;
  bottom: 20px;
  };
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .scroll-top-percentage { right: 30px;
  bottom: 20px;
  };
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-top-percentage { right: 30px;
  bottom: 20px;
  };
}

@-webkit-keyframes "scrollToTop" {
  0% { -webkit-transform: translate3d(0, 80%, 0);
  transform: translate3d(0, 80%, 0);
  visibility: visible;
  } to { -webkit-transform: translateZ(0);
  transform: translateZ(0);
  };
}

@keyframes "scrollToTop" {
  0% { -webkit-transform: translate3d(0, 80%, 0);
  transform: translate3d(0, 80%, 0);
  visibility: visible;
  } to { -webkit-transform: translateZ(0);
  transform: translateZ(0);
  };
}

.butn-style02 {
  background-color: #61CE70;
  color: #fff !important;
  font-size: 14px !important;
  padding: 12px 30px !important;
  display: inline-block;
  border: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  width: auto;
  white-space: normal;
  word-wrap: break-word;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 0.15rem;
}

.butn-style02:hover {
  color: #fff !important;
  -webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

.butn-style02.white {
  background-color: #fff;
  color: #1e3238 !important;
}

.butn-style02.secondary {
  background-color: #61CE70;
  color: #fff !important;
}

.butn-style02.md {
  padding: 10px 26px !important;
}

.butn-style02.sm {
  padding: 8px 24px !important;
}

@-webkit-keyframes "btn_shine" {
  100% { left: 200%;
  };
}

@keyframes "btn_shine" {
  100% { left: 200%;
  };
}

.navbar-nav li.current > a {
  color: #61CE70 !important;
}

.navbar-nav li.active > a {
  color: #61CE70 !important;
}

.navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent !important;
}

.menu_area-light .navbar-nav li.current > a {
  color: #61CE70;
}

.menu_area-light .navbar-nav li.active > a {
  color: #61CE70;
}

.menu_area-light .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent;
}

.menu_area-light.scrollHeader .navbar-nav li.current > a {
  color: #61CE70;
}

.menu_area-light.scrollHeader .navbar-nav li.current > a:hover {
  color: #61CE70;
}

.menu_area-light.scrollHeader .navbar-nav li.active > a {
  color: #61CE70;
}

.menu_area-light.scrollHeader .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent;
}

.header-style2 .navbar-nav li.current > a {
  color: #61CE70;
}

.header-style2 .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent;
}

.header-style2.scrollHeader .navbar-nav li.current > a {
  color: #61CE70;
}

.header-style2.scrollHeader .navbar-nav li.current > a:hover {
  color: #61CE70;
}

.header-style2.scrollHeader .navbar > ul > li.current > a:after {
  border-color: transparent #61CE70 #61CE70 transparent;
}

.header-style3 .navbar-nav li.current > a {
  color: #61CE70;
}

.header-style3 .navbar-nav li.active > a {
  color: #61CE70;
}

@media screen and (min-width: 992px) {
  .menu_area-light .navbar ul ul li.active > a { color: #61CE70;
  }.menu_area-light .navbar > ul > li.has-sub > a: hover:after { border-color: #61CE70;
  }.menu_area-light .navbar-nav li.has-sub a: hover { color: #61CE70;
  }.menu_area-light .navbar-light .navbar-nav > li > a: hover { color: #61CE70;
  }.menu_area-light .navbar-light .navbar-nav > li > a: active { color: #61CE70;
  }.menu_area-light .navbar-light .navbar-nav > li > a: focus { color: #61CE70;
  }.menu_area-light.scrollHeader .navbar-nav > li.has-sub > a: hover { color: #61CE70;
  }.header-style2.scrollHeader .navbar-nav > li.has-sub > a: hover { color: #61CE70;
  }.header-style2.scrollHeader .navbar-nav > li.has-sub > a: hover:after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style2.scrollHeader .navbar-nav li.current > a { color: #61CE70;
  }.header-style2.scrollHeader .navbar-nav li.current > a: hover { color: #61CE70;
  }.header-style2.scrollHeader .navbar > ul > li.current > a: after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style2 .navbar > ul > li.has-sub.current > a: hover:after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style2 .navbar > ul > li.has-sub > a: hover:after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style2 .navbar > ul > li.has-sub > a: active:after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style2 .navbar > ul > li.has-sub > a: focus:after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style2 .navbar ul ul li.active > a { color: #61CE70;
  color: #61CE70;
  }.header-style2 .navbar-nav li.has-sub a: hover { color: #61CE70;
  }.header-style2 .navbar-nav li.has-sub a: active { color: #61CE70;
  }.header-style2 .navbar-nav li.has-sub a: focus { color: #61CE70;
  }.header-style2 .navbar-nav li.current > a { color: #61CE70;
  }.header-style2 .navbar-nav li.active > a { color: #61CE70;
  }.header-style3 .navbar-nav li.active > a { color: #61CE70;
  }.header-style3 .navbar-nav > li > a: hover { color: #61CE70;
  }.header-style3 .navbar-nav > li > a: active { color: #61CE70;
  }.header-style3 .navbar-nav > li > a: focus { color: #61CE70;
  }.header-style3 .navbar-nav li.has-sub a: hover { color: #61CE70;
  }.header-style3 .navbar-nav li.current > a { color: #61CE70;
  }.header-style3 .navbar-nav > li.has-sub > a: hover { color: #61CE70;
  }.header-style3 .navbar ul ul li.active > a { color: #61CE70;
  }.header-style3 .navbar > ul > li.has-sub > a: hover:after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style3 .navbar > ul > li.current > a: after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style3.scrollHeader .navbar-nav > li.has-sub > a: hover { color: #61CE70;
  }.header-style3.scrollHeader .navbar-nav > li.active > a { color: #61CE70;
  }.header-style3.scrollHeader .navbar-nav li.current > a { color: #61CE70;
  }.header-style3.scrollHeader .navbar-nav li.current > a: hover { color: #61CE70;
  }.header-style3.scrollHeader .navbar > ul > li.has-sub > a: hover:after { border-color: transparent #61CE70 #61CE70 transparent;
  }.header-style3.scrollHeader .navbar > ul > li.current > a: after { border-color: transparent #61CE70 #61CE70 transparent;
  };
}

@media screen and (max-width: 991px) {
  .header-style1 .navbar-toggler { background: #61CE70;
  }.header-style1 .navbar-toggler: after { border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  }.header-style1 .navbar-toggler: before { background: #fff;
  }.header-style1 .navbar-toggler.menu-opened: after { background: #fff;
  }.header-style1 .navbar-toggler.menu-opened: before { background: #fff;
  }.header-style3 .navbar-toggler { background: #61CE70;
  }.header-style3 .navbar-toggler: after { border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  }.header-style3 .navbar-toggler: before { background: #fff;
  }.header-style3 .navbar-toggler.menu-opened: after { background: #fff;
  }.header-style3 .navbar-toggler.menu-opened: before { background: #fff;
  };
}

.slider-fade1 .owl-item.active .bg-img {
  -webkit-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}

.slider-thumb-img.owl-thumbs .owl-thumb-item.active {
  opacity: 1;
  border: 2px solid #61CE70;
  border-radius: 50%;
}

.banner-style01 .container-fluid {
  padding: 0 5.5rem;
}

@media screen and (max-width: 1599px) {
  .banner-style01 .container-fluid { padding: 0 2rem;
  };
}

@media screen and (max-width: 575px) {
  .banner-style01 .container-fluid { padding: 0 1.5rem;
  };
}

.title-style01 i {
  color: #61CE70;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 120px #006d77;
}

.title-style01 .sub-title {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5em;
  letter-spacing: -0.02em;
  width: fit-content;
  background: linear-gradient(100deg, #61CE70 0%, rgba(97, 203, 112, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  padding-left: 10px;
}

.title-style01 .sub-title.primary {
  background: linear-gradient(100deg, #61CE70 0%, rgba(97, 203, 112, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
}

.page-title-section .active a {
  color: #fff;
}

.page-title-section li.active:last-child a {
  color: #fff;
}

.pagination .active a {
  background-color: #f7f7f7;
  color: #999;
  cursor: default;
}

.pagination-style01 ul li.active a {
  background: #006D77;
  color: #fff;
  box-shadow: 0 0 10px rgba(23, 23, 23, 0.15) !important;
}

.owl-thumbs.active img {
  opacity: 1;
}

.owl-carousel .owl-dots .owl-dot.active span {
  background: #61CE70;
}

.cetegory li.active a {
  background-color: #61CE70;
  color: #fff;
}

.blog-sidebar .widget .category-list li.active a:after {
  margin-left: 10px;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.lg-outer .lg-thumb-item.active {
  border-color: #61CE70;
}

.filtering .active {
  color: #ffffff;
  background: #61CE70;
}

@-webkit-keyframes "rotated_circle" {
  0% { -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  } 100% { -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  };
}

@keyframes "rotated_circle" {
  0% { -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  } 100% { -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  };
}

@keyframes "float" {
  0% { transform: translateY(0px);
  } 50% { transform: translateY(5px);
  } 100% { transform: translateY(10px);
  };
}

@keyframes "pulse-border" {
  0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.2);
  };
}

.process-style01 .process-box.active {
  background-color: #61CE70;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.process-style01 .process-box.active .diamond-shape {
  background-color: #fff;
}

.process-style01 .process-box.active .h5 {
  color: #ffffff;
}

.process-style01 .process-box.active p {
  color: #ffffff;
}

.process-style01 .process-box.active .process-step {
  background-color: #ffffff;
  color: #61CE70;
}

.process-style01 .process-box.active .process-line {
  background-color: rgba(255, 255, 255, 0.2);
}

footer {
  overflow: hidden;
}

footer li {
  list-style: none;
  word-wrap: break-word;
}

footer li:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

footer li a {
  color: #fff;
}

footer li a:hover {
  color: #61CE70;
}

footer li a:active {
  color: #61CE70;
}

footer li a:focus {
  color: #61CE70;
}

footer label {
  color: #fff;
}

:root {
  --cl-teal: #087b80;
  --cl-teal-dark: #034b50;
  --cl-green: #5bcf6c;
  --cl-mint: #e9f8f1;
  --cl-ink: #073f45;
  --cl-copy: #5f7375;
  --cl-line: rgba(7, 63, 69, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--cl-copy);
}

/* ================================================================
   05. GLOBAL CAREER LINES SECTIONS
   ================================================================ */

.cl-section {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
}

.cl-section-label,
.cl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--cl-teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.cl-section-label.light {
  color: var(--cl-green);
}

.cl-section-title {
  margin-bottom: 22px;
  color: var(--cl-ink);
  font-size: clamp(36px, 4.6vw, 66px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -2px;
}

/* ================================================================
   08. METRICS / DEEP-DIVE
   ================================================================ */

.cl-section-title span,
.cl-metrics-panel h2 span {
  display: block;
  color: var(--cl-green);
}

.cl-section-lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.8;
}

.cl-support-title {
  margin: 28px 0 14px;
  color: var(--cl-ink);
  font-size: 25px;
}

.cl-mini-label {
  display: block;
  margin-bottom: 12px;
  color: var(--cl-teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}

/* ================================================================
   06. HERO SECTION
   ================================================================ */

.cl-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: radial-gradient(circle at 78% 20%, rgba(91, 207, 108, 0.17), transparent 25%), radial-gradient(circle at 12% 8%, rgba(8, 123, 128, 0.12), transparent 24%), linear-gradient(120deg, #f7fffb 0%, #ffffff 46%, #edf9f5 100%);
  border-bottom: 1px solid rgba(7, 63, 69, 0.08);
  padding: 0px;
}

.min-vh-85 {
  min-height: 720px;
}

.cl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image: linear-gradient(rgba(8, 123, 128, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 123, 128, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 73%);
  mask-image: linear-gradient(to right, #000, transparent 73%);
}

.cl-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.cl-hero-orb-one {
  top: -230px;
  right: -130px;
  width: 570px;
  height: 570px;
  border: 1px solid rgba(8, 123, 128, 0.11);
  background: rgba(91, 207, 108, 0.1);
}

.cl-hero-orb-two {
  bottom: -270px;
  left: 34%;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(8, 123, 128, 0.08);
  background: rgba(8, 123, 128, 0.055);
}

.cl-eyebrow {
  padding: 10px 17px;
  border: 1px solid rgba(8, 123, 128, 0.18);
  border-radius: 30px;
  color: var(--cl-teal);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 35px rgba(7, 63, 69, 0.07);
  backdrop-filter: blur(12px);
}

.cl-hero-title {
  max-width: 760px;
  margin: 24px 0 25px;
  color: var(--cl-ink);
  font-size: clamp(47px, 4vw, 78px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -3px;
}

.cl-hero-title > span {
  display: block;
  width: fit-content;
  color: transparent;
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-green));
  -webkit-background-clip: text;
  background-clip: text;
}

.cl-success-word {
  position: relative;
  display: inline-flex;
  padding: 0 2px 7px;
  perspective: 600px;
}

.cl-success-word > span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-green));
  -webkit-background-clip: text;
  background-clip: text;
  transform-origin: center bottom;
  animation: clLetterWave 3.4s cubic-bezier(.22, .9, .35, 1) infinite;
  animation-delay: calc(var(--letter-index) * 90ms);
}

.cl-success-word::before {
  content: "";
  position: absolute;
  left: 3%;
  bottom: 1px;
  width: 94%;
  height: 3px;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(8, 123, 128, 0.12);
}

.cl-success-word::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 3%;
  width: 20%;
  height: 7px;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--cl-teal), #9af4a7);
  box-shadow: 0 0 12px rgba(91, 207, 108, .65), 0 0 25px rgba(8, 123, 128, .28);
  animation: clAccentTravel 3.4s ease-in-out infinite;
}

@keyframes clLetterWave {
  0%, 12%, 52%, 100% { opacity: 1;
  filter: drop-shadow(0 0 0 rgba(91, 207, 108, 0));
  transform: translateY(0) rotateX(0) scale(1);
  } 22% { opacity: .78;
  filter: drop-shadow(0 10px 10px rgba(8, 123, 128, .12));
  transform: translateY(-10px) rotateX(12deg) scale(1.035);
  } 32% { opacity: 1;
  filter: drop-shadow(0 5px 8px rgba(91, 207, 108, .32));
  transform: translateY(0);
  };
}

@keyframes clAccentTravel {
  0%, 12% { opacity: 0;
  transform: translateX(0) scaleX(.25);
  } 24% { opacity: 1;
  transform: translateX(0) scaleX(1);
  } 48% { opacity: 1;
  transform: translateX(370%) scaleX(1);
  } 62%, 100% { opacity: 0;
  transform: translateX(370%) scaleX(.25);
  };
}

/* ================================================================
   18. ACCESSIBILITY / REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .cl-success-word, .cl-success-word > span, .cl-success-word: :after { animation: none;
  }.cl-success-word: :after { opacity: 1;
  width: 94%;
  height: 3px;
  transform: none;
  };
}

.cl-hero-copy {
  max-width: 690px;
  margin-bottom: 30px;
  color: #506b6d;
  font-size: 17px;
  line-height: 1.75;
}

.cl-hero-copy p {
  margin-bottom: 12px;
  text-align: justify;
}

.cl-hero-copy p:last-child {
  margin-bottom: 0;
}

.cl-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 11px 24px;
  border: 1px solid rgba(8, 123, 128, 0.45);
  border-radius: 2px;
  color: var(--cl-teal);
  background: rgba(255, 255, 255, 0.62);
  font-weight: 700;
  transition: all .3s ease;
}

.cl-outline-btn:hover {
  color: #fff;
  border-color: var(--cl-teal);
  background: var(--cl-teal);
}

.cl-hero-visual {
  position: relative;
  max-width: 560px;
  margin-left: auto;
  padding: 36px 22px 32px 42px;
}

.cl-hero-image-wrap {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 10px solid rgba(255,255,255,.95);
  border-radius: 32px 32px 110px 32px;
  background: linear-gradient(145deg, #dff7ed, #cbece4);
  box-shadow: 0 35px 80px rgba(7, 63, 69, 0.18);
}

.cl-hero-image-wrap img {
  width: 100%;
  height: 525px;
  object-fit: cover;
  object-position: right bottom;
  transition: transform .8s ease;
}

.cl-hero-visual:hover .cl-hero-image-wrap img {
  transform: scale(1.035);
}

.cl-hero-visual::before,
.cl-hero-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  border-radius: 34px 34px 110px 34px;
  background: rgba(8, 123, 128, 0.13);
}

.cl-hero-visual::before {
  top: 56px;
  left: 26px;
  transform: rotate(-4deg);
}

.cl-hero-visual::after {
  top: 72px;
  left: 60px;
  background: rgba(91, 207, 108, 0.17);
  transform: rotate(4deg);
}

.cl-floating-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 205px;
  padding: 14px 17px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 15px;
  color: var(--cl-ink);
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 45px rgba(7, 63, 69, 0.15);
  backdrop-filter: blur(15px);
}

.cl-floating-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: var(--cl-teal);
}

.cl-floating-card strong,
.cl-floating-card small {
  display: block;
}

.cl-floating-card strong {
  color: var(--cl-ink);
  font-size: 15px;
}

.cl-floating-card small {
  color: #728486;
  font-size: 11px;
}

.cl-float-top {
  top: 9px;
  right: -30px;
}

.cl-float-bottom {
  bottom: 22px;
  left: 0;
}

.cl-progress-card {
  position: absolute;
  right: -18px;
  bottom: 72px;
  z-index: 4;
  width: 168px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 20px 48px rgba(7, 63, 69, .14);
  backdrop-filter: blur(15px);
}

.cl-progress-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--cl-ink);
  font-size: 12px;
  font-weight: 800;
}

.cl-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 20px;
  background: #dfecea;
}

.cl-progress-track i {
  display: block;
  width: 76%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-green));
  animation: clProgress 1.8s ease-out both;
}

.cl-progress-card strong {
  display: block;
  margin-top: 7px;
  color: var(--cl-teal);
  font-size: 13px;
}

@keyframes clProgress {
  from { width: 0;
  } to { width: 76%;
  };
}

/* ================================================================
   07. FRAMEWORK — PILLAR CARDS
   ================================================================ */

.cl-pillar-card {
  position: relative;
  height: 100%;
  min-height: 285px;
  padding: 30px 25px;
  overflow: hidden;
  border: 1px solid var(--cl-line);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 16px 40px rgba(7,63,69,.07);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.cl-pillar-card:hover {
  transform: translateY(-9px);
  border-color: rgba(91,207,108,.55);
  box-shadow: 0 25px 60px rgba(7,63,69,.13);
}

.cl-pillar-number {
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(7,63,69,.17);
  font-size: 32px;
  font-weight: 800;
}

.cl-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--cl-teal), var(--cl-green));
  box-shadow: 0 12px 25px rgba(8,123,128,.2);
}

.cl-pillar-card h3 {
  min-height: 55px;
  margin-bottom: 13px;
  color: var(--cl-ink);
  font-size: 19px;
  line-height: 1.35;
}

.cl-pillar-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

.cl-metrics-panel {
  position: relative;
  padding: 52px;
  overflow: hidden;
  border: 1px solid rgba(8,123,128,.13);
  border-radius: 28px;
  background: radial-gradient(circle at 100% 0, rgba(91,207,108,.14), transparent 27%), radial-gradient(circle at 0 100%, rgba(8,123,128,.07), transparent 30%), #fff;
  box-shadow: 0 25px 70px rgba(7,63,69,.08);
}

.cl-metrics-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 52px;
  width: 110px;
  height: 4px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-green));
}

.cl-metrics-intro {
  position: relative;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--cl-line);
}

.cl-metrics-simple {
  padding: 10px 0;
  border-bottom: 0;
}

.cl-metrics-simple h2 {
  margin-bottom: 0;
}

.cl-metrics-text-card {
  position: relative;
  padding: 30px 32px;
  overflow: hidden;
  border: 1px solid rgba(8, 123, 128, .12);
  border-radius: 20px;
  background: rgba(247, 252, 250, .82);
  box-shadow: 0 16px 38px rgba(7, 63, 69, .055);
}

.cl-metrics-text-card::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(var(--cl-teal), var(--cl-green));
}

.cl-metrics-panel h2 {
  max-width: 780px;
  margin-bottom: 18px;
  color: var(--cl-ink);
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1;
  letter-spacing: -1.7px;
}

.cl-metrics-panel h2 span {
  display: inline;
}

.cl-metrics-copy {
  max-width: 860px;
  margin: 0;
  color: #617678;
  font-size: 15px;
  line-height: 1.75;
  text-align: justify;
}

.cl-metrics-copy + .cl-metrics-copy {
  margin-top: 9px;
}

/* ================================================================
   09. DIRECTION / STORY
   ================================================================ */

.cl-direction-section {
  background: linear-gradient(125deg, rgba(3,75,80,.98), rgba(8,123,128,.94)), url("../img/bg/bg-02.jpg") center/cover no-repeat !important;
}

.cl-image-composition {
  position: relative;
  max-width: 580px;
}

.cl-main-image {
  width: 100%;
  height: 540px;
  object-fit: cover;
  border: 10px solid rgba(255,255,255,.1);
  border-radius: 22px;
  box-shadow: 0 35px 80px rgba(0,0,0,.24);
}

.cl-image-note {
  position: absolute;
  right: -30px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 250px;
  padding: 18px;
  border-radius: 14px;
  color: var(--cl-ink);
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.cl-image-note i {
  color: var(--cl-green);
  font-size: 24px;
}

.cl-image-note strong {
  display: block;
}

.cl-light-copy {
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.85;
}

/* ================================================================
   09.1 DIAGNOSTIC EXPLORER
   ================================================================ */

.cl-diagnostic-section {
  background: radial-gradient(circle at 7% 15%, rgba(8, 123, 128, .09), transparent 24%), radial-gradient(circle at 94% 88%, rgba(91, 207, 108, .12), transparent 22%), #f5fbf9 !important;
}

.cl-diagnostic-explorer {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(8, 123, 128, .13);
  border-radius: 30px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 30px 80px rgba(7, 63, 69, .1);
  backdrop-filter: blur(14px);
}

.cl-dimension-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(circle at 15% 0, rgba(91, 207, 108, .24), transparent 35%), linear-gradient(155deg, var(--cl-teal-dark), var(--cl-teal));
}

.cl-dimension-nav::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .035), 0 0 0 56px rgba(255, 255, 255, .025);
  pointer-events: none;
}

.cl-dimension-tab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 72px;
  padding: 11px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .055);
  text-align: left;
  cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.cl-dimension-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, #fff, #eaffef);
  transform: translateX(-105%);
  transition: transform .42s cubic-bezier(.22, .85, .3, 1);
}

.cl-dimension-tab:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  transform: translateX(5px);
}

.cl-dimension-tab.is-active {
  color: var(--cl-ink);
  border-color: #fff;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .14);
  transform: translateX(5px);
}

.cl-dimension-tab.is-active::before {
  transform: translateX(0);
}

.cl-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.cl-dimension-tab.is-active .cl-tab-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--cl-teal), var(--cl-green));
  transform: rotate(-6deg) scale(1.06);
}

.cl-dimension-tab strong {
  font-size: 13px;
  line-height: 1.35;
}

.cl-tab-number {
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  font-weight: 800;
}

.cl-dimension-tab.is-active .cl-tab-number {
  color: var(--cl-teal);
}

.cl-dimension-stage {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(8, 123, 128, .09);
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0, rgba(91, 207, 108, .14), transparent 30%), #fff;
}

.cl-dimension-stage::before {
  content: "05";
  position: absolute;
  right: 28px;
  bottom: -42px;
  color: rgba(8, 123, 128, .035);
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.cl-dimension-panel {
  position: relative;
  z-index: 1;
  padding: 46px;
  animation: clDimensionReveal .58s cubic-bezier(.2, .8, .3, 1) both;
}

.cl-dimension-panel[hidden] {
  display: none !important;
}

.cl-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}

.cl-panel-title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cl-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--cl-teal), var(--cl-green));
  box-shadow: 0 16px 32px rgba(8, 123, 128, .22);
  animation: clIconFloat 3.2s ease-in-out infinite;
}

.cl-panel-title-wrap small {
  display: block;
  margin-bottom: 5px;
  color: var(--cl-teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.cl-panel-title-wrap h3 {
  margin: 0;
  color: var(--cl-ink);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.1;
}

.cl-panel-number {
  color: rgba(8, 123, 128, .12);
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
}

.cl-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cl-insight-card {
  position: relative;
  min-height: 235px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(8, 123, 128, .11);
  border-radius: 19px;
  background: #f7fcfa;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.cl-insight-card:last-child {
  background: linear-gradient(145deg, #f2fbf6, #eaf8ef);
}

.cl-insight-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -35px;
  width: 110px;
  height: 110px;
  border: 18px solid rgba(91, 207, 108, .08);
  border-radius: 50%;
}

.cl-insight-card:hover {
  border-color: rgba(91, 207, 108, .5);
  box-shadow: 0 20px 40px rgba(7, 63, 69, .09);
  transform: translateY(-6px);
}

.cl-insight-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--cl-teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.cl-insight-label i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  color: #fff;
  background: var(--cl-teal);
}

.cl-insight-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #5d7375;
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
}

@keyframes clDimensionReveal {
  from { opacity: 0;
  transform: translateY(22px) scale(.985);
  } to { opacity: 1;
  transform: translateY(0) scale(1);
  };
}

@keyframes clIconFloat {
  0%, 100% { transform: translateY(0) rotate(0);
  } 50% { transform: translateY(-6px) rotate(4deg);
  };
}

@media screen and (max-width: 991px) {
  .cl-diagnostic-explorer { grid-template-columns: 1fr;
  }.cl-dimension-nav { display: grid;
  grid-template-columns: repeat(5, minmax(185px, 1fr));
  overflow-x: auto;
  scrollbar-width: thin;
  }.cl-dimension-tab, .cl-dimension-tab: hover, .cl-dimension-tab.is-active { transform: none;
  };
}

@media screen and (max-width: 767px) {
  .cl-diagnostic-explorer { padding: 10px;
  border-radius: 22px;
  }.cl-dimension-nav { padding: 12px;
  border-radius: 17px;
  }.cl-dimension-stage { min-height: 0;
  }.cl-dimension-panel { padding: 28px 20px;
  }.cl-panel-top { align-items: flex-start;
  }.cl-panel-grid { grid-template-columns: 1fr;
  }.cl-insight-card { min-height: auto;
  padding: 23px 20px;
  }.cl-panel-number { font-size: 40px;
  };
}

@media (prefers-reduced-motion: reduce) {
  .cl-dimension-panel, .cl-panel-icon { animation: none;
  };
}

/* ================================================================
   10. AUDIENCE SECTIONS
   ================================================================ */

.cl-audience-section {
  background: #fff;
}

.cl-audience-card {
  position: relative;
  height: 100%;
  min-height: 460px;
  padding: 55px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 22px 65px rgba(7,63,69,.11);
}

.cl-family-card {
  color: #fff;
  background: linear-gradient(135deg, rgba(3,75,80,.97), rgba(8,123,128,.92));
}

.cl-institution-card {
  color: var(--cl-copy);
  border: 1px solid var(--cl-line);
  background: radial-gradient(circle at 100% 0, rgba(91,207,108,.16), transparent 32%), #f6fbf9;
}

.cl-audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 35px;
  border-radius: 18px;
  color: #fff;
  background: var(--cl-green);
  font-size: 24px;
}

.cl-audience-card h2 {
  margin-bottom: 22px;
  color: inherit;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.05;
}

.cl-family-card .cl-mini-label,
.cl-family-card p {
  color: rgba(255,255,255,.75);
}

.cl-audience-card p {
  line-height: 1.8;
  text-align: justify;
}

.cl-text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: var(--cl-green);
  font-weight: 800;
}

.cl-institution-card .cl-text-link {
  color: var(--cl-teal);
}

.cl-text-link:hover {
  gap: 14px;
}

.cl-package-section {
  background: radial-gradient(circle at 10% 20%, rgba(91,207,108,.15), transparent 25%), var(--cl-teal-dark) !important;
}

.cl-launch-badge {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 20px;
  color: var(--cl-ink);
  background: var(--cl-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.cl-current-price {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 14px 0 5px;
  color: #fff;
}

.cl-current-price strong {
  font-size: clamp(72px, 8vw, 110px);
  line-height: .9;
}

.cl-current-price span {
  margin-bottom: 12px;
  color: var(--cl-green);
  font-size: 22px;
  font-weight: 800;
}

.cl-manifest-card {
  padding: 45px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.cl-manifest-card .cl-mini-label {
  color: var(--cl-green);
}

.cl-manifest-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-manifest-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.035);
  font-size: 13px;
  line-height: 1.6;
}

.cl-manifest-list i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  color: var(--cl-ink);
  background: var(--cl-green);
  font-size: 10px;
}

.cl-manifest-list strong {
  color: #fff;
}

.cl-future-map {
  position: relative;
  width: min(100%, 540px);
  height: 540px;
  margin: 0 auto;
  isolation: isolate;
}

.cl-future-map::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(91, 207, 108, 0.13) 0%, rgba(8, 123, 128, 0.07) 42%, transparent 72% );
  transform: translate(-50%, -50%);
}

.cl-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.cl-orbit-outer {
  width: 430px;
  height: 430px;
  border: 1px dashed rgba(8, 123, 128, 0.30);
  box-shadow: 0 0 60px rgba(8, 123, 128, 0.04);
  transform: translate(-50%, -50%);
  animation: clOrbitRotate 40s linear infinite;
}

.cl-orbit-inner {
  width: 300px;
  height: 300px;
  border: 1px dashed rgba(91, 207, 108, 0.45);
  transform: translate(-50%, -50%);
  animation: clOrbitReverse 30s linear infinite;
}

.cl-orbit-outer::before,
.cl-orbit-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cl-green);
  box-shadow: 0 0 0 6px rgba(91, 207, 108, 0.12);
}

.cl-orbit-outer::before {
  left: -5px;
}

.cl-orbit-inner::before {
  right: -5px;
  background: var(--cl-teal);
  box-shadow: 0 0 0 6px rgba(8, 123, 128, 0.12);
}

.cl-future-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  padding: 25px;
  border: 10px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: linear-gradient( 145deg, #ffffff 0%, #f5fffa 100% );
  box-shadow: 0 28px 65px rgba(7, 63, 69, 0.20), 0 0 0 1px rgba(8, 123, 128, 0.09);
  transform: translate(-50%, -50%);
  animation: clCoreFloat 4.5s ease-in-out infinite;
}

.cl-core-glow {
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(91, 207, 108, 0.10);
  filter: blur(12px);
}

.cl-vision-logo {
  display: block;
  width: 100%;
  max-width: 148px;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.cl-future-core:hover .cl-vision-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 14px rgba(7, 63, 69, 0.12));
}

.cl-sector {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 145px;
  min-height: 130px;
  padding: 23px 14px 17px;
  border: 1px solid rgba(8, 123, 128, 0.12);
  border-radius: 22px;
  color: var(--cl-ink);
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 45px rgba(7, 63, 69, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.cl-sector:hover {
  border-color: rgba(91, 207, 108, 0.55);
  box-shadow: 0 28px 55px rgba(7, 63, 69, 0.17), 0 0 0 5px rgba(91, 207, 108, 0.08);
}

.cl-sector-number {
  position: absolute;
  top: 12px;
  right: 13px;
  color: var(--cl-green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.cl-sector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-bottom: 10px;
  border-radius: 14px;
  color: var(--cl-teal);
  font-size: 19px;
  background: linear-gradient( 135deg, rgba(8, 123, 128, 0.10), rgba(91, 207, 108, 0.17) );
  transition: color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}

.cl-sector:hover .cl-sector-icon {
  color: #ffffff;
  background: linear-gradient( 135deg, var(--cl-teal), var(--cl-green) );
  transform: translateY(-3px) rotate(-4deg);
}

.cl-sector strong {
  color: var(--cl-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.cl-sector-one {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: clCardTop 4s ease-in-out infinite;
}

.cl-sector-two {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation: clCardRight 4.6s ease-in-out infinite;
}

.cl-sector-three {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: clCardBottom 4.3s ease-in-out infinite;
}

.cl-sector-four {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: clCardLeft 4.8s ease-in-out infinite;
}

@keyframes clOrbitRotate {
  from { transform: translate(-50%, -50%) rotate(0deg);
  } to { transform: translate(-50%, -50%) rotate(360deg);
  };
}

@keyframes clOrbitReverse {
  from { transform: translate(-50%, -50%) rotate(360deg);
  } to { transform: translate(-50%, -50%) rotate(0deg);
  };
}

@keyframes clCoreFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0);
  } 50% { transform: translate(-50%, -50%) translateY(-9px);
  };
}

@keyframes clCardTop {
  0%, 100% { transform: translateX(-50%) translateY(0);
  } 50% { transform: translateX(-50%) translateY(-8px);
  };
}

@keyframes clCardRight {
  0%, 100% { transform: translateY(-50%) translateX(0);
  } 50% { transform: translateY(-50%) translateX(8px);
  };
}

@keyframes clCardBottom {
  0%, 100% { transform: translateX(-50%) translateY(0);
  } 50% { transform: translateX(-50%) translateY(8px);
  };
}

@keyframes clCardLeft {
  0%, 100% { transform: translateY(-50%) translateX(0);
  } 50% { transform: translateY(-50%) translateX(-8px);
  };
}

@media screen and (max-width: 1199px) {
  .cl-future-map { height: 500px;
  }.cl-orbit-outer { width: 390px;
  height: 390px;
  }.cl-orbit-inner { width: 270px;
  height: 270px;
  }.cl-future-core { width: 180px;
  height: 180px;
  }.cl-sector { width: 130px;
  min-height: 120px;
  padding: 20px 10px 14px;
  };
}

@media screen and (max-width: 575px) {
  .cl-future-map { width: 100%;
  height: 410px;
  margin-top: 25px;
  }.cl-orbit-outer { width: 300px;
  height: 300px;
  }.cl-orbit-inner { width: 205px;
  height: 205px;
  }.cl-future-core { width: 145px;
  height: 145px;
  padding: 19px;
  border-width: 7px;
  }.cl-vision-logo { max-width: 110px;
  }.cl-sector { width: 103px;
  min-height: 93px;
  padding: 15px 7px 10px;
  border-radius: 15px;
  }.cl-sector-number { top: 7px;
  right: 8px;
  font-size: 8px;
  }.cl-sector-icon { width: 32px;
  height: 32px;
  margin-bottom: 5px;
  border-radius: 9px;
  font-size: 14px;
  }.cl-sector strong { font-size: 9px;
  line-height: 1.2;
  };
}

@media (prefers-reduced-motion: reduce) {
  .cl-orbit, .cl-future-core, .cl-sector { animation: none !important;
  };
}

.cl-float-top {
  animation: clFloatTop 4s ease-in-out infinite;
  will-change: transform;
}

.cl-float-bottom {
  animation: clFloatBottom 4.8s ease-in-out infinite;
  animation-delay: 0.4s;
  will-change: transform;
}

.cl-progress-card {
  animation: clProgressFloat 4.3s ease-in-out infinite;
  animation-delay: 0.8s;
  will-change: transform;
}

@keyframes clFloatTop {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg);
  } 50% { transform: translate3d(0, -12px, 0) rotate(1deg);
  };
}

@keyframes clFloatBottom {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg);
  } 50% { transform: translate3d(8px, -10px, 0) rotate(-1deg);
  };
}

@keyframes clProgressFloat {
  0%, 100% { transform: translate3d(0, 0, 0);
  } 50% { transform: translate3d(-7px, -14px, 0);
  };
}

.cl-floating-card,
.cl-progress-card {
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

.cl-floating-card:hover,
.cl-progress-card:hover {
  animation-play-state: paused;
  box-shadow: 0 22px 50px rgba(0, 88, 93, 0.20);
}

@media (prefers-reduced-motion: reduce) {
  .cl-float-top, .cl-float-bottom, .cl-progress-card { animation: none !important;
  };
}

.cl-regular-rate {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0 25px;
  padding: 14px 22px;
  border: 1px solid rgba(91, 207, 108, 0.50);
  border-left: 5px solid var(--cl-green);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

.cl-rate-label {
  color: rgba(255, 255, 255, 0.84);
  font-size: 16px;
  font-weight: 700;
}

.cl-old-rate {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #ffd166;
  /* Golden color */ font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  white-space: nowrap;
}

.cl-old-rate small {
  color: #ffd166;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.cl-old-rate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: calc(100% + 10px);
  height: 3px;
  border-radius: 10px;
  background: #ffffff;
  transform: rotate(-7deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
}

@media screen and (max-width: 575px) {
  .cl-regular-rate { align-items: flex-start;
  flex-direction: column;
  gap: 9px;
  }.cl-old-rate { font-size: 30px;
  };
}

.cl-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
  color: #087b80;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cl-card-action > i {
  display: grid !important;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  color: #087b80;
  background: #e9f8f1;
  font-size: 11px;
  transition: transform 0.35s ease, color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.cl-pillar-link:hover .cl-card-action > i {
  color: #ffffff;
  background: #39b85b;
  transform: translateX(5px) rotate(-45deg);
  box-shadow: 0 8px 20px rgba(57, 184, 91, 0.3);
}

html {
  scroll-behavior: smooth;
}

/* ================================================================
   11. NAVBAR / HEADER
   ================================================================ */

.cl-global-header {
  --nav-ink: #073f45;
  --nav-teal: #087b80;
  --nav-dark: #034b50;
  --nav-green: #5bcf6c;
  --nav-light: #f7fcfa;
  position: sticky;
  top: 0;
  z-index: 999999;
  width: 100%;
  background: transparent;
}

.cl-navbar {
  position: relative;
  width: 100%;
  background: linear-gradient( 90deg, rgba(255,255,255,.99), rgba(251,255,253,.99) );
  border-bottom: 1px solid rgba(7,63,69,.075);
  box-shadow: 0 8px 35px rgba(7,63,69,.065);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.cl-navbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: .35;
  background: linear-gradient( 90deg, transparent, var(--nav-teal), var(--nav-green), transparent );
}

/* ================================================================
   11.1 NAVBAR — LAYOUT & LOGO
   ================================================================ */

.cl-nav-container {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 42px;
}

.cl-navbar .navbar {
  min-height: 88px;
  display: flex;
  align-items: center;
}

.cl-nav-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  margin-right: 42px;
}

.cl-nav-brand img {
  width: 205px;
  max-height: 68px;
  object-fit: contain;
  transition: transform .35s ease, filter .35s ease;
}

.cl-nav-brand:hover img {
  transform: translateY(-2px);
  filter: drop-shadow( 0 8px 12px rgba(8,123,128,.12) );
}

/* ================================================================
   11.2 NAVBAR — MENU LINKS
   ================================================================ */

.cl-main-menu {
  display: flex;
  align-items: center;
  gap: 3px;
}

.cl-main-menu .nav-item {
  position: relative;
}

.cl-main-menu .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 0 13px !important;
  color: var(--nav-ink) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  transition: color .25s ease;
}

.cl-main-menu .nav-link::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 20px;
  height: 2px;
  border-radius: 20px;
  background: linear-gradient( 90deg, var(--nav-teal), var(--nav-green) );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.2,.75,.25,1);
}

.cl-main-menu .nav-link:hover {
  color: var(--nav-green) !important;
}

.cl-main-menu .nav-link:hover::before,
.cl-main-menu .nav-link.active::before {
  transform: scaleX(1);
}

.cl-main-menu .nav-link.active {
  color: var(--nav-green) !important;
}

/* ================================================================
   11.3 NAVBAR — CTA / ACTIONS
   ================================================================ */

.cl-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* margin-left: 18px;
  */;
}

.cl-nav-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  min-width: 215px;
  padding: 13px 22px;
  overflow: hidden;
  border-radius: 6px;
  color: #073f45 !important;
  background: linear-gradient( 135deg, #67dc78, #55cf6b );
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .15px;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(91,207,108,.22);
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
}

.cl-nav-primary::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -50%;
  width: 45%;
  height: 250%;
  background: rgba(255,255,255,.28);
  transform: rotate(22deg);
  transition: left .55s ease;
}

.cl-nav-primary:hover::before {
  left: 115%;
}

.cl-nav-primary:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(91,207,108,.30);
}

.cl-nav-primary i {
  font-size: 12px;
  transition: transform .3s ease;
}

.cl-nav-primary:hover i {
  transform: translateX(4px);
}

.cl-global-header.is-scrolled .cl-navbar {
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 38px rgba(7,63,69,.12);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.cl-global-header.is-scrolled .navbar {
  min-height: 76px;
}

.cl-global-header.is-scrolled .cl-main-menu .nav-link {
  min-height: 76px;
}

.cl-global-header.is-scrolled .cl-nav-brand img {
  width: 180px;
}

.cl-global-header.is-scrolled .cl-main-menu .nav-link::before {
  bottom: 15px;
}

@media screen and (max-width: 1199px) {
  .cl-nav-container { padding: 0 24px;
  }.cl-nav-brand { margin-right: 20px;
  }.cl-nav-brand img { width: 180px;
  }.cl-main-menu .nav-link { padding: 0 8px !important;
  font-size: 11px;
  }.cl-main-menu .nav-link: :before { left: 8px;
  right: 8px;
  }.cl-nav-primary { min-width: 175px;
  padding: 12px 15px;
  font-size: 11px;
  };
}

@media screen and (max-width: 991px) {
  .cl-nav-container { padding: 0 18px;
  }.cl-navbar .navbar { min-height: 76px;
  }.cl-nav-brand img { width: 165px;
  }.cl-mobile-toggle { display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--nav-teal);
  }.cl-mobile-toggle span { display: block;
  width: 20px;
  height: 2px;
  border-radius: 20px;
  background: #fff;
  }.cl-navbar .navbar-collapse { position: absolute;
  top: calc(100% + 1px);
  left: 12px;
  right: 12px;
  padding: 12px;
  border: 1px solid rgba(7,63,69,.08);
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 50px rgba(7,63,69,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  }.cl-main-menu { align-items: stretch;
  gap: 0;
  }.cl-main-menu .nav-link { min-height: auto;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(7,63,69,.06);
  border-radius: 8px;
  font-size: 12px;
  }.cl-main-menu .nav-link: :before { display: none;
  }.cl-main-menu .nav-link: hover, .cl-main-menu .nav-link.active { padding-left: 21px !important;
  color: var(--nav-green) !important;
  background: #f2fbf5;
  }.cl-nav-primary { width: 100%;
  min-width: 0;
  min-height: 48px;
  };
}

@media screen and (max-width: 575px) {
  .cl-nav-brand img { width: 145px;
  }.cl-nav-container { padding: 0 14px;
  };
}

.col-lg-7 p {
  text-align: justify !important;
}

.cl-floating-card,
.cl-progress-card {
  animation: clSoftFloat 5s ease-in-out infinite;
}

.cl-progress-card {
  animation-delay: 1.1s;
}

.cl-float-bottom {
  animation-delay: 2s;
}

@keyframes clSoftFloat {
  0%, 100% { transform: translateY(0);
  } 50% { transform: translateY(-8px);
  };
}

@media (prefers-reduced-motion: reduce) {
  .cl-floating-card, .cl-progress-card { animation: none !important;
  };
}

.cl-hero .cl-eyebrow {
  animation: clHeroFadeUp .7s ease .1s both;
}

.cl-hero .cl-hero-title {
  animation: clHeroFadeUp .85s ease .25s both;
}

.cl-hero .cl-hero-copy {
  animation: clHeroFadeUp .85s ease .4s both;
}

.cl-hero .cl-hero-actions {
  animation: clHeroFadeUp .85s ease .55s both;
}

.cl-hero .cl-hero-visual {
  animation: clHeroVisualIn 1s cubic-bezier(.2,.75,.25,1) .25s both;
}

@keyframes clHeroFadeUp {
  from { opacity: 0;
  transform: translateY(25px);
  } to { opacity: 1;
  transform: translateY(0);
  };
}

@keyframes clHeroVisualIn {
  from { opacity: 0;
  transform: translateX(35px) scale(.97);
  } to { opacity: 1;
  transform: translateX(0) scale(1);
  };
}

body.about-page .page-title-section {
  position: relative;
  margin: 0 !important;
}

body.about-page .page-title-section.bg-img {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 35% !important;
}

@media screen and (max-width: 991px) {
  body.about-page .page-title-section.bg-img { background-position: center 32% !important;
  };
}

@media screen and (max-width: 575px) {
  body.about-page .page-title-section.bg-img { background-position: center center !important;
  };
}

body.about-page .page-title-section,
body.students-page .page-title-section,
body.institutions-page .page-title-section,
body.consultant-page .page-title-section,
body.faq-page .page-title-section,
body.contact-page .page-title-section {
  position: relative;
  min-height: 500px !important;
  height: 500px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body.about-page .page-title-section > .container,
body.students-page .page-title-section > .container,
body.institutions-page .page-title-section > .container,
body.consultant-page .page-title-section > .container,
body.faq-page .page-title-section > .container,
body.contact-page .page-title-section > .container {
  min-height: 500px !important;
  height: 500px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.about-page .page-title-section {
  background-position: center 35% !important;
}

body.students-page .page-title-section {
  background-position: center 40% !important;
}

body.institutions-page .page-title-section {
  background-position: center 38% !important;
}

body.consultant-page .page-title-section {
  background-position: center 35% !important;
}

body.faq-page .page-title-section {
  background-position: center 40% !important;
}

body.contact-page .page-title-section {
  background-position: center center !important;
}

@media screen and (max-width: 991px) {
  body.about-page .page-title-section, body.students-page .page-title-section, body.institutions-page .page-title-section, body.consultant-page .page-title-section, body.faq-page .page-title-section, body.contact-page .page-title-section, body.about-page .page-title-section > .container, body.students-page .page-title-section > .container, body.institutions-page .page-title-section > .container, body.consultant-page .page-title-section > .container, body.faq-page .page-title-section > .container, body.contact-page .page-title-section > .container { min-height: 420px !important;
  height: 420px !important;
  };
}

@media screen and (max-width: 575px) {
  body.about-page .page-title-section, body.students-page .page-title-section, body.institutions-page .page-title-section, body.consultant-page .page-title-section, body.faq-page .page-title-section, body.contact-page .page-title-section, body.about-page .page-title-section > .container, body.students-page .page-title-section > .container, body.institutions-page .page-title-section > .container, body.consultant-page .page-title-section > .container, body.faq-page .page-title-section > .container, body.contact-page .page-title-section > .container { min-height: 340px !important;
  height: 340px !important;
  };
}

.vi-banner > .container,
.bwa-photo-banner > .container,
.sei-banner > .container,
.lead-banner > .container,
.ability-banner > .container {
  min-height: 500px !important;
  height: 500px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .vi-banner, .bwa-photo-banner, .sei-banner, .lead-banner, .ability-banner, .vi-banner > .container, .bwa-photo-banner > .container, .sei-banner > .container, .lead-banner > .container, .ability-banner > .container { min-height: 460px !important;
  height: 460px !important;
  };
}

@media screen and (max-width: 575px) {
  .vi-banner, .bwa-photo-banner, .sei-banner, .lead-banner, .ability-banner, .vi-banner > .container, .bwa-photo-banner > .container, .sei-banner > .container, .lead-banner > .container, .ability-banner > .container { min-height: 390px !important;
  height: 390px !important;
  };
}

.clpro-footer {
  --cpf-dark: #023f43;
  --cpf-teal: #05666b;
  --cpf-green: #5bcf6c;
  --cpf-white: #ffffff;
  position: relative;
  overflow: hidden;
  padding: 72px 0 0;
  color: rgba(255,255,255,.76);
  background: radial-gradient( circle at 93% 4%, rgba(91,207,108,.09), transparent 22% ), linear-gradient( 120deg, #023f43 0%, #034d52 50%, #05686d 100% );
}

.clpro-footer__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.clpro-footer__shape--one {
  top: -270px;
  right: -180px;
  width: 530px;
  height: 530px;
  border: 1px solid rgba(255,255,255,.035);
  box-shadow: 0 0 0 65px rgba(255,255,255,.012), 0 0 0 130px rgba(91,207,108,.01);
}

.clpro-footer__shape--two {
  left: -250px;
  bottom: -380px;
  width: 520px;
  height: 520px;
  background: rgba(91,207,108,.018);
}

.clpro-footer__main {
  position: relative;
  z-index: 2;
  padding-bottom: 54px;
}

.clpro-footer__brand {
  max-width: 345px;
}

.clpro-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 27px;
  padding: 10px 13px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
  transition: transform .3s ease, box-shadow .3s ease;
}

.clpro-footer__logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(0,0,0,.14);
}

.clpro-footer__logo img {
  display: block;
  width: 185px;
  max-width: 100%;
  height: auto;
}

.clpro-footer__brand > p {
  max-width: 335px;
  margin: 0 0 27px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
}

.clpro-footer__social {
  display: flex;
  gap: 9px;
}

.clpro-footer__social a {
  display: inline-flex;
  width: 43px;
  height: 43px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.025);
  font-size: 15px;
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}

.clpro-footer__social a:hover {
  color: var(--cpf-dark);
  background: var(--cpf-green);
  border-color: var(--cpf-green);
  transform: translateY(-4px);
}

.clpro-footer__widget {
  padding-top: 2px;
}

.clpro-footer__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.43);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.clpro-footer__widget h3 {
  margin: 0;
  color: var(--cpf-green);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.clpro-footer__line {
  display: block;
  width: 36px;
  height: 2px;
  margin: 13px 0 22px;
  border-radius: 30px;
  background: linear-gradient( 90deg, var(--cpf-green), transparent );
}

.clpro-footer__info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 70px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.075);
  color: inherit;
}

.clpro-footer__icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--cpf-green);
  background: rgba(91,207,108,.075);
  font-size: 14px;
}

.clpro-footer__info small,
.clpro-footer__info strong {
  display: block;
}

.clpro-footer__info small {
  margin-bottom: 4px;
  color: rgba(255,255,255,.43);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.clpro-footer__info strong {
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

a.clpro-footer__info {
  transition: transform .25s ease;
}

a.clpro-footer__info:hover {
  transform: translateX(3px);
}

.clpro-footer__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  color: var(--cpf-green);
  font-size: 12px;
  font-weight: 800;
  transition: gap .3s ease, color .3s ease;
}

.clpro-footer__action:hover {
  gap: 13px;
  color: #fff;
}

.clpro-footer__pages ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clpro-footer__pages li {
  margin-bottom: 11px;
}

.clpro-footer__pages li:last-child {
  margin-bottom: 0;
}

.clpro-footer__pages a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  font-weight: 600;
  transition: transform .25s ease, color .25s ease;
}

.clpro-footer__pages a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 2px solid var(--cpf-green);
  border-right: 2px solid var(--cpf-green);
  transform: rotate(45deg);
}

.clpro-footer__pages a:hover {
  color: #fff;
  transform: translateX(4px);
}

.clpro-footer__legal {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 25px;
  min-height: 62px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.clpro-footer__legal > strong {
  color: var(--cpf-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.clpro-footer__legal > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.clpro-footer__legal a {
  color: rgba(255,255,255,.63);
  font-size: 11px;
  font-weight: 600;
  transition: color .25s ease;
}

.clpro-footer__legal a:hover {
  color: #fff;
}

.clpro-footer__legal div > span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}

.clpro-footer__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 69px;
  align-items: center;
}

.clpro-footer__bottom p {
  margin: 0;
  color: rgba(255,255,255,.69);
  font-size: 11px;
  line-height: 1.7;
}

.clpro-footer__bottom p strong {
  color: #fff;
  font-weight: 700;
}

.clpro-footer__bottom p span {
  margin-left: 5px;
  color: rgba(255,255,255,.44);
  font-weight: 500;
}

@media screen and (max-width: 1199px) {
  .clpro-footer__widget h3 { font-size: 19px;
  }.clpro-footer__brand > p { font-size: 13px;
  };
}

@media screen and (max-width: 991px) {
  .clpro-footer { padding-top: 60px;
  }.clpro-footer__main { padding-bottom: 45px;
  };
}

@media screen and (max-width: 767px) {
  .clpro-footer { padding-top: 50px;
  }.clpro-footer__brand { max-width: 100%;
  }.clpro-footer__brand > p { max-width: 520px;
  }.clpro-footer__widget h3 { font-size: 20px;
  }.clpro-footer__legal { align-items: flex-start;
  flex-direction: column;
  gap: 7px;
  padding: 18px 0;
  }.clpro-footer__bottom { padding: 18px 0;
  }.clpro-footer__bottom p span { display: block;
  margin: 3px 0 0;
  };
}

@media screen and (max-width: 575px) {
  .clpro-footer__logo img { width: 160px;
  }.clpro-footer__brand > p { font-size: 12.5px;
  }.clpro-footer__pages a, .clpro-footer__info strong, .clpro-footer__action { font-size: 12px;
  };
}

.clpro-footer__brand > p {
  font-size: 16px;
  line-height: 1.9;
  text-align: justify;
}

.clpro-footer__eyebrow {
  font-size: 10px;
  letter-spacing: 1.5px;
}

.clpro-footer__widget h3 {
  font-size: 24px;
  font-weight: 800;
}

.clpro-footer__info small {
  font-size: 9px;
}

.clpro-footer__info strong {
  font-size: 14px;
  font-weight: 700;
}

.clpro-footer__action {
  font-size: 14px;
  font-weight: 800;
}

.clpro-footer__pages a {
  font-size: 14px;
  font-weight: 600;
}

.clpro-footer__legal > strong {
  font-size: 12px;
}

.clpro-footer__legal a {
  font-size: 13px;
  font-weight: 600;
}

.clpro-footer__bottom p {
  font-size: 13px;
}

.clpro-footer__bottom p strong {
  font-size: 13.5px;
  font-weight: 800;
}

.clpro-footer__bottom p span {
  font-size: 13px;
}

@media screen and (max-width: 991px) {
  .clpro-footer__widget h3 { font-size: 22px;
  }.clpro-footer__brand > p { font-size: 15px;
  }.clpro-footer__info strong, .clpro-footer__pages a, .clpro-footer__action { font-size: 13.5px;
  };
}

@media screen and (max-width: 767px) {
  .clpro-footer__widget h3 { font-size: 21px;
  }.clpro-footer__brand > p { font-size: 14px;
  }.clpro-footer__info strong, .clpro-footer__pages a, .clpro-footer__action { font-size: 13px;
  }.clpro-footer__legal a, .clpro-footer__bottom p, .clpro-footer__bottom p strong, .clpro-footer__bottom p span { font-size: 12px;
  };
}

.clpro-footer::before {
  content: "";
  position: absolute;
  top: -180px;
  right: 5%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient( circle, rgba(91,207,108,.13) 0%, rgba(91,207,108,.045) 40%, transparent 72% );
  filter: blur(8px);
  animation: clFooterGlow 8s ease-in-out infinite alternate;
}

.clpro-footer::after {
  content: "";
  position: absolute;
  left: 12%;
  bottom: -220px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.035);
  box-shadow: 0 0 0 45px rgba(91,207,108,.012), 0 0 0 90px rgba(8,123,128,.018);
  pointer-events: none;
  animation: clFooterOrbMove 11s ease-in-out infinite alternate;
}

@keyframes clFooterGlow {
  0% { transform: translate3d(0,0,0) scale(.94);
  opacity: .55;
  } 100% { transform: translate3d(-35px,30px,0) scale(1.08);
  opacity: 1;
  };
}

@keyframes clFooterOrbMove {
  from { transform: translate3d(0,0,0);
  } to { transform: translate3d(45px,-25px,0);
  };
}

.clpro-footer__logo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.clpro-footer__logo::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  width: 45%;
  height: 140%;
  background: linear-gradient( 90deg, transparent, rgba(255,255,255,.80), transparent );
  transform: skewX(-20deg);
  transition: left .7s ease;
  pointer-events: none;
}

.clpro-footer__logo:hover::after {
  left: 140%;
}

.clpro-footer__logo:hover {
  transform: translateY(-5px) scale(1.015);
}

.clpro-footer__line {
  position: relative;
  width: 38px;
  overflow: hidden;
  transition: width .4s cubic-bezier(.2,.75,.25,1);
}

.clpro-footer__line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #b3f5ba;
  animation: clFooterLineShine 3.5s ease-in-out infinite;
}

.clpro-footer__widget:hover .clpro-footer__line {
  width: 64px;
}

@keyframes clFooterLineShine {
  0%, 45% { left: -100%;
  } 70%, 100% { left: 120%;
  };
}

.clpro-footer__info {
  position: relative;
  overflow: hidden;
  transition: padding-left .3s ease, border-color .3s ease, background .3s ease;
}

.clpro-footer__info::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient( 90deg, var(--cpf-green), transparent );
  transition: width .4s ease;
}

a.clpro-footer__info:hover {
  padding-left: 6px;
  transform: none;
  background: linear-gradient( 90deg, rgba(91,207,108,.04), transparent );
}

a.clpro-footer__info:hover::after {
  width: 100%;
}

.clpro-footer__icon {
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.clpro-footer__info:hover .clpro-footer__icon {
  color: #043f43;
  background: var(--cpf-green);
  box-shadow: 0 10px 25px rgba(91,207,108,.18);
  transform: rotate(-5deg) scale(1.07);
}

.clpro-footer__action {
  position: relative;
  padding-bottom: 4px;
}

.clpro-footer__action::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--cpf-green);
  transition: width .3s ease;
}

.clpro-footer__action:hover::after {
  width: 100%;
}

.clpro-footer__action i {
  transition: transform .3s ease;
}

.clpro-footer__action:hover i {
  transform: translateX(5px);
}

.clpro-footer__pages a {
  padding: 3px 0;
}

.clpro-footer__pages a::before {
  transition: transform .3s ease, border-color .3s ease;
}

.clpro-footer__pages a:hover::before {
  border-color: #fff;
  transform: translateX(2px) rotate(45deg);
}

.clpro-footer__social a {
  position: relative;
  overflow: hidden;
}

.clpro-footer__social a::before {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  background: var(--cpf-green);
  opacity: 0;
  transform: translate(-50%,-50%) scale(0);
  transition: transform .35s ease, opacity .35s ease;
}

.clpro-footer__social a i {
  position: relative;
  z-index: 2;
}

.clpro-footer__social a:hover::before {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1.3);
}

.clpro-footer__social a:hover {
  color: var(--cpf-dark);
  transform: translateY(-5px) scale(1.04);
}

.clpro-footer__legal a {
  position: relative;
  padding-bottom: 2px;
}

.clpro-footer__legal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--cpf-green);
  transition: width .3s ease;
}

.clpro-footer__legal a:hover::after {
  width: 100%;
}

.clpro-footer__bottom p strong {
  position: relative;
  padding-left: 12px;
}

.clpro-footer__bottom p strong::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cpf-green);
  box-shadow: 0 0 0 5px rgba(91,207,108,.07);
  transform: translateY(-50%);
}

.clpro-footer.is-footer-motion-ready .clpro-footer__brand,
.clpro-footer.is-footer-motion-ready .clpro-footer__widget,
.clpro-footer.is-footer-motion-ready .clpro-footer__legal,
.clpro-footer.is-footer-motion-ready .clpro-footer__bottom {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1);
  transition-delay: var(--footer-delay, 0ms);
}

.clpro-footer.is-footer-visible .clpro-footer__brand,
.clpro-footer.is-footer-visible .clpro-footer__widget,
.clpro-footer.is-footer-visible .clpro-footer__legal,
.clpro-footer.is-footer-visible .clpro-footer__bottom {
  opacity: 1;
  transform: translateY(0);
}

.clpro-footer {
  border-top: 1px solid rgba(91,207,108,.12);
}

.clpro-footer > .container::before {
  content: "";
  position: absolute;
  top: -72px;
  left: 0;
  width: 125px;
  height: 2px;
  background: linear-gradient( 90deg, var(--cpf-green), transparent );
}

@media (prefers-reduced-motion: reduce) {
  .clpro-footer: :before, .clpro-footer::after, .clpro-footer__line::after { animation: none !important;
  }.clpro-footer__brand, .clpro-footer__widget, .clpro-footer__legal, .clpro-footer__bottom { opacity: 1 !important;
  transform: none !important;
  };
}

.clpro-footer .clpro-footer__widget h3 {
  color: #5bcf6c !important;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.clpro-footer .clpro-footer__eyebrow {
  color: rgba(255,255,255,.48) !important;
}

.clpro-footer .clpro-footer__line {
  background: linear-gradient( 90deg, #5bcf6c, transparent ) !important;
}

/* ================================================================
   10.1 DISCOVERY PACKAGE
   ================================================================ */

#package.cl-package-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 115px;
  background: radial-gradient( circle at 88% 12%, rgba(82, 207, 107, 0.16), transparent 28% ), radial-gradient( circle at 8% 85%, rgba(8, 135, 138, 0.08), transparent 30% ), linear-gradient( 135deg, #f8fcfb 0%, #eef9f6 50%, #e4f6ef 100% ) !important;
}

#package.cl-package-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -180px;
  border-radius: 50%;
  border: 1px solid rgba(8, 135, 138, 0.08);
  box-shadow: 0 0 0 35px rgba(8, 135, 138, 0.025), 0 0 0 70px rgba(8, 135, 138, 0.018);
  pointer-events: none;
}

#package.cl-package-section::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -140px;
  bottom: -160px;
  border-radius: 50%;
  background: rgba(82, 207, 107, 0.06);
  pointer-events: none;
}

#package .cl-package-content {
  position: relative;
  z-index: 2;
}

#package .cl-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #087f83 !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#package .cl-section-label i {
  color: #55cf6b;
  font-size: 13px;
}

#package .cl-package-title {
  max-width: 610px;
  margin: 0 0 34px;
  color: #073f45 !important;
  font-size: clamp(46px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -2.5px;
}

#package .cl-package-title span {
  display: block;
  color: #55cf6b !important;
}

#package .cl-package-intro {
  max-width: 560px;
  margin: 26px 0 30px;
  color: #5b777b !important;
  font-size: 16px;
  line-height: 1.8;
}

#package .cl-price-card {
  max-width: 520px;
  padding: 28px 30px 30px;
  border: 1px solid rgba(7, 127, 131, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 55px rgba(4, 78, 82, 0.08);
  backdrop-filter: blur(10px);
}

#package .cl-launch-badge {
  display: inline-flex;
  padding: 9px 16px;
  border-radius: 999px;
  background: #55cf6b;
  color: #073f45;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

#package .cl-current-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 18px;
}

#package .cl-current-price strong {
  color: #073f45 !important;
  font-size: clamp(72px, 8vw, 108px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -5px;
}

#package .cl-current-price > span {
  color: #55cf6b !important;
  font-size: 24px;
  font-weight: 800;
}

#package .cl-regular-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-left: 4px solid #55cf6b;
  border-radius: 14px;
  background: #f3faf7;
}

#package .cl-rate-label {
  color: #325b60 !important;
  font-size: 14px;
  font-weight: 700;
}

#package .cl-old-rate {
  color: #f0b93d !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

#package .cl-old-rate small {
  font-size: 13px;
}

#package .cl-package-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
  padding: 17px 24px;
  border-radius: 12px;
  background: #55cf6b;
  color: #073f45 !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: transform .3s ease, box-shadow .3s ease;
}

#package .cl-package-button:hover {
  color: #073f45 !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(82, 207, 107, 0.24);
}

#package .cl-package-button i {
  transition: transform .3s ease;
}

#package .cl-package-button:hover i {
  transform: translateX(4px);
}

#package .cl-manifest-card {
  position: relative;
  z-index: 2;
  padding: 34px;
  border: 1px solid rgba(7, 127, 131, 0.10);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 28px 70px rgba(4, 78, 82, 0.10);
  backdrop-filter: blur(14px);
}

#package .cl-manifest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

#package .cl-mini-label {
  display: block;
  margin-bottom: 7px;
  color: #0a8589 !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

#package .cl-manifest-header h3 {
  margin: 0;
  color: #073f45 !important;
  font-size: 25px;
  line-height: 1.2;
}

#package .cl-manifest-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #e7f8ed;
  color: #22a95b;
  font-size: 18px;
}

#package .cl-manifest-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#package .cl-manifest-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 17px 18px;
  border: 1px solid rgba(7, 127, 131, 0.08);
  border-radius: 15px;
  background: rgba(244, 250, 248, 0.82);
  color: #5b777b !important;
  font-size: 14px;
  line-height: 1.65;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

#package .cl-manifest-list li:hover {
  transform: translateX(5px);
  border-color: rgba(82, 207, 107, 0.35);
  background: #ffffff;
}

#package .cl-manifest-list li strong {
  color: #164f54 !important;
}

#package .cl-check {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  background: #55cf6b;
  color: #073f45;
  font-size: 12px;
}

#package .cl-manifest-footer {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(7, 127, 131, 0.10);
  color: #537378;
  font-size: 13px;
  font-weight: 600;
}

#package .cl-manifest-footer i {
  margin-right: 7px;
  color: #0b8b8f;
}

@media (max-width: 991.98px) {
  #package.cl-package-section { padding: 85px 0 90px;
  }#package .cl-package-title { max-width: 760px;
  }#package .cl-manifest-card { padding: 28px;
  };
}

@media (max-width: 575.98px) {
  #package.cl-package-section { padding: 65px 0 70px;
  }#package .cl-package-title { font-size: 44px;
  letter-spacing: -1.5px;
  }#package .cl-price-card { padding: 22px;
  }#package .cl-current-price strong { font-size: 76px;
  letter-spacing: -3px;
  }#package .cl-current-price > span { font-size: 19px;
  }#package .cl-regular-rate { align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  }#package .cl-manifest-card { padding: 22px;
  border-radius: 22px;
  }#package .cl-manifest-header h3 { font-size: 21px;
  };
}

}

@media (max-width: 575.98px) {
  .chatbot-welcome { left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  width: auto !important;
  max-width: none !important;
  padding: 12px 12px !important;
  border-radius: 16px !important;
  z-index: 9990 !important;
  }.welcome-content strong { font-size: 14px !important;
  }.welcome-content span { font-size: 11px !important;
  }.welcome-chat-btn { min-height: 38px !important;
  padding: 8px 13px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  }.welcome-icon { width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  };
}

@media (max-width: 991.98px) {
  .cl-navbar .navbar { position: relative !important;
  min-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  }.cl-nav-container { position: relative !important;
  }.cl-mobile-toggle { position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: auto !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 10px !important;
  background: #087f83 !important;
  box-shadow: 0 7px 18px rgba(7,127,131,.18) !important;
  }.cl-mobile-toggle: :before { content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 20px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 20px !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff !important;
  }.cl-mobile-toggle: :after { content: none !important;
  }.cl-mobile-toggle[aria-expanded="true"]: :before { box-shadow: none !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  }.cl-mobile-toggle[aria-expanded="true"]: :after { content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 20px !important;
  background: #fff !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
  };
}

@media (max-width: 575.98px) {
  .chatbot-welcome { position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  width: auto !important;
  max-width: none !important;
  z-index: 10050 !important;
  border-radius: 16px !important;
  animation: mobileChatWelcome 7s ease forwards !important;
  }@keyframes mobileChatWelcome { 0% { opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  } 10% { opacity: 1;
  visibility: visible;
  transform: translateY(0);
  } 75% { opacity: 1;
  visibility: visible;
  transform: translateY(0);
  } 100% { opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  } };
}

@media (max-width: 575.98px) {
  .chatbot-welcome { left: 14px !important;
  right: 84px !important;
  bottom: 14px !important;
  width: auto !important;
  max-width: none !important;
  z-index: 10040 !important;
  };
}

@media (max-width: 575.98px) {
  .cl-hero-copy, .cl-hero p, .cl-hero-copy p { text-align: left !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  };
}

:root {
  --about-teal: #087b80;
  --about-dark: #034b50;
  --about-green: #61ce70;
  --about-ink: #073f45;
  --about-copy: #627a7d;
}

.about-title-accent {
  color: var(--about-green);
}

.about-vision-title .about-title-accent {
  color: #5bd16f;
}

:root {
  --student-teal: #014f50;
  --student-teal-deep: #003d3e;
  --student-teal-soft: #0b7372;
  --student-green: #5ddd74;
  --student-green-dark: #39b85b;
  --student-mint: #e9f9f0;
  --student-ice: #eef8f9;
  --student-cloud: #f7fbfb;
  --student-ink: #073f40;
  --student-copy: #526a6a;
  --student-line: rgba(3, 77, 78, 0.12);
  --student-white: #ffffff;
  --student-radius-lg: 28px;
  --student-radius-md: 18px;
  --student-shadow: 0 24px 70px rgba(0, 73, 73, 0.13);
  --student-shadow-soft: 0 15px 40px rgba(0, 73, 73, 0.08);
}

.student-page .wow {
  visibility: visible !important;
}

.student-hero .row {
  min-height: 480px;
}

/* ================================================================
   15. RESPONSIVE — MOBILE / TABLET
   ================================================================ */

@media (max-width: 991.98px) {
  .student-hero .row { min-height: 0;
  };
}

:root {
  --cl-contact-teal: #0b8b8f;
  --cl-contact-teal-light: #15999b;
  --cl-contact-dark: #064f54;
  --cl-contact-panel: #0b686d;
  --cl-contact-ink: #073f45;
  --cl-contact-green: #5bcf6c;
  --cl-contact-mint: #eaf8f2;
  --cl-contact-sky: #f1fafb;
  --cl-contact-copy: #607579;
  --cl-contact-line: rgba(7, 63, 69, 0.12);
}

.cl-contact-form .row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 27px;
}

:root {
  --clc-teal: #07868a;
  --clc-teal-2: #11a2a0;
  --clc-dark: #034b50;
  --clc-ink: #073f45;
  --clc-green: #5bcf6c;
  --clc-mint: #e9f8f1;
  --clc-sky: #eef9fb;
  --clc-copy: #607579;
  --clc-line: rgba(7, 63, 69, 0.12);
}

.cl-consultant-hero > .container {
  position: relative;
  z-index: 2;
}

.cl-light-copy p {
  color: rgba(255,255,255,.75);
  font-size: 16px;
  line-height: 1.85;
  text-align: justify;
}

.cl-light-copy p:last-child {
  margin-bottom: 0;
}

.cl-consultant-form .row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 26px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;
  };
}

:root {
  --inst-primary: #61ce70;
  --inst-primary-dark: #2eb77d;
  --inst-teal: #087e83;
  --inst-teal-deep: #00575c;
  --inst-dark: #00464b;
  --inst-ink: #003e43;
  --inst-muted: #657d81;
  --inst-pale: #eaf6f8;
  --inst-white: #ffffff;
  --inst-line: rgba(0, 70, 75, .11);
}

.institutions-page .wow {
  visibility: visible !important;
}

.vipro-tab.is-active {
  color: var(--vp-deep);
  border-color: var(--vp-green);
  background: var(--vp-green);
  box-shadow: 0 13px 30px rgba(93,221,116,.18);
}

.vipro-domain-panel.is-active {
  animation: viproPanel .45s ease both;
}

@keyframes viproPanel {
  from{opacity: 0;
  transform: translateY(12px)}to{opacity:1;
  transform: none};
}

.vipro-hero .row {
  min-height: 500px;
}

.vipro-tab.is-active,
.vipro-tab.is-active b {
  color: #003f42 !important;
}

@media (max-width: 991.98px) {
  .vipro-hero .row { min-height: auto;
  };
}

.bwa8-signal:hover,
.bwa8-signal.is-active {
  transform: translateY(-7px);
  border-color: rgba(53,184,90,.34);
  box-shadow: 0 27px 63px rgba(2,79,81,.12);
}

.bwa8-tab.is-active {
  border-color: var(--b8-green);
  background: var(--b8-green);
  color: var(--b8-deep);
  box-shadow: 0 13px 31px rgba(93,221,116,.18);
}

.bwa8-panel.is-active {
  animation: bwa8-panel-in .45s ease both;
}

@keyframes bwa8-panel-in {
  from{opacity: 0;
  transform: translateY(13px)}to{opacity:1;
  transform: none};
}

.sei-pro-profile-rail span.active,
.sei-pro-profile-rail span:hover {
  background: var(--sei-green);
  color: var(--sei-dark);
  transform: translateX(3px);
}

.sei-pro-compass-tab:hover,
.sei-pro-compass-tab.active {
  transform: translateX(5px);
  border-color: transparent;
  background: linear-gradient( 110deg, var(--sei-deep), var(--sei-teal) );
  box-shadow: 0 18px 40px rgba(3,63,67,.14);
}

.sei-pro-compass-tab:hover strong,
.sei-pro-compass-tab.active strong {
  color: #fff;
}

.sei-pro-compass-tab:hover small,
.sei-pro-compass-tab.active small {
  color: rgba(255,255,255,.57);
}

.sei-pro-compass-tab:hover > span,
.sei-pro-compass-tab.active > span {
  background: var(--sei-green);
  color: var(--sei-dark);
}

.sei-pro-compass-tab:hover > i,
.sei-pro-compass-tab.active > i {
  color: var(--sei-green);
  transform: translateX(4px);
}

.sei-pro-dimension.active {
  position: relative;
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media (max-width: 991.98px) {
  .sei-pro-compass-tab: hover, .sei-pro-compass-tab.active { transform: translateY(-3px);
  };
}

.li2-spectrum .container {
  position: relative;
  z-index: 2;
}

.ability-engine-section .col-lg-6 > p {
  margin-bottom: 13px;
  color: var(--ab-copy);
  font-size: 13px;
  line-height: 1.78;
}

.ability-hero .row {
  position: relative;
  z-index: 2;
}

.ability-hero .col-lg-6:first-child {
  padding-right: 34px;
}

.ability-engine-section .row {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 991px) {
  .ability-hero .col-lg-6: first-child { padding-right: calc(var(--bs-gutter-x) * .5);
  };
}

:root {
  --inst-primary: #61ce70;
  --inst-primary-dark: #2eb77d;
  --inst-teal: #087e83;
  --inst-teal-deep: #00575c;
  --inst-dark: #00464b;
  --inst-ink: #003e43;
  --inst-muted: #657d81;
  --inst-pale: #eaf6f8;
  --inst-white: #ffffff;
  --inst-line: rgba(0, 70, 75, .11);
}

.institutions-page .wow {
  visibility: visible !important;
}

.career-faq-tab:hover,
.career-faq-tab.active {
  border-color: #61CE70;
  /* background: var(--bs-primary);
  */ color: #ffffff;
  transform: translateY(-2px);
}

.career-faq-tab.active span {
  background: #ffffff;
  color: #087980;
}

.career-faq-group.active {
  display: block;
  animation: faqCategoryShow 0.5s ease;
}

@keyframes faqCategoryShow {
  from { opacity: 0;
  transform: translateY(18px);
  } to { opacity: 1;
  transform: translateY(0);
  };
}

@media screen and (max-width: 575px) {
  .career-faq-group.active .career-faq-grid, .career-faq-group.active .card, .career-faq-group.active .wow { display: inline-block;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation-name: none !important;
  }.career-faq-group.active .career-faq-grid { display: block;
  width: 100%;
  };
}

.career-faq-section .career-faq-tab:hover,
.career-faq-section .career-faq-tab.active {
  color: #ffffff;
  border-color: #087980;
  background: #087980;
  box-shadow: 0 12px 30px rgba(8, 121, 128, 0.20);
}

.career-faq-section .career-faq-tab.active span {
  color: #087980;
  background: #ffffff;
}



/* ========================================================== CAREER LINES HOME — FINAL RESPONSIVE / TYPOGRAPHY LAYER Preserves the existing visual design. ========================================================== */ :root {
 

.cl-navbar .navbar {
  min-height: 88px;
  display: flex;
  align-items: center;
}

.cl-nav-container {
  width: 100%;
}

@media (min-width: 1200px) {
  .cl-navbar .navbar-collapse { display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  } .cl-main-menu { margin: auto !important;
  } .cl-nav-actions { margin-left: 18px !important;
  flex: 0 0 auto;
  } .cl-nav-brand { flex: 0 0 auto;
  margin-right: 30px;
  } .cl-nav-brand img { width: 195px !important;
  max-width: 195px !important;
  } .cl-main-menu .nav-link { min-height: 88px;
  padding-inline: 11px !important;
  font-size: 13px;
  } .cl-nav-primary { min-width: 205px;
  min-height: 50px;
  };
}




/* Hero hierarchy */ .cl-hero-title {
  max-width: 780px !important;
  margin-top: 20px !important;
  margin-bottom: 24px !important;
  font-size: var(--cl-home-hero-title) !important;
  line-height: 1.02 !important;
  letter-spacing: -2.4px !important;
  text-wrap: balance;
}

.cl-hero-title > span {
  display: block;
  width: fit-content;
}

.cl-hero-copy {
  max-width: 690px !important;
  margin-bottom: 26px !important;
  font-size: var(--cl-home-body) !important;
  line-height: 1.7 !important;
}

.cl-hero-copy p {
  margin-bottom: 12px !important;
  text-align: left !important;
  word-spacing: normal !important;
}

.cl-hero-actions .butn-style02,
.cl-hero-actions .cl-outline-btn {
  min-height: 50px;
  padding-inline: 24px;
}

.cl-support-title {
  font-size: clamp(24px, 2vw, 30px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.7px;
}

.cl-section-lead {
  max-width: 720px;
  margin-inline: auto;
  font-size: var(--cl-home-body) !important;
  line-height: 1.7 !important;
  text-align: center;
}

.cl-framework-section .cl-pillar-card h3 {
  font-size: clamp(18px, 1.25vw, 21px);
  line-height: 1.25;
  letter-spacing: -.3px;
}

.cl-framework-section .cl-pillar-card p,
.cl-diagnostic-section p,
.cl-direction-section p,
.cl-audience-card p,
.cl-package-section p,
.cl-vision-section p {
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
  word-spacing: normal;
}

.cl-metrics-panel h2,
.cl-section-title {
  /* font-size: var(--cl-home-section-title) !important; */
  line-height: 1.05 !important;
  letter-spacing: -1.5px !important;
  text-wrap: balance;
}

.cl-metrics-copy {
  font-size: 15px !important;
  line-height: 1.7 !important;
  text-align: left !important;
  word-spacing: normal !important;
}

.cl-audience-card h2 {
  font-size: clamp(26px, 2.4vw, 38px) !important;
  line-height: 1.06 !important;
  letter-spacing: -1px !important;
  text-wrap: balance;
}

.cl-package-title {
  font-size: clamp(42px, 4vw, 60px) !important;
  line-height: 1.02 !important;
  letter-spacing: -1.8px !important;
  text-wrap: balance;
}

/* Existing reveal animations — smooth and not excessive */ .cl-hero .cl-eyebrow,
.cl-hero .cl-hero-title,
.cl-hero .cl-hero-copy,
.cl-hero .cl-hero-actions {
  animation-timing-function: cubic-bezier(.2,.75,.25,1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cl-hero .cl-eyebrow, .cl-hero .cl-hero-title, .cl-hero .cl-hero-copy, .cl-hero .cl-hero-actions, .cl-hero .cl-hero-visual { animation: none !important;
  };
}

/* Mobile */ @media (max-width: 991.98px) {
  .cl-navbar .navbar { min-height: 70px !important;
  position: relative !important;
  align-items: center !important;
  } .cl-nav-container { padding-inline: 14px !important;
  } .cl-nav-brand { margin-right: 0 !important;
  } .cl-nav-brand img { width: 145px !important;
  max-width: 145px !important;
  height: auto !important;
  } .cl-mobile-toggle { position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  } .cl-navbar .navbar-collapse { position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 20px 50px rgba(7,63,69,.14) !important;
  z-index: 10000 !important;
  } .cl-main-menu { display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  } .cl-main-menu .nav-link { min-height: 46px !important;
  padding: 12px 14px !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(7,63,69,.06);
  border-radius: 8px;
  } .cl-nav-actions { display: block !important;
  width: 100% !important;
  margin: 0px 0 0 !important;
  } .cl-nav-primary { width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  } .cl-hero { min-height: auto !important;
  } .cl-hero .row { min-height: auto !important;
  } .cl-hero-title { max-width: 100% !important;
  margin: 14px 0 18px !important;
  font-size: clamp(36px, 9.5vw, 48px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.5px !important;
  } .cl-hero-copy { max-width: 100% !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
  } .cl-hero-copy p { text-align: left !important;
  } .cl-hero-actions { flex-direction: column !important;
  width: 100% !important;
  gap: 10px !important;
  } .cl-hero-actions > * { width: 100% !important;
  justify-content: center !important;
  } .cl-hero-visual { margin-top: 20px !important;
  padding-inline: 8px !important;
  } .cl-hero-image-wrap { max-width: 340px !important;
  margin-inline: auto !important;
  } .cl-section { padding-top: 52px !important;
  padding-bottom: 52px !important;
  } .cl-framework-section .cl-support-title { font-size: 22px !important;
  } .cl-framework-section .cl-section-lead { max-width: 340px !important;
  font-size: 15px !important;
  } .cl-framework-section .row.row-cols-1 { row-gap: 14px !important;
  } .cl-framework-section .cl-pillar-card { min-height: 0 !important;
  padding: 20px !important;
  border-radius: 18px !important;
  } .cl-framework-section .cl-pillar-icon { margin-bottom: 16px !important;
  } .cl-metrics-panel { padding: 24px 18px !important;
  border-radius: 20px !important;
  } .cl-metrics-panel h2 { font-size: clamp(30px, 8vw, 38px) !important;
  } .cl-metrics-copy { font-size: 14px !important;
  } .cl-audience-card, .cl-package-content, .cl-manifest-card, .cl-price-card { border-radius: 18px !important;
  };
}

@media (max-width: 390px) {
  .cl-nav-brand img { width: 136px !important;
  max-width: 136px !important;
  } .cl-mobile-toggle { width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  right: 12px !important;
  } 
}
/* =========================================================
   HOME HERO TITLE — FINAL FIX
========================================================= */

.cl-hero .cl-hero-title {
    font-size: clamp(42px, 4vw, 58px) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -1.8px !important;

    max-width: 760px !important;
    width: 100% !important;
}

.cl-hero .cl-hero-title > span {
    display: block !important;
    font-size: inherit !important;
}

.cl-hero .cl-success-word {
    font-size: inherit !important;
}
/* =========================================================
   ABOUT PAGE — PREMIUM BANNER TEXT
========================================================= */
/* =========================================================
   INNER PAGE BANNER — TEXT ALWAYS VISIBLE
========================================================= */

.about-page .page-title-section .bwa-photo-banner__label,
.students-page .page-title-section .bwa-photo-banner__label,
.institutions-page .page-title-section .bwa-photo-banner__label,
.cl-consultant-page .page-title-section .bwa-photo-banner__label,
.faq-page .page-title-section .bwa-photo-banner__label,
.contact-page .page-title-section .bwa-photo-banner__label {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


.about-page .page-title-section .bwa-photo-banner__title,
.students-page .page-title-section .bwa-photo-banner__title,
.institutions-page .page-title-section .bwa-photo-banner__title,
.cl-consultant-page .page-title-section .bwa-photo-banner__title,
.faq-page .page-title-section .bwa-photo-banner__title,
.contact-page .page-title-section .bwa-photo-banner__title {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
    transform: translateY(0) !important;

    color: #fff !important;
}


.about-page .page-title-section .bwa-photo-banner__line,
.students-page .page-title-section .bwa-photo-banner__line,
.institutions-page .page-title-section .bwa-photo-banner__line,
.cl-consultant-page .page-title-section .bwa-photo-banner__line,
.faq-page .page-title-section .bwa-photo-banner__line,
.contact-page .page-title-section .bwa-photo-banner__line {
    width: 78px !important;
}


.about-page .page-title-section .bwa-photo-banner__breadcrumb,
.students-page .page-title-section .bwa-photo-banner__breadcrumb,
.institutions-page .page-title-section .bwa-photo-banner__breadcrumb,
.cl-consultant-page .page-title-section .bwa-photo-banner__breadcrumb,
.faq-page .page-title-section .bwa-photo-banner__breadcrumb,
.contact-page .page-title-section .bwa-photo-banner__breadcrumb {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* faiz */


/* ==========================================================================
   10. CAREER LINES — ABOUT US PAGE
   About page styles only
   ========================================================================== */

:root {
    --about-teal: #087b80;
    --about-dark: #034b50;
    --about-green: #61ce70;
    --about-ink: #073f45;
    --about-copy: #627a7d;
}

.about-career-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
}

.about-section-lead {
    max-width: 760px;
    color: var(--about-copy);
    font-size: 17px;
    line-height: 1.8;
}

.about-title-accent {
    color: var(--about-green);
}

.about-vision-section {
    background: radial-gradient(circle at 0 0, rgba(97, 206, 112, .09), transparent 27%), linear-gradient(180deg, #eaf5f7 0%, #fff 100%) !important;
}

.about-vision-section:before {
    position: absolute;
    top: 70px;
    left: -140px;
    width: 380px;
    height: 380px;
    content: "";
    border: 1px solid rgba(8, 123, 128, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(97, 206, 112, .025);
}

.about-purpose-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;
    margin-top: 18px;
    padding: 25px;
    border: 1px solid rgba(7, 63, 69, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 36px rgba(7, 63, 69, .07);
    transition: .3s ease;
}

.about-purpose-card:hover {
    border-color: rgba(97, 206, 112, .5);
    box-shadow: 0 22px 48px rgba(7, 63, 69, .12);
    transform: translateY(-5px);
}

.about-purpose-icon, .about-step-icon, .about-pillar-icon {
    display: grid;
    color: #fff;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--about-teal), var(--about-green));
}

.about-purpose-icon {
    width: 55px;
    height: 55px;
    box-shadow: 0 12px 25px rgba(8, 123, 128, .2);
}

.about-purpose-card h3, .about-step-card h3, .about-pillar-card h3, .about-stage-content h3 {
    color: var(--about-ink);
    font-family: "Marcellus", serif;
    font-weight: 400;
}

.about-purpose-card h3 {
    margin: 2px 0 9px;
    font-size: 24px;
}

.about-purpose-card p {
    margin: 0;
    color: var(--about-copy);
    font-size: 14px;
    line-height: 1.75;
    text-align: justify;
}

/* Homepage-inspired image composition for the About introduction */
.about-hero-visual {
    position: relative;
    min-height: 620px;
    max-width: 570px;
    margin-left: auto;
    isolation: isolate;
}

.about-hero-visual:before {
    position: absolute;
    top: 24px;
    right: 8px;
    bottom: 45px;
    left: 55px;
    z-index: -2;
    content: "";
    border-radius: 170px 18px 170px 18px;
    background: linear-gradient(145deg, rgba(97, 206, 112, .22), rgba(8, 123, 128, .12));
    transform: rotate(3deg);
}

.about-hero-image {
    position: absolute;
    top: 55px;
    right: 32px;
    bottom: 38px;
    left: 58px;
    overflow: hidden;
    border: 9px solid rgba(255, 255, 255, .94);
    border-radius: 155px 18px 155px 18px;
    background: #dcebed;
    box-shadow: 0 32px 75px rgba(7, 63, 69, .18);
}

.about-hero-image:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 35%;
    content: "";
    pointer-events: none;
    background: linear-gradient(transparent, rgba(3, 75, 80, .22));
}

.about-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.about-hero-visual:hover .about-hero-image img {
    transform: scale(1.045);
}

.about-hero-shape {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.about-hero-shape-one {
    top: 3px;
    right: 46px;
    width: 95px;
    height: 95px;
    border: 18px solid rgba(97, 206, 112, .22);
}

.about-hero-shape-two {
    bottom: 25px;
    left: 11px;
    width: 125px;
    height: 125px;
    background: radial-gradient(circle, rgba(8, 123, 128, .15) 2px, transparent 3px);
    background-size: 14px 14px;
}

.about-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    min-width: 185px;
    gap: 11px;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid rgba(7, 63, 69, .08);
    border-radius: 9px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 15px 35px rgba(7, 63, 69, .14);
    backdrop-filter: blur(10px);
    animation: aboutFloat 5s ease-in-out infinite;
}

.about-floating-card > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: #fff;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--about-teal), var(--about-green));
}

.about-floating-card small, .about-floating-card strong {
    display: block;
    white-space: nowrap;
}

.about-floating-card small {
    margin-bottom: 2px;
    color: #819497;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.about-floating-card strong {
    color: var(--about-ink);
    font-family: "Marcellus", serif;
    font-size: 14px;
    font-weight: 400;
}

.about-float-science {
    top: 85px;
    left: 0;
}

.about-float-roadmap {
    top: 305px;
    right: -10px;
    animation-delay: -1.7s;
}

.about-float-guidance {
    bottom: 92px;
    left: 7px;
    animation-delay: -3.1s;
}

.about-image-trust {
    position: absolute;
    right: 46px;
    bottom: 16px;
    z-index: 4;
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 12px 15px;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--about-dark), var(--about-teal));
    box-shadow: 0 15px 34px rgba(3, 75, 80, .25);
}

.about-image-trust > i {
    color: var(--about-green);
    font-size: 22px;
}

.about-image-trust strong, .about-image-trust small {
    display: block;
}

.about-image-trust strong {
    font-size: 12px;
}

.about-image-trust small {
    margin-top: 2px;
    font-size: 9px;
    opacity: .68;
}

@keyframes aboutFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.about-science-visual {
    position: relative;
    min-height: 560px;
    max-width: 570px;
    margin-left: auto;
    border: 1px solid rgba(7, 63, 69, .09);
    border-radius: 12px;
    background: radial-gradient(circle, rgba(97, 206, 112, .13), transparent 34%), linear-gradient(145deg, #fff, #e8f5f2);
    box-shadow: 0 30px 75px rgba(7, 63, 69, .12);
}

.about-visual-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(8, 123, 128, .27);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.about-orbit-one {
    width: 360px;
    height: 360px;
    animation: aboutOrbit 32s linear infinite;
}

.about-orbit-two {
    width: 245px;
    height: 245px;
    border-style: solid;
    border-color: rgba(97, 206, 112, .24);
    animation: aboutOrbitReverse 24s linear infinite;
}

@keyframes aboutOrbit {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes aboutOrbitReverse {
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

.about-visual-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: 175px;
    height: 175px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 10px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: linear-gradient(145deg, #006d77, var(--about-dark));
    box-shadow: 0 24px 55px rgba(7, 63, 69, .24);
    transform: translate(-50%, -50%);
}

.about-visual-core i {
    margin-bottom: 10px;
    color: var(--about-green);
    font-size: 30px;
}

.about-visual-core strong, .about-visual-core small {
    display: block;
}

.about-visual-core strong {
    font-family: "Marcellus", serif;
    font-size: 21px;
    font-weight: 400;
}

.about-visual-core small {
    margin-top: 5px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .7;
}

.about-visual-point {
    position: absolute;
    z-index: 3;
    display: flex;
    min-width: 128px;
    gap: 9px;
    align-items: center;
    padding: 12px 15px;
    color: var(--about-ink);
    border: 1px solid rgba(7, 63, 69, .08);
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 13px 32px rgba(7, 63, 69, .11);
    font-size: 12px;
    font-weight: 800;
}

.about-visual-point i {
    color: var(--about-green);
}

.point-one {
    top: 17%;
    left: 9%;
}

.point-two {
    top: 15%;
    right: 7%;
}

.point-three {
    bottom: 14%;
    left: 8%;
}

.point-four {
    right: 7%;
    bottom: 17%;
}

.about-guidance-section, .about-pillars-section {
    background: radial-gradient(circle at 100% 0, rgba(97, 206, 112, .13), transparent 30%), linear-gradient(120deg, var(--about-dark), var(--about-teal) 65%, #15927e) !important;
}

.about-guidance-map {
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 10px;
    background: rgba(255, 255, 255, .085);
    box-shadow: 0 28px 65px rgba(0, 31, 34, .22);
    backdrop-filter: blur(12px);
}

.guidance-map-head {
    display: flex;
    gap: 13px;
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.guidance-map-head > span {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: var(--about-ink);
    place-items: center;
    border-radius: 50%;
    background: var(--about-green);
}

.guidance-map-head small, .guidance-map-head strong, .guidance-map-step strong, .guidance-map-step small {
    display: block;
    color: #fff;
}

.guidance-map-head small {
    margin-bottom: 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .8px;
    opacity: .62;
}

.guidance-map-head strong {
    font-family: "Marcellus", serif;
    font-size: 20px;
    font-weight: 400;
}

.guidance-map-line {
    position: relative;
    display: grid;
    gap: 13px;
    margin-top: 22px;
}

.guidance-map-line:before {
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 21px;
    width: 2px;
    content: "";
    background: linear-gradient(var(--about-green), rgba(255, 255, 255, .16));
}

.guidance-map-step {
    position: relative;
    display: grid;
    grid-template-columns: 43px 1fr 25px;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 6px;
    background: rgba(255, 255, 255, .055);
}

.guidance-map-step > span {
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    color: var(--about-ink);
    place-items: center;
    border: 5px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: var(--about-green);
    font-size: 10px;
    font-weight: 800;
}

.guidance-map-step small {
    margin-top: 2px;
    font-size: 10px;
    opacity: .62;
}

.guidance-map-step > i {
    color: var(--about-green);
}

.about-light-copy {
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    line-height: 1.85;
}

.about-light-copy p {
    text-align: justify;
}

.about-journey-section, .about-stages-section {
    background: radial-gradient(circle at 0 100%, rgba(97, 206, 112, .07), transparent 25%), linear-gradient(180deg, #edf7f8, #fff) !important;
}

.about-journey-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
}

.about-step-card {
    position: relative;
    grid-column: span 2;
    padding: 30px 27px;
    overflow: hidden;
    border: 1px solid rgba(7, 63, 69, .09);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 17px 42px rgba(7, 63, 69, .075);
    transition: .35s ease;
}

.about-step-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.about-step-card:hover {
    border-color: rgba(97, 206, 112, .48);
    box-shadow: 0 25px 58px rgba(7, 63, 69, .13);
    transform: translateY(-7px);
}

.about-step-card:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--about-teal), var(--about-green));
}

.about-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.about-step-number {
    color: rgba(7, 63, 69, .18);
    font-family: "Marcellus", serif;
    font-size: 38px;
}

.about-step-icon {
    width: 50px;
    height: 50px;
}

.about-step-card h3 {
    min-height: 54px;
    margin-bottom: 18px;
    font-size: 22px;
    line-height: 1.25;
}

.about-step-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-step-card li {
    position: relative;
    padding-left: 18px;
    color: var(--about-copy);
    font-size: 12px;
    line-height: 1.65;
    text-align: justify;
}

.about-step-card li:before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 6px;
    height: 6px;
    content: "";
    border-radius: 50%;
    background: var(--about-green);
}

.about-step-card li strong {
    color: var(--about-ink);
}

.about-pillar-card {
    position: relative;
    height: 100%;
    min-height: 330px;
    padding: 34px 30px;
    overflow: hidden;
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .065);
    transition: .35s ease;
}

.about-pillar-card:hover {
    border-color: rgba(97, 206, 112, .42);
    background: rgba(255, 255, 255, .1);
    transform: translateY(-7px);
}

.about-pillar-number {
    position: absolute;
    top: 20px;
    right: 22px;
    color: rgba(255, 255, 255, .13);
    font-family: "Marcellus", serif;
    font-size: 42px;
}

.about-pillar-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 28px;
    color: var(--about-ink);
    background: var(--about-green);
}

.about-pillar-card h3 {
    margin-bottom: 16px;
    color: #fff;
    font-size: 24px;
}

.about-pillar-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
}

.about-stage-timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.about-stage-timeline:before {
    position: absolute;
    top: 45px;
    bottom: 45px;
    left: 50%;
    width: 2px;
    content: "";
    background: linear-gradient(var(--about-teal), var(--about-green));
    transform: translateX(-50%);
}

.about-stage-item {
    display: grid;
    grid-template-columns: 1fr 74px 1fr;
    align-items: center;
    margin-bottom: 26px;
}

.about-stage-marker {
    z-index: 2;
    display: grid;
    grid-column: 2;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    color: #fff;
    place-items: center;
    border: 8px solid #edf7f5;
    border-radius: 50%;
    background: var(--about-teal);
}

.about-stage-content {
    grid-column: 3;
    padding: 25px 28px;
    border: 1px solid rgba(7, 63, 69, .09);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(7, 63, 69, .065);
}

.about-stage-item:nth-child(even) .about-stage-content {
    grid-row: 1;
    grid-column: 1;
    text-align: left;
}

.about-stage-content > span {
    color: var(--about-green);
    font-size: 11px;
    font-weight: 800;
}

.about-stage-content h3 {
    margin: 7px 0 10px;
    font-size: 22px;
}

.about-stage-content p {
    margin: 0;
    color: var(--about-copy);
    font-size: 13px;
    line-height: 1.7;
    text-align: justify;
}

.about-final-cta {
    position: relative;
    padding: 55px 0;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(110deg, var(--about-green), #28b884);
}

.about-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 35px;
    align-items: center;
    justify-content: space-between;
}

.about-cta-label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    color: var(--about-ink);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.about-cta-inner h2 {
    max-width: 820px;
    margin-bottom: 10px;
    color: #fff;
    font-family: "Marcellus", serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.04;
}

.about-cta-inner p {
    max-width: 780px;
    margin: 0;
    color: rgba(7, 63, 69, .78);
    font-weight: 600;
}

@media (max-width: 1199px) {
    .about-career-section {
        padding: 90px 0;
    }
    .about-hero-visual {
        min-height: 570px;
    }
    .about-science-visual {
        min-height: 500px;
    }
    .about-journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-step-card, .about-step-card:nth-child(4) {
        grid-column: auto;
    }
    .about-step-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 11px);
        justify-self: center;
    }
}

@media (max-width: 991px) {
    .about-career-section {
        padding: 78px 0;
    }
    .about-hero-visual {
        min-height: 590px;
        margin: 5px auto 0;
    }
    .about-science-visual {
        min-height: 520px;
        margin: 0 auto;
    }
    .about-guidance-map {
        max-width: 600px;
        margin: 0 auto;
    }
    .about-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .about-career-section {
        padding: 65px 0;
    }
    .about-purpose-card {
        grid-template-columns: 48px 1fr;
        padding: 21px 18px;
    }
    .about-purpose-icon {
        width: 48px;
        height: 48px;
    }
    .about-hero-visual {
        min-height: 535px;
    }
    .about-hero-image {
        top: 52px;
        right: 24px;
        bottom: 36px;
        left: 42px;
    }
    .about-floating-card {
        min-width: 165px;
        padding: 11px 13px;
    }
    .about-float-roadmap {
        right: 0;
    }
    .about-science-visual {
        min-height: 450px;
    }
    .about-orbit-one {
        width: 300px;
        height: 300px;
    }
    .about-orbit-two {
        width: 205px;
        height: 205px;
    }
    .about-visual-core {
        width: 150px;
        height: 150px;
    }
    .about-journey-grid {
        grid-template-columns: 1fr;
    }
    .about-step-card:last-child {
        grid-column: auto;
        width: 100%;
    }
    .about-stage-timeline:before {
        left: 29px;
    }
    .about-stage-item {
        grid-template-columns: 58px 1fr;
        gap: 14px;
    }
    .about-stage-marker {
        grid-row: 1;
        grid-column: 1;
        width: 52px;
        height: 52px;
        margin: 0;
    }
    .about-stage-content, .about-stage-item:nth-child(even) .about-stage-content {
        grid-row: 1;
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 575px) {
    .about-section-lead {
        font-size: 15px;
    }
    .about-purpose-card {
        grid-template-columns: 1fr;
    }
    .about-hero-visual {
        min-height: 480px;
    }
    .about-hero-image {
        top: 48px;
        right: 13px;
        bottom: 38px;
        left: 25px;
        border-width: 6px;
        border-radius: 100px 14px 100px 14px;
    }
    .about-hero-visual:before {
        right: 0;
        left: 31px;
        border-radius: 105px 14px 105px 14px;
    }
    .about-floating-card {
        min-width: auto;
        padding: 9px 11px;
    }
    .about-floating-card > span {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
        font-size: 12px;
    }
    .about-floating-card small {
        display: none;
    }
    .about-floating-card strong {
        font-size: 11px;
    }
    .about-float-science {
        top: 76px;
    }
    .about-float-roadmap {
        top: 215px;
        right: 0;
    }
    .about-float-guidance {
        bottom: 80px;
        left: 0;
    }
    .about-image-trust {
        right: 22px;
        bottom: 15px;
    }
    .about-science-visual {
        min-height: 410px;
    }
    .about-orbit-one {
        width: 255px;
        height: 255px;
    }
    .about-orbit-two {
        width: 185px;
        height: 185px;
    }
    .about-visual-core {
        width: 135px;
        height: 135px;
        border-width: 7px;
    }
    .about-visual-point {
        min-width: 105px;
        padding: 9px 11px;
        font-size: 10px;
    }
    .point-one {
        top: 12%;
        left: 4%;
    }
    .point-two {
        top: 12%;
        right: 4%;
    }
    .point-three {
        bottom: 11%;
        left: 4%;
    }
    .point-four {
        right: 4%;
        bottom: 11%;
    }
    .about-guidance-map {
        padding: 22px 17px;
    }
    .about-step-card, .about-pillar-card {
        padding: 25px 21px;
    }
    .about-stage-content {
        padding: 21px 18px;
    }
    .about-final-cta {
        padding: 45px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-floating-card, .about-hero-image img {
        animation: none;
        transition: none;
    }
}

.about-vision-title {
    color: #003f46;
    font-size: clamp(42px, 6vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.about-vision-title .about-title-line {
    display: block;
    white-space: nowrap;
}

.about-vision-title .about-title-accent {
    color: #5bd16f;
}

/* Tablet and mobile */
@media (max-width: 991px) {
    .about-vision-title {
        font-size: clamp(38px, 6vw, 54px);
    }
}

@media (max-width: 767px) {
    .about-vision-title .about-title-line {
        white-space: normal;
    }
    .about-vision-title {
        font-size: 40px;
        line-height: 1.12;
    }
}

@media (max-width: 575px) {
    .about-vision-title {
        font-size: 34px;
    }
}


/* ==========================================================================
   02. CAREER LINES — STUDENTS & PARENTS PAGE
   Students and parents page styles only
   ========================================================================== */

:root {
    --student-teal: #014f50;
    --student-teal-deep: #003d3e;
    --student-teal-soft: #0b7372;
    --student-green: #5ddd74;
    --student-green-dark: #39b85b;
    --student-mint: #e9f9f0;
    --student-ice: #eef8f9;
    --student-cloud: #f7fbfb;
    --student-ink: #073f40;
    --student-copy: #526a6a;
    --student-line: rgba(3, 77, 78, 0.12);
    --student-white: #ffffff;
    --student-radius-lg: 28px;
    --student-radius-md: 18px;
    --student-shadow: 0 24px 70px rgba(0, 73, 73, 0.13);
    --student-shadow-soft: 0 15px 40px rgba(0, 73, 73, 0.08);
}

.student-page {
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--student-copy);
    background: var(--student-white);
}

.student-page main {
    overflow: clip;
}

.student-page h1, .student-page h2, .student-page h3, .student-page p {
    margin-top: 0;
}

/* .student-page h1,
.student-page h2,
.student-page h3 {
    color: var(--student-ink);
} */
/* Always show content if a third-party animation library fails. */
.student-page .wow {
    visibility: visible !important;
}

.student-hero {
    position: relative;
    isolation: isolate;
    padding: 92px 0 58px;
    background: radial-gradient(circle at 88% 10%, rgba(93, 221, 116, 0.18), transparent 24%), radial-gradient(circle at 12% 85%, rgba(1, 79, 80, 0.08), transparent 29%), linear-gradient(135deg, #ffffff 0%, #f6fdf9 54%, #e8f9ee 100%);
}

.student-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 410px;
    height: 410px;
    right: -150px;
    top: -165px;
    border: 1px solid rgba(1, 79, 80, 0.08);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(255, 255, 255, 0.35), 0 0 0 96px rgba(93, 221, 116, 0.04);
}

.student-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 52%;
    height: 48%;
    left: -9%;
    bottom: -25%;
    border-radius: 50%;
    background: rgba(212, 238, 238, 0.48);
    filter: blur(2px);
}

.student-hero .row {
    min-height: 480px;
}

.student-hero-badge, .student-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--student-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.student-hero-badge {
    padding: 10px 14px;
    border: 1px solid rgba(1, 79, 80, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 8px 24px rgba(1, 79, 80, 0.06);
}

.student-hero-badge i, .student-kicker::before {
    color: var(--student-green-dark);
}

.student-kicker::before {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--student-green);
}

.student-kicker.is-light {
    color: #a6eeb1;
}

.student-hero-title {
    max-width: 690px;
    margin-bottom: 22px;
    font-size: clamp(45px, 5.3vw, 76px);
    line-height: 0.96;
    letter-spacing: -3.2px;
    font-weight: 700;
}

.student-hero-title span, .student-title span, .student-final-cta h2 span {
    color: var(--student-green-dark);
}

.student-hero-copy {
    max-width: 650px;
    margin-bottom: 17px;
    color: var(--student-copy);
    font-size: 16px;
    line-height: 1.8;
}

.student-hero-tagline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 640px;
    margin-bottom: 27px;
    color: var(--student-ink);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.student-hero-tagline i {
    margin-top: 4px;
    color: var(--student-green-dark);
}

.student-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 14px 21px;
    border: 1px solid var(--student-green);
    border-radius: 3px;
    color: var(--student-teal-deep);
    background: var(--student-green);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    box-shadow: 0 12px 28px rgba(57, 184, 91, 0.2);
    transition: color 0.28s ease, background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.2s ease;
}

.student-primary-btn:hover {
    color: var(--student-white);
    border-color: var(--student-teal);
    background: var(--student-teal);
    box-shadow: 0 16px 34px rgba(1, 79, 80, 0.2);
}

.student-primary-btn i {
    transition: transform 0.25s ease;
}

.student-primary-btn:hover i {
    transform: translateX(4px);
}

.student-visual {
    position: relative;
    width: min(100%, 520px);
    height: 500px;
    margin-left: auto;
    perspective: 1100px;
}

.student-visual::before, .student-visual::after {
    content: "";
    position: absolute;
    border-radius: 24px;
}

.student-visual::before {
    inset: 28px 15px 26px 28px;
    transform: rotate(5deg);
    background: rgba(93, 221, 116, 0.19);
}

.student-visual::after {
    width: 94px;
    height: 94px;
    right: -12px;
    bottom: 8px;
    border: 1px dashed rgba(1, 79, 80, 0.28);
    border-radius: 50%;
    animation: student-spin 18s linear infinite;
}

.student-visual-card {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: calc(100% - 48px);
    height: calc(100% - 34px);
    overflow: hidden;
    border: 7px solid rgba(255, 255, 255, 0.94);
    border-radius: 26px;
    background: var(--student-teal);
    box-shadow: var(--student-shadow);
    transform: translate(-50%, -50%) rotate(1.5deg);
    transform-style: preserve-3d;
    transition: transform 0.18s ease-out;
}

.student-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.student-visual:hover .student-visual-card img {
    transform: scale(1.035);
}

.student-visual-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 49, 50, 0.68));
    pointer-events: none;
}

.student-visual-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--student-white);
}

.student-visual-caption > span {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(8px);
}

.student-visual-caption small, .student-visual-caption strong {
    display: block;
    color: inherit;
}

.student-visual-caption small {
    margin-bottom: 2px;
    opacity: 0.72;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.student-visual-caption strong {
    font-size: 16px;
}

.student-float {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border: 1px solid rgba(1, 79, 80, 0.09);
    border-radius: 9px;
    color: var(--student-ink);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 14px 34px rgba(0, 62, 63, 0.12);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 800;
    transition: margin 0.18s ease-out;
    animation: student-float 5s ease-in-out infinite;
}

.student-float i {
    color: var(--student-green-dark);
}

.student-float-one {
    top: 36px;
    right: -15px;
}

.student-float-two {
    left: -17px;
    bottom: 74px;
    animation-delay: -2.5s;
}

.student-proof-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 50px;
    overflow: hidden;
    border: 1px solid var(--student-line);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--student-shadow-soft);
    backdrop-filter: blur(12px);
}

.student-proof-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 19px 22px;
}

.student-proof-item + .student-proof-item {
    border-left: 1px solid var(--student-line);
}

.student-proof-item strong {
    flex: 0 0 auto;
    color: var(--student-teal);
    font-size: 26px;
    line-height: 1;
}

.student-proof-item span {
    color: var(--student-copy);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.student-section {
    position: relative;
    padding: 112px 0;
}

.student-soft-bg {
    background: radial-gradient(circle at 90% 10%, rgba(93, 221, 116, 0.08), transparent 25%), linear-gradient(135deg, var(--student-cloud), var(--student-ice));
}

.student-title {
    max-width: 780px;
    margin-bottom: 24px;
    font-size: clamp(39px, 4.3vw, 62px);
    line-height: 1.02;
    letter-spacing: -2.4px;
    font-weight: 700;
}

.student-title.is-light {
    color: var(--student-white);
}

.student-lead {
    max-width: 750px;
    color: var(--student-copy);
    font-size: 17px;
    line-height: 1.75;
}

.student-question-stack {
    display: grid;
    gap: 11px;
}

.student-question {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border: 1px solid var(--student-line);
    border-radius: 12px;
    color: var(--student-ink);
    background: rgba(255, 255, 255, 0.83);
    box-shadow: 0 8px 25px rgba(0, 73, 73, 0.05);
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.student-question:hover {
    transform: translateX(8px);
    border-color: rgba(57, 184, 91, 0.4);
    box-shadow: 0 14px 30px rgba(0, 73, 73, 0.08);
}

.student-question > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--student-teal);
    background: var(--student-mint);
}

.student-pressure-card {
    position: relative;
    padding: 44px;
    overflow: hidden;
    border: 1px solid rgba(1, 79, 80, 0.1);
    border-radius: var(--student-radius-lg);
    background: var(--student-white);
    box-shadow: var(--student-shadow-soft);
}

.student-pressure-card::before {
    content: "“";
    position: absolute;
    right: 24px;
    top: -25px;
    color: rgba(93, 221, 116, 0.2);
    font-family: Georgia, serif;
    font-size: 150px;
    line-height: 1;
}

.student-pressure-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 42px;
    width: 4px;
    height: 70px;
    border-radius: 0 4px 4px 0;
    background: var(--student-green);
}

.student-pressure-card p {
    position: relative;
    z-index: 1;
    font-size: 15px;
    line-height: 1.85;
}

.student-pressure-card p:last-child {
    margin-bottom: 0;
    color: var(--student-ink);
    font-weight: 600;
}

.student-dark-section {
    color: rgba(255, 255, 255, 0.73);
    background: linear-gradient(115deg, rgba(93, 221, 116, 0.05), transparent 42%), var(--student-teal-deep);
}

.student-dark-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.25;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.student-outcome-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 42px;
}

.student-outcome-card {
    --spot-x: 50%;
    --spot-y: 50%;
    position: relative;
    grid-column: span 2;
    min-height: 310px;
    padding: 29px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--student-radius-md);
    background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(93, 221, 116, 0.15), transparent 34%), rgba(255, 255, 255, 0.055);
    transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

.student-outcome-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.student-outcome-card:hover {
    transform: translateY(-8px);
    border-color: rgba(93, 221, 116, 0.42);
    background-color: rgba(255, 255, 255, 0.08);
}

.student-outcome-number {
    display: block;
    margin-bottom: 35px;
    color: #a9eeb4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.student-outcome-card > i {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 23px;
    place-items: center;
    border-radius: 50%;
    color: var(--student-teal-deep);
    background: var(--student-green);
    font-size: 18px;
}

.student-outcome-card h3 {
    margin-bottom: 12px;
    color: var(--student-white);
    font-size: 21px;
}

.student-outcome-card p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-align: justify;
    line-height: 1.75;
}

.student-profile-shell {
    position: relative;
    max-width: 1020px;
    margin: 48px auto 0;
    padding: 12px;
    border: 1px solid var(--student-line);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.45);
}

.student-profile-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    border-radius: 20px;
    background: var(--student-white);
    box-shadow: var(--student-shadow-soft);
}

.student-profile-item {
    display: flex;
    gap: 19px;
    min-height: 195px;
    padding: 31px;
    transition: background 0.3s ease;
}

.student-profile-item:nth-child(odd) {
    border-right: 1px solid var(--student-line);
}

.student-profile-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--student-line);
}

.student-profile-item:hover {
    background: #f5fcf8;
}

.student-profile-icon, .student-feature-item > span {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    place-items: center;
    border-radius: 14px;
    color: var(--student-teal);
    background: var(--student-mint);
}

.student-profile-item h3, .student-feature-item h3 {
    margin-bottom: 9px;
    font-size: 19px;
}

.student-profile-item p, .student-feature-item p {
    margin-bottom: 0;
    color: var(--student-copy);
    font-size: 13px;
    text-align: justify;
    line-height: 1.72;
}

.student-guidance-path {
    position: relative;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 22px;
    margin-top: 47px;
}

.student-guidance-path::before {
    content: "";
    position: absolute;
    left: calc(41% - 18px);
    top: 45px;
    width: 36px;
    height: 1px;
    background: var(--student-green);
}

.student-guidance-card {
    --spot-x: 50%;
    --spot-y: 50%;
    position: relative;
    padding: 39px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--student-radius-md);
    background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(93, 221, 116, 0.12), transparent 32%), rgba(255, 255, 255, 0.06);
}

.student-guidance-letter {
    display: grid;
    width: 45px;
    height: 45px;
    margin-bottom: 28px;
    place-items: center;
    border-radius: 50%;
    color: var(--student-teal-deep);
    background: var(--student-green);
    font-weight: 900;
}

.student-guidance-card h3 {
    color: var(--student-white);
    font-size: 24px;
}

.student-guidance-card p, .student-check-list {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.75;
}

.student-check-list {
    padding: 0;
    margin: 23px 0 0;
    list-style: none;
}

.student-check-list li {
    position: relative;
    padding: 13px 0 13px 29px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.student-check-list li::before {
    content: "\f058";
    position: absolute;
    left: 0;
    top: 15px;
    color: var(--student-green);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.student-check-list strong {
    color: var(--student-white);
}

.student-dashboard-frame {
    overflow: hidden;
    border: 8px solid var(--student-white);
    border-radius: 24px;
    background: var(--student-white);
    box-shadow: var(--student-shadow);
}

.student-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 21px;
    color: var(--student-ink);
    border-bottom: 1px solid var(--student-line);
}

.student-dashboard-dots {
    display: flex;
    gap: 6px;
}

.student-dashboard-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cfe3e3;
}

.student-dashboard-dots span:first-child {
    background: var(--student-green);
}

.student-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    padding: 22px;
    background: radial-gradient(circle at 90% 5%, rgba(93, 221, 116, 0.16), transparent 25%), #eaf5f5;
}

.student-dashboard-tile {
    display: flex;
    min-height: 145px;
    padding: 21px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(1, 79, 80, 0.08);
    border-radius: 15px;
    color: var(--student-ink);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(0, 73, 73, 0.06);
    transition: transform 0.3s ease;
}

.student-dashboard-tile:hover {
    transform: translateY(-5px);
}

.student-dashboard-tile i {
    color: var(--student-green-dark);
    font-size: 24px;
}

.student-dashboard-tile strong {
    font-size: 13px;
}

.student-feature-list {
    display: grid;
    gap: 17px;
    margin-top: 30px;
}

.student-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 17px;
}

.student-feature-item > span {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
}

.student-feature-item h3 {
    font-size: 17px;
}

#student-package {
    background: var(--student-white);
}

.student-package-wrap {
    overflow: hidden;
    margin-top: 38px;
    border: 1px solid var(--student-line);
    border-radius: 18px;
    box-shadow: var(--student-shadow-soft);
}

.student-package-head, .student-package-row {
    display: grid;
    grid-template-columns: 34% 66%;
}

.student-package-head {
    color: var(--student-white);
    background: var(--student-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.student-package-head > div, .student-package-row > div {
    padding: 19px 23px;
}

.student-package-head > div:first-child, .student-package-row > div:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.student-package-row {
    color: var(--student-copy);
    background: var(--student-white);
    font-size: 13px;
    transition: background 0.25s ease;
}

.student-package-row:hover {
    background: #f4fcf7;
}

.student-package-row + .student-package-row {
    border-top: 1px solid var(--student-line);
}

.student-package-row > div:first-child {
    border-right-color: var(--student-line);
}

.student-package-name {
    color: var(--student-ink);
    font-weight: 800;
}

.student-package-value ul {
    padding-left: 18px;
    margin: 0;
}

.student-package-value li + li {
    margin-top: 7px;
}

.student-price-panel {
    position: sticky;
    top: 130px;
    margin: 0 0 0 25px;
    padding: 36px;
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.75);
    background: radial-gradient(circle at 100% 0, rgba(93, 221, 116, 0.2), transparent 35%), var(--student-teal-deep);
    box-shadow: var(--student-shadow);
}

.student-price-panel .student-kicker {
    color: #a9eeb4;
}

.student-price-standard {
    margin: 8px 0 2px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 12px;
    text-decoration: line-through;
}

.student-price {
    margin: 13px 0;
    color: var(--student-white);
    font-size: 72px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -4px;
}

.student-price small {
    color: var(--student-green);
    font-size: 15px;
    letter-spacing: 0;
}

.student-price-note {
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.69);
    font-size: 13px;
    line-height: 1.75;
}

.student-price-panel .student-primary-btn {
    width: 100%;
}

.student-final-cta {
    position: relative;
    padding: 65px 0;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(1, 79, 80, 0.15), transparent 56%), #078b86;
}

.student-final-cta::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: 6%;
    top: -165px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.04);
}

.student-final-cta h2 {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin-bottom: 0;
    color: var(--student-white);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.student-final-cta h2 span {
    color: #74eb86;
}

.student-final-cta .student-primary-btn {
    position: relative;
    z-index: 1;
    border-color: var(--student-white);
    background: var(--student-white);
}

.student-scroll-progress {
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    pointer-events: none;
}

.student-scroll-progress span {
    display: block;
    width: calc(var(--student-scroll, 0) * 100%);
    height: 100%;
    background: linear-gradient(90deg, var(--student-teal), var(--student-green));
}

.student-motion-ready .student-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease var(--student-delay, 0ms), transform 0.7s cubic-bezier(0.21, 0.68, 0.35, 1) var(--student-delay, 0ms);
}

.student-motion-ready .student-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Student Profile Title — keep exactly 2 lines */
#student-profile .student-hero-title {
    width: 100%;
    max-width: 1250px;
    margin-left: auto !important;
    margin-right: auto !important;
}

#student-profile .student-hero-title > span {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    #student-profile .student-hero-title > span {
        white-space: normal;
    }
}
@keyframes student-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes student-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1199.98px) {
    .student-hero {
        padding-top: 75px;
    }
    .student-hero-title {
        font-size: clamp(43px, 5.2vw, 63px);
    }
    .student-outcome-card {
        grid-column: span 3;
    }
    .student-outcome-card:nth-child(4) {
        grid-column: span 3;
    }
    .student-outcome-card:last-child {
        grid-column: 2 / span 4;
    }
    .student-price-panel {
        margin-left: 10px;
    }
}

@media (max-width: 991.98px) {
    .student-hero {
        padding: 75px 0 50px;
    }
    .student-hero .row {
        min-height: 0;
    }
    .student-visual {
        height: 540px;
        margin: 55px auto 0;
    }
    .student-proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .student-proof-item:nth-child(3) {
        border-left: 0;
    }
    .student-proof-item:nth-child(n+3) {
        border-top: 1px solid var(--student-line);
    }
    .student-section {
        padding: 85px 0;
    }
    .student-guidance-path {
        grid-template-columns: 1fr;
    }
    .student-guidance-path::before {
        display: none;
    }
    .student-price-panel {
        position: relative;
        top: 0;
        max-width: 570px;
        margin: 42px auto 0;
    }
}

@media (max-width: 767.98px) {
    .student-hero {
        padding-top: 55px;
    }
    .student-hero-title {
        font-size: clamp(39px, 12vw, 54px);
        letter-spacing: -2px;
    }
    .student-hero-copy {
        font-size: 15px;
    }
    .student-visual {
        height: 470px;
    }
    .student-float-one {
        right: 0;
    }
    .student-float-two {
        left: 0;
    }
    .student-title {
        font-size: clamp(35px, 10vw, 49px);
        letter-spacing: -1.7px;
    }
    .student-outcome-grid, .student-profile-list {
        grid-template-columns: 1fr;
    }
    .student-outcome-card, .student-outcome-card:nth-child(4), .student-outcome-card:last-child {
        grid-column: auto;
    }
    .student-profile-item {
        min-height: auto;
        border-right: 0 !important;
        border-bottom: 1px solid var(--student-line);
    }
    .student-profile-item:last-child {
        border-bottom: 0;
    }
    .student-package-head {
        display: none;
    }
    .student-package-row {
        display: block;
        padding: 20px;
    }
    .student-package-row > div {
        padding: 0;
    }
    .student-package-row > div:first-child {
        margin-bottom: 10px;
        border-right: 0;
    }
    .student-final-cta {
        text-align: center;
    }
    .student-final-cta h2 {
        margin: 0 auto 27px;
    }
}

@media (max-width: 575.98px) {
    .student-hero {
        padding-top: 42px;
    }
    .student-hero-title {
        font-size: 42px;
    }
    .student-primary-btn {
        width: 100%;
        padding-inline: 14px;
    }
    .student-visual {
        height: 405px;
    }
    .student-visual-card {
        width: calc(100% - 22px);
        height: calc(100% - 28px);
        border-width: 5px;
    }
    .student-visual-caption {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
    .student-float {
        padding: 10px 12px;
        font-size: 9px;
    }
    .student-float-one {
        top: 14px;
    }
    .student-float-two {
        bottom: 43px;
    }
    .student-proof-grid {
        grid-template-columns: 1fr;
    }
    .student-proof-item {
        min-height: 74px;
    }
    .student-proof-item + .student-proof-item {
        border-top: 1px solid var(--student-line);
        border-left: 0;
    }
    .student-section {
        padding: 72px 0;
    }
    .student-pressure-card, .student-guidance-card, .student-price-panel {
        padding: 27px;
    }
    .student-profile-item {
        padding: 24px;
    }
    .student-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .student-dashboard-tile {
        min-height: 120px;
    }
    .student-price {
        font-size: 61px;
    }
}

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


/* ==========================================================================
   03. CAREER LINES — CONTACT US PAGE
   Contact page styles only
   ========================================================================== */

:root {
    --cl-contact-teal: #0b8b8f;
    --cl-contact-teal-light: #15999b;
    --cl-contact-dark: #064f54;
    --cl-contact-panel: #0b686d;
    --cl-contact-ink: #073f45;
    --cl-contact-green: #5bcf6c;
    --cl-contact-mint: #eaf8f2;
    --cl-contact-sky: #f1fafb;
    --cl-contact-copy: #607579;
    --cl-contact-line: rgba(7, 63, 69, 0.12);
}

.cl-contact-page {
    color: var(--cl-contact-copy);
    background: #fff;
}

/* Keep the Motivo banner, but use a cleaner and slightly lighter teal overlay. */
.cl-contact-page .page-title-section.secondary-overlay::before {
    background: rgba(5, 103, 109, 0.68);
}

.cl-contact-page .page-title-section h1 {
    color: #fff;
    white-space: nowrap;
}

.cl-contact-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
}

.cl-contact-section.cl-soft {
    background: radial-gradient(circle at 5% 15%, rgba(91, 207, 108, 0.10), transparent 25%), linear-gradient(135deg, var(--cl-contact-sky) 0%, #fff 70%);
}

.cl-contact-section .cl-kicker, .cl-contact-form-wrap .cl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--cl-contact-teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.cl-contact-section .cl-kicker::before, .cl-contact-form-wrap .cl-kicker::before {
    content: "\2736";
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--cl-contact-green);
    background: #fff;
    box-shadow: 0 8px 24px rgba(3, 75, 80, 0.08);
}

.cl-contact-title {
    margin: 0 0 18px;
    color: var(--cl-contact-ink);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
}

/* Main section titles remain on one line on desktop. */
.cl-contact-title span {
    display: inline;
    color: var(--cl-contact-green);
}

.cl-contact-lead {
    max-width: 670px;
    margin-left: auto;
    font-size: 17px;
    line-height: 1.8;
}

.cl-contact-card {
    height: 100%;
    min-height: 250px;
    padding: 28px 25px;
    border: 1px solid var(--cl-contact-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(3, 75, 80, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.cl-contact-card:hover {
    transform: translateY(-7px);
    border-color: rgba(91, 207, 108, 0.55);
    box-shadow: 0 24px 60px rgba(3, 75, 80, 0.13);
}

.cl-contact-icon {
    display: inline-grid;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--cl-contact-teal), var(--cl-contact-green));
    box-shadow: 0 12px 25px rgba(8, 123, 128, 0.20);
}

.cl-contact-card h3 {
    min-height: 48px;
    margin-bottom: 10px;
    color: var(--cl-contact-ink);
    font-size: 18px;
    line-height: 1.35;
}

.cl-contact-card p, .cl-contact-card address {
    margin: 0;
    font-style: normal;
    line-height: 1.75;
}

.cl-contact-card a {
    color: var(--cl-contact-teal);
    word-break: break-word;
}

.cl-contact-card a:hover {
    color: var(--cl-contact-green);
}

/* Softer teal panel: lighter than the previous #034b50 background. */
/* ===================================
   LIGHT CONTACT FORM SECTION
====================================== */
.cl-contact-form-wrap {
    position: relative;
    padding: clamp(32px, 5vw, 60px);
    overflow: hidden;
    border: 1px solid rgba(7, 63, 69, 0.10);
    border-radius: 26px;
    background:radial-gradient(circle at 8% 5%, rgba(91, 207, 108, .16), transparent 28%), radial-gradient(circle at 92% 88%, rgba(8, 134, 138, .10), transparent 29%), linear-gradient(120deg, #d9f3f3 0%, #eefaf7 50%, #e1f5e7 100%);
    border: 1px solid rgba(8, 123, 128, 0.15);
    box-shadow: 0 28px 70px rgba(3, 75, 80, 0.13);
}

/* Decorative circles */
.cl-contact-form-wrap::before, .cl-contact-form-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cl-contact-form-wrap::before {
    width: 280px;
    height: 280px;
    top: -150px;
    right: -145px;
    border: 42px solid rgba(11, 139, 143, 0.08);
}

.cl-contact-form-wrap::after {
    width: 150px;
    height: 150px;
    left: -75px;
    bottom: -80px;
    background: rgba(91, 207, 108, 0.10);
}

.cl-contact-form-wrap > * {
    position: relative;
    z-index: 1;
}

/* Section label */
.cl-contact-form-wrap .cl-kicker {
    color: var(--cl-contact-teal) !important;
}

/* Heading */
.cl-contact-form-wrap .cl-contact-title {
    color: var(--cl-contact-ink);
}

.cl-contact-form-wrap .cl-contact-title span {
    display: inline;
    color: var(--cl-contact-green);
}

/* Description */
.cl-contact-form-wrap .cl-form-copy {
    max-width: 650px;
    margin-left: auto;
    color: var(--cl-contact-copy);
    font-size: 16px;
    line-height: 1.75;
}

/* Form labels */
.cl-contact-form .form-label {
    margin-bottom: 9px;
    color: var(--cl-contact-ink);
    font-size: 13px;
    font-weight: 700;
}

/* Input fields */
.cl-contact-form .form-control {
    width: 100%;
    min-height: 58px;
    padding: 14px 18px;
    border: 1px solid rgba(7, 63, 69, 0.14);
    border-radius: 11px;
    color: var(--cl-contact-ink);
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 25px rgba(3, 75, 80, 0.04);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.cl-contact-form .form-control::placeholder {
    color: #8aa0a3;
}

.cl-contact-form .form-control:focus {
    border-color: var(--cl-contact-teal);
    color: var(--cl-contact-ink);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11, 139, 143, 0.10);
    outline: none;
}

/* Browser autofill fix */
.cl-contact-form .form-control:-webkit-autofill, .cl-contact-form .form-control:-webkit-autofill:hover, .cl-contact-form .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cl-contact-ink);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease-out 0s;
}

/* Submit button */
.cl-contact-submit {
    min-height: 56px;
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    color: var(--cl-contact-dark);
    font-weight: 800;
    background: var(--cl-contact-green);
    box-shadow: 0 12px 26px rgba(3, 75, 80, 0.14);
    transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.cl-contact-submit:hover {
    transform: translateY(-3px);
    color: #fff;
    background: var(--cl-contact-teal);
    box-shadow: 0 16px 32px rgba(3, 75, 80, 0.20);
}

/* Tablet and mobile */
@media (max-width: 991.98px) {
    .cl-contact-form-wrap .cl-form-copy {
        margin-top: 10px;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .cl-contact-form-wrap {
        padding: 32px 22px;
        border-radius: 20px;
    }
    .cl-contact-form-wrap .cl-contact-title {
        font-size: 38px;
    }
    .cl-contact-submit {
        width: 100%;
    }
}

.cl-contact-map-shell {
    padding: 14px;
    border: 1px solid var(--cl-contact-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(3, 75, 80, 0.10);
}

.cl-contact-map {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    border-radius: 17px;
}

.cl-contact-closing {
    padding: 86px 0;
    text-align: center;
    background: linear-gradient(135deg, #eaf8f2, #f3fbf7);
}

.cl-contact-closing h2 {
    max-width: 1050px;
    margin: 0 auto 18px;
    color: var(--cl-contact-ink);
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 1.05;
    letter-spacing: -2px;
    white-space: nowrap;
}

.cl-contact-closing h2 span {
    display: inline;
    color: var(--cl-contact-green);
}

.cl-contact-closing p {
    max-width: 730px;
    margin: 0 auto;
    font-size: 17px;
}

.cl-contact-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.cl-contact-footer-links a {
    color: rgba(255, 255, 255, 0.70);
}

.cl-contact-footer-links a:hover {
    color: var(--cl-contact-green);
}

.cl-contact-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

@media (min-width: 1200px) {
    .cl-contact-heading-row .cl-contact-title {
        white-space: nowrap;
    }
    .cl-contact-card h3 {
        white-space: nowrap;
        font-size: 17px;
    }
}

@media (max-width: 1199.98px) {
    .cl-contact-closing h2 {
        white-space: normal;
    }
}

@media (max-width: 991.98px) {
    .cl-contact-section {
        padding: 72px 0;
    }
    .cl-contact-heading-row .cl-contact-lead, .cl-contact-form-wrap .cl-form-copy {
        margin-top: 8px;
        margin-left: 0;
    }
    .cl-contact-card {
        min-height: 230px;
    }
    .cl-contact-map {
        height: 410px;
    }
}

@media (max-width: 575.98px) {
    .cl-contact-page .page-title-section h1 {
        white-space: normal;
    }
    .cl-contact-section {
        padding: 60px 0;
    }
    .cl-contact-title {
        font-size: 38px;
        letter-spacing: -1.4px;
    }
    .cl-contact-lead, .cl-contact-closing p {
        font-size: 16px;
    }
    .cl-contact-card {
        min-height: 0;
        padding: 24px;
    }
    .cl-contact-card h3 {
        min-height: 0;
    }
    .cl-contact-form-wrap {
        padding: 30px 22px;
        border-radius: 20px;
    }
    .cl-contact-map {
        height: 330px;
    }
    .cl-contact-closing {
        padding: 68px 0;
    }
    .cl-contact-closing h2 {
        font-size: 40px;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-contact-card, .cl-contact-submit, .cl-contact-form .form-control {
        transition: none;
    }
}

/* ===================================
   CONTACT FORM FINAL ENHANCEMENTS
====================================== */
/* Reduce unnecessary empty space */
.cl-contact-form-wrap {
    padding: 55px 75px 48px;
}

/* Better separation between heading and form */
.cl-contact-form {
    margin-top: 38px;
    padding-top: 35px;
    border-top: 1px solid rgba(7, 63, 69, 0.10);
}

/* Make input fields clearly visible */
.cl-contact-form .form-control {
    min-height: 62px;
    padding: 16px 20px;
    color: var(--cl-contact-ink);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(8, 123, 128, 0.14);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(3, 75, 80, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.cl-contact-form .form-control::placeholder {
    color: #91a7aa;
}

/* Premium input focus */
.cl-contact-form .form-control:focus {
    transform: translateY(-2px);
    color: var(--cl-contact-ink);
    background: #fff;
    border-color: var(--cl-contact-teal);
    box-shadow: 0 0 0 4px rgba(8, 123, 128, 0.10), 0 14px 35px rgba(3, 75, 80, 0.10);
    outline: none;
}

/* Stronger labels */
.cl-contact-form .form-label {
    margin-bottom: 10px;
    color: var(--cl-contact-ink);
    font-size: 14px;
    font-weight: 800;
}

/* Improve form spacing */
.cl-contact-form .row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 27px;
}

/* Premium submit button */
.cl-contact-submit {
    position: relative;
    min-width: 255px;
    min-height: 60px;
    overflow: hidden;
    border-radius: 12px;
    color: var(--cl-contact-dark);
    background: linear-gradient( 135deg, #63d774 0%, #52cb68 100% );
    box-shadow: 0 14px 30px rgba(91, 207, 108, 0.28);
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.cl-contact-submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.cl-contact-submit:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 18px 38px rgba(8, 123, 128, 0.25);
}

.cl-contact-submit:hover::before {
    left: 140%;
}

/* Arrow movement */
.cl-contact-submit i {
    transition: transform 0.3s ease;
}

.cl-contact-submit:hover i {
    transform: translateX(5px);
}

/* Response and privacy note */
.cl-form-helper {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    color: #607579;
    font-size: 13px;
    font-weight: 600;
}

.cl-form-helper i {
    color: var(--cl-contact-teal);
}

/* Mobile adjustments */
@media (max-width: 991.98px) {
    .cl-contact-form-wrap {
        padding: 45px 35px;
    }
    .cl-contact-form {
        margin-top: 30px;
        padding-top: 30px;
    }
}

@media (max-width: 575.98px) {
    .cl-contact-form-wrap {
        padding: 35px 22px;
    }
    .cl-contact-submit {
        width: 100%;
        min-width: 0;
    }
    .cl-form-helper {
        align-items: flex-start;
        line-height: 1.5;
    }
}

/* CONTACT FORM FIELD FIX */
.cl-contact-form.quform.dark .form-control {
    min-height: 59px;
    padding: 15px 20px;
    color: #073f42 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(7, 63, 66, 0.10) !important;
    border-radius: 6px;
    opacity: 1 !important;
    box-shadow: none !important;
    font-size: 16px;
}

.cl-contact-form.quform.dark .form-control::placeholder {
    color: #9bb0b1 !important;
    opacity: 1;
}

.cl-contact-form.quform.dark .form-control:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(93, 221, 116, 0.40) !important;
}

.cl-contact-form.quform.dark .form-control:focus {
    color: #073f42 !important;
    background: #ffffff !important;
    border-color: #5ddd74 !important;
    box-shadow: 0 0 0 4px rgba(93, 221, 116, 0.11) !important;
    opacity: 1 !important;
    outline: none;
}


/* ==========================================================================
   04. CAREER LINES — JOIN AS CONSULTANT PAGE
   Consultant network page styles only
   ========================================================================== */

:root {
    --clc-teal: #07868a;
    --clc-teal-2: #11a2a0;
    --clc-dark: #034b50;
    --clc-ink: #073f45;
    --clc-green: #5bcf6c;
    --clc-mint: #e9f8f1;
    --clc-sky: #eef9fb;
    --clc-copy: #607579;
    --clc-line: rgba(7, 63, 69, 0.12);
}

.cl-consultant-page {
    color: var(--clc-copy);
}

.cl-consultant-page .page-title-section.secondary-overlay::before {
    background: #006D77;
}

.cl-consultant-page .page-title-section h1 {
    color: #fff !important;
    background: transparent !important;
    text-shadow: 0 5px 25px rgba(0, 35, 39, .30);
}

.cl-consultant-page .page-title-section h1::selection {
    color: #fff;
    background: rgba(91, 207, 108, .45);
}

.cl-consultant-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
}

.cl-consultant-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--clc-teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}

.cl-consultant-kicker::before {
    content: "\2736";
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--clc-green);
    background: #fff;
    box-shadow: 0 9px 25px rgba(3, 75, 80, .08);
}

.cl-kicker-light {
    color: #84df91;
}

.cl-consultant-title {
    margin-bottom: 24px;
    color: var(--clc-ink);
    font-size: clamp(42px, 4.15vw, 64px);
    font-weight: 800;
    line-height: .99;
    letter-spacing: -2.5px;
}

.cl-consultant-title span {
    color: var(--clc-green);
}

.cl-title-light {
    color: #fff;
}

.cl-consultant-lead {
    max-width: 790px;
    font-size: 17px;
    line-height: 1.8;
}

.cl-consultant-btn, .cl-consultant-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 58px;
    padding: 15px 28px;
    border: 0;
    border-radius: 10px;
    color: var(--clc-dark);
    font-weight: 800;
    background: var(--clc-green);
    box-shadow: 0 14px 28px rgba(91, 207, 108, .25);
    transition: transform .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease;
}

.cl-consultant-btn:hover, .cl-consultant-submit:hover {
    transform: translateY(-3px);
    color: #fff;
    background: var(--clc-teal);
    box-shadow: 0 18px 38px rgba(3, 75, 80, .22);
}

.cl-consultant-btn i, .cl-consultant-submit i {
    transition: transform .3s ease;
}

.cl-consultant-btn:hover i, .cl-consultant-submit:hover i {
    transform: translateX(5px);
}

/* Hero */
.cl-consultant-hero {
    background: radial-gradient(circle at 8% 10%, rgba(91, 207, 108, .12), transparent 28%), linear-gradient(135deg, var(--clc-sky), #fff 68%);
}

.cl-consultant-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -300px;
    bottom: -310px;
    border: 90px solid rgba(8, 134, 138, .06);
    border-radius: 50%;
}

.cl-consultant-hero-title {
    max-width: 720px;
    margin-bottom: 28px;
    font-size: clamp(48px, 4.45vw, 68px);
    line-height: .98;
}

.cl-consultant-hero-title .cl-hero-line {
    display: block;
    color: var(--clc-ink);
    white-space: nowrap;
}

.cl-consultant-hero-title .cl-hero-accent {
    color: var(--clc-green);
}

.cl-consultant-hero > .container {
    position: relative;
    z-index: 2;
}

.cl-consultant-hero .cl-consultant-lead {
    max-width: 720px;
    color: #526c70;
}

.cl-consultant-tagline {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 760px;
    margin: 28px 0 32px;
    padding: 18px 20px;
    border-left: 3px solid var(--clc-green);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 12px 35px rgba(3, 75, 80, .07);
}

.cl-consultant-tagline i {
    margin-top: 5px;
    color: var(--clc-teal);
}

.cl-consultant-tagline p {
    margin: 0;
    color: var(--clc-ink);
    font-weight: 600;
    line-height: 1.65;
}

.cl-consultant-visual {
    position: relative;
    max-width: 560px;
    margin: 40px auto;
    padding: 18px;
}

.cl-consultant-visual::before {
    content: "";
    position: absolute;
    inset: -18px 35px 22px -12px;
    border-radius: 48% 15% 38% 20%;
    background: linear-gradient(135deg, rgba(91,207,108,.22), rgba(8,134,138,.08));
    transform: rotate(-3deg);
}

.cl-consultant-image {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 24px 70px 24px 24px;
    background: #dff2ed;
    box-shadow: 0 30px 70px rgba(3, 75, 80, .16);
}

.cl-consultant-image img {
    display: block;
    width: 100%;
    min-height: 525px;
    object-fit: cover;
}

.cl-consultant-float {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 210px;
    padding: 13px 16px;
    border: 1px solid rgba(7,63,69,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 38px rgba(3,75,80,.13);
}

.cl-consultant-float i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--clc-teal), var(--clc-green));
}

.cl-consultant-float span {
    color: var(--clc-ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.cl-consultant-float small {
    display: block;
    margin-bottom: 2px;
    color: var(--clc-copy);
    font-size: 9px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.cl-float-one {
    left: -18px;
    top: 18%;
}

.cl-float-two {
    right: -15px;
    top: 62%;
}

.cl-consultant-visual-badge {
    position: absolute;
    z-index: 3;
    right: 30px;
    bottom: -18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    color: #fff;
    background: var(--clc-dark);
    box-shadow: 0 18px 35px rgba(3,75,80,.24);
}

.cl-consultant-visual-badge strong {
    color: var(--clc-green);
    font-size: 30px;
}

.cl-consultant-visual-badge span {
    max-width: 85px;
    font-size: 11px;
    line-height: 1.3;
}

/* Data and human experience */
.cl-human-section, .cl-success-section {
    color: rgba(255,255,255,.72);
    background: radial-gradient(circle at 90% 10%, rgba(91,207,108,.14), transparent 28%), linear-gradient(120deg, #034b50 0%, #076a6f 55%, #0b8e8d 100%);
}

.cl-light-copy p {
    color: rgba(255,255,255,.75);
    font-size: 16px;
    line-height: 1.85;
    text-align: justify;
}

.cl-light-copy p:last-child {
    margin-bottom: 0;
}

.cl-human-section .cl-consultant-title {
    max-width: 760px;
    font-size: clamp(45px, 4vw, 62px);
}

.cl-data-board {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 28px 60px rgba(0,0,0,.16);
    backdrop-filter: blur(8px);
}

.cl-data-board-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 28px;
}

.cl-data-board-head > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 13px;
    color: var(--clc-dark);
    background: var(--clc-green);
}

.cl-data-board-head small {
    display: block;
    color: rgba(255,255,255,.56);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cl-data-board-head strong {
    color: #fff;
    font-size: 17px;
}

.cl-data-meter {
    display: grid;
    grid-template-columns: 138px 1fr 34px;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #fff;
    font-size: 13px;
}

.cl-data-meter i {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
}

.cl-data-meter i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--meter);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--clc-green), #8be798);
}

.cl-data-meter b {
    color: var(--clc-green);
}

.cl-data-board-note {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    padding: 15px;
    border-radius: 12px;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.06);
    font-size: 12px;
    line-height: 1.5;
}

.cl-data-board-note i {
    color: var(--clc-green);
    margin-top: 3px;
}

/* Experts */
.cl-network-section, .cl-process-section {
    background: radial-gradient(circle at 4% 8%, rgba(91,207,108,.1), transparent 25%), linear-gradient(135deg, #eff9fb, #fff 65%);
}

.cl-expert-card {
    height: 100%;
    min-height: 245px;
    padding: 30px 27px;
    border: 1px solid var(--clc-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(3,75,80,.07);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.cl-expert-card:hover {
    transform: translateY(-7px);
    border-color: rgba(91,207,108,.55);
    box-shadow: 0 25px 58px rgba(3,75,80,.12);
}

.cl-expert-card > span {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--clc-teal), var(--clc-green));
}

.cl-expert-card h3 {
    margin-bottom: 12px;
    color: var(--clc-ink);
    font-size: 20px;
    line-height: 1.35;
}

.cl-expert-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
}

.cl-network-copy {
    max-width: 1120px;
    margin: 0 auto;
    padding: 30px 34px;
    border-left: 4px solid var(--clc-green);
    border-radius: 0 16px 16px 0;
    background: var(--clc-mint);
    box-shadow: 0 14px 35px rgba(3,75,80,.06);
}

.cl-network-copy p {
    font-size: 15px;
    line-height: 1.85;
}

.cl-network-copy p:last-child {
    margin-bottom: 0;
}

/* Success cards */
.cl-success-card {
    position: relative;
    height: 100%;
    min-height: 365px;
    padding: 34px 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 17px;
    background: rgba(255,255,255,.105);
    transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.cl-success-card:hover {
    transform: translateY(-7px);
    border-color: rgba(91,207,108,.5);
    background: rgba(255,255,255,.12);
}

.cl-success-card > b {
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(255,255,255,.12);
    font-size: 40px;
}

.cl-success-card > span {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 50%;
    color: var(--clc-dark);
    background: var(--clc-green);
}

.cl-success-card h3 {
    min-height: 62px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 20px;
    line-height: 1.4;
}

.cl-success-card p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.78;
}

/* Process */
.cl-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cl-process-grid::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(8,134,138,.24), transparent);
}

.cl-process-card {
    position: relative;
    z-index: 1;
    min-height: 325px;
    padding: 34px 30px;
    border: 1px solid var(--clc-line);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 48px rgba(3,75,80,.07);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.cl-process-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91,207,108,.55);
    box-shadow: 0 24px 60px rgba(3,75,80,.12);
}

.cl-process-number {
    display: block;
    margin-bottom: 26px;
    color: rgba(7,63,69,.18);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

.cl-process-card > i {
    position: absolute;
    top: 28px;
    right: 28px;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--clc-teal), var(--clc-green));
}

.cl-process-card h3 {
    margin-bottom: 14px;
    color: var(--clc-ink);
    font-size: 20px;
    line-height: 1.35;
}

.cl-process-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.78;
}

/* Application */
.cl-application-section {
    background: #fff;
}

.cl-application-shell {
    position: relative;
    padding: clamp(40px, 5vw, 72px);
    overflow: hidden;
    border: 1px solid rgba(8,134,138,.15);
    border-radius: 28px;
    background: radial-gradient(circle at 8% 5%, rgba(91,207,108,.16), transparent 28%), radial-gradient(circle at 92% 88%, rgba(8,134,138,.10), transparent 29%), linear-gradient(120deg, #d9f3f3 0%, #eefaf7 50%, #e1f5e7 100%);
    box-shadow: 0 30px 75px rgba(3,75,80,.13);
}

.cl-application-shell::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -130px;
    top: -140px;
    border: 42px solid rgba(8,134,138,.08);
    border-radius: 50%;
}

.cl-application-shell > * {
    position: relative;
    z-index: 1;
}

.cl-consultant-form {
    padding-top: 34px;
    border-top: 1px solid rgba(7,63,69,.1);
}

.cl-application-title {
    max-width: 760px;
    font-size: clamp(43px, 4vw, 60px);
}

.cl-application-shell .cl-consultant-lead {
    max-width: 520px;
    margin-left: auto;
    font-size: 16px;
}

.cl-consultant-form {
    padding-top: 40px;
}

.cl-consultant-form .row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 26px;
}

.cl-consultant-form label {
    display: block;
    margin-bottom: 10px;
    color: var(--clc-ink);
    font-size: 14px;
    font-weight: 800;
}

.cl-consultant-form .form-control {
    min-height: 64px;
    padding: 16px 20px;
    border: 1px solid rgba(7,63,69,.14);
    border-radius: 11px;
    color: var(--clc-ink);
    background-color: rgba(255,255,255,.92);
    box-shadow: 0 10px 28px rgba(3,75,80,.05);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.cl-consultant-form .form-control::placeholder {
    color: #90a5a8;
}

.cl-consultant-form .form-control:focus {
    transform: translateY(-2px);
    border-color: var(--clc-teal);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(8,134,138,.1), 0 14px 32px rgba(3,75,80,.08);
}

.cl-consultant-form .form-select {
    cursor: pointer;
}

.cl-consultant-submit {
    min-width: 315px;
}

.cl-form-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 430px;
    color: var(--clc-copy);
    font-size: 13px;
    line-height: 1.55;
}

.cl-form-note i {
    margin-top: 3px;
    color: var(--clc-teal);
}

.cl-consultant-form .form-control:-webkit-autofill, .cl-consultant-form .form-control:-webkit-autofill:hover, .cl-consultant-form .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--clc-ink);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

@media (min-width: 1400px) {
    .cl-consultant-hero-title {
        font-size: 64px;
    }
}

@media (max-width: 1199.98px) {
    .cl-consultant-section {
        padding: 90px 0;
    }
    .cl-consultant-image img {
        min-height: 500px;
    }
    .cl-float-one {
        left: -10px;
    }
    .cl-float-two {
        right: -5px;
    }
    .cl-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cl-process-grid::before {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .cl-consultant-section {
        padding: 76px 0;
    }
    .cl-consultant-visual {
        margin-top: 45px;
    }
    .cl-consultant-image img {
        min-height: auto;
    }
    .cl-consultant-hero-title .cl-hero-line {
        white-space: normal;
    }
    .cl-success-card h3 {
        min-height: 0;
    }
    .cl-success-card {
        min-height: 330px;
    }
    .cl-application-shell .cl-consultant-lead {
        margin-top: 8px;
    }
}

@media (max-width: 767.98px) {
    .cl-consultant-title {
        font-size: 44px;
        letter-spacing: -1.8px;
    }
    .cl-process-grid {
        grid-template-columns: 1fr;
    }
    .cl-process-card {
        min-height: 0;
    }
    .cl-success-card {
        min-height: 0;
    }
    .cl-data-meter {
        grid-template-columns: 110px 1fr 30px;
    }
    .cl-consultant-submit {
        width: 100%;
        min-width: 0;
    }
    .cl-form-note {
        margin-top: 14px !important;
    }
}

@media (max-width: 575.98px) {
    .cl-consultant-section {
        padding: 62px 0;
    }
    .cl-consultant-title {
        font-size: 38px;
    }
    .cl-consultant-lead {
        font-size: 16px;
    }
    .cl-consultant-tagline {
        padding: 16px;
    }
    .cl-consultant-float {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin: 12px 0 0;
    }
    .cl-consultant-visual-badge {
        right: 18px;
        bottom: -22px;
    }
    .cl-data-board {
        padding: 22px 18px;
    }
    .cl-data-meter {
        grid-template-columns: 1fr 55px;
    }
    .cl-data-meter span {
        grid-column: 1 / -1;
    }
    .cl-network-copy {
        padding: 24px 22px;
    }
    .cl-application-shell {
        padding: 34px 20px;
        border-radius: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .cl-consultant-btn, .cl-consultant-submit, .cl-expert-card, .cl-success-card, .cl-process-card, .cl-consultant-form .form-control {
        transition: none;
    }
}


/* ==========================================================================
   05. CAREER LINES — INSTITUTIONS PAGE
   Institutions and partnerships page styles only
   ========================================================================== */

:root {
    --inst-primary: #61ce70;
    --inst-primary-dark: #2eb77d;
    --inst-teal: #087e83;
    --inst-teal-deep: #00575c;
    --inst-dark: #00464b;
    --inst-ink: #003e43;
    --inst-muted: #657d81;
    --inst-pale: #eaf6f8;
    --inst-white: #ffffff;
    --inst-line: rgba(0, 70, 75, .11);
}

.institutions-page {
    color: var(--inst-muted);
}

.institutions-page .page-title-section {
    align-items: center;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: flex;
    min-height: 365px;
    /* padding: 155px 0 72px !important; */
}

.institutions-page .page-title-section h1 {
    color: #fff;
}

.institutions-page section {
    overflow: hidden;
    position: relative;
}

/* Prevent blank sections when the original WOW initializer is unavailable. */
.institutions-page .wow {
    visibility: visible !important;
}

/* Independent reveal system. Elements remain visible when JavaScript is off. */
.institutions-animations-ready .institution-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .72s ease, transform .72s cubic-bezier(.2, .75, .25, 1);
}

.institutions-animations-ready .institution-reveal.from-left {
    transform: translate3d(-38px, 0, 0);
}

.institutions-animations-ready .institution-reveal.from-right {
    transform: translate3d(38px, 0, 0);
}

.institutions-animations-ready .institution-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.institutions-display {
    color: var(--inst-ink);
    font-size: clamp(3.2rem, 5.1vw, 5.6rem);
    max-width: 760px;
}

.institutions-display span, .institutions-heading h2 span, .institutions-form-copy h2 span {
    color: var(--inst-primary);
}

.institutions-lead {
    font-size: 1.06rem;
    line-height: 1.85;
    margin-bottom: 15px;
    max-width: 680px;
}

.institutions-supporting {
    border-left: 3px solid var(--inst-primary);
    color: var(--inst-ink);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 660px;
    padding: 7px 0 7px 16px;
}

.institutions-kicker {
    align-items: center;
    color: var(--inst-teal);
    display: inline-flex;
    font-size: .73rem;
    font-weight: 800;
    gap: 9px;
    letter-spacing: 1.45px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.institutions-kicker.light {
    color: var(--inst-primary);
}

.institutions-heading {
    margin: 0 auto 55px;
    max-width: 980px;
}

.institutions-heading h2 {
    color: var(--inst-ink);
    margin-bottom: 18px;
}

.institutions-heading p {
    line-height: 1.8;
    margin: 0 auto;
    max-width: 760px;
}

/* Hero */
.institutions-hero {
    padding: 115px 0 125px;
}

.institutions-shape {
    border: 1px solid rgba(8, 126, 131, .09);
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
}

.institutions-shape-one {
    height: 430px;
    left: -240px;
    top: 50px;
    width: 430px;
}

.institutions-shape-two {
    background: rgba(97, 206, 112, .08);
    bottom: -320px;
    height: 600px;
    right: -170px;
    width: 600px;
}

.institutions-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.institutions-outline-btn {
    align-items: center;
    border: 1px solid rgba(0, 70, 75, .2);
    border-radius: 3px;
    color: var(--inst-ink);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    gap: 9px;
    letter-spacing: .5px;
    min-height: 52px;
    padding: 12px 22px;
    text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.institutions-outline-btn:hover {
    background: var(--inst-dark);
    border-color: var(--inst-dark);
    color: #fff;
}

.institutions-audiences {
    border-top: 1px solid var(--inst-line);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 34px;
    max-width: 670px;
    padding-top: 24px;
}

.institutions-audiences span {
    align-items: center;
    color: var(--inst-ink);
    display: flex;
    font-size: .75rem;
    font-weight: 800;
    gap: 8px;
}

.institutions-audiences i {
    color: var(--inst-primary-dark);
}

.institutions-hero-visual {
    margin-left: auto;
    max-width: 580px;
    padding: 25px 26px 38px;
    position: relative;
}

.institutions-hero-visual::before {
    background: linear-gradient(145deg, rgba(8, 126, 131, .13), rgba(97, 206, 112, .28));
    border-radius: 28px 80px 28px 28px;
    content: "";
    inset: 0 0 25px 38px;
    position: absolute;
    transform: rotate(3deg);
}

.institutions-image-frame {
    background: #fff;
    border: 8px solid #fff;
    border-radius: 23px 74px 23px 23px;
    box-shadow: 0 28px 65px rgba(0, 70, 75, .17);
    height: 535px;
    overflow: hidden;
    position: relative;
}

.institutions-image-frame img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.institutions-float-card {
    align-items: center;
    animation: institutionFloat 4.8s ease-in-out infinite;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 13px;
    box-shadow: 0 16px 38px rgba(0, 70, 75, .15);
    display: flex;
    gap: 11px;
    min-width: 205px;
    padding: 13px 15px;
    position: absolute;
    z-index: 2;
}

.institutions-float-card > i {
    align-items: center;
    background: linear-gradient(135deg, var(--inst-teal), var(--inst-primary));
    border-radius: 9px;
    color: #fff;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.institutions-float-card strong, .institutions-float-card span {
    display: block;
}

.institutions-float-card strong {
    color: var(--inst-ink);
    font-size: .81rem;
}

.institutions-float-card span {
    font-size: .65rem;
}

.institutions-float-top {
    right: -10px;
    top: 78px;
}

.institutions-float-bottom {
    animation-delay: -2.2s;
    bottom: 5px;
    left: -8px;
}

.institutions-visual-stat {
    background: var(--inst-dark);
    border-radius: 12px;
    bottom: 9px;
    color: #fff;
    padding: 13px 17px;
    position: absolute;
    right: 7px;
    z-index: 2;
}

.institutions-visual-stat strong, .institutions-visual-stat span {
    display: block;
}

.institutions-visual-stat strong {
    color: var(--inst-primary);
    font-size: 1.22rem;
}

.institutions-visual-stat span {
    font-size: .62rem;
    text-transform: uppercase;
}

@keyframes institutionFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}

/* Sector cards */
.institutions-sectors {
    background: #f9fcfc;
    padding: 120px 0;
}

.institution-sector-card {
    background: #fff;
    border: 1px solid rgba(0, 70, 75, .08);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(0, 70, 75, .07);
    height: 100%;
    min-height: 430px;
    overflow: hidden;
    padding: 32px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.institution-sector-card::after {
    background: linear-gradient(90deg, var(--inst-teal), var(--inst-primary));
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    width: 100%;
}

.institution-sector-card:hover {
    border-color: rgba(97, 206, 112, .45);
    box-shadow: 0 26px 54px rgba(0, 70, 75, .12);
    transform: translateY(-7px);
}

.institution-sector-card:hover::after {
    transform: scaleX(1);
}

.institution-sector-top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
}

.institution-sector-icon {
    align-items: center;
    background: linear-gradient(135deg, var(--inst-teal), var(--inst-primary));
    border-radius: 12px;
    box-shadow: 0 11px 22px rgba(46, 183, 125, .18);
    color: #fff;
    display: flex;
    font-size: 1.08rem;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.institution-sector-number {
    color: rgba(0, 70, 75, .09);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}

.institution-sector-card h3 {
    color: var(--inst-ink);
    font-size: 1.35rem;
    margin-bottom: 24px;
}

.institution-sector-detail {
    border-top: 1px solid var(--inst-line);
    margin-top: 17px;
    padding-top: 17px;
}

.institution-sector-detail strong {
    color: var(--inst-teal);
    display: block;
    font-size: .73rem;
    letter-spacing: .6px;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.institution-sector-detail p {
    font-size: .84rem;
    line-height: 1.72;
    margin: 0;
    text-align: justify;
}

/* Value and dashboard */
.institutions-value {
    padding: 120px 0;
}

.institutions-dashboard {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    box-shadow: 0 24px 58px rgba(0, 30, 34, .22);
    margin-right: 35px;
    padding: 24px;
}

.institutions-dashboard-head {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 29px;
    padding-bottom: 18px;
}

.institutions-dashboard-head > div {
    display: flex;
    gap: 5px;
}

.institutions-dashboard-head > div span {
    background: rgba(255, 255, 255, .3);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.institutions-dashboard-head strong {
    font-size: .7rem;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.institutions-dashboard-head small {
    align-items: center;
    display: flex;
    gap: 6px;
}

.institutions-dashboard-head small i {
    background: var(--inst-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(97, 206, 112, .14);
    height: 7px;
    width: 7px;
}

.institutions-dashboard-metric {
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 16px;
}

.institutions-dashboard-metric > div:first-child {
    color: rgba(255, 255, 255, .78);
    display: flex;
    font-size: .76rem;
    justify-content: space-between;
    margin-bottom: 10px;
}

.institutions-dashboard-metric strong {
    color: var(--inst-primary);
}

.institutions-progress {
    background: rgba(255, 255, 255, .11);
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
}

.institutions-progress i {
    animation: institutionProgress 1.2s ease both;
    background: linear-gradient(90deg, var(--inst-primary), #adf2a5);
    border-radius: inherit;
    display: block;
    height: 100%;
    width: var(--progress);
}

@keyframes institutionProgress {
    from {
        width: 0;
    }
}

.institutions-dashboard-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
}

.institutions-dashboard-summary > div {
    align-items: center;
    background: #fff;
    border-radius: 11px;
    display: flex;
    gap: 10px;
    padding: 14px;
}

.institutions-dashboard-summary i {
    color: var(--inst-primary-dark);
}

.institutions-dashboard-summary strong, .institutions-dashboard-summary span {
    display: block;
}

.institutions-dashboard-summary strong {
    color: var(--inst-ink);
    font-size: .75rem;
}

.institutions-dashboard-summary span {
    font-size: .62rem;
}

.institutions-value-list {
    display: grid;
    gap: 12px;
}

.institutions-value-list article {
    align-items: flex-start;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    display: flex;
    gap: 15px;
    padding: 17px;
    transition: background-color .25s ease, transform .25s ease;
}

.institutions-value-list article:hover {
    background: rgba(255, 255, 255, .1);
    transform: translateX(5px);
}

.institutions-value-list article > span {
    align-items: center;
    background: var(--inst-primary);
    border-radius: 50%;
    color: var(--inst-dark);
    display: flex;
    flex: 0 0 38px;
    font-size: .67rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
}

.institutions-value-list h3 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 6px;
}

.institutions-value-list p {
    color: rgba(255, 255, 255, .68);
    font-size: .78rem;
    line-height: 1.65;
    margin: 0;
}

/* Process */
.institutions-process {
    padding: 120px 0;
}

.institutions-process-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
}

.institutions-process-card {
    background: #fff;
    border: 1px solid rgba(0, 70, 75, .08);
    border-radius: 15px;
    box-shadow: 0 13px 34px rgba(0, 70, 75, .07);
    min-height: 285px;
    padding: 27px 23px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}

.institutions-process-card:hover {
    box-shadow: 0 22px 46px rgba(0, 70, 75, .12);
    transform: translateY(-7px);
}

.institutions-process-card > span {
    color: rgba(0, 70, 75, .09);
    font-size: 2.8rem;
    font-weight: 900;
    position: absolute;
    right: 17px;
    top: 12px;
}

.institutions-process-card > i {
    align-items: center;
    background: linear-gradient(135deg, var(--inst-teal), var(--inst-primary));
    border-radius: 10px;
    color: #fff;
    display: flex;
    height: 44px;
    justify-content: center;
    margin-bottom: 38px;
    width: 44px;
}

.institutions-process-card h3 {
    color: var(--inst-ink);
    font-size: 1rem;
    margin-bottom: 11px;
}

.institutions-process-card p {
    font-size: .75rem;
    line-height: 1.7;
    margin: 0;
}

/* Form */
.institutions-form-section {
    background: #f7fbfb;
    padding: 115px 0;
}

.institutions-form-shell {
    background: radial-gradient(circle at 2% 4%, rgba(97, 206, 112, .17), transparent 27%), linear-gradient(135deg, var(--inst-dark), var(--inst-teal));
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 70, 75, .18);
    display: grid;
    gap: 55px;
    grid-template-columns: .82fr 1.18fr;
    overflow: hidden;
    padding: 62px;
    position: relative;
}

.institutions-form-copy {
    align-self: center;
}

.institutions-form-copy h2 {
    margin-bottom: 22px;
}

.institutions-form-copy > p {
    color: rgba(255, 255, 255, .7);
    line-height: 1.8;
}

.institutions-form-trust {
    border-top: 1px solid rgba(255, 255, 255, .13);
    display: grid;
    gap: 12px;
    margin-top: 29px;
    padding-top: 22px;
}

.institutions-form-trust span {
    color: rgba(255, 255, 255, .8);
    font-size: .76rem;
}

.institutions-form-trust i {
    color: var(--inst-primary);
    margin-right: 8px;
}

.institutions-form {
    background: rgba(255, 255, 255, .96);
    border-radius: 17px;
    padding: 31px;
}

.institutions-form label {
    color: var(--inst-ink);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .35px;
    margin-bottom: 8px;
}

.institutions-form input, .institutions-form select {
    background: #f5f9f9;
    border: 1px solid rgba(0, 70, 75, .11);
    border-radius: 6px;
    color: var(--inst-ink);
    font-size: .8rem;
    height: 52px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    width: 100%;
}

.institutions-form input:focus, .institutions-form select:focus {
    background: #fff;
    border-color: var(--inst-primary-dark);
    box-shadow: 0 0 0 4px rgba(97, 206, 112, .12);
}

.institutions-form button {
    cursor: pointer;
    width: 100%;
}

/* Responsive */
@media screen and (max-width: 1199px) {
    .institutions-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .institutions-form-shell {
        padding: 50px 42px;
    }
    .institutions-display {
        font-size: clamp(3rem, 4.8vw, 4.6rem);
    }
}

@media screen and (max-width: 991px) {
    .institutions-page .page-title-section {
        min-height: 330px;
        padding: 135px 0 60px !important;
    }
    .institutions-hero, .institutions-sectors, .institutions-value, .institutions-process, .institutions-form-section {
        padding: 90px 0;
    }
    .institutions-hero-visual {
        margin: 25px auto 0;
    }
    .institutions-dashboard {
        margin: 0 0 35px;
    }
    .institutions-form-shell {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 767px) {
    .institutions-page .page-title-section {
        min-height: 270px;
    }
    .institutions-display {
        font-size: 3rem;
    }
    .institutions-audiences {
        grid-template-columns: repeat(2, 1fr);
    }
    .institutions-image-frame {
        height: 470px;
    }
    .institutions-process-grid {
        grid-template-columns: 1fr;
    }
    .institutions-process-card {
        min-height: 0;
    }
    .institutions-form-shell {
        gap: 35px;
        padding: 38px 25px;
    }
}

@media screen and (max-width: 575px) {
    .institutions-page .page-title-section {
        min-height: 285px;
        padding: 115px 0 48px !important;
    }
    .institutions-hero, .institutions-sectors, .institutions-value, .institutions-process, .institutions-form-section {
        padding: 70px 0;
    }
    .institutions-display {
        font-size: 2.5rem;
    }
    .institutions-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .institutions-outline-btn {
        justify-content: center;
    }
    .institutions-hero-visual {
        padding-left: 0;
        padding-right: 0;
    }
    .institutions-image-frame {
        height: 420px;
    }
    .institutions-float-card {
        min-width: 180px;
        padding: 10px 12px;
    }
    .institutions-float-top {
        right: 5px;
    }
    .institutions-float-bottom {
        left: 5px;
    }
    .institutions-visual-stat {
        display: none;
    }
    .institution-sector-card {
        min-height: 0;
        padding: 27px 22px;
    }
    .institutions-dashboard {
        padding: 18px;
    }
    .institutions-dashboard-head strong {
        display: none;
    }
    .institutions-dashboard-summary {
        grid-template-columns: 1fr;
    }
    .institutions-form {
        padding: 24px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .institutions-float-card, .institutions-progress i {
        animation: none;
    }
    .institution-sector-card, .institutions-value-list article, .institutions-process-card {
        transition: none;
    }
}


/* ==========================================================================
   CAREER LINES — VOCATIONAL INTERESTS PRO REDESIGN
   Load AFTER vocational-interests.css
   ========================================================================== */

.vipro-page{
    --vp-deep:#003f42;
    --vp-dark:#034f52;
    --vp-teal:#087b80;
    --vp-green:#5ddd74;
    --vp-green2:#35b85a;
    --vp-ink:#073f42;
    --vp-copy:#607779;
    --vp-line:rgba(7,63,66,.11);
    --vp-mint:#eaf8f1;
    --vp-ice:#edf7f8;
    overflow:hidden;
    color:var(--vp-copy);
    background:#fff;
}
.vipro-page *{box-sizing:border-box}
.vipro-page h2,.vipro-page h3,.vipro-page p{margin-top:0}
.vipro-kicker{
    display:inline-flex;align-items:center;gap:10px;margin-bottom:17px;
    color:var(--vp-teal);font-size:10px;font-weight:900;letter-spacing:1.55px;text-transform:uppercase
}
.vipro-kicker:before{content:"";width:24px;height:2px;border-radius:5px;background:var(--vp-green)}
.vipro-kicker--light{color:#b3efbd}
.vipro-pill{
    display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding:10px 15px;
    border:1px solid rgba(8,123,128,.14);border-radius:999px;background:rgba(255,255,255,.88);
    color:var(--vp-teal);box-shadow:0 12px 34px rgba(7,63,66,.07);
    font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase
}
.vipro-btn{
    display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:12px;padding:14px 23px;
    border:1px solid var(--vp-green);border-radius:5px;background:var(--vp-green);color:var(--vp-deep)!important;
    box-shadow:0 14px 34px rgba(53,184,90,.2);font-size:10px;font-weight:900;letter-spacing:.45px;text-transform:uppercase;
    transition:.3s ease
}
.vipro-btn:hover{transform:translateY(-3px);background:var(--vp-teal);border-color:var(--vp-teal);color:#fff!important}
.vipro-btn i{transition:transform .3s ease}.vipro-btn:hover i{transform:translateX(4px)}
.vipro-btn--light{background:#fff;border-color:#fff}

/* HERO */
.vipro-hero{
    position:relative;isolation:isolate;padding:100px 0 65px;
    background:
      radial-gradient(circle at 91% 6%,rgba(93,221,116,.20),transparent 25%),
      radial-gradient(circle at 4% 92%,rgba(8,123,128,.08),transparent 26%),
      linear-gradient(135deg,#fff 0%,#f8fdfb 55%,#eaf8ef 100%)
}
.vipro-hero-orb{position:absolute;border:1px solid rgba(8,123,128,.08);border-radius:50%;z-index:-1}
.vipro-hero-orb--one{width:470px;height:470px;right:-180px;top:-180px;box-shadow:0 0 0 55px rgba(93,221,116,.035)}
.vipro-hero-orb--two{width:330px;height:330px;left:-190px;bottom:-170px}
.vipro-hero h2{
    max-width:720px;margin-bottom:22px;color:var(--vp-ink);
    font-size:clamp(48px,5.1vw,74px);line-height:.96;letter-spacing:-3px;font-weight:700
}
.vipro-hero h2::first-line{color:var(--vp-ink)}
.vipro-hero-lead{max-width:650px;margin-bottom:30px;color:var(--vp-green2);font-size:21px!important;line-height:1.45!important;font-weight:700}

/* RIASEC VISUAL */
.vipro-riasec-map{
    position:relative;width:min(100%,540px);aspect-ratio:1;margin-left:auto;border:1px solid var(--vp-line);border-radius:31px;
    background:radial-gradient(circle at 50% 50%,rgba(93,221,116,.16),transparent 38%),rgba(255,255,255,.82);
    box-shadow:0 28px 75px rgba(2,79,81,.13);backdrop-filter:blur(14px)
}
.vipro-map-caption{
    position:absolute;left:26px;top:22px;color:#7e9395;font-size:8px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase
}
.vipro-map-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.vipro-map-ring--1{width:70%;height:70%;border:1px dashed rgba(8,123,128,.22);animation:viproSpin 30s linear infinite}
.vipro-map-ring--2{width:47%;height:47%;border:1px solid rgba(93,221,116,.27)}
.vipro-map-core{
    position:absolute;z-index:3;left:50%;top:50%;width:172px;height:172px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    transform:translate(-50%,-50%);border:9px solid rgba(255,255,255,.94);border-radius:50%;
    color:#fff;background:linear-gradient(145deg,var(--vp-dark),var(--vp-teal));box-shadow:0 22px 52px rgba(2,79,81,.23)
}
.vipro-map-core i{margin-bottom:8px;color:var(--vp-green);font-size:23px}
.vipro-map-core strong{font-size:24px;letter-spacing:2px}.vipro-map-core small{opacity:.66;font-size:8px;text-transform:uppercase;letter-spacing:1px}
.vipro-map-node{
    position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 13px 9px 9px;
    border:1px solid rgba(8,123,128,.09);border-radius:999px;background:rgba(255,255,255,.95);
    color:var(--vp-ink);box-shadow:0 13px 32px rgba(2,79,81,.11);font-size:11px;font-weight:800;animation:viproFloat 5s ease-in-out infinite
}
.vipro-map-node b{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--vp-green);color:var(--vp-deep)}
.vipro-map-node.n1{left:5%;top:18%}.vipro-map-node.n2{right:4%;top:17%;animation-delay:-.8s}.vipro-map-node.n3{right:-2%;top:47%;animation-delay:-1.6s}
.vipro-map-node.n4{right:8%;bottom:13%;animation-delay:-2.4s}.vipro-map-node.n5{left:8%;bottom:12%;animation-delay:-3.2s}.vipro-map-node.n6{left:-2%;top:49%;animation-delay:-4s}
.vipro-proof{
    display:grid;grid-template-columns:repeat(3,1fr);margin-top:58px;overflow:hidden;border:1px solid var(--vp-line);border-radius:16px;
    background:rgba(255,255,255,.91);box-shadow:0 18px 48px rgba(2,79,81,.08)
}
.vipro-proof>div{display:flex;min-height:92px;align-items:center;justify-content:center;gap:14px;padding:20px 25px}
.vipro-proof>div+div{border-left:1px solid var(--vp-line)}
.vipro-proof strong{color:var(--vp-teal);font-size:30px}.vipro-proof span{color:var(--vp-copy);font-size:10px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}

/* CORE */
.vipro-core{padding:105px 0;background:linear-gradient(135deg,#f8fbfb,var(--vp-ice))}
.vipro-section-head{max-width:900px;margin:0 auto 52px}
.vipro-section-head h2{margin:0;color:var(--vp-ink);font-size:clamp(42px,4.5vw,62px);line-height:1;letter-spacing:-2.5px}
.vipro-section-head h2 span{color:var(--vp-green2)}
.vipro-core-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vipro-core-card{
    position:relative;min-height:520px;padding:46px;overflow:hidden;border:1px solid var(--vp-line);border-radius:25px;background:#fff;
    box-shadow:0 20px 55px rgba(2,79,81,.08);transition:.35s ease
}
.vipro-core-card:hover{transform:translateY(-7px);box-shadow:0 30px 75px rgba(2,79,81,.12)}
.vipro-card-no{position:absolute;right:30px;top:20px;color:rgba(8,123,128,.08);font-size:82px;font-weight:900;line-height:1}
.vipro-card-icon{display:grid;width:55px;height:55px;place-items:center;margin-bottom:28px;border-radius:15px;background:var(--vp-green);color:var(--vp-deep);font-size:20px}
.vipro-core-card small{display:block;margin-bottom:12px;color:var(--vp-teal);font-size:9px;font-weight:900;letter-spacing:1.25px;text-transform:uppercase}
.vipro-core-card h3{max-width:570px;margin-bottom:20px;color:var(--vp-ink);font-size:31px;line-height:1.1}
.vipro-core-card p{font-size:14px;line-height:1.8}
.vipro-core-card--dark{
    color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.08);
    background:radial-gradient(circle at 100% 0,rgba(93,221,116,.16),transparent 35%),var(--vp-deep)
}
.vipro-core-card--dark h3{color:#fff}.vipro-core-card--dark small{color:#a9efb5}.vipro-core-card--dark .vipro-card-no{color:rgba(255,255,255,.06)}

/* DOMAINS */
.vipro-domains{
    position:relative;padding:105px 0 120px;overflow:hidden;color:rgba(255,255,255,.72);
    background:
      radial-gradient(circle at 95% 0,rgba(93,221,116,.16),transparent 28%),
      linear-gradient(120deg,#003f42,#075d5d 58%,#0c7d68)
}
.vipro-domain-grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:70px 70px}
.vipro-dark-head h2{margin:0;color:#fff;font-size:clamp(43px,4.6vw,64px);line-height:1;letter-spacing:-2.6px}.vipro-dark-head h2 span{color:var(--vp-green)}
.vipro-dark-intro{margin:0;color:rgba(255,255,255,.67);font-size:14px;line-height:1.8}
.vipro-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:24px}
.vipro-tab{
    display:flex;min-height:72px;align-items:center;gap:10px;padding:12px 13px;border:1px solid rgba(255,255,255,.13);border-radius:13px;
    background:rgba(255,255,255,.055);color:rgba(255,255,255,.72);font-size:10px;font-weight:800;cursor:pointer;transition:.25s ease
}
.vipro-tab span{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:50%;background:rgba(255,255,255,.86);color:var(--vp-deep);font-weight:900}
.vipro-tab:hover{transform:translateY(-3px);border-color:rgba(93,221,116,.45)}
.vipro-tab.is-active{color:var(--vp-deep);border-color:var(--vp-green);background:var(--vp-green);box-shadow:0 13px 30px rgba(93,221,116,.18)}
.vipro-domain-panel{
    display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center;min-height:520px;padding:54px;
    border:1px solid rgba(255,255,255,.13);border-radius:25px;background:rgba(255,255,255,.06);
    box-shadow:0 26px 70px rgba(0,0,0,.14);backdrop-filter:blur(12px)
}
.vipro-domain-panel[hidden]{display:none!important}.vipro-domain-panel.is-active{animation:viproPanel .45s ease both}
.vipro-domain-mark{
    position:relative;display:flex;width:230px;height:230px;align-items:center;justify-content:center;flex-direction:column;
    border:1px dashed rgba(93,221,116,.36);border-radius:50%;background:radial-gradient(circle,rgba(93,221,116,.12),transparent 65%)
}
.vipro-domain-letter{position:absolute;right:7px;top:8px;display:grid;width:54px;height:54px;place-items:center;border-radius:50%;background:var(--vp-green);color:var(--vp-deep);font-size:20px;font-weight:900}
.vipro-domain-mark i{color:var(--vp-green);font-size:46px}.vipro-domain-mark small{margin-top:15px;color:#fff;font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.vipro-domain-copy h3{margin-bottom:19px;color:#fff;font-size:clamp(31px,3.2vw,47px);line-height:1.05}
.vipro-domain-copy>p{color:rgba(255,255,255,.72);font-size:14px;line-height:1.78}
.vipro-domain-outcome{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:17px 19px;border:1px solid rgba(93,221,116,.22);border-left:4px solid var(--vp-green);border-radius:11px;background:rgba(93,221,116,.07)}
.vipro-domain-outcome i{margin-top:5px;color:var(--vp-green)}.vipro-domain-outcome p{margin:0;color:rgba(255,255,255,.91);font-size:13px;line-height:1.7;font-weight:600}

/* STAGES */
.vipro-stages{padding:105px 0;background:radial-gradient(circle at 8% 8%,rgba(93,221,116,.08),transparent 23%),linear-gradient(135deg,#f8fbfb,var(--vp-ice))}
.vipro-stage-list{display:grid;gap:16px;max-width:1120px;margin:0 auto}
.vipro-stage{overflow:hidden;border:1px solid var(--vp-line);border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 16px 42px rgba(2,79,81,.07);transition:.3s ease}
.vipro-stage.is-open{border-color:rgba(53,184,90,.3);box-shadow:0 24px 60px rgba(2,79,81,.1)}
.vipro-stage-head{
    display:grid;width:100%;grid-template-columns:62px 54px 1fr 42px;gap:20px;align-items:center;padding:25px 30px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer
}
.vipro-stage-no{color:rgba(8,123,128,.18);font-size:38px;font-weight:900}.vipro-stage-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:var(--vp-mint);color:var(--vp-teal)}
.vipro-stage-heading small{display:block;margin-bottom:5px;color:var(--vp-green2);font-size:8px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}.vipro-stage-heading strong{color:var(--vp-ink);font-size:18px}
.vipro-stage-plus{color:var(--vp-teal);transition:transform .3s ease}.vipro-stage.is-open .vipro-stage-plus{transform:rotate(45deg)}
.vipro-stage-body{display:none;padding:0 30px 30px 186px}.vipro-stage.is-open .vipro-stage-body{display:block;animation:viproPanel .35s ease both}.vipro-stage-body p{font-size:14px;line-height:1.8}

/* CTA */
.vipro-cta{padding:78px 0 95px;background:#fff}
.vipro-cta-card{
    position:relative;display:flex;align-items:center;justify-content:space-between;gap:35px;padding:48px 52px;overflow:hidden;border-radius:26px;
    background:radial-gradient(circle at 96% 0,rgba(93,221,116,.25),transparent 30%),linear-gradient(110deg,#034f52,#087b80 55%,#18a567);
    box-shadow:0 26px 68px rgba(7,63,66,.16)
}
.vipro-cta-card h2{max-width:790px;margin:0;color:#fff;font-size:clamp(39px,4.2vw,58px);line-height:1.01;letter-spacing:-2.4px}.vipro-cta-card h2 span{color:var(--vp-green)}

/* REVEAL */
.vipro-motion-ready .vipro-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease var(--vipro-delay,0ms),transform .7s cubic-bezier(.2,.75,.25,1) var(--vipro-delay,0ms)}
.vipro-motion-ready .vipro-reveal.is-visible{opacity:1;transform:none}

@keyframes viproSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes viproFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes viproPanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:1199.98px){
    .vipro-tabs{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:991.98px){
    .vipro-hero{padding:80px 0 60px}.vipro-riasec-map{margin:25px auto 0}
    .vipro-core-grid{grid-template-columns:1fr}.vipro-core-card{min-height:auto}
    .vipro-domain-panel{grid-template-columns:1fr}.vipro-domain-mark{margin:0 auto}
    .vipro-cta-card{align-items:flex-start;flex-direction:column}
}
@media(max-width:767.98px){
    .vipro-proof{grid-template-columns:1fr}.vipro-proof>div+div{border-left:0;border-top:1px solid var(--vp-line)}
    .vipro-tabs{grid-template-columns:1fr 1fr}
    .vipro-stage-head{grid-template-columns:50px 48px 1fr 28px;gap:12px;padding:21px 18px}.vipro-stage-body{padding:0 20px 24px 20px}
}
@media(max-width:575.98px){
    .vipro-hero h2{font-size:41px;letter-spacing:-1.7px}
    .vipro-riasec-map{min-height:430px;aspect-ratio:auto}
    .vipro-map-core{width:145px;height:145px}.vipro-map-node{font-size:9px;padding-right:9px}.vipro-map-node b{width:27px;height:27px}
    .vipro-core,.vipro-domains,.vipro-stages{padding:75px 0}
    .vipro-core-card,.vipro-domain-panel{padding:27px 22px}
    .vipro-tabs{grid-template-columns:1fr}
    .vipro-domain-mark{width:190px;height:190px}
    .vipro-cta{padding:60px 0 75px}.vipro-cta-card{padding:34px 24px}
}
@media(prefers-reduced-motion:reduce){
    .vipro-map-ring,.vipro-map-node{animation:none!important}
    .vipro-motion-ready .vipro-reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* ==========================================================
   VOCATIONAL INTERESTS — FINAL POLISH / OVERRIDE
   Paste at the VERY END of vocational-interests-pro.css
========================================================== */


/* ==========================================
   HERO — BETTER PROPORTIONS
========================================== */

.vipro-hero {
    padding: 115px 0 78px;
}

.vipro-hero .row {
    min-height: 500px;
}

.vipro-hero h2 {
    max-width: 640px;
    margin-bottom: 24px;

    color: #073f42 !important;

    font-size: clamp(48px, 4.8vw, 68px);
    line-height: .98;
    letter-spacing: -2.6px;
}

.vipro-hero-lead {
    max-width: 590px;

    color: #35b85a !important;

    font-size: 18px !important;
    line-height: 1.55 !important;
}


/* Make RIASEC visual more premium */

.vipro-riasec-map {
    width: min(100%, 520px);

    border: 1px solid rgba(7, 63, 66, .10);

    background:
        radial-gradient(
            circle at center,
            rgba(93, 221, 116, .16),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(245,252,248,.94)
        );

    box-shadow:
        0 32px 80px rgba(2,79,81,.13);
}


/* ==========================================
   PROOF BAR
========================================== */

.vipro-proof {
    margin-top: 65px;
}

.vipro-proof > div {
    min-height: 100px;
}

.vipro-proof strong {
    font-size: 30px;
    font-weight: 800;
}

.vipro-proof span {
    font-size: 10px;
    font-weight: 800;
}


/* ==========================================
   CORE SECTION
========================================== */

.vipro-core {
    padding: 115px 0 125px;
}

.vipro-section-head {
    margin-bottom: 60px;
}

.vipro-section-head h2 {
    color: #073f42 !important;

    font-size: clamp(43px, 4.4vw, 61px);
    line-height: 1.02;
}

.vipro-section-head h2 span {
    color: #35b85a !important;
}


/* Cards slightly more balanced */

.vipro-core-card {
    min-height: 550px;
    padding: 48px;
}

.vipro-core-card h3 {
    color: #073f42 !important;

    font-size: 29px;
    line-height: 1.12;
}

.vipro-core-card p {
    color: #607779 !important;

    font-size: 14px;
    line-height: 1.8;
}


/* Dark card */

.vipro-core-card--dark {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(93,221,116,.16),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #003f42,
            #04585a
        ) !important;
}

.vipro-core-card--dark h3 {
    color: #ffffff !important;
}

.vipro-core-card--dark p {
    color: rgba(255,255,255,.74) !important;
}

.vipro-core-card--dark small {
    color: #9befaa !important;
}


/* ==========================================
   RIASEC DARK SECTION
========================================== */

.vipro-domains {
    padding: 120px 0 130px;

    background:
        radial-gradient(
            circle at 95% 0,
            rgba(93,221,116,.20),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #003f42 0%,
            #07595b 52%,
            #0a826d 100%
        ) !important;
}


/* THIS fixes your screenshot heading problem */

.vipro-domains .vipro-dark-head h2 {
    color: #ffffff !important;

    font-size: clamp(44px, 4.5vw, 63px);
    line-height: 1;
    letter-spacing: -2.5px;
}

.vipro-domains .vipro-dark-head h2 span {
    color: #5ddd74 !important;
}

.vipro-dark-intro {
    color: rgba(255,255,255,.72) !important;

    font-size: 14px;
    line-height: 1.75;
}


/* Tabs */

.vipro-tab {
    min-height: 76px;

    border-color: rgba(255,255,255,.14);

    color: rgba(255,255,255,.82) !important;

    background: rgba(255,255,255,.055);
}

.vipro-tab b {
    color: inherit !important;
}

.vipro-tab.is-active,
.vipro-tab.is-active b {
    color: #003f42 !important;
}


/* ==========================================
   DOMAIN CONTENT BOX
========================================== */

.vipro-domain-panel {
    min-height: 540px;

    padding: 58px;

    border: 1px solid rgba(255,255,255,.13);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.04)
        ) !important;

    box-shadow:
        0 28px 75px rgba(0,30,32,.18);
}


/* Important: title should NOT be dark */

.vipro-domain-copy h3 {
    color: #ffffff !important;

    font-size: clamp(32px, 3.1vw, 46px);
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.vipro-domain-copy > p {
    color: rgba(255,255,255,.75) !important;

    font-size: 14px;
    line-height: 1.82;
}

.vipro-domain-copy .vipro-kicker {
    color: #84ec95 !important;
}


/* Highlight final result paragraph */

.vipro-domain-outcome {
    margin-top: 28px;

    padding: 19px 21px;

    border-color: rgba(93,221,116,.30);
    border-left: 4px solid #5ddd74;

    background: rgba(93,221,116,.09);
}

.vipro-domain-outcome p {
    color: rgba(255,255,255,.94) !important;
}


/* ==========================================
   RIASEC LEFT CIRCLE
========================================== */

.vipro-domain-mark {
    width: 235px;
    height: 235px;

    border-color: rgba(93,221,116,.37);

    background:
        radial-gradient(
            circle,
            rgba(93,221,116,.13),
            rgba(255,255,255,.015) 65%
        );
}

.vipro-domain-mark i {
    color: #5ddd74 !important;
}

.vipro-domain-mark small {
    color: rgba(255,255,255,.88) !important;
}


/* ==========================================
   CAREER STAGES
========================================== */

.vipro-stages {
    padding: 115px 0 125px;
}

.vipro-stage-list {
    gap: 14px;
}

.vipro-stage {
    border-radius: 18px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.vipro-stage:hover {
    transform: translateX(5px);

    border-color: rgba(53,184,90,.30);

    box-shadow:
        0 24px 58px rgba(2,79,81,.11);
}

.vipro-stage-heading strong {
    color: #073f42 !important;

    font-size: 18px;
    font-weight: 700;
}

.vipro-stage-body p {
    color: #607779 !important;

    font-size: 14px;
    line-height: 1.82;
}


/* ==========================================
   FINAL CTA
========================================== */

.vipro-cta {
    padding: 85px 0 105px;
}

.vipro-cta-card {
    min-height: 210px;

    padding: 52px 58px;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 96% 0,
            rgba(93,221,116,.27),
            transparent 31%
        ),
        linear-gradient(
            110deg,
            #034f52 0%,
            #087b80 53%,
            #19a768 100%
        ) !important;

    box-shadow:
        0 30px 78px rgba(7,63,66,.17);
}


/* Fix CTA text */

.vipro-cta-card h2 {
    color: #ffffff !important;

    font-size: clamp(40px, 4vw, 57px);
    line-height: 1;
}

.vipro-cta-card h2 span {
    color: #73e987 !important;
}


/* ==========================================
   EXTRA PREMIUM MICRO INTERACTION
========================================== */

.vipro-core-card::after,
.vipro-domain-panel::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -75px;
    bottom: -75px;

    border: 1px solid rgba(93,221,116,.09);
    border-radius: 50%;

    pointer-events: none;

    transition:
        transform .6s ease,
        opacity .6s ease;
}

.vipro-core-card:hover::after {
    transform: scale(1.35);
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991.98px) {

    .vipro-hero .row {
        min-height: auto;
    }

    .vipro-core-card {
        min-height: auto;
    }

    .vipro-domain-panel {
        padding: 42px;
    }

}


@media (max-width: 575.98px) {

    .vipro-hero {
        padding: 75px 0 55px;
    }

    .vipro-hero h2 {
        font-size: 41px;
    }

    .vipro-core,
    .vipro-domains,
    .vipro-stages {
        padding: 75px 0;
    }

    .vipro-core-card {
        padding: 28px 23px;
    }

    .vipro-domain-panel {
        padding: 28px 22px;
    }

    .vipro-cta-card {
        min-height: auto;

        padding: 35px 24px;
    }

}

/* =====================================================
   BEHAVIOUR PAGE — PROFESSIONAL PHOTO BANNER
===================================================== */
.bwa-photo-banner {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    min-height: 500px;
    padding: 0px 0 0px;

    overflow: hidden;
    isolation: isolate;

    background: #034f52;
}

/* Remove old banner pseudo elements */
.bwa-page .bwa-photo-banner::before, .bwa-page .bwa-photo-banner::after {
    display: none !important;
}

/* Background image */
.bwa-photo-banner__bg {
    position: absolute;
    z-index: -3;
    inset: -35px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.08);
    transition: transform 1.8s cubic-bezier(.2, .75, .25, 1);
    will-change: transform;
}

/* Animated background state */
.bwa-photo-banner.is-banner-visible .bwa-photo-banner__bg {
    transform: scale(1);
}

/* Premium dark teal overlay */
.bwa-photo-banner__overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: linear-gradient( 90deg, rgba(0, 54, 57, .88) 0%, rgba(1, 79, 80, .76) 45%, rgba(3, 93, 88, .68) 100% ), linear-gradient( 180deg, rgba(0, 44, 47, .12), rgba(0, 44, 47, .42) );
}

/* Soft professional lighting */
.bwa-photo-banner__overlay::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -130px;
    top: -230px;
    border-radius: 50%;
    background: rgba(93, 221, 116, .14);
    filter: blur(4px);
}

.bwa-photo-banner__overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient( rgba(255, 255, 255, .15) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, .15) 1px, transparent 1px );
    background-size: 70px 70px;
}

/* Small category label */
.bwa-photo-banner__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .83);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .7s ease .15s, transform .7s ease .15s;
}

.bwa-photo-banner__label::before, .bwa-photo-banner__label::after {
    content: "";
    width: 24px;
    height: 1px;
    background: #6ee27f;
}

/* Main banner title */
/* Main banner title */
.bwa-page .bwa-photo-banner__title {
    display: inline-block;

    width: max-content;
    max-width: 100%;

    margin: 0 auto;
    padding: 0 12px 12px;

    overflow: visible;

    color: #ffffff !important;

    font-size: clamp(48px, 6vw, 82px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -3px;

    white-space: nowrap;
    text-align: center;

    text-shadow: 0 12px 35px rgba(0, 32, 34, .35);

    opacity: 0;
    transform: translateY(30px);

    clip-path: inset(0 0 100% 0);

    transition:
        opacity .9s ease .3s,
        transform .9s cubic-bezier(.2, .75, .25, 1) .3s,
        clip-path 1s cubic-bezier(.2, .75, .25, 1) .3s;
}

/* Animated green underline */
.bwa-photo-banner__line {
    display: block;
    width: 0;
    height: 4px;
    margin: 24px auto 22px;
    border-radius: 20px;
    background: linear-gradient( 90deg, #5ddd74, #8cf49b );
    box-shadow: 0 6px 18px rgba(93, 221, 116, .35);
    transition: width .8s ease 1s;
}

/* Breadcrumb */
.bwa-photo-banner__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease .8s, transform .7s ease .8s;
}

.bwa-photo-banner__breadcrumb li {
    position: relative;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 600;
}

.bwa-photo-banner__breadcrumb li + li {
    padding-left: 18px;
}

.bwa-photo-banner__breadcrumb li + li::before {
    content: "/";
    position: absolute;
    left: 0;
    color: #70e582;
}

.bwa-photo-banner__breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
}

.bwa-photo-banner__breadcrumb a:hover {
    color: #70e582;
}

/* Decorative page number */
.bwa-photo-banner__number {
    position: absolute;
    z-index: -1;
    right: 7%;
    bottom: -40px;
    color: rgba(255, 255, 255, .075);
    font-size: clamp(150px, 17vw, 250px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -12px;
    animation: bwaBannerNumber 5s ease-in-out infinite;
}

/* Bottom curved separator */
.bwa-photo-banner__curve {
    position: absolute;
    right: -5%;
    bottom: -58px;
    width: 46%;
    height: 90px;
    border-radius: 50% 0 0 0;
    background: #f4fafa;
}

/* Animation active states */
.bwa-photo-banner.is-banner-visible .bwa-photo-banner__label {
    opacity: 1;
    transform: translateY(0);
}

.bwa-photo-banner.is-banner-visible .bwa-photo-banner__title {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

.bwa-photo-banner.is-banner-visible .bwa-photo-banner__line {
    width: 78px;
}

.bwa-photo-banner.is-banner-visible .bwa-photo-banner__breadcrumb {
    opacity: 1;
    transform: translateY(0);
}

@keyframes bwaBannerNumber {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Tablet */@media (max-width: 991.98px) {
    .bwa-page .bwa-photo-banner__title {
        width: auto;
        max-width: 100%;
        white-space: normal;

        font-size: clamp(46px, 8vw, 68px);
        letter-spacing: -2px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .bwa-photo-banner {
        min-height: 285px;
        padding: 72px 0 60px;
    }
    .bwa-photo-banner__bg {
        background-position: 62% center;
    }
    .bwa-page .bwa-photo-banner__title {
        font-size: clamp(39px, 11vw, 51px);
        line-height: 1;
        letter-spacing: -1.5px;
    }
    .bwa-photo-banner__label {
        font-size: 8px;
        letter-spacing: 1.3px;
    }
    .bwa-photo-banner__label::before, .bwa-photo-banner__label::after {
        width: 15px;
    }
    .bwa-photo-banner__breadcrumb {
        flex-wrap: wrap;
        gap: 8px;
    }
    .bwa-photo-banner__breadcrumb li {
        font-size: 11px;
    }
    .bwa-photo-banner__number {
        right: 4%;
        bottom: -20px;
        font-size: 145px;
    }
    .bwa-photo-banner__curve {
        bottom: -70px;
        width: 75%;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .bwa-photo-banner *, .bwa-photo-banner *::before, .bwa-photo-banner *::after {
        animation: none !important;
        transition: none !important;
    }
    .bwa-photo-banner__label, .bwa-photo-banner__title, .bwa-photo-banner__breadcrumb {
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
    }
    .bwa-photo-banner__line {
        width: 78px !important;
    }
    .bwa-photo-banner__bg {
        transform: scale(1) !important;
    }
}

/* ==========================================================================
   CAREER LINES — BEHAVIOUR & WORK APPROACH REDESIGN (BWA8)
   Load AFTER behavioral-traits.css
   Keeps common Career Lines navbar, banner and footer untouched.
   ========================================================================== */

.bwa8{
    --b8-deep:#003f42;
    --b8-dark:#034f52;
    --b8-teal:#087b80;
    --b8-green:#5ddd74;
    --b8-green-dark:#35b85a;
    --b8-mint:#e9f9ef;
    --b8-ice:#edf7f8;
    --b8-cloud:#f7fbfb;
    --b8-ink:#073f42;
    --b8-copy:#5b7173;
    --b8-line:rgba(7,63,66,.11);
    --b8-shadow:0 28px 78px rgba(2,79,81,.12);
    overflow:hidden;
    color:var(--b8-copy);
    background:#fff;
}
.bwa8 *{box-sizing:border-box}
.bwa8 h2,.bwa8 h3,.bwa8 p{margin-top:0}
.bwa8 p{font-size:15px;line-height:1.82}

.bwa8-overline,.bwa8-dark-kicker{
    display:inline-flex;align-items:center;gap:10px;margin-bottom:17px;
    color:var(--b8-teal);font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase
}
.bwa8-overline:before,.bwa8-dark-kicker:before{
    content:"";width:24px;height:2px;border-radius:4px;background:var(--b8-green)
}
.bwa8-dark-kicker{color:#a9efb5}
.bwa8-btn{
    display:inline-flex;min-height:53px;align-items:center;justify-content:center;gap:12px;padding:15px 23px;
    border:1px solid var(--b8-green);border-radius:6px;background:var(--b8-green);color:var(--b8-deep)!important;
    box-shadow:0 14px 34px rgba(53,184,90,.22);font-size:11px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;
    transition:.3s ease
}
.bwa8-btn:hover{transform:translateY(-3px);border-color:var(--b8-teal);background:var(--b8-teal);color:#fff!important}
.bwa8-btn i{transition:transform .3s ease}.bwa8-btn:hover i{transform:translateX(4px)}
.bwa8-btn--light{background:#fff;border-color:#fff}

/* 01 — INTRO */
.bwa8-intro{
    position:relative;isolation:isolate;padding:105px 0 68px;
    background:
      radial-gradient(circle at 92% 5%,rgba(93,221,116,.17),transparent 24%),
      radial-gradient(circle at 4% 90%,rgba(8,123,128,.07),transparent 27%),
      linear-gradient(135deg,#fff 0%,#f9fdfb 55%,#eaf8ef 100%)
}
.bwa8-pill{
    display:inline-flex;align-items:center;gap:9px;margin-bottom:25px;padding:10px 15px;border:1px solid rgba(8,123,128,.14);
    border-radius:999px;background:rgba(255,255,255,.92);color:var(--b8-teal);box-shadow:0 10px 28px rgba(2,79,81,.07);
    font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase
}
.bwa8-intro-copy h2{
    max-width:690px;margin-bottom:26px;color:var(--b8-ink)!important;
    font-size:clamp(47px,4.8vw,70px);line-height:.98;letter-spacing:-3px;font-weight:700
}
.bwa8-intro-copy h2 span{color:var(--b8-green-dark)!important}
.bwa8-intro-copy p{max-width:690px}.bwa8-intro-copy .bwa8-btn{margin-top:12px}

/* visual */
.bwa8-visual{
    position:relative;width:min(100%,540px);aspect-ratio:1;margin-left:auto;overflow:hidden;border:1px solid var(--b8-line);
    border-radius:32px;background:
      linear-gradient(rgba(8,123,128,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(8,123,128,.035) 1px,transparent 1px),
      radial-gradient(circle at center,rgba(93,221,116,.21),transparent 42%),rgba(255,255,255,.86);
    background-size:42px 42px,42px 42px,auto,auto;box-shadow:var(--b8-shadow);backdrop-filter:blur(12px)
}
.bwa8-visual-caption{position:absolute;left:25px;top:22px;color:#7f9294;font-size:8px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.bwa8-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.bwa8-ring--one{width:72%;height:72%;border:1px dashed rgba(8,123,128,.24);animation:bwa8-spin 30s linear infinite}
.bwa8-ring--two{width:48%;height:48%;border:1px solid rgba(93,221,116,.32)}
.bwa8-core{
    position:absolute;z-index:3;left:50%;top:50%;display:flex;width:176px;height:176px;align-items:center;justify-content:center;flex-direction:column;
    transform:translate(-50%,-50%);border:10px solid rgba(255,255,255,.94);border-radius:50%;
    background:linear-gradient(145deg,var(--b8-dark),var(--b8-teal));color:#fff;box-shadow:0 20px 50px rgba(2,79,81,.25)
}
.bwa8-core i{margin-bottom:9px;color:var(--b8-green);font-size:25px}.bwa8-core strong{font-size:22px;letter-spacing:1.8px}.bwa8-core small{margin-top:5px;opacity:.7;font-size:8px;text-transform:uppercase;letter-spacing:1px}
.bwa8-node{
    position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(8,123,128,.09);border-radius:999px;
    background:rgba(255,255,255,.96);color:var(--b8-ink);box-shadow:0 12px 31px rgba(2,79,81,.11);font-size:11px;animation:bwa8-float 5s ease-in-out infinite
}
.bwa8-node i{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:var(--b8-green);color:var(--b8-deep)}
.bwa8-node b{color:inherit}.bwa8-node.node-a{left:6%;top:17%}.bwa8-node.node-b{right:5%;top:18%;animation-delay:-1.2s}
.bwa8-node.node-c{left:6%;bottom:14%;animation-delay:-2.4s}.bwa8-node.node-d{right:6%;bottom:14%;animation-delay:-3.6s}

.bwa8-proof{
    display:grid;grid-template-columns:repeat(4,1fr);margin-top:58px;overflow:hidden;border:1px solid var(--b8-line);border-radius:16px;
    background:rgba(255,255,255,.93);box-shadow:0 16px 44px rgba(2,79,81,.08)
}
.bwa8-proof>div{display:flex;min-height:95px;align-items:center;justify-content:center;gap:13px;padding:22px}
.bwa8-proof>div+div{border-left:1px solid var(--b8-line)}
.bwa8-proof strong{color:var(--b8-teal);font-size:29px}.bwa8-proof span{color:var(--b8-copy);font-size:10px;font-weight:900;letter-spacing:.65px;text-transform:uppercase}

/* 02 — SIGNALS */
.bwa8-signals{padding:105px 0;background:#fff}
.bwa8-section-head{max-width:950px;margin:0 auto 54px}
.bwa8-section-head h2{margin:0;color:var(--b8-ink)!important;font-size:clamp(43px,4.5vw,63px);line-height:1;letter-spacing:-2.6px}
.bwa8-section-head h2 span{color:var(--b8-green-dark)!important}
.bwa8-signal{
    position:relative;width:100%;min-height:310px;padding:30px 27px;border:1px solid var(--b8-line);border-radius:20px;background:#fff;
    color:inherit;text-align:left;box-shadow:0 16px 42px rgba(2,79,81,.075);cursor:pointer;transition:.35s ease
}
.bwa8-signal:hover,.bwa8-signal.is-active{transform:translateY(-7px);border-color:rgba(53,184,90,.34);box-shadow:0 27px 63px rgba(2,79,81,.12)}
.bwa8-signal-no{position:absolute;right:22px;top:20px;color:rgba(8,123,128,.10);font-size:46px;font-weight:900;line-height:1}
.bwa8-signal-icon{display:grid;width:48px;height:48px;place-items:center;margin-bottom:28px;border-radius:14px;background:linear-gradient(145deg,var(--b8-teal),var(--b8-green));color:#fff}
.bwa8-signal small{display:block;margin-bottom:9px;color:var(--b8-green-dark);font-size:8px;font-weight:900;letter-spacing:1.05px;text-transform:uppercase}
.bwa8-signal h3{margin-bottom:20px;color:var(--b8-ink)!important;font-size:24px;line-height:1.15}
.bwa8-signal-link{position:absolute;left:27px;bottom:25px;color:var(--b8-teal);font-size:9px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}

/* 03 — ARCHITECTURE */
.bwa8-architecture{
    position:relative;padding:110px 0 125px;overflow:hidden;color:rgba(255,255,255,.75);
    background:
      radial-gradient(circle at 95% 0,rgba(93,221,116,.18),transparent 28%),
      linear-gradient(118deg,#003f42 0%,#075b5c 55%,#0a806a 100%)
}
.bwa8-grid{position:absolute;inset:0;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:70px 70px}
.bwa8-orb{position:absolute;width:430px;height:430px;right:-160px;top:-180px;border:1px solid rgba(93,221,116,.12);border-radius:50%;box-shadow:0 0 0 65px rgba(93,221,116,.025)}
.bwa8-dark-head h2{margin:0;color:#fff!important;font-size:clamp(43px,4.5vw,63px);line-height:1;letter-spacing:-2.6px}.bwa8-dark-head h2 span{color:var(--b8-green)!important}
.bwa8-dark-intro{margin:0;color:rgba(255,255,255,.68)!important;font-size:14px!important;line-height:1.8}
.bwa8-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.bwa8-tab{
    display:flex;min-height:76px;align-items:center;gap:11px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:13px;
    background:rgba(255,255,255,.055);color:rgba(255,255,255,.78);cursor:pointer;transition:.25s ease
}
.bwa8-tab span{display:grid;width:35px;height:35px;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--b8-deep);font-size:10px;font-weight:900}
.bwa8-tab strong{color:inherit;font-size:11px}.bwa8-tab:hover{transform:translateY(-3px);border-color:rgba(93,221,116,.45)}
.bwa8-tab.is-active{border-color:var(--b8-green);background:var(--b8-green);color:var(--b8-deep);box-shadow:0 13px 31px rgba(93,221,116,.18)}
.bwa8-panel{
    display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center;min-height:560px;padding:55px;border:1px solid rgba(255,255,255,.13);
    border-radius:27px;background:rgba(255,255,255,.065);box-shadow:0 27px 72px rgba(0,0,0,.16);backdrop-filter:blur(12px)
}
.bwa8-panel[hidden]{display:none!important}.bwa8-panel.is-active{animation:bwa8-panel-in .45s ease both}
.bwa8-panel-main{position:relative}.bwa8-panel-number{position:absolute;right:0;top:-28px;color:rgba(255,255,255,.06);font-size:110px;font-weight:900;line-height:1}
.bwa8-panel-main h3{position:relative;margin-bottom:24px;color:#fff!important;font-size:clamp(34px,3.2vw,48px);line-height:1.04}
.bwa8-panel-copy p{color:rgba(255,255,255,.76)!important}.bwa8-panel-copy p+p{margin-top:18px}
.bwa8-spectrum-card{padding:31px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:rgba(0,40,42,.23)}
.bwa8-spectrum-icon{display:grid;width:54px;height:54px;place-items:center;margin-bottom:24px;border-radius:14px;background:var(--b8-green);color:var(--b8-deep);font-size:19px}
.bwa8-spectrum-card small{display:block;margin-bottom:18px;color:#9eeaaa;font-size:8px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase}
.bwa8-spectrum-labels{display:flex;justify-content:space-between;gap:12px}.bwa8-spectrum-labels strong{max-width:47%;color:#fff;font-size:11px;line-height:1.4}
.bwa8-spectrum-track{position:relative;height:10px;margin:22px 0;border-radius:999px;background:linear-gradient(90deg,#fff,#79dec3,var(--b8-green))}
.bwa8-spectrum-track i{position:absolute;left:var(--bwa8-point);top:50%;width:28px;height:28px;border:6px solid #fff;border-radius:50%;background:var(--b8-teal);transform:translate(-50%,-50%);box-shadow:0 7px 18px rgba(0,0,0,.22)}
.bwa8-spectrum-card p{margin:0;color:rgba(255,255,255,.69)!important;font-size:12px!important}

/* 04 — ALIGNMENT */
.bwa8-alignment{padding:105px 0;background:radial-gradient(circle at 92% 8%,rgba(93,221,116,.11),transparent 25%),linear-gradient(135deg,var(--b8-cloud),var(--b8-ice))}
.bwa8-alignment-card{display:grid;grid-template-columns:300px 1fr;gap:58px;align-items:center;padding:55px;border:1px solid var(--b8-line);border-radius:27px;background:rgba(255,255,255,.93);box-shadow:var(--b8-shadow)}
.bwa8-alignment-card h2{margin-bottom:22px;color:var(--b8-ink)!important;font-size:clamp(39px,4vw,56px);line-height:1.02;letter-spacing:-2px}.bwa8-alignment-card h2 span{color:var(--b8-green-dark)!important}
.bwa8-alignment-card p{margin:0}
.bwa8-energy{position:relative;min-height:270px;padding:32px;border-radius:22px;background:linear-gradient(145deg,var(--b8-dark),var(--b8-teal));color:#fff;box-shadow:0 20px 48px rgba(2,79,81,.2)}
.bwa8-energy-label{display:block;margin-bottom:36px;color:#a7edb2;font-size:8px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.bwa8-energy strong{display:block;margin-bottom:25px;font-size:48px;letter-spacing:3px}.bwa8-energy-meter{height:8px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.bwa8-energy-meter span{display:block;width:86%;height:100%;border-radius:inherit;background:var(--b8-green);animation:bwa8-charge 3.2s ease-in-out infinite}
.bwa8-energy small{display:block;margin-top:15px;color:rgba(255,255,255,.7)}

/* 05 — STAGES */
.bwa8-stages{padding:110px 0 125px;background:#fff}
.bwa8-stage-list{display:grid;gap:15px;max-width:1140px;margin:0 auto}
.bwa8-stage{overflow:hidden;border:1px solid var(--b8-line);border-radius:20px;background:#fff;box-shadow:0 16px 42px rgba(2,79,81,.07);transition:.3s ease}
.bwa8-stage:hover{transform:translateX(5px);box-shadow:0 25px 60px rgba(2,79,81,.11)}.bwa8-stage.is-open{border-color:rgba(53,184,90,.32)}
.bwa8-stage-toggle{display:grid;width:100%;grid-template-columns:62px 58px 1fr 42px;gap:20px;align-items:center;padding:27px 30px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.bwa8-stage-no{color:rgba(8,123,128,.16);font-size:39px;font-weight:900}.bwa8-stage-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:50%;background:var(--b8-mint);color:var(--b8-teal)}
.bwa8-stage-heading small{display:block;margin-bottom:5px;color:var(--b8-green-dark);font-size:9px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}.bwa8-stage-heading strong{color:var(--b8-ink);font-size:20px}
.bwa8-stage-plus{color:var(--b8-teal);transition:transform .3s ease}.bwa8-stage.is-open .bwa8-stage-plus{transform:rotate(45deg)}
.bwa8-stage-body{display:none;padding:0 32px 31px 172px}.bwa8-stage.is-open .bwa8-stage-body{display:block;animation:bwa8-panel-in .35s ease both}.bwa8-stage-body p{margin:0}

/* 06 — CTA */
.bwa8-cta{padding:0 0 95px;background:#fff}
.bwa8-cta-card{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:50px 55px;border-radius:26px;background:radial-gradient(circle at 96% 0,rgba(93,221,116,.25),transparent 30%),linear-gradient(110deg,#034f52,#087b80 55%,#18a567);box-shadow:0 27px 70px rgba(7,63,66,.16)}
.bwa8-cta-card h2{max-width:780px;margin:0;color:#fff!important;font-size:clamp(39px,4.1vw,58px);line-height:1.01;letter-spacing:-2.4px}.bwa8-cta-card h2 span{color:var(--b8-green)!important}

/* Motion */
.bwa8-motion-ready .bwa8-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease var(--bwa8-delay,0ms),transform .7s cubic-bezier(.2,.75,.25,1) var(--bwa8-delay,0ms)}
.bwa8-motion-ready .bwa8-reveal.is-visible{opacity:1;transform:none}
@keyframes bwa8-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes bwa8-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bwa8-panel-in{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes bwa8-charge{0%,100%{width:78%}50%{width:92%}}

/* Responsive */
@media(max-width:1199.98px){
    .bwa8-tabs{grid-template-columns:1fr 1fr}
}
@media(max-width:991.98px){
    .bwa8-intro{padding:82px 0 60px}.bwa8-visual{margin:24px auto 0}
    .bwa8-proof{grid-template-columns:1fr 1fr}.bwa8-proof>div:nth-child(3){border-left:0}.bwa8-proof>div:nth-child(n+3){border-top:1px solid var(--b8-line)}
    .bwa8-panel{grid-template-columns:1fr}.bwa8-spectrum-card{max-width:620px}
    .bwa8-alignment-card{grid-template-columns:1fr}.bwa8-energy{max-width:420px}
    .bwa8-cta-card{align-items:flex-start;flex-direction:column}
}
@media(max-width:767.98px){
    .bwa8-proof{grid-template-columns:1fr}.bwa8-proof>div+div{border-left:0;border-top:1px solid var(--b8-line)}
    .bwa8-tabs{grid-template-columns:1fr}
    .bwa8-stage-toggle{grid-template-columns:48px 48px 1fr 28px;gap:12px;padding:21px 18px}
    .bwa8-stage-body{padding:0 20px 24px}
}
@media(max-width:575.98px){
    .bwa8-intro-copy h2{font-size:41px;letter-spacing:-1.7px}
    .bwa8-visual{min-height:420px;aspect-ratio:auto}.bwa8-core{width:145px;height:145px}.bwa8-node{font-size:9px;padding-right:9px}
    .bwa8-signals,.bwa8-architecture,.bwa8-alignment,.bwa8-stages{padding:75px 0}
    .bwa8-panel{padding:28px 22px}.bwa8-cta{padding-bottom:75px}.bwa8-cta-card{padding:35px 24px}
}
@media(prefers-reduced-motion:reduce){
    .bwa8-ring,.bwa8-node,.bwa8-energy-meter span{animation:none!important}
    .bwa8-motion-ready .bwa8-reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* ==========================================================
   CAREER LINES
   SOCIAL & EMOTIONAL INTELLIGENCE
   PREMIUM HUMAN INTELLIGENCE PROFILE
========================================================== */

.sei-pro {
    --sei-dark: #033f43;
    --sei-deep: #024f52;
    --sei-teal: #087f82;
    --sei-teal-light: #12a89c;
    --sei-green: #58d36d;
    --sei-green-dark: #31b955;
    --sei-mint: #eaf9f1;
    --sei-sky: #eef8fa;
    --sei-copy: #637a7c;
    --sei-line: rgba(3, 63, 67, .11);

    overflow: hidden;

    background: #fff;
}

.sei-pro *,
.sei-pro *::before,
.sei-pro *::after {
    box-sizing: border-box;
}

.sei-pro h2,
.sei-pro h3,
.sei-pro p {
    margin-top: 0;
}

.sei-pro p {
    color: var(--sei-copy);

    font-size: 15px;
    line-height: 1.9;
}


/* ==========================================================
   GENERAL TYPOGRAPHY
========================================================== */

.sei-pro-kicker {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: var(--sei-teal);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}

.sei-pro-kicker::before {
    content: "";

    display: block;

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: var(--sei-green);
}


/* ==========================================================
   INTRO
========================================================== */

.sei-pro-intro {
    position: relative;

    padding: 110px 0 85px;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(88, 211, 109, .15),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            #fbfefd 48%,
            #eef9f3 100%
        );
}

.sei-pro-orb {
    position: absolute;

    pointer-events: none;

    border: 1px solid rgba(8, 127, 130, .07);

    border-radius: 50%;
}

.sei-pro-orb-1 {
    width: 420px;
    height: 420px;

    top: -230px;
    right: -170px;
}

.sei-pro-orb-2 {
    width: 250px;
    height: 250px;

    left: -110px;
    bottom: -130px;
}


/* META */

.sei-pro-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 29px;
}

.sei-pro-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 13px;

    border: 1px solid rgba(8, 127, 130, .12);

    border-radius: 999px;

    background: #fff;

    color: var(--sei-teal);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow: 0 10px 28px rgba(3, 63, 67, .06);
}

.sei-pro-badge i {
    color: var(--sei-green-dark);
}

.sei-pro-meta-line {
    width: 32px;
    height: 1px;

    background: var(--sei-green);
}

.sei-pro-meta small {
    color: #789092;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* TITLE */

.sei-pro-intro-copy h2 {
    max-width: 700px;

    margin-bottom: 31px;

    color: var(--sei-dark) !important;

    font-size: clamp(49px, 5.2vw, 76px);

    line-height: .95;

    letter-spacing: -3.7px;
}

.sei-pro-intro-copy h2 span {
    display: block;

    color: var(--sei-green-dark) !important;
}


/* BODY */

.sei-pro-editorial-copy {
    max-width: 660px;

    padding-left: 22px;

    border-left: 2px solid rgba(88, 211, 109, .65);
}

.sei-pro-editorial-copy p {
    margin-bottom: 15px;
}

.sei-pro-editorial-copy p:last-child {
    margin-bottom: 0;
}


/* CTA */

.sei-pro-intro-bottom {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 34px;
}

.sei-pro-primary-btn {
    display: inline-flex;

    min-height: 55px;

    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 15px 24px;

    border-radius: 7px;

    background: var(--sei-green);

    color: var(--sei-dark) !important;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .5px;

    text-transform: uppercase;

    box-shadow: 0 15px 35px rgba(49, 185, 85, .20);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.sei-pro-primary-btn:hover {
    transform: translateY(-3px);

    background: var(--sei-dark);

    color: #fff !important;
}

.sei-pro-primary-btn i {
    transition: transform .3s ease;
}

.sei-pro-primary-btn:hover i {
    transform: translateX(5px);
}


/* PROOF */

.sei-pro-proof {
    display: flex;

    align-items: center;

    gap: 12px;
}

.sei-pro-proof strong {
    color: var(--sei-teal);

    font-size: 34px;
    font-weight: 900;

    line-height: 1;
}

.sei-pro-proof span {
    color: var(--sei-dark);

    font-size: 10px;
    font-weight: 900;

    line-height: 1.25;

    text-transform: uppercase;
}

.sei-pro-proof small {
    display: block;

    margin-top: 3px;

    color: #879899;

    font-size: 8px;
}


/* ==========================================================
   INTRO VISUAL
========================================================== */

.sei-pro-visual {
    position: relative;

    width: min(100%, 560px);
    min-height: 620px;

    margin-left: auto;
}

.sei-pro-visual-panel {
    position: absolute;

    inset: 75px 5px 20px 70px;

    border-radius: 38px 38px 130px 38px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 127, 130, .13),
            rgba(88, 211, 109, .15)
        );

    transform: rotate(3deg);
}


/* PHOTO */

.sei-pro-photo {
    position: absolute;

    inset: 45px 35px 45px 35px;

    overflow: hidden;

    border: 9px solid #fff;

    border-radius: 35px 35px 125px 35px;

    background: #d8ece8;

    box-shadow:
        0 35px 80px rgba(3, 63, 67, .16);
}

.sei-pro-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.sei-pro-photo-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(3, 63, 67, .76)
        );
}

.sei-pro-photo-title {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 25px;
}

.sei-pro-photo-title span {
    display: block;

    margin-bottom: 5px;

    color: #80ef91;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.sei-pro-photo-title strong {
    max-width: 270px;

    display: block;

    color: #fff;

    font-size: 22px;

    line-height: 1.15;
}


/* PROFILE RAIL */

.sei-pro-profile-rail {
    position: absolute;

    z-index: 7;

    left: -18px;
    top: 145px;

    display: grid;

    gap: 8px;

    padding: 10px;

    border: 1px solid var(--sei-line);

    border-radius: 20px;

    background: rgba(255,255,255,.95);

    box-shadow:
        0 20px 50px rgba(3,63,67,.13);

    backdrop-filter: blur(10px);
}

.sei-pro-profile-rail span {
    display: flex;

    width: 48px;
    height: 48px;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: #789092;

    cursor: default;

    transition: .3s ease;
}

.sei-pro-profile-rail span small {
    display: none;
}

.sei-pro-profile-rail span.active,
.sei-pro-profile-rail span:hover {
    background: var(--sei-green);

    color: var(--sei-dark);

    transform: translateX(3px);
}


/* FLOATING CARDS */

.sei-pro-float {
    position: absolute;
    z-index: 8;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 205px;

    padding: 12px 14px;

    border: 1px solid var(--sei-line);

    border-radius: 15px;

    background: rgba(255,255,255,.97);

    box-shadow:
        0 15px 40px rgba(3,63,67,.13);

    animation:
        sei-pro-float 5s ease-in-out infinite;
}

.sei-pro-float-top {
    top: 15px;
    right: 0;
}

.sei-pro-float-bottom {
    left: 15px;
    bottom: 5px;

    animation-delay: -2.5s;
}

.sei-pro-float-icon {
    display: grid;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    place-items: center;

    border-radius: 11px;

    background: var(--sei-green);

    color: var(--sei-dark);
}

.sei-pro-float small {
    display: block;

    margin-bottom: 3px;

    color: #879899;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.sei-pro-float strong {
    display: block;

    color: var(--sei-dark);

    font-size: 11px;
}


/* NUMBER */

.sei-pro-number {
    position: absolute;
    z-index: 7;

    right: 0;
    bottom: 80px;

    width: 105px;

    padding: 16px;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 15px 45px rgba(3,63,67,.13);
}

.sei-pro-number small {
    display: block;

    color: #809294;

    font-size: 7px;
    font-weight: 900;

    text-transform: uppercase;
}

.sei-pro-number strong {
    display: block;

    margin-top: 3px;

    color: var(--sei-green-dark);

    font-size: 31px;
}


/* ==========================================================
   PROFILE STRIP
========================================================== */

.sei-pro-profile-strip {
    position: relative;

    z-index: 4;

    margin-top: -1px;

    padding-bottom: 90px;

    background:
        linear-gradient(
            180deg,
            #eef9f3,
            #fff
        );
}

.sei-pro-strip-shell {
    display: grid;

    grid-template-columns:
        1.6fr repeat(5, .8fr);

    overflow: hidden;

    border: 1px solid var(--sei-line);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 18px 50px rgba(3,63,67,.08);
}

.sei-pro-strip-title {
    padding: 22px 26px;

    background: var(--sei-dark);
}

.sei-pro-strip-title span {
    display: block;

    margin-bottom: 6px;

    color: #75e688;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}

.sei-pro-strip-title strong {
    color: #fff;

    font-size: 13px;
}

.sei-pro-strip-stat {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 4px;

    padding: 15px 10px;

    border-left: 1px solid var(--sei-line);
}

.sei-pro-strip-stat small {
    color: var(--sei-green-dark);

    font-size: 15px;
    font-weight: 900;
}

.sei-pro-strip-stat span {
    color: var(--sei-dark);

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}


/* ==========================================================
   COMPASS SECTION
========================================================== */

.sei-pro-compass {
    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f6fbfb
        );
}

.sei-pro-section-heading h2 {
    max-width: 850px;

    margin: 0;

    color: var(--sei-dark) !important;

    font-size: clamp(45px, 4.5vw, 64px);

    line-height: .99;

    letter-spacing: -2.8px;
}

.sei-pro-section-heading h2 span {
    color: var(--sei-green-dark) !important;
}

.sei-pro-heading-copy {
    margin: 0;
}


/* LAYOUT */

.sei-pro-compass-layout {
    display: grid;

    grid-template-columns:
        350px 1fr;

    gap: 25px;

    margin-top: 55px;
}


/* LEFT NAV */

.sei-pro-compass-nav {
    display: grid;

    align-content: start;

    gap: 9px;
}

.sei-pro-compass-tab {
    display: grid;

    grid-template-columns:
        44px 1fr 25px;

    align-items: center;

    gap: 13px;

    min-height: 82px;

    padding: 12px 15px;

    border:
        1px solid var(--sei-line);

    border-radius: 13px;

    background: #fff;

    text-align: left;

    cursor: pointer;

    transition: .3s ease;
}

.sei-pro-compass-tab > span {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 12px;

    background: var(--sei-mint);

    color: var(--sei-teal);

    font-size: 10px;
    font-weight: 900;
}

.sei-pro-compass-tab small {
    display: block;

    margin-bottom: 4px;

    color: #8a9a9b;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.sei-pro-compass-tab strong {
    display: block;

    color: var(--sei-dark);

    font-size: 12px;
}

.sei-pro-compass-tab > i {
    color: #8da0a0;

    font-size: 10px;

    transition: transform .3s ease;
}

.sei-pro-compass-tab:hover,
.sei-pro-compass-tab.active {
    transform: translateX(5px);

    border-color: transparent;

    background:
        linear-gradient(
            110deg,
            var(--sei-deep),
            var(--sei-teal)
        );

    box-shadow:
        0 18px 40px rgba(3,63,67,.14);
}

.sei-pro-compass-tab:hover strong,
.sei-pro-compass-tab.active strong {
    color: #fff;
}

.sei-pro-compass-tab:hover small,
.sei-pro-compass-tab.active small {
    color: rgba(255,255,255,.57);
}

.sei-pro-compass-tab:hover > span,
.sei-pro-compass-tab.active > span {
    background: var(--sei-green);

    color: var(--sei-dark);
}

.sei-pro-compass-tab:hover > i,
.sei-pro-compass-tab.active > i {
    color: var(--sei-green);

    transform: translateX(4px);
}


/* RIGHT PANEL */

.sei-pro-compass-stage {
    position: relative;

    min-height: 580px;
}

.sei-pro-dimension {
    position: absolute;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    overflow: hidden;

    padding: 50px;

    border:
        1px solid rgba(3,63,67,.10);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(88,211,109,.15),
            transparent 30%
        ),
        #fff;

    box-shadow:
        0 24px 70px rgba(3,63,67,.09);

    transform: translateY(15px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

.sei-pro-dimension.active {
    position: relative;

    visibility: visible;

    opacity: 1;

    transform: none;
}

.sei-pro-dimension-watermark {
    position: absolute;

    right: 25px;
    bottom: -30px;

    color: rgba(8,127,130,.05);

    font-size: 170px;
    font-weight: 900;

    line-height: 1;
}

.sei-pro-dimension-head {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 32px;
}

.sei-pro-dimension-head > div:first-child > span {
    display: block;

    margin-bottom: 8px;

    color: var(--sei-green-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.sei-pro-dimension h3 {
    max-width: 600px;

    margin: 0;

    color: var(--sei-dark) !important;

    font-size: clamp(38px, 3.4vw, 53px);

    line-height: 1;

    letter-spacing: -2px;
}

.sei-pro-dimension h3 strong {
    color: var(--sei-green-dark);

    font-weight: inherit;
}

.sei-pro-dimension-icon {
    display: grid;

    width: 70px;
    height: 70px;

    flex: 0 0 70px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            var(--sei-teal),
            var(--sei-green)
        );

    color: #fff;

    font-size: 21px;

    box-shadow:
        0 15px 35px rgba(8,127,130,.20);
}


/* CONTENT */

.sei-pro-dimension-content {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 34px;
}

.sei-pro-dimension-content p {
    margin: 0;
}


/* RANGE */

.sei-pro-range {
    position: relative;
    z-index: 2;

    margin-top: 38px;

    padding-top: 25px;

    border-top: 1px solid var(--sei-line);
}

.sei-pro-range-labels {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}

.sei-pro-range-labels span {
    color: var(--sei-dark);

    font-size: 10px;
    font-weight: 900;

    text-transform: uppercase;
}

.sei-pro-range-labels span:last-child {
    text-align: right;
}

.sei-pro-range-labels small {
    display: block;

    margin-bottom: 3px;

    color: #899a9b;

    font-size: 7px;
    font-weight: 800;
}

.sei-pro-range-track {
    position: relative;

    height: 8px;

    border-radius: 999px;

    background:
        #e7f0ef;
}

.sei-pro-range-fill {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--sei-teal),
            var(--sei-green)
        );
}

.sei-pro-range-track > i {
    position: absolute;

    top: 50%;

    width: 22px;
    height: 22px;

    transform: translate(-50%, -50%);

    border:
        5px solid #fff;

    border-radius: 50%;

    background: var(--sei-teal);

    box-shadow:
        0 5px 15px rgba(3,63,67,.20);
}


/* ==========================================================
   INSIGHT BAND
========================================================== */

.sei-pro-insight {
    padding: 105px 0;

    background:
        linear-gradient(
            110deg,
            #033f43 0%,
            #056a6c 62%,
            #087f74 100%
        );
}

.sei-pro-insight-shell {
    display: grid;

    grid-template-columns:
        190px 1fr 310px;

    align-items: center;

    gap: 50px;
}


/* NUMBER */

.sei-pro-insight-number {
    padding-right: 35px;

    border-right:
        1px solid rgba(255,255,255,.13);
}

.sei-pro-insight-number > span {
    display: block;

    color: #70e483;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.sei-pro-insight-number strong {
    display: block;

    margin: 8px 0;

    color: #fff;

    font-size: 95px;
    font-weight: 800;

    line-height: .95;
}

.sei-pro-insight-number small {
    color: rgba(255,255,255,.55);

    font-size: 9px;

    text-transform: uppercase;
}


/* COPY */

.sei-pro-insight-copy h2 {
    margin-bottom: 22px;

    color: #fff !important;

    font-size:
        clamp(37px, 3.6vw, 52px);

    line-height: 1;

    letter-spacing: -2px;
}

.sei-pro-insight-copy h2 span {
    display: block;

    color: #78e989 !important;
}

.sei-pro-insight-copy p {
    margin: 0;

    color: rgba(255,255,255,.67);
}


/* POINTS */

.sei-pro-insight-points {
    display: grid;

    gap: 9px;
}

.sei-pro-insight-points > div {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding: 10px 13px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 11px;

    background:
        rgba(255,255,255,.055);
}

.sei-pro-insight-points i {
    display: grid;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    place-items: center;

    border-radius: 50%;

    background: var(--sei-green);

    color: var(--sei-dark);

    font-size: 8px;
}

.sei-pro-insight-points span {
    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


/* ==========================================================
   LIFE JOURNEY
========================================================== */

.sei-pro-life {
    position: relative;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(88,211,109,.10),
            transparent 27%
        ),
        #f8fcfc;
}

.sei-pro-life-head {
    max-width: 900px;

    margin:
        0 auto 75px;

    text-align: center;
}

.sei-pro-life-head h2 {
    margin: 0;

    color: var(--sei-dark) !important;

    font-size:
        clamp(44px, 4.5vw, 63px);

    line-height: 1;

    letter-spacing: -2.6px;
}

.sei-pro-life-head h2 span {
    display: block;

    color: var(--sei-green-dark) !important;
}


/* TRACK */

.sei-pro-life-track {
    position: relative;

    max-width: 1050px;

    margin: auto;
}

.sei-pro-life-line {
    position: absolute;

    left: 50%;
    top: 0;
    bottom: 0;

    width: 2px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            var(--sei-green),
            var(--sei-teal),
            rgba(8,127,130,.05)
        );
}

.sei-pro-life-item {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr 90px 1fr;

    align-items: center;

    min-height: 290px;
}

.sei-pro-life-item .sei-pro-life-copy {
    grid-column: 1;

    padding:
        30px 35px;

    border:
        1px solid var(--sei-line);

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 18px 50px rgba(3,63,67,.07);
}

.sei-pro-life-item-right
.sei-pro-life-copy {
    grid-column: 3;
}

.sei-pro-life-marker {
    position: absolute;

    z-index: 3;

    left: 50%;
    top: 50%;

    display: grid;

    width: 62px;
    height: 62px;

    place-items: center;

    transform:
        translate(-50%, -50%);

    border: 9px solid #f8fcfc;

    border-radius: 50%;

    background: var(--sei-green);

    color: var(--sei-dark);

    box-shadow:
        0 10px 30px rgba(49,185,85,.22);
}

.sei-pro-life-index {
    position: absolute;

    color: rgba(8,127,130,.08);

    font-size: 75px;
    font-weight: 900;

    pointer-events: none;
}

.sei-pro-life-item:not(.sei-pro-life-item-right)
.sei-pro-life-index {
    right: calc(50% + 70px);
}

.sei-pro-life-item-right
.sei-pro-life-index {
    left: calc(50% + 70px);
}

.sei-pro-life-copy small {
    display: block;

    margin-bottom: 8px;

    color: var(--sei-green-dark);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.sei-pro-life-copy h3 {
    margin-bottom: 16px;

    color: var(--sei-dark) !important;

    font-size: 25px;
}

.sei-pro-life-copy p {
    margin-bottom: 0;

    font-size: 13px;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.sei-pro-cta {
    padding:
        0 0 105px;

    background: #f8fcfc;
}

.sei-pro-cta-shell {
    position: relative;

    display: flex;

    min-height: 275px;

    align-items: center;
    justify-content: space-between;

    gap: 45px;

    overflow: hidden;

    padding:
        55px 60px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 94% -20%,
            rgba(255,255,255,.13),
            transparent 32%
        ),
        linear-gradient(
            110deg,
            #034b50 0%,
            #087f82 55%,
            #24ae69 100%
        );

    box-shadow:
        0 30px 75px rgba(3,63,67,.17);
}

.sei-pro-cta-shell::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -120px;
    top: -150px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 50%;
}

.sei-pro-cta-copy {
    position: relative;
    z-index: 2;
}

.sei-pro-cta-copy > small {
    display: block;

    margin-bottom: 15px;

    color: rgba(255,255,255,.60);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}

.sei-pro-cta-copy h2 {
    max-width: 790px;

    margin: 0;

    color: #fff !important;

    font-size:
        clamp(43px, 4.4vw, 63px);

    line-height: .98;

    letter-spacing: -2.8px;
}

.sei-pro-cta-copy h2 span {
    color: #83ee91 !important;
}


/* ACTION */

.sei-pro-cta-action {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-end;
    flex-direction: column;

    gap: 11px;

    flex-shrink: 0;
}

.sei-pro-cta-action a {
    display: inline-flex;

    min-height: 57px;

    align-items: center;
    justify-content: center;

    gap: 13px;

    padding:
        15px 23px;

    border-radius: 7px;

    background: #fff;

    color: var(--sei-dark) !important;

    font-size: 10px;
    font-weight: 900;

    text-transform: uppercase;

    transition:
        transform .3s ease,
        background .3s ease;
}

.sei-pro-cta-action a:hover {
    transform:
        translateY(-3px);

    background:
        var(--sei-green);
}

.sei-pro-cta-action > span {
    color:
        rgba(255,255,255,.67);

    font-size: 9px;
}


/* ==========================================================
   ANIMATION
========================================================== */

.sei-pro-motion
.sei-pro-reveal {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .7s ease var(--sei-delay, 0ms),
        transform .7s cubic-bezier(.2,.75,.25,1)
        var(--sei-delay, 0ms);
}

.sei-pro-motion
.sei-pro-reveal.is-visible {
    opacity: 1;

    transform: none;
}

@keyframes sei-pro-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199.98px) {

    .sei-pro-strip-shell {
        grid-template-columns:
            1.4fr repeat(5, .8fr);
    }

    .sei-pro-insight-shell {
        grid-template-columns:
            150px 1fr;
    }

    .sei-pro-insight-points {
        grid-column:
            1 / -1;

        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 991.98px) {

    .sei-pro-intro {
        padding:
            85px 0 70px;
    }

    .sei-pro-visual {
        margin:
            35px auto 0;
    }

    .sei-pro-strip-shell {
        grid-template-columns:
            1fr 1fr 1fr;
    }

    .sei-pro-strip-title {
        grid-column:
            1 / -1;
    }

    .sei-pro-strip-stat {
        border-top:
            1px solid var(--sei-line);
    }

    .sei-pro-compass-layout {
        grid-template-columns:
            1fr;
    }

    .sei-pro-compass-nav {
        grid-template-columns:
            1fr 1fr;
    }

    .sei-pro-compass-tab:hover,
    .sei-pro-compass-tab.active {
        transform: translateY(-3px);
    }

    .sei-pro-life-line {
        left: 30px;
    }

    .sei-pro-life-item {
        display: block;

        min-height: auto;

        padding:
            0 0 35px 75px;
    }

    .sei-pro-life-item
    .sei-pro-life-copy,
    .sei-pro-life-item-right
    .sei-pro-life-copy {
        display: block;
    }

    .sei-pro-life-marker {
        left: 30px;
        top: 40px;

        transform:
            translate(-50%, 0);
    }

    .sei-pro-life-index,
    .sei-pro-life-item:not(.sei-pro-life-item-right)
    .sei-pro-life-index,
    .sei-pro-life-item-right
    .sei-pro-life-index {
        left: auto;
        right: 25px;
        top: 15px;
    }

}


@media (max-width: 767.98px) {

    .sei-pro-compass {
        padding:
            80px 0;
    }

    .sei-pro-compass-nav {
        grid-template-columns:
            1fr;
    }

    .sei-pro-dimension {
        padding:
            32px 25px;
    }

    .sei-pro-dimension-content {
        grid-template-columns:
            1fr;
    }

    .sei-pro-insight-shell {
        grid-template-columns:
            1fr;

        gap: 30px;
    }

    .sei-pro-insight-number {
        padding: 0 0 25px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.13);
    }

    .sei-pro-insight-number strong {
        font-size: 65px;
    }

    .sei-pro-cta-shell {
        align-items: flex-start;
        flex-direction: column;
    }

    .sei-pro-cta-action {
        align-items: flex-start;
    }

}


@media (max-width: 575.98px) {

    .sei-pro-intro-copy h2 {
        font-size: 43px;

        letter-spacing: -2px;
    }

    .sei-pro-editorial-copy {
        padding-left: 16px;
    }

    .sei-pro-visual {
        min-height: 510px;
    }

    .sei-pro-photo {
        inset:
            45px 8px 40px 20px;
    }

    .sei-pro-profile-rail {
        left: 0;
    }

    .sei-pro-float {
        min-width: 170px;
    }

    .sei-pro-float-top {
        right: 0;
    }

    .sei-pro-float-bottom {
        left: 0;
    }

    .sei-pro-number {
        right: 0;
    }

    .sei-pro-strip-shell {
        grid-template-columns:
            1fr 1fr;
    }

    .sei-pro-strip-title {
        grid-column:
            1 / -1;
    }

    .sei-pro-insight-points {
        grid-template-columns:
            1fr;
    }

    .sei-pro-life,
    .sei-pro-insight {
        padding:
            75px 0;
    }

    .sei-pro-cta {
        padding-bottom: 75px;
    }

    .sei-pro-cta-shell {
        min-height: auto;

        padding:
            40px 25px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .sei-pro-float {
        animation: none !important;
    }

    .sei-pro-motion
    .sei-pro-reveal {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

}/* ==========================================================
   CAREER LINES
   LEADERSHIP & INFLUENCE — PREMIUM REDESIGN
========================================================== */

.li2-page {
    --li2-dark:#034b50;
    --li2-deep:#023f43;
    --li2-teal:#087b80;
    --li2-teal2:#11998b;
    --li2-green:#5bdc72;
    --li2-green-dark:#35bd59;
    --li2-mint:#eaf9ef;
    --li2-ice:#eef8f9;
    --li2-copy:#607779;
    --li2-line:rgba(3,75,80,.11);

    overflow:hidden;
    background:#fff;
}

.li2-page *,
.li2-page *::before,
.li2-page *::after {
    box-sizing:border-box;
}

.li2-page p {
    color:var(--li2-copy);
    font-size:15px;
    line-height:1.88;
}


/* ==========================================================
   COMMON
========================================================== */

.li2-kicker {
    display:inline-flex;
    align-items:center;
    gap:11px;

    margin-bottom:18px;

    color:var(--li2-teal);

    font-size:9px;
    font-weight:900;

    letter-spacing:1.5px;
    text-transform:uppercase;
}

.li2-kicker::before {
    content:"";

    width:27px;
    height:2px;

    border-radius:20px;

    background:var(--li2-green);
}


/* ==========================================================
   INTRO
========================================================== */

.li2-intro {
    position:relative;

    padding:105px 0 85px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(91,220,114,.16),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            #fbfefd 52%,
            #ecfaf2 100%
        );
}

.li2-bg-orb {
    position:absolute;

    border:1px solid rgba(8,123,128,.06);
    border-radius:50%;

    pointer-events:none;
}

.li2-bg-orb-one {
    width:420px;
    height:420px;

    top:-240px;
    right:-120px;
}

.li2-bg-orb-two {
    width:260px;
    height:260px;

    left:-130px;
    bottom:-110px;
}


/* META */

.li2-meta {
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:13px;

    margin-bottom:27px;
}

.li2-pill {
    display:inline-flex;
    align-items:center;

    gap:8px;

    padding:9px 14px;

    border:1px solid rgba(8,123,128,.12);
    border-radius:100px;

    background:#fff;

    color:var(--li2-teal);

    font-size:9px;
    font-weight:900;

    letter-spacing:1px;
    text-transform:uppercase;

    box-shadow:
        0 10px 28px rgba(3,75,80,.06);
}

.li2-pill i {
    color:var(--li2-green-dark);
}

.li2-meta-line {
    width:30px;
    height:1px;

    background:var(--li2-green);
}

.li2-meta small {
    color:#809293;

    font-size:9px;
    font-weight:800;

    letter-spacing:1px;
    text-transform:uppercase;
}


/* TITLE */

.li2-intro h2 {
    max-width:700px;

    margin:0 0 28px;

    color:var(--li2-dark) !important;

    font-size:clamp(48px,5vw,73px);

    line-height:.96;
    letter-spacing:-3.5px;
}

.li2-intro h2 span {
    color:var(--li2-green-dark);
}


/* COPY */

.li2-intro-text {
    max-width:690px;

    padding-left:22px;

    border-left:2px solid var(--li2-green);
}

.li2-intro-text p {
    margin-bottom:15px;
}

.li2-intro-text p:last-child {
    margin-bottom:0;
}


/* ACTION */

.li2-intro-actions {
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:28px;

    margin-top:33px;
}

.li2-primary-btn {
    display:inline-flex;

    min-height:55px;

    align-items:center;
    justify-content:center;

    gap:12px;

    padding:14px 24px;

    border-radius:6px;

    background:var(--li2-green);

    color:var(--li2-dark) !important;

    font-size:10px;
    font-weight:900;

    letter-spacing:.4px;
    text-transform:uppercase;

    box-shadow:
        0 15px 35px rgba(53,189,89,.21);

    transition:.3s ease;
}

.li2-primary-btn:hover {
    color:#fff !important;

    background:var(--li2-dark);

    transform:translateY(-3px);
}

.li2-primary-btn i {
    transition:.3s;
}

.li2-primary-btn:hover i {
    transform:translateX(5px);
}


/* MINI STAT */

.li2-mini-stat {
    display:flex;

    align-items:center;

    gap:12px;
}

.li2-mini-stat > strong {
    color:var(--li2-teal);

    font-size:36px;
    line-height:1;
}

.li2-mini-stat span {
    display:block;

    color:var(--li2-dark);

    font-size:9px;
    font-weight:900;

    text-transform:uppercase;
}

.li2-mini-stat small {
    display:block;

    color:#87999a;

    font-size:8px;
}


/* ==========================================================
   HERO VISUAL
========================================================== */

.li2-visual {
    position:relative;

    width:min(100%,570px);
    min-height:610px;

    margin-left:auto;
}

.li2-visual-layer {
    position:absolute;

    inset:70px 10px 30px 65px;

    border-radius:
        36px 36px 125px 36px;

    background:
        linear-gradient(
            135deg,
            rgba(8,123,128,.13),
            rgba(91,220,114,.17)
        );

    transform:rotate(3deg);
}

.li2-image {
    position:absolute;

    inset:38px 35px 45px 38px;

    overflow:hidden;

    border:9px solid #fff;

    border-radius:
        35px 35px 120px 35px;

    background:#d9ece8;

    box-shadow:
        0 35px 80px rgba(3,75,80,.17);
}

.li2-image img {
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        transform 1.1s cubic-bezier(.2,.75,.25,1);
}

.li2-visual:hover .li2-image img {
    transform:scale(1.04);
}

.li2-image-overlay {
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(3,63,67,.92) 100%
        );
}

.li2-image-copy {
    position:absolute;

    z-index:3;

    left:28px;
    right:28px;
    bottom:28px;
}

.li2-image-copy small {
    display:block;

    margin-bottom:8px;

    color:#82ee93;

    font-size:8px;
    font-weight:900;

    letter-spacing:1.2px;
    text-transform:uppercase;
}

.li2-image-copy h3 {
    max-width:380px;

    margin:0;

    color:#fff !important;

    font-size:33px;

    line-height:1.03;
    letter-spacing:-1.3px;
}

.li2-image-copy h3 span {
    color:#7fe990;
}


/* FLOAT */

.li2-float-card {
    position:absolute;
    z-index:6;

    display:flex;

    align-items:center;

    gap:12px;

    min-width:205px;

    padding:13px 15px;

    border:1px solid var(--li2-line);
    border-radius:15px;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 18px 42px rgba(3,75,80,.14);

    backdrop-filter:blur(12px);

    animation:
        li2Float 5s ease-in-out infinite;
}

.li2-float-card-top {
    top:14px;
    right:0;
}

.li2-float-card-bottom {
    left:5px;
    bottom:18px;

    animation-delay:-2.5s;
}

.li2-float-card > span {
    display:grid;

    width:43px;
    height:43px;

    flex:0 0 43px;

    place-items:center;

    border-radius:13px;

    background:var(--li2-green);

    color:var(--li2-dark);
}

.li2-float-card small {
    display:block;

    margin-bottom:3px;

    color:#809394;

    font-size:7px;
    font-weight:900;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.li2-float-card strong {
    color:var(--li2-dark);

    font-size:12px;
}


/* NUMBER */

.li2-number-card {
    position:absolute;
    z-index:7;

    right:0;
    bottom:72px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            var(--li2-teal),
            var(--li2-dark)
        );

    box-shadow:
        0 15px 35px rgba(3,75,80,.22);
}

.li2-number-card strong {
    color:var(--li2-green);

    font-size:33px;
}

.li2-number-card span {
    color:#fff;

    font-size:7px;
    font-weight:900;

    line-height:1.4;

    letter-spacing:.7px;
    text-transform:uppercase;
}


/* ==========================================================
   INFO STRIP
========================================================== */

.li2-info-strip {
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    overflow:hidden;

    margin-top:60px;

    border:1px solid var(--li2-line);
    border-radius:15px;

    background:#fff;

    box-shadow:
        0 15px 40px rgba(3,75,80,.07);
}

.li2-info-strip > div {
    display:flex;

    min-height:82px;

    align-items:center;
    justify-content:center;

    gap:12px;

    padding:16px;

    border-right:1px solid var(--li2-line);
}

.li2-info-strip > div:last-child {
    border-right:0;
}

.li2-info-strip strong,
.li2-info-strip i {
    color:var(--li2-teal);

    font-size:20px;
}

.li2-info-strip span {
    color:var(--li2-dark);

    font-size:9px;
    font-weight:900;

    letter-spacing:.5px;
    text-transform:uppercase;
}


/* ==========================================================
   SPECTRUM
========================================================== */

.li2-spectrum {
    position:relative;

    padding:115px 0;

    color:rgba(255,255,255,.73);

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(91,220,114,.17),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #033f43,
            #045e61 55%,
            #08776d
        );
}

.li2-spectrum::before {
    content:"";

    position:absolute;

    inset:0;

    opacity:.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:65px 65px;
}

.li2-spectrum .container {
    position:relative;
    z-index:2;
}

.li2-section-head {
    max-width:950px;

    margin:
        0 auto 55px;

    text-align:center;
}

.li2-spectrum .li2-kicker {
    color:#a4eeb0;
}

.li2-section-head h2 {
    margin:0;

    color:#fff !important;

    font-size:
        clamp(43px,4.7vw,66px);

    line-height:1;

    letter-spacing:-2.8px;
}

.li2-section-head h2 span {
    color:var(--li2-green);
}


/* SHELL */

.li2-spectrum-shell {
    display:grid;

    grid-template-columns:
        1fr .75fr 1fr;

    gap:18px;
}


/* PROFILE */

.li2-profile,
.li2-continuum {
    position:relative;

    overflow:hidden;

    padding:38px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:24px;

    background:
        rgba(255,255,255,.065);

    backdrop-filter:blur(8px);
}

.li2-profile-number {
    position:absolute;

    top:10px;
    right:20px;

    color:rgba(255,255,255,.07);

    font-size:75px;
    font-weight:900;
}

.li2-profile-icon {
    display:grid;

    width:57px;
    height:57px;

    place-items:center;

    margin-bottom:25px;

    border-radius:16px;

    background:var(--li2-green);

    color:var(--li2-dark);

    font-size:18px;
}

.li2-profile > small {
    display:block;

    margin-bottom:10px;

    color:var(--li2-green);

    font-size:8px;
    font-weight:900;

    letter-spacing:1.1px;
    text-transform:uppercase;
}

.li2-profile h3 {
    margin-bottom:20px;

    color:#fff !important;

    font-size:38px;

    line-height:.97;
}

.li2-profile h3 span {
    color:var(--li2-green);
}

.li2-profile p {
    color:rgba(255,255,255,.69);

    font-size:13px;
}

.li2-profile-tag {
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:13px;

    padding:8px 11px;

    border-radius:100px;

    background:rgba(91,220,114,.09);

    color:#a5efb0;

    font-size:8px;
    font-weight:900;

    text-transform:uppercase;
}


/* CENTER */

.li2-continuum {
    text-align:center;
}

.li2-continuum-label {
    display:block;

    margin-bottom:30px;

    color:#fff;

    font-size:9px;
    font-weight:900;

    letter-spacing:1px;
    text-transform:uppercase;
}

.li2-continuum-core {
    position:relative;

    width:200px;
    height:200px;

    margin:auto;
}

.li2-ring {
    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    transform:
        translate(-50%,-50%);
}

.li2-ring-one {
    width:100%;
    height:100%;

    border:
        1px dashed rgba(255,255,255,.22);

    animation:
        li2Rotate 22s linear infinite;
}

.li2-ring-two {
    width:72%;
    height:72%;

    border:
        1px solid rgba(91,220,114,.22);

    animation:
        li2RotateReverse 18s linear infinite;
}

.li2-continuum-center {
    position:absolute;

    left:50%;
    top:50%;

    display:flex;

    width:120px;
    height:120px;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    transform:
        translate(-50%,-50%);

    border:8px solid rgba(255,255,255,.94);
    border-radius:50%;

    background:var(--li2-teal);

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);
}

.li2-continuum-center i {
    margin-bottom:6px;

    color:var(--li2-green);
}

.li2-continuum-center strong {
    color:#fff;

    font-size:16px;
}

.li2-continuum-center small {
    color:rgba(255,255,255,.55);

    font-size:6px;

    text-transform:uppercase;
}


/* SCALE */

.li2-scale {
    margin-top:28px;
}

.li2-scale-labels {
    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    color:#fff;

    font-size:8px;
    font-weight:800;
}

.li2-scale-track {
    position:relative;

    height:7px;

    border-radius:100px;

    background:
        rgba(255,255,255,.13);
}

.li2-scale-track span {
    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #fff,
            #7addc0,
            var(--li2-green)
        );
}

.li2-scale-track i {
    position:absolute;

    left:55%;
    top:50%;

    width:20px;
    height:20px;

    transform:
        translate(-50%,-50%);

    border:5px solid #fff;
    border-radius:50%;

    background:var(--li2-teal);
}

.li2-continuum p {
    margin:
        25px 0 0;

    color:rgba(255,255,255,.60);

    font-size:11px;
}


/* CONCLUSION */

.li2-spectrum-conclusion {
    display:flex;

    align-items:center;

    gap:17px;

    margin-top:20px;

    padding:20px 23px;

    border:
        1px solid rgba(91,220,114,.18);

    border-left:
        3px solid var(--li2-green);

    border-radius:13px;

    background:
        rgba(91,220,114,.065);
}

.li2-conclusion-icon {
    display:grid;

    width:42px;
    height:42px;

    flex:0 0 42px;

    place-items:center;

    border-radius:12px;

    background:var(--li2-green);

    color:var(--li2-dark);
}

.li2-spectrum-conclusion p {
    margin:0;

    color:rgba(255,255,255,.85);
}


/* ==========================================================
   PRINCIPLE
========================================================== */

.li2-principle {
    padding:105px 0;

    background:#fff;
}

.li2-principle-shell {
    position:relative;

    display:grid;

    grid-template-columns:
        130px 1fr 300px;

    align-items:center;

    gap:45px;

    overflow:hidden;

    padding:45px;

    border:1px solid var(--li2-line);
    border-radius:25px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(91,220,114,.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff,
            #f2faf6
        );

    box-shadow:
        0 25px 65px rgba(3,75,80,.09);
}

.li2-principle-index {
    color:rgba(8,123,128,.10);

    font-size:90px;
    font-weight:900;
}

.li2-principle-copy h2 {
    margin:0;

    color:var(--li2-dark) !important;

    font-size:
        clamp(37px,3.8vw,54px);

    line-height:1;

    letter-spacing:-2px;
}

.li2-principle-copy h2 span {
    color:var(--li2-green-dark);
}

.li2-principle-side {
    display:grid;

    gap:9px;
}

.li2-principle-side > div {
    display:flex;

    align-items:center;

    gap:10px;

    padding:11px 13px;

    border:
        1px solid var(--li2-line);

    border-radius:10px;

    background:#fff;

    color:var(--li2-dark);

    font-size:10px;
    font-weight:800;
}

.li2-principle-side i {
    display:grid;

    width:25px;
    height:25px;

    place-items:center;

    border-radius:50%;

    background:var(--li2-mint);

    color:var(--li2-green-dark);

    font-size:8px;
}


/* ==========================================================
   STAGES
========================================================== */

.li2-stages {
    padding:115px 0;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(91,220,114,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fcfc,
            #edf7f8
        );
}

.li2-stage-heading h2 {
    max-width:800px;

    margin:0;

    color:var(--li2-dark) !important;

    font-size:
        clamp(43px,4.5vw,63px);

    line-height:1;

    letter-spacing:-2.6px;
}

.li2-stage-heading h2 span {
    color:var(--li2-green-dark);
}

.li2-stage-intro {
    margin:0;
}


/* ROADMAP */

.li2-stage-roadmap {
    position:relative;

    margin-top:60px;
}

.li2-stage-roadmap::before {
    content:"";

    position:absolute;

    left:50%;
    top:0;
    bottom:0;

    width:2px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            var(--li2-green),
            var(--li2-teal),
            rgba(8,123,128,.03)
        );
}

.li2-stage-item {
    position:relative;

    display:grid;

    grid-template-columns:
        1fr 100px 1fr;

    align-items:center;

    min-height:340px;
}

.li2-stage-card {
    grid-column:1;

    padding:32px 35px;

    border:1px solid var(--li2-line);
    border-radius:20px;

    background:#fff;

    box-shadow:
        0 18px 48px rgba(3,75,80,.07);

    transition:.35s ease;
}

.li2-stage-item-alt .li2-stage-card {
    grid-column:3;
}

.li2-stage-card:hover {
    transform:translateY(-6px);

    box-shadow:
        0 26px 60px rgba(3,75,80,.12);
}

.li2-stage-card small {
    display:block;

    margin-bottom:8px;

    color:var(--li2-green-dark);

    font-size:8px;
    font-weight:900;

    letter-spacing:1.2px;
    text-transform:uppercase;
}

.li2-stage-card h3 {
    margin-bottom:16px;

    color:var(--li2-dark) !important;

    font-size:27px;
}

.li2-stage-card p {
    margin-bottom:12px;

    font-size:13px;
}

.li2-stage-card p:last-child {
    margin-bottom:0;
}


/* MARKER */

.li2-stage-marker {
    position:absolute;

    z-index:4;

    left:50%;
    top:50%;

    display:flex;

    width:66px;
    height:66px;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    transform:
        translate(-50%,-50%);

    border:9px solid #eef8f8;
    border-radius:50%;

    background:var(--li2-green);

    color:var(--li2-dark);

    box-shadow:
        0 12px 30px rgba(53,189,89,.19);
}

.li2-stage-marker span {
    font-size:8px;
    font-weight:900;
}

.li2-stage-marker i {
    margin-top:2px;

    font-size:12px;
}


/* ==========================================================
   CTA
========================================================== */

.li2-cta {
    padding:
        80px 0 100px;

    background:#fff;
}

.li2-cta-shell {
    position:relative;

    display:flex;

    min-height:250px;

    align-items:center;
    justify-content:space-between;

    gap:45px;

    overflow:hidden;

    padding:48px 55px;

    border-radius:28px;

    background:
        radial-gradient(
            circle at 96% -20%,
            rgba(255,255,255,.15),
            transparent 32%
        ),
        linear-gradient(
            110deg,
            #034b50 0%,
            #087b80 53%,
            #24ae68 100%
        );

    box-shadow:
        0 30px 70px rgba(3,75,80,.16);
}

.li2-cta-shell::after {
    content:"";

    position:absolute;

    width:330px;
    height:330px;

    right:-130px;
    top:-180px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:50%;
}

.li2-cta-shell > div {
    position:relative;
    z-index:2;
}

.li2-cta small {
    display:block;

    margin-bottom:13px;

    color:rgba(255,255,255,.65);

    font-size:8px;
    font-weight:900;

    letter-spacing:1.3px;
    text-transform:uppercase;
}

.li2-cta h2 {
    max-width:800px;

    margin:0;

    color:#fff !important;

    font-size:
        clamp(42px,4.3vw,62px);

    line-height:.99;

    letter-spacing:-2.6px;
}

.li2-cta h2 span {
    color:#81ed91;
}

.li2-cta-action {
    display:flex;

    flex-direction:column;
    align-items:flex-start;

    gap:10px;

    flex-shrink:0;
}

.li2-cta-action a {
    display:inline-flex;

    min-height:56px;

    align-items:center;
    justify-content:center;

    gap:12px;

    padding:15px 24px;

    border-radius:6px;

    background:#fff;

    color:var(--li2-dark) !important;

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;

    transition:.3s ease;
}

.li2-cta-action a:hover {
    background:var(--li2-green);

    transform:translateY(-3px);
}

.li2-cta-action > span {
    color:rgba(255,255,255,.65);

    font-size:9px;
}


/* ==========================================================
   REVEAL
========================================================== */

.li2-motion .li2-reveal {
    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .72s ease var(--li2-delay,0ms),
        transform .72s cubic-bezier(.2,.75,.25,1)
        var(--li2-delay,0ms);
}

.li2-motion .li2-reveal.is-visible {
    opacity:1;

    transform:none;
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes li2Float {
    0%,100% {
        transform:translateY(0);
    }

    50% {
        transform:translateY(-9px);
    }
}

@keyframes li2Rotate {
    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}

@keyframes li2RotateReverse {
    to {
        transform:
            translate(-50%,-50%)
            rotate(-360deg);
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:991.98px) {

    .li2-visual {
        margin:
            30px auto 0;
    }

    .li2-info-strip {
        grid-template-columns:
            repeat(2,1fr);
    }

    .li2-spectrum-shell {
        grid-template-columns:1fr;
    }

    .li2-continuum {
        order:3;
    }

    .li2-principle-shell {
        grid-template-columns:
            100px 1fr;
    }

    .li2-principle-side {
        grid-column:1 / -1;

        grid-template-columns:
            1fr 1fr;
    }

    .li2-stage-roadmap::before {
        left:32px;
    }

    .li2-stage-item {
        display:block;

        min-height:auto;

        padding:
            0 0 40px 80px;
    }

    .li2-stage-card,
    .li2-stage-item-alt .li2-stage-card {
        display:block;
    }

    .li2-stage-marker {
        left:32px;
        top:35px;

        transform:
            translate(-50%,0);
    }

    .li2-cta-shell {
        align-items:flex-start;

        flex-direction:column;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:575.98px) {

    .li2-intro {
        padding:
            75px 0 60px;
    }

    .li2-intro h2 {
        font-size:43px;

        letter-spacing:-2px;
    }

    .li2-intro-text {
        padding-left:15px;
    }

    .li2-visual {
        min-height:500px;
    }

    .li2-image {
        inset:
            35px 5px 45px 15px;
    }

    .li2-float-card {
        min-width:170px;
    }

    .li2-info-strip {
        grid-template-columns:1fr;
    }

    .li2-info-strip > div {
        border-right:0;

        border-bottom:
            1px solid var(--li2-line);
    }

    .li2-spectrum,
    .li2-stages,
    .li2-principle {
        padding:
            75px 0;
    }

    .li2-profile,
    .li2-continuum {
        padding:27px 23px;
    }

    .li2-principle-shell {
        grid-template-columns:1fr;

        padding:30px 24px;
    }

    .li2-principle-index {
        font-size:60px;
    }

    .li2-principle-side {
        grid-template-columns:1fr;
    }

    .li2-cta {
        padding:
            55px 0 70px;
    }

    .li2-cta-shell {
        min-height:0;

        padding:
            38px 24px;
    }

    .li2-cta-action {
        width:100%;
    }

    .li2-cta-action a {
        width:100%;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce) {

    .li2-float-card,
    .li2-ring {
        animation:none !important;
    }

    .li2-motion .li2-reveal {
        opacity:1 !important;

        transform:none !important;

        transition:none !important;
    }

}
/* ==========================================================================
   11. CAREER LINES — ABILITIES PAGE
   PREMIUM PROFESSIONAL VERSION
   ========================================================================== */

.ability-page {
    --ab-teal: #087b80;
    --ab-teal-deep: #045c61;
    --ab-dark: #034b50;
    --ab-ink: #073f45;
    --ab-green: #5bcf6c;
    --ab-green-soft: #8be695;
    --ab-mint: #e9f8f1;
    --ab-light: #f7fcfa;
    --ab-copy: #607577;
    --ab-line: rgba(7, 63, 69, 0.11);
    --ab-shadow: 0 25px 65px rgba(7, 63, 69, 0.09);
}


/* ==========================================================
   COMMON TYPOGRAPHY
========================================================== */

.ability-page h1,
.ability-page h2,
.ability-page h3,
.ability-page h4 {
    text-wrap: balance;
}

.ability-kicker,
.ability-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ab-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.4;
    text-transform: uppercase;
}

.ability-kicker {
    margin-bottom: 15px;
}

.ability-eyebrow {
    margin-bottom: 23px;
    padding: 9px 15px;
    border: 1px solid rgba(8, 123, 128, .15);
    border-radius: 50px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 10px 30px rgba(7, 63, 69, .055);
}

.ability-main-title,
.ability-section-head h2,
.ability-engine-title,
.ability-stages h2,
.ability-cta h2 {
    color: var(--ab-ink);
    font-weight: 800;
    letter-spacing: -2px;
}

.ability-section-head h2,
.ability-engine-title,
.ability-stages h2 {
    font-size: clamp(38px, 3.6vw, 58px);
    line-height: 1.03;
}

.ability-main-title span,
.ability-section-head h2 span,
.ability-engine-title span,
.ability-stages h2 span,
.ability-cta h2 span {
    color: var(--ab-green);
}


/* ==========================================================
   HERO / INTRO SECTION
========================================================== */

.ability-hero {
    position: relative;
    padding: 105px 0 80px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(91, 207, 108, .17), transparent 24%),
        radial-gradient(circle at 5% 80%, rgba(8, 123, 128, .07), transparent 25%),
        linear-gradient(120deg, #f9fdfb 0%, #ffffff 46%, #eefaf5 100%);
}

.ability-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .25;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(8, 123, 128, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 123, 128, .04) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: linear-gradient(to right, #000, transparent 78%);
    mask-image: linear-gradient(to right, #000, transparent 78%);
}

.ability-bg-grid {
    display: none;
}

.ability-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ability-glow-one {
    top: -150px;
    right: -40px;
    width: 420px;
    height: 420px;
    background: rgba(91, 207, 108, .1);
    filter: blur(5px);
}

.ability-glow-two {
    bottom: -220px;
    left: -120px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(8, 123, 128, .08);
}


/* Main heading */

.ability-main-title {
    max-width: 680px;
    margin-bottom: 25px;
    font-size: clamp(45px, 4vw, 65px);
    line-height: .99;
}

.ability-main-title span {
    display: inline;
}

.ability-hero p {
    max-width: 690px;
    margin-bottom: 14px;
    color: var(--ab-copy);
    font-size: 15.5px;
    line-height: 1.82;
}


/* ==========================================================
   BUTTON
========================================================== */

.ability-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 52px;
    margin-top: 17px;
    padding: 13px 25px;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    color: #fff !important;
    background: linear-gradient(
        135deg,
        var(--ab-teal),
        #079498
    );
    box-shadow: 0 14px 32px rgba(8, 123, 128, .21);
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.ability-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 90%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );
    transform: skewX(-20deg);
    transition: left .65s ease;
}

.ability-btn:hover {
    color: #fff;
    box-shadow: 0 20px 42px rgba(8, 123, 128, .28);
    transform: translateY(-3px);
}

.ability-btn:hover::before {
    left: 150%;
}

.ability-btn i {
    position: relative;
    z-index: 2;
    transition: transform .3s ease;
}

.ability-btn:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   COGNITIVE ORBIT VISUAL
========================================================== */

.ability-brain-visual {
    position: relative;
    width: min(100%, 585px);
    height: 540px;
    margin-left: auto;
    isolation: isolate;
}

.ability-brain-visual::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -2;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(91,207,108,.19) 0%,
        rgba(8,123,128,.07) 38%,
        transparent 72%
    );
    transform: translate(-50%, -50%);
}

.ability-visual-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
}

.ability-ring-one {
    width: 445px;
    height: 445px;
    border: 1px solid rgba(8, 123, 128, .13);
    transform: translate(-50%, -50%);
}

.ability-ring-two {
    width: 340px;
    height: 340px;
    border: 1px dashed rgba(91, 207, 108, .35);
    transform: translate(-50%, -50%);
    animation: abilityRingRotate 34s linear infinite;
}

.ability-ring-three {
    width: 250px;
    height: 250px;
    border: 1px solid rgba(8, 123, 128, .12);
    transform: translate(-50%, -50%);
}


/* Orbit dots */

.ability-ring-one::before,
.ability-ring-two::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ab-green);
    box-shadow: 0 0 0 6px rgba(91,207,108,.12);
}

.ability-ring-one::before {
    top: 20%;
    right: 5%;
}

.ability-ring-two::before {
    left: -4px;
    top: 52%;
    background: var(--ab-teal);
}


/* Center brain */

.ability-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    width: 210px;
    height: 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    border: 9px solid rgba(255,255,255,.96);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 20%, #fff, #effbf5);
    box-shadow:
        0 32px 70px rgba(7,63,69,.18),
        0 0 0 1px rgba(8,123,128,.07);
    text-align: center;
    transform: translate(-50%, -50%);
    animation: abilityCoreFloat 4.2s ease-in-out infinite;
}

.ability-core-glow {
    position: absolute;
    inset: -30px;
    z-index: -1;
    border-radius: 50%;
    background: rgba(91,207,108,.14);
    filter: blur(16px);
    animation: abilityGlowPulse 3.6s ease-in-out infinite;
}

.ability-core-number {
    position: absolute;
    top: 17px;
    right: 31px;
    color: rgba(8,123,128,.22);
    font-size: 14px;
    font-weight: 900;
}

.ability-core-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--ab-teal),
        var(--ab-green)
    );
    box-shadow: 0 14px 28px rgba(8,123,128,.24);
    font-size: 23px;
}

.ability-core small {
    margin-bottom: 4px;
    color: var(--ab-teal);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.ability-core strong {
    color: var(--ab-ink);
    font-size: 17px;
    line-height: 1.12;
}


/* Orbit cards */

.ability-orbit-card {
    position: absolute;
    z-index: 8;
    display: flex;
    min-width: 190px;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(8, 123, 128, .12);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(7,63,69,.13);
    backdrop-filter: blur(12px);
    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.ability-orbit-card:hover {
    border-color: rgba(91,207,108,.58);
    box-shadow:
        0 25px 50px rgba(7,63,69,.18),
        0 0 0 5px rgba(91,207,108,.07);
}

.ability-orbit-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--ab-teal),
        var(--ab-green)
    );
}

.ability-orbit-card small,
.ability-orbit-card strong {
    display: block;
}

.ability-orbit-card small {
    margin-bottom: 2px;
    color: #849394;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.ability-orbit-card strong {
    color: var(--ab-ink);
    font-size: 12px;
}

.ability-orbit-verbal {
    top: 36px;
    left: 47%;
    animation: abilityFloatTop 4.1s ease-in-out infinite;
}

.ability-orbit-numeric {
    top: 48%;
    right: -5px;
    animation: abilityFloatRight 4.7s ease-in-out infinite;
}

.ability-orbit-abstract {
    bottom: 44px;
    left: 4px;
    animation: abilityFloatBottom 4.4s ease-in-out infinite;
}


/* ==========================================================
   PROOF BAR
========================================================== */

.ability-proof {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1080px;
    margin: 55px auto 0;
    overflow: hidden;
    border: 1px solid rgba(8,123,128,.1);
    border-radius: 17px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 48px rgba(7,63,69,.07);
}

.ability-proof > div {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 22px;
    border-right: 1px solid var(--ab-line);
}

.ability-proof > div:last-child {
    border-right: 0;
}

.ability-proof strong {
    color: var(--ab-teal);
    font-size: 24px;
    line-height: 1;
}

.ability-proof span {
    max-width: 130px;
    color: var(--ab-ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .45px;
    line-height: 1.45;
    text-transform: uppercase;
}


/* ==========================================================
   COGNITIVE ARCHITECTURE
========================================================== */

.ability-architecture {
    padding: 105px 0 115px;
    background:
        radial-gradient(circle at 94% 10%, rgba(91,207,108,.08), transparent 18%),
        #fff;
}

.ability-section-head {
    max-width: 810px;
    margin: 0 auto 48px;
}

.ability-section-head p {
    max-width: 680px;
    margin: 17px auto 0;
    color: var(--ab-copy);
    font-size: 14px;
    line-height: 1.8;
}

.ability-vector-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
}

.ability-vector-card {
    position: relative;
    display: flex;
    min-height: 560px;
    flex-direction: column;
    padding: 29px 27px 25px;
    overflow: hidden;
    border: 1px solid rgba(8,123,128,.1);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(91,207,108,.12), transparent 30%),
        #fff;
    box-shadow: 0 17px 45px rgba(7,63,69,.06);
    transform-style: preserve-3d;
    transition:
        transform .35s cubic-bezier(.2,.75,.25,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

.ability-vector-card::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -65px;
    width: 150px;
    height: 150px;
    border: 22px solid rgba(8,123,128,.035);
    border-radius: 50%;
}

.ability-vector-card:hover {
    border-color: rgba(91,207,108,.5);
    box-shadow: 0 27px 60px rgba(7,63,69,.11);
    transform: translateY(-8px);
}

.ability-vector-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.ability-vector-number {
    color: rgba(8,123,128,.14);
    font-size: 28px;
    font-weight: 900;
}

.ability-vector-icon {
    display: flex;
    width: 53px;
    height: 53px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--ab-teal),
        var(--ab-green)
    );
    box-shadow: 0 12px 26px rgba(8,123,128,.2);
    transition: transform .35s ease;
}

.ability-vector-card:hover .ability-vector-icon {
    transform: translateY(-4px) rotate(-5deg);
}

.ability-vector-label {
    display: block;
    min-height: 26px;
    margin-bottom: 8px;
    color: var(--ab-teal);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .75px;
    line-height: 1.5;
    text-transform: uppercase;
}

.ability-vector-card h3 {
    margin-bottom: 16px;
    color: var(--ab-ink);
    font-size: 27px;
    line-height: .98;
}

.ability-vector-card h3 span {
    display: block;
    color: var(--ab-green);
}

.ability-vector-card > p {
    margin-bottom: 14px;
    color: var(--ab-copy);
    font-size: 12.5px;
    line-height: 1.78;
}
.ability-signal-list {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.ability-signal-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ab-ink);
    font-size: 10px;
    font-weight: 700;
}

.ability-signal-list i {
    display: inline-flex;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ab-teal);
    background: var(--ab-mint);
    font-size: 7px;
}

.ability-vector-footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--ab-line);
}

.ability-vector-footer small,
.ability-vector-footer strong {
    display: block;
}

.ability-vector-footer small {
    margin-bottom: 2px;
    color: #879597;
    font-size: 8px;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.ability-vector-footer strong {
    color: var(--ab-teal);
    font-size: 11px;
}


/* ==========================================================
   COGNITIVE PROFILE / DASHBOARD
========================================================== */

.ability-engine-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 93% 16%, rgba(91,207,108,.16), transparent 24%),
        radial-gradient(circle at 3% 85%, rgba(8,123,128,.07), transparent 25%),
        #f2faf7;
}

.ability-engine {
    position: relative;
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(8,123,128,.11);
    border-radius: 25px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 28px 70px rgba(7,63,69,.1);
}

.ability-engine::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(91,207,108,.13);
}

.ability-engine::after {
    content: "05";
    position: absolute;
    right: 25px;
    bottom: -28px;
    color: rgba(8,123,128,.035);
    font-size: 130px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.ability-engine-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 21px;
    border-bottom: 1px solid var(--ab-line);
}

.ability-engine-header small,
.ability-engine-header strong {
    display: block;
}

.ability-engine-header small {
    margin-bottom: 4px;
    color: var(--ab-teal);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.ability-engine-header strong {
    color: var(--ab-ink);
    font-size: 17px;
}

.ability-engine-header > span {
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--ab-teal),
        var(--ab-green)
    );
    box-shadow: 0 10px 25px rgba(8,123,128,.18);
}

.ability-meter {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

.ability-meter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ability-meter-head span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ab-ink);
    font-size: 10px;
    font-weight: 800;
}

.ability-meter-head span i {
    color: var(--ab-teal);
}

.ability-meter-head strong {
    color: var(--ab-green);
    font-size: 8px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.ability-meter-track {
    height: 7px;
    overflow: hidden;
    border-radius: 20px;
    background: #e2eeeb;
}

.ability-meter-track > span {
    display: block;
    width: var(--ability-progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--ab-teal),
        var(--ab-green)
    );
    transform: scaleX(0);
    transform-origin: left;
}

.ability-meter-track > span.ability-meter-active {
    animation: abilityMeterGrow 1.55s cubic-bezier(.2,.8,.25,1) forwards;
}

.ability-engine-result {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 17px;
    border: 1px solid rgba(8,123,128,.07);
    border-radius: 14px;
    background: linear-gradient(135deg,#ecf9f3,#f9fdfb);
}

.ability-engine-result > span {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: var(--ab-teal);
}

.ability-engine-result small,
.ability-engine-result strong {
    display: block;
}

.ability-engine-result small {
    margin-bottom: 2px;
    color: var(--ab-teal);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ability-engine-result strong {
    color: var(--ab-ink);
    font-size: 10px;
    line-height: 1.5;
}

.ability-engine-title {
    max-width: 600px;
    margin-bottom: 22px;
}

.ability-engine-section .col-lg-6 > p {
    margin-bottom: 13px;
    color: var(--ab-copy);
    font-size: 13px;
    line-height: 1.78;
}

.ability-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 5px;
    padding: 15px 0;
    border-top: 1px solid var(--ab-line);
    transition: transform .3s ease;
}

.ability-feature-row:hover {
    transform: translateX(5px);
}

.ability-feature-row > span {
    display: flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--ab-teal);
    background: var(--ab-mint);
}

.ability-feature-row strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ab-ink);
    font-size: 11px;
}

.ability-feature-row p {
    margin: 0;
    color: var(--ab-copy);
    font-size: 10px;
    line-height: 1.55;
}


/* ==========================================================
   LIFE STAGES
========================================================== */

.ability-stages {
    position: relative;
    padding: 105px 0 110px;
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 10%, rgba(91,207,108,.12), transparent 24%),
        linear-gradient(120deg, #034b50 0%, #05777b 100%);
}

.ability-stages::before {
    content: "05";
    position: absolute;
    right: 4%;
    bottom: -105px;
    color: rgba(255,255,255,.025);
    font-size: 330px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.ability-kicker-light {
    color: var(--ab-green);
}

.ability-stages h2 {
    max-width: 720px;
    margin-bottom: 0;
    color: #fff;
}

.ability-stages h2 span {
    display: inline;
}

.ability-stage-intro {
    max-width: 360px;
    margin: 0 0 5px auto;
    color: rgba(255,255,255,.67);
    font-size: 12px;
    line-height: 1.7;
}

.ability-stage-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
}

.ability-stage-card {
    position: relative;
    display: flex;
    min-height: 350px;
    flex-direction: column;
    padding: 25px 22px 21px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 17px;
    background: rgba(255,255,255,.07);
    box-shadow: 0 16px 35px rgba(0,0,0,.08);
    backdrop-filter: blur(8px);
    transition:
        transform .35s cubic-bezier(.2,.75,.25,1),
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.ability-stage-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--ab-green),
        #a5efad
    );
    transition: width .4s ease;
}

.ability-stage-card:hover {
    border-color: rgba(91,207,108,.42);
    background: rgba(255,255,255,.11);
    box-shadow: 0 23px 45px rgba(0,0,0,.15);
    transform: translateY(-8px);
}

.ability-stage-card:hover::before {
    width: 100%;
}

.ability-stage-number {
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(255,255,255,.11);
    font-size: 27px;
    font-weight: 900;
}

.ability-stage-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 23px;
    border-radius: 13px;
    color: var(--ab-dark);
    background: var(--ab-green);
    box-shadow: 0 12px 25px rgba(0,0,0,.12);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.ability-stage-card:hover .ability-stage-icon {
    box-shadow: 0 16px 30px rgba(0,0,0,.17);
    transform: rotate(-5deg) scale(1.06);
}

.ability-stage-card small {
    display: block;
    margin-bottom: 8px;
    color: var(--ab-green);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ability-stage-card h3 {
    min-height: 52px;
    margin-bottom: 13px;
    color: #fff;
    font-size: 18px;
    line-height: 1.22;
}

.ability-stage-card p {
    margin-bottom: 22px;
    color: rgba(255,255,255,.66);
    font-size: 10.5px;
    line-height: 1.68;
}

.ability-stage-outcome {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.11);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

.ability-stage-outcome i {
    color: var(--ab-green);
}


/* ==========================================================
   CTA
========================================================== */

.ability-cta {
    padding: 78px 0;
    background: #fff;
}

.ability-cta-shell {
    position: relative;
    display: flex;
    min-height: 200px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 46px;
    overflow: hidden;
    border: 1px solid rgba(8,123,128,.11);
    border-radius: 23px;
    background:
        radial-gradient(circle at 94% 0, rgba(91,207,108,.18), transparent 27%),
        linear-gradient(130deg,#f8fdfb,#fff);
    box-shadow: 0 23px 60px rgba(7,63,69,.07);
}

.ability-cta-shell::before {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(8,123,128,.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(8,123,128,.025),
        0 0 0 70px rgba(91,207,108,.025);
}

.ability-cta h2 {
    position: relative;
    z-index: 2;
    max-width: 670px;
    margin: 0;
    font-size: clamp(35px,3.2vw,52px);
    line-height: 1;
}

.ability-cta-action {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
}

.ability-cta-action .ability-btn {
    margin-top: 0;
}

.ability-cta-action small {
    margin-top: 10px;
    color: #75888a;
    font-size: 8px;
}

.ability-cta-action small i {
    margin-right: 5px;
    color: var(--ab-teal);
}


/* ==========================================================
   SCROLL REVEAL
========================================================== */

.ability-motion-ready .ability-reveal {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(30px);
    transition:
        opacity .75s cubic-bezier(.2,.75,.25,1),
        transform .75s cubic-bezier(.2,.75,.25,1),
        filter .75s ease;
    transition-delay: var(--ability-delay,0ms);
}

.ability-motion-ready .ability-reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes abilityRingRotate {
    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes abilityCoreFloat {
    0%,
    100% {
        transform: translate(-50%,-50%) translateY(0);
    }

    50% {
        transform: translate(-50%,-50%) translateY(-7px);
    }
}

@keyframes abilityGlowPulse {
    0%,
    100% {
        opacity: .55;
        transform: scale(.93);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes abilityFloatTop {
    0%,
    100% {
        transform: translate(-50%,0);
    }

    50% {
        transform: translate(-50%,-8px);
    }
}

@keyframes abilityFloatRight {
    0%,
    100% {
        transform: translate(0,-50%);
    }

    50% {
        transform: translate(7px,-50%);
    }
}

@keyframes abilityFloatBottom {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes abilityMeterGrow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media screen and (max-width: 1199px) {

    .ability-main-title {
        font-size: 50px;
    }

    .ability-brain-visual {
        transform: scale(.92);
    }

    .ability-stage-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ability-stage-card {
        min-height: 310px;
    }

}


/* ==========================================================
   TABLET / MOBILE
========================================================== */

@media screen and (max-width: 991px) {

    .ability-hero,
    .ability-architecture,
    .ability-engine-section,
    .ability-stages {
        padding: 80px 0;
    }

    .ability-brain-visual {
        margin: 15px auto 0;
        transform: none;
    }

    .ability-vector-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
        margin: 0 auto;
    }

    .ability-vector-card {
        min-height: auto;
    }

    .ability-stage-intro {
        margin-left: 0;
    }

    .ability-cta-shell {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media screen and (max-width: 767px) {

    .ability-hero {
        padding: 65px 0 70px;
    }

    .ability-main-title {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .ability-hero p {
        font-size: 14px;
    }

    .ability-brain-visual {
        width: 100%;
        height: 490px;
        transform: scale(.82);
    }

    .ability-proof {
        grid-template-columns: 1fr;
    }

    .ability-proof > div {
        justify-content: flex-start;
        min-height: 72px;
        border-right: 0;
        border-bottom: 1px solid var(--ab-line);
    }

    .ability-proof > div:last-child {
        border-bottom: 0;
    }

    .ability-section-head h2,
    .ability-engine-title,
    .ability-stages h2 {
        font-size: 37px;
    }

    .ability-stage-grid {
        grid-template-columns: 1fr;
    }

    .ability-stage-card {
        min-height: auto;
    }

    .ability-engine {
        padding: 26px 21px;
    }

    .ability-cta {
        padding: 62px 0;
    }

    .ability-cta-shell {
        min-height: 0;
        padding: 34px 24px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media screen and (max-width: 575px) {

    .ability-brain-visual {
        left: 50%;
        width: 470px;
        max-width: none;
        height: 470px;
        margin-left: -235px;
        transform: scale(.7);
    }

    .ability-vector-card {
        padding: 25px 22px;
    }

    .ability-vector-card h3 {
        font-size: 25px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .ability-core,
    .ability-core-glow,
    .ability-ring-two,
    .ability-orbit-card {
        animation: none !important;
    }

    .ability-reveal {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

}
/* ==========================================================================
   12. ABILITIES PAGE — FINAL PREMIUM POLISH
   Added after the original Abilities CSS so future edits stay easy.
   ========================================================================== */

/* ---------- HERO BALANCE ---------- */
.ability-hero .row {
    position: relative;
    z-index: 2;
}

.ability-hero .col-lg-6:first-child {
    padding-right: 34px;
}

.ability-main-title {
    max-width: 650px;
}

.ability-brain-visual {
    width: min(100%, 620px);
    height: 565px;
}

.ability-core {
    box-shadow:
        0 34px 78px rgba(7,63,69,.18),
        0 0 0 1px rgba(8,123,128,.07),
        0 0 0 18px rgba(91,207,108,.035);
}

/* ---------- SECTION TITLE DETAIL ---------- */
.ability-section-head h2,
.ability-engine-title,
.ability-stages h2 {
    position: relative;
}

.ability-engine-title span {
    position: relative;
    display: inline-block;
}

.ability-engine-title span::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: -8px;
    width: 78px;
    height: 3px;
    border-radius: 30px;
    background: linear-gradient(90deg, var(--ab-teal), var(--ab-green));
}

/* ---------- COGNITIVE ARCHITECTURE CARDS ---------- */
.ability-vector-grid {
    gap: 24px;
}

.ability-vector-card {
    min-height: 610px;
    padding: 34px 31px 29px;
}

.ability-vector-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
}

.ability-vector-card h3 {
    margin-bottom: 18px;
    font-size: 30px;
    line-height: 1;
}

.ability-vector-card > p + p {
    margin-top: 3px;
    padding-top: 16px;
    border-top: 1px solid rgba(8,123,128,.09);
}

.ability-signal-list {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(8,123,128,.12);
}

/* ---------- COGNITIVE PROFILE ---------- */
.ability-engine {
    border: 1px solid rgba(8,123,128,.15);
    box-shadow:
        0 32px 78px rgba(7,63,69,.12),
        0 0 0 8px rgba(255,255,255,.52);
}

.ability-engine-section .row {
    position: relative;
    z-index: 2;
}

.ability-feature-row {
    border-radius: 12px;
    padding-left: 10px;
    padding-right: 10px;
}

.ability-feature-row:hover {
    background: rgba(255,255,255,.6);
}

/* ---------- LIFE STAGES: 2 x 2 PREMIUM LAYOUT ---------- */
.ability-stages {
    padding: 115px 0 120px;
}

.ability-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.ability-stage-card {
    min-height: 390px;
    padding: 32px 31px 28px;
    border-color: rgba(255,255,255,.13);
    border-radius: 21px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.055));
}

.ability-stage-card:nth-child(2),
.ability-stage-card:nth-child(3) {
    background:
        linear-gradient(145deg, rgba(91,207,108,.10), rgba(255,255,255,.055));
}

.ability-stage-number {
    top: 22px;
    right: 25px;
    font-size: 48px;
    color: rgba(255,255,255,.075);
}

.ability-stage-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 16px;
}

.ability-stage-card small {
    font-size: 9px;
    letter-spacing: .9px;
}

.ability-stage-card h3 {
    min-height: 0;
    margin-bottom: 17px;
    font-size: 25px;
    line-height: 1.12;
}

.ability-stage-card p {
    margin-bottom: 14px;
    color: rgba(255,255,255,.76);
    font-size: 12.5px;
    line-height: 1.76;
}

.ability-stage-outcome {
    margin-top: auto;
    padding-top: 17px;
    font-size: 10px;
}

/* subtle connector line between the 2x2 cards */
.ability-stage-grid::before {
    content: "";
    position: absolute;
    inset: 50% 8% auto 8%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(91,207,108,.22),
        transparent
    );
    pointer-events: none;
}

/* ---------- CTA ---------- */
.ability-cta {
    padding: 92px 0 100px;
    background:
        radial-gradient(circle at 8% 100%, rgba(8,123,128,.05), transparent 26%),
        #fff;
}

.ability-cta-shell {
    min-height: 240px;
    padding: 50px 56px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 94% 0, rgba(91,207,108,.22), transparent 28%),
        radial-gradient(circle at 7% 100%, rgba(8,123,128,.08), transparent 25%),
        linear-gradient(130deg,#f7fdf9,#ffffff);
    box-shadow:
        0 32px 78px rgba(7,63,69,.10),
        0 0 0 1px rgba(255,255,255,.85) inset;
}

.ability-cta h2 {
    max-width: 720px;
    font-size: clamp(40px,3.6vw,58px);
}

.ability-cta-action .ability-btn {
    min-height: 58px;
    padding-inline: 28px;
}

/* ---------- ACCESSIBILITY / FOCUS ---------- */
.ability-page a:focus-visible {
    outline: 3px solid rgba(91,207,108,.55);
    outline-offset: 4px;
}

/* ---------- RESPONSIVE ---------- */
@media screen and (max-width: 1199px) {
    .ability-vector-card {
        min-height: 650px;
    }

    .ability-stage-card {
        min-height: 410px;
    }
}

@media screen and (max-width: 991px) {
    .ability-hero .col-lg-6:first-child {
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .ability-vector-card {
        min-height: auto;
    }

    .ability-stage-grid {
        grid-template-columns: 1fr;
        max-width: 760px;
        margin-inline: auto;
    }

    .ability-stage-grid::before {
        display: none;
    }

    .ability-stage-card {
        min-height: auto;
    }

    .ability-cta-shell {
        padding: 42px 36px;
    }
}

@media screen and (max-width: 767px) {
    .ability-vector-card {
        padding: 28px 24px;
    }

    .ability-vector-card h3 {
        font-size: 27px;
    }

    .ability-stage-card {
        padding: 27px 23px 24px;
    }

    .ability-stage-card h3 {
        font-size: 22px;
    }

    .ability-stage-card p {
        font-size: 12px;
    }

    .ability-cta {
        padding: 65px 0 72px;
    }

    .ability-cta-shell {
        padding: 35px 24px;
    }
}

/* faiz *



/* ==========================================================================
   CAREER LINES — INSTITUTIONS & PARTNERS PAGE
   Merged from institutions page inline CSS
   Keep this section in the global styles.css
   ========================================================================== */

/* ==================================================
   CAREER LINES — INSTITUTIONS & PARTNERS
   Motivo-aligned page styles. Header and footer remain
   controlled by the original theme.
================================================== */

:root {
    --inst-primary: #61ce70;
    --inst-primary-dark: #2eb77d;
    --inst-teal: #087e83;
    --inst-teal-deep: #00575c;
    --inst-dark: #00464b;
    --inst-ink: #003e43;
    --inst-muted: #657d81;
    --inst-pale: #eaf6f8;
    --inst-white: #ffffff;
    --inst-line: rgba(0, 70, 75, .11);
}

.institutions-page {
    color: var(--inst-muted);
}

.institutions-page .page-title-section {
    background-position: center 46%;
    min-height: 320px;
}

.institutions-page .page-title-section h1 {
    color: #fff;
}

.institutions-page section {
    overflow: hidden;
    position: relative;
}

/* Prevent blank sections when the original WOW initializer is unavailable. */
.institutions-page .wow {
    visibility: visible !important;
}

/* Independent reveal system. Elements remain visible when JavaScript is off. */
.institutions-animations-ready .institution-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .72s ease, transform .72s cubic-bezier(.2, .75, .25, 1);
}

.institutions-animations-ready .institution-reveal.from-left {
    transform: translate3d(-38px, 0, 0);
}

.institutions-animations-ready .institution-reveal.from-right {
    transform: translate3d(38px, 0, 0);
}

.institutions-animations-ready .institution-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.institutions-display {
    color: var(--inst-ink);
    font-size: clamp(3.2rem, 5.1vw, 5.6rem);
    max-width: 760px;
}

.institutions-display span,
.institutions-heading h2 span,
.institutions-form-copy h2 span {
    color: var(--inst-primary);
}

.institutions-lead {
    font-size: 1.06rem;
    line-height: 1.85;
    margin-bottom: 15px;
    max-width: 680px;
}

.institutions-supporting {
    border-left: 3px solid var(--inst-primary);
    color: var(--inst-ink);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 660px;
    padding: 7px 0 7px 16px;
}

.institutions-kicker {
    align-items: center;
    color: var(--inst-teal);
    display: inline-flex;
    font-size: .73rem;
    font-weight: 800;
    gap: 9px;
    letter-spacing: 1.45px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.institutions-kicker.light {
    color: var(--inst-primary);
}

.institutions-heading {
    margin: 0 auto 55px;
    max-width: 980px;
}

.institutions-heading h2 {
    color: var(--inst-ink);
    margin-bottom: 18px;
}

.institutions-heading p {
    line-height: 1.8;
    margin: 0 auto;
    max-width: 760px;
}

/* Hero */
.institutions-hero {
    padding: 115px 0 125px;
}

.institutions-shape {
    border: 1px solid rgba(8, 126, 131, .09);
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
}

.institutions-shape-one {
    height: 430px;
    left: -240px;
    top: 50px;
    width: 430px;
}

.institutions-shape-two {
    background: rgba(97, 206, 112, .08);
    bottom: -320px;
    height: 600px;
    right: -170px;
    width: 600px;
}

.institutions-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.institutions-outline-btn {
    align-items: center;
    border: 1px solid rgba(0, 70, 75, .2);
    border-radius: 3px;
    color: var(--inst-ink);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    gap: 9px;
    letter-spacing: .5px;
    min-height: 52px;
    padding: 12px 22px;
    text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.institutions-outline-btn:hover {
    background: var(--inst-dark);
    border-color: var(--inst-dark);
    color: #fff;
}

.institutions-audiences {
    border-top: 1px solid var(--inst-line);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 34px;
    max-width: 670px;
    padding-top: 24px;
}

.institutions-audiences span {
    align-items: center;
    color: var(--inst-ink);
    display: flex;
    font-size: .75rem;
    font-weight: 800;
    gap: 8px;
}

.institutions-audiences i {
    color: var(--inst-primary-dark);
}

.institutions-hero-visual {
    margin-left: auto;
    max-width: 580px;
    padding: 25px 26px 38px;
    position: relative;
}

.institutions-hero-visual::before {
    background: linear-gradient(145deg, rgba(8, 126, 131, .13), rgba(97, 206, 112, .28));
    border-radius: 28px 80px 28px 28px;
    content: "";
    inset: 0 0 25px 38px;
    position: absolute;
    transform: rotate(3deg);
}

.institutions-image-frame {
    background: #fff;
    border: 8px solid #fff;
    border-radius: 23px 74px 23px 23px;
    box-shadow: 0 28px 65px rgba(0, 70, 75, .17);
    height: 535px;
    overflow: hidden;
    position: relative;
}

.institutions-image-frame img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.institutions-float-card {
    align-items: center;
    animation: institutionFloat 4.8s ease-in-out infinite;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 13px;
    box-shadow: 0 16px 38px rgba(0, 70, 75, .15);
    display: flex;
    gap: 11px;
    min-width: 205px;
    padding: 13px 15px;
    position: absolute;
    z-index: 2;
}

.institutions-float-card > i {
    align-items: center;
    background: linear-gradient(135deg, var(--inst-teal), var(--inst-primary));
    border-radius: 9px;
    color: #fff;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.institutions-float-card strong,
.institutions-float-card span {
    display: block;
}

.institutions-float-card strong {
    color: var(--inst-ink);
    font-size: .81rem;
}

.institutions-float-card span {
    font-size: .65rem;
}

.institutions-float-top {
    right: -10px;
    top: 78px;
}

.institutions-float-bottom {
    animation-delay: -2.2s;
    bottom: 5px;
    left: -8px;
}

.institutions-visual-stat {
    background: var(--inst-dark);
    border-radius: 12px;
    bottom: 9px;
    color: #fff;
    padding: 13px 17px;
    position: absolute;
    right: 7px;
    z-index: 2;
}

.institutions-visual-stat strong,
.institutions-visual-stat span {
    display: block;
}

.institutions-visual-stat strong {
    color: var(--inst-primary);
    font-size: 1.22rem;
}

.institutions-visual-stat span {
    font-size: .62rem;
    text-transform: uppercase;
}

@keyframes institutionFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* Sector cards */
.institutions-sectors {
    background: #f9fcfc;
    padding: 120px 0;
}

.institution-sector-card {
    background: #fff;
    border: 1px solid rgba(0, 70, 75, .08);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(0, 70, 75, .07);
    height: 100%;
    min-height: 430px;
    overflow: hidden;
    padding: 32px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.institution-sector-card::after {
    background: linear-gradient(90deg, var(--inst-teal), var(--inst-primary));
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    width: 100%;
}

.institution-sector-card:hover {
    border-color: rgba(97, 206, 112, .45);
    box-shadow: 0 26px 54px rgba(0, 70, 75, .12);
    transform: translateY(-7px);
}

.institution-sector-card:hover::after {
    transform: scaleX(1);
}

.institution-sector-top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
}

.institution-sector-icon {
    align-items: center;
    background: linear-gradient(135deg, var(--inst-teal), var(--inst-primary));
    border-radius: 12px;
    box-shadow: 0 11px 22px rgba(46, 183, 125, .18);
    color: #fff;
    display: flex;
    font-size: 1.08rem;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.institution-sector-number {
    color: rgba(0, 70, 75, .09);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}

.institution-sector-card h3 {
    color: var(--inst-ink);
    font-size: 1.35rem;
    margin-bottom: 24px;
}

.institution-sector-detail {
    border-top: 1px solid var(--inst-line);
    margin-top: 17px;
    padding-top: 17px;
}

.institution-sector-detail strong {
    color: var(--inst-teal);
    display: block;
    font-size: .73rem;
    letter-spacing: .6px;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.institution-sector-detail p {
    font-size: .84rem;
    line-height: 1.72;
    margin: 0;
}

/* Value and dashboard */
.institutions-value {
    padding: 120px 0;
}

.institutions-dashboard {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    box-shadow: 0 24px 58px rgba(0, 30, 34, .22);
    margin-right: 35px;
    padding: 24px;
}

.institutions-dashboard-head {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 29px;
    padding-bottom: 18px;
}

.institutions-dashboard-head > div {
    display: flex;
    gap: 5px;
}

.institutions-dashboard-head > div span {
    background: rgba(255, 255, 255, .3);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.institutions-dashboard-head strong {
    font-size: .7rem;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.institutions-dashboard-head small {
    align-items: center;
    display: flex;
    gap: 6px;
}

.institutions-dashboard-head small i {
    background: var(--inst-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(97, 206, 112, .14);
    height: 7px;
    width: 7px;
}

.institutions-dashboard-metric {
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 16px;
}

.institutions-dashboard-metric > div:first-child {
    color: rgba(255, 255, 255, .78);
    display: flex;
    font-size: .76rem;
    justify-content: space-between;
    margin-bottom: 10px;
}

.institutions-dashboard-metric strong {
    color: var(--inst-primary);
}

.institutions-progress {
    background: rgba(255, 255, 255, .11);
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
}

.institutions-progress i {
    animation: institutionProgress 1.2s ease both;
    background: linear-gradient(90deg, var(--inst-primary), #adf2a5);
    border-radius: inherit;
    display: block;
    height: 100%;
    width: var(--progress);
}

@keyframes institutionProgress {
    from { width: 0; }
}

.institutions-dashboard-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
}

.institutions-dashboard-summary > div {
    align-items: center;
    background: #fff;
    border-radius: 11px;
    display: flex;
    gap: 10px;
    padding: 14px;
}

.institutions-dashboard-summary i {
    color: var(--inst-primary-dark);
}

.institutions-dashboard-summary strong,
.institutions-dashboard-summary span {
    display: block;
}

.institutions-dashboard-summary strong {
    color: var(--inst-ink);
    font-size: .75rem;
}

.institutions-dashboard-summary span {
    font-size: .62rem;
}

.institutions-value-list {
    display: grid;
    gap: 12px;
}

.institutions-value-list article {
    align-items: flex-start;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    display: flex;
    gap: 15px;
    padding: 17px;
    transition: background-color .25s ease, transform .25s ease;
}

.institutions-value-list article:hover {
    background: rgba(255, 255, 255, .1);
    transform: translateX(5px);
}

.institutions-value-list article > span {
    align-items: center;
    background: var(--inst-primary);
    border-radius: 50%;
    color: var(--inst-dark);
    display: flex;
    flex: 0 0 38px;
    font-size: .67rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
}

.institutions-value-list h3 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 6px;
}

.institutions-value-list p {
    color: rgba(255, 255, 255, .68);
    font-size: .78rem;
    line-height: 1.65;
    margin: 0;
    text-align: justify;
}

/* Process */
.institutions-process {
    padding: 120px 0;
}

.institutions-process-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
}

.institutions-process-card {
    background: #fff;
    border: 1px solid rgba(0, 70, 75, .08);
    border-radius: 15px;
    box-shadow: 0 13px 34px rgba(0, 70, 75, .07);
    min-height: 285px;
    padding: 27px 23px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}

.institutions-process-card:hover {
    box-shadow: 0 22px 46px rgba(0, 70, 75, .12);
    transform: translateY(-7px);
}

.institutions-process-card > span {
    color: rgba(0, 70, 75, .09);
    font-size: 2.8rem;
    font-weight: 900;
    position: absolute;
    right: 17px;
    top: 12px;
}

.institutions-process-card > i {
    align-items: center;
    background: linear-gradient(135deg, var(--inst-teal), var(--inst-primary));
    border-radius: 10px;
    color: #fff;
    display: flex;
    height: 44px;
    justify-content: center;
    margin-bottom: 38px;
    width: 44px;
}

.institutions-process-card h3 {
    color: var(--inst-ink);
    font-size: 1rem;
    margin-bottom: 11px;
}

.institutions-process-card p {
    font-size: .75rem;
    line-height: 1.7;
    margin: 0;
    text-align: justify;
}

/* Form */
.institutions-form-section {
    background: #f7fbfb;
    padding: 115px 0;
}

.institutions-form-shell {
    background:
        radial-gradient(circle at 2% 4%, rgba(97, 206, 112, .17), transparent 27%),
        linear-gradient(135deg, var(--inst-dark), var(--inst-teal));
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 70, 75, .18);
    display: grid;
    gap: 55px;
    grid-template-columns: .82fr 1.18fr;
    overflow: hidden;
    padding: 62px;
    position: relative;
}

.institutions-form-copy {
    align-self: center;
}

.institutions-form-copy h2 {
    margin-bottom: 22px;
}

.institutions-form-copy > p {
    color: rgba(255, 255, 255, .7);
    line-height: 1.8;
}

.institutions-form-trust {
    border-top: 1px solid rgba(255, 255, 255, .13);
    display: grid;
    gap: 12px;
    margin-top: 29px;
    padding-top: 22px;
}

.institutions-form-trust span {
    color: rgba(255, 255, 255, .8);
    font-size: .76rem;
}

.institutions-form-trust i {
    color: var(--inst-primary);
    margin-right: 8px;
}

.institutions-form {
    background: rgba(255, 255, 255, .96);
    border-radius: 17px;
    padding: 31px;
}

.institutions-form label {
    color: var(--inst-ink);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .35px;
    margin-bottom: 8px;
}

.institutions-form input,
.institutions-form select {
    background: #f5f9f9;
    border: 1px solid rgba(0, 70, 75, .11);
    border-radius: 6px;
    color: var(--inst-ink);
    font-size: .8rem;
    height: 52px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    width: 100%;
}

.institutions-form input:focus,
.institutions-form select:focus {
    background: #fff;
    border-color: var(--inst-primary-dark);
    box-shadow: 0 0 0 4px rgba(97, 206, 112, .12);
}

.institutions-form button {
    cursor: pointer;
    width: 100%;
}

/* Responsive */
@media screen and (max-width: 1199px) {
    .institutions-process-grid { grid-template-columns: repeat(2, 1fr); }
    .institutions-form-shell { padding: 50px 42px; }
    .institutions-display { font-size: clamp(3rem, 4.8vw, 4.6rem); }
}

@media screen and (max-width: 991px) {
    .institutions-hero,
    .institutions-sectors,
    .institutions-value,
    .institutions-process,
    .institutions-form-section { padding: 90px 0; }

    .institutions-hero-visual { margin: 25px auto 0; }
    .institutions-dashboard { margin: 0 0 35px; }
    .institutions-form-shell { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
    .institutions-page .page-title-section { min-height: 270px; }
    .institutions-display { font-size: 3rem; }
    .institutions-audiences { grid-template-columns: repeat(2, 1fr); }
    .institutions-image-frame { height: 470px; }
    .institutions-process-grid { grid-template-columns: 1fr; }
    .institutions-process-card { min-height: 0; }
    .institutions-form-shell { gap: 35px; padding: 38px 25px; }
}

@media screen and (max-width: 575px) {
    .institutions-hero,
    .institutions-sectors,
    .institutions-value,
    .institutions-process,
    .institutions-form-section { padding: 70px 0; }

    .institutions-display { font-size: 2.5rem; }
    .institutions-actions { align-items: stretch; flex-direction: column; }
    .institutions-outline-btn { justify-content: center; }
    .institutions-hero-visual { padding-left: 0; padding-right: 0; }
    .institutions-image-frame { height: 420px; }
    .institutions-float-card { min-width: 180px; padding: 10px 12px; }
    .institutions-float-top { right: 5px; }
    .institutions-float-bottom { left: 5px; }
    .institutions-visual-stat { display: none; }
    .institution-sector-card { min-height: 0; padding: 27px 22px; }
    .institutions-dashboard { padding: 18px; }
    .institutions-dashboard-head strong { display: none; }
    .institutions-dashboard-summary { grid-template-columns: 1fr; }
    .institutions-form { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .institutions-float-card,
    .institutions-progress i { animation: none; }

    .institution-sector-card,
    .institutions-value-list article,
    .institutions-process-card { transition: none; }
}


/* ==========================================================================
   CAREER LINES — FAQ PAGE
   Merged from FAQ page inline CSS
   Keep this section in the global styles.css
   ========================================================================== */

/* Career Lines categorized FAQ */
        .career-faq-section {
            position: relative;
            overflow: hidden;
        }

        .career-faq-intro {
            max-width: 820px;
            margin: 0 auto 55px;
            text-align: center;
        }

        .career-faq-intro p {
            max-width: 690px;
            margin: 24px auto 0;
        }

        .career-faq-wrapper {
            max-width: 1180px;
            margin: 0 auto;
        }

        .career-faq-group {
            margin-bottom: 60px;
        }

        .career-faq-group:last-child {
            margin-bottom: 0;
        }

        .career-faq-group-title {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 24px;
            color: #fff;
            font-size: 25px;
            font-weight: 700;
        }

        .career-faq-group-title span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border-radius: 50%;
            background: var(--bs-primary);
            color: #fff;
            font-size: 14px;
        }

        .career-faq-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
            gap: 18px;
        }

        .career-faq-grid .card {
            margin: 0 !important;
            border: 1px solid rgba(255, 255, 255, 0.14) !important;
            border-radius: 12px !important;
            overflow: hidden;
        }

        .career-faq-grid .accordion-button {
            min-height: 88px;
            padding: 20px 22px;
            line-height: 1.45;
        }

        .career-faq-grid .accordion-button span {
            margin-right: 18px !important;
        }

        .career-faq-grid .card-body {
            padding: 5px 22px 25px 60px;
            line-height: 1.75;
        }

        @media screen and (max-width: 991px) {
            .career-faq-grid {
                grid-template-columns: 1fr;
            }

            .career-faq-intro {
                margin-bottom: 40px;
                text-align: left;
            }

            .career-faq-group {
                margin-bottom: 45px;
            }
        }

        @media screen and (max-width: 575px) {
            .career-faq-group-title {
                font-size: 20px;
            }

            .career-faq-group-title span {
                width: 38px;
                height: 38px;
                flex-basis: 38px;
            }

            .career-faq-grid .accordion-button {
                min-height: auto;
                padding: 18px 15px;
                font-size: 16px;
            }

            .career-faq-grid .accordion-button span {
                margin-right: 12px !important;
            }

            .career-faq-grid .card-body {
                padding: 4px 16px 20px;
            }
        }
    

    
        /* Premium FAQ presentation — content remains unchanged */
        .career-faq-section {
            padding-top: 110px;
            padding-bottom: 110px;
            background:
                radial-gradient(circle at 8% 12%, rgba(91, 207, 108, 0.13), transparent 26%),
                radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.07), transparent 24%),
                #087980 !important;
        }

        .career-faq-intro {
            max-width: 900px;
            margin-bottom: 38px;
        }

        .career-faq-intro p {
            max-width: 720px;
            font-size: 17px;
            line-height: 1.8;
        }

        .career-faq-nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            max-width: 1050px;
            margin: 0 auto 75px;
        }

        .career-faq-nav a {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 13px 19px;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.08);
            font-size: 14px;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        .career-faq-nav a:hover {
            color: #06484d;
            border-color: #fff;
            background: #fff;
            transform: translateY(-3px);
        }

        .career-faq-nav a span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: var(--bs-primary);
            color: #fff;
            font-size: 11px;
        }

        .career-faq-wrapper {
            max-width: 1240px;
        }

        .career-faq-group {
            position: relative;
            margin-bottom: 75px;
            scroll-margin-top: 120px;
        }

        .career-faq-group-title {
            margin-bottom: 27px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
            font-family: inherit;
            font-size: 27px;
        }

        .career-faq-group-title span {
            background: #fff;
            color: #087980;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
        }

        /* CSS columns prevent the opposite card receiving open-card height */
        .career-faq-grid {
            display: block;
            column-count: 2;
            column-gap: 22px;
        }

        .career-faq-section .career-faq-grid .card {
            display: inline-block;
            width: 100%;
            margin: 0 0 22px !important;
            vertical-align: top;
            break-inside: avoid;
            border: 0 !important;
            border-radius: 15px !important;
            background: #fff !important;
            box-shadow: 0 16px 42px rgba(0, 52, 56, 0.12);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .career-faq-section .career-faq-grid .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 22px 55px rgba(0, 42, 46, 0.18);
        }

        .career-faq-section .career-faq-grid .accordion-button {
            min-height: 92px;
            padding: 22px 24px;
            color: #083f43 !important;
            background: #fff !important;
            font-size: 18px;
            font-weight: 700;
            box-shadow: none !important;
        }

        .career-faq-section .career-faq-grid .accordion-button:not(.collapsed) {
            color: #087980 !important;
            background: #f3fbf7 !important;
            border-bottom: 1px solid #e5f1ec;
        }

        .career-faq-section .career-faq-grid .accordion-button::after {
            width: 34px;
            height: 34px;
            margin-left: 18px;
            border-radius: 50%;
            background-color: rgba(91, 207, 108, 0.14);
            background-position: center;
            background-size: 13px;
        }

        .career-faq-section .career-faq-grid .accordion-button img {
            filter: brightness(0) saturate(100%) invert(37%) sepia(31%) saturate(1393%) hue-rotate(135deg);
        }

        .career-faq-section .career-faq-grid .card-body {
            padding: 25px 30px 28px;
            color: #536a6c;
            background: #fff;
            font-size: 15px;
            line-height: 1.85;
        }

        /* Investment block */
        .career-investment-section {
            position: relative;
            overflow: hidden;
        }

        .career-investment-card {
            height: 100%;
            padding: 42px;
            border: 1px solid rgba(7, 121, 128, 0.1);
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 20px 60px rgba(0, 63, 69, 0.09);
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }

        .career-investment-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 28px 75px rgba(0, 63, 69, 0.15);
        }

        .career-investment-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            margin-bottom: 25px;
            border-radius: 50%;
            color: #fff;
            background: #087980;
            font-size: 21px;
        }

        .career-investment-card h3 {
            margin-bottom: 18px;
            font-size: 26px;
        }

        .career-price-row {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            margin-bottom: 25px;
        }

        .career-price {
            color: #087980;
            font-size: 58px;
            font-weight: 800;
            line-height: 1;
        }

        .career-price small {
            font-size: 18px;
        }

        .career-old-price {
            margin-bottom: 7px;
            color: #778889;
            text-decoration: line-through;
        }

        @media screen and (max-width: 991px) {
            .career-faq-section {
                padding-top: 80px;
                padding-bottom: 80px;
            }

            .career-faq-grid {
                column-count: 1;
            }

            .career-faq-nav {
                justify-content: flex-start;
                margin-bottom: 55px;
            }
        }

        @media screen and (max-width: 575px) {
            .career-faq-section {
                padding-top: 65px;
                padding-bottom: 65px;
            }

            .career-faq-nav {
                display: grid;
                grid-template-columns: 1fr;
            }

            .career-faq-nav a {
                justify-content: flex-start;
            }

            .career-faq-group-title {
                font-size: 21px;
            }

            .career-faq-section .career-faq-grid .accordion-button {
                min-height: auto;
                padding: 19px 16px;
                font-size: 16px;
            }

            .career-faq-section .career-faq-grid .card-body,
            .career-investment-card {
                padding: 22px;
            }

            .career-price {
                font-size: 46px;
            }
        }
        /* =============================================
   CAREER LINES FAQ TABS
============================================= */

.career-faq-section {
    position: relative;
    overflow: hidden;
    background: #087980 !important;
}

/* Category navigation */
.career-faq-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto 55px;
}

.career-faq-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.career-faq-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 11px;
}

.career-faq-tab:hover,
.career-faq-tab.active {
    border-color: #61CE70;
    /* background: var(--bs-primary); */
    color: #ffffff;
    transform: translateY(-2px);
}

.career-faq-tab.active span {
    background: #ffffff;
    color: #087980;
}

/* Hide all FAQ categories */
.career-faq-group {
    display: none;
    margin-bottom: 0;
}

/* Show selected category */
.career-faq-group.active {
    display: block;
    animation: faqCategoryShow 0.5s ease;
}

@keyframes faqCategoryShow {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Category heading */
.career-faq-group-title {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Two independent columns */
.career-faq-grid {
    display: block;
    column-count: 2;
    column-gap: 22px;
}

/* Teal transparent FAQ cards */
.career-faq-section .career-faq-grid .card {
    display: inline-block;
    width: 100%;
    margin: 0 0 20px !important;
    vertical-align: top;
    break-inside: avoid;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: none !important;
}

/* Question */
.career-faq-section .career-faq-grid .accordion-button,
.career-faq-section .career-faq-grid .accordion-button.collapsed {
    min-height: 88px;
    padding: 20px 22px;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Open question */
.career-faq-section .career-faq-grid .accordion-button:not(.collapsed) {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

/* Answer */
.career-faq-section .career-faq-grid .card-body {
    padding: 24px 28px 27px;
    color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
    line-height: 1.8;
}

/* Mobile */
@media screen and (max-width: 991px) {
    .career-faq-grid {
        column-count: 1;
    }

    .career-faq-nav {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 575px) {
    .career-faq-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .career-faq-tab {
        justify-content: flex-start;
        width: 100%;
    }

    .career-faq-section .career-faq-grid .accordion-button {
        min-height: auto;
        padding: 18px 15px;
        font-size: 16px;
    }

    .career-faq-section .career-faq-grid .card-body {
        padding: 20px 16px;
    }
    
    /* Fix FAQ tab content hidden by WOW animation */
.career-faq-group.active .career-faq-grid,
.career-faq-group.active .card,
.career-faq-group.active .wow {
    display: inline-block;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation-name: none !important;
}

.career-faq-group.active .career-faq-grid {
    display: block;
    width: 100%;
}
.career-faq-section .career-title-accent {
    display: block;
    color: #5bcf6c;
}

}  
/* =========================================
   FAQ LIGHT PREMIUM COLOR THEME
========================================= */

.career-faq-section {
    background:
        radial-gradient(circle at 10% 15%, rgba(91, 207, 108, 0.13), transparent 28%),
        radial-gradient(circle at 90% 85%, rgba(8, 121, 128, 0.10), transparent 30%),
        linear-gradient(135deg, #f5fbf8 0%, #eaf6f5 100%) !important;
    padding-top: 95px;
    padding-bottom: 100px;
}

/* Small FAQ label */
.career-faq-section .sub-title {
    color: #087980 !important;
}

/* Main heading */
.career-faq-section .career-static-heading h2 {
    color: #003f46 !important;
}

.career-faq-section .career-static-heading h2 span {
    display: inline;
    color: #61ce70 !important;
}

/* Intro paragraph */
.career-faq-section .career-faq-intro p {
    color: #587477 !important;
    opacity: 1 !important;
}

/* Category buttons */
.career-faq-section .career-faq-tab {
    color: #164f54;
    border: 1px solid rgba(8, 121, 128, 0.18);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 25px rgba(0, 63, 69, 0.06);
}

.career-faq-section .career-faq-tab span {
    color: #087980;
    background: #e3f5ed;
}

.career-faq-section .career-faq-tab:hover,
.career-faq-section .career-faq-tab.active {
    color: #ffffff;
    border-color: #087980;
    background: #087980;
    box-shadow: 0 12px 30px rgba(8, 121, 128, 0.20);
}

.career-faq-section .career-faq-tab.active span {
    color: #087980;
    background: #ffffff;
}

/* Category heading */
.career-faq-section .career-faq-group-title {
    color: #003f46 !important;
    border-bottom-color: rgba(8, 121, 128, 0.14);
}

.career-faq-section .career-faq-group-title span {
    color: #ffffff;
    background: #087980;
}

/* FAQ cards */
.career-faq-section .career-faq-grid .card {
    border: 1px solid rgba(8, 121, 128, 0.10) !important;
    background: #ffffff !important;
    box-shadow: 0 14px 38px rgba(0, 63, 69, 0.08) !important;
}

.career-faq-section .career-faq-grid .card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(91, 207, 108, 0.55) !important;
    box-shadow: 0 20px 48px rgba(0, 63, 69, 0.13) !important;
}

/* Questions */
.career-faq-section .career-faq-grid .accordion-button,
.career-faq-section .career-faq-grid .accordion-button.collapsed {
    color: #073f44 !important;
    background: #ffffff !important;
}

.career-faq-section .career-faq-grid .accordion-button:not(.collapsed) {
    color: #087980 !important;
    background: #f0faf5 !important;
}

/* Answers */
.career-faq-section .career-faq-grid .card-body {
    color: #587174 !important;
    background: #ffffff !important;
    text-align: justify;
}
      /* =============================================
   CAREER LINES FAQ TABS
============================================= */
.career-static-heading,
.career-static-heading h2,
.career-static-heading h2 span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
}

.career-faq-section .career-static-heading h2 {
    color: #003f46 !important;
    font-size: clamp(46px, 4vw, 64px);
    line-height: 1.08;
    text-align: center;
}

.career-faq-section .career-static-heading h2 span {
    display: inline;
    color: #61ce70 !important;
}

.career-investment-section .investment-heading h2 {
    color: #003f46 !important;
    font-size: clamp(44px, 4vw, 60px);
    line-height: 1.1;
    text-align: center;
}
/* =========================================================
   CAREER LINES — INNER PAGE TYPOGRAPHY ONLY
   HOME PAGE IS NOT TOUCHED
========================================================= */


/* =========================================================
   PAGE BANNER TITLES
========================================================= */

.about-page .page-title-section h1,
.students-page .page-title-section h1,
.institutions-page .page-title-section h1,
.consultant-page .page-title-section h1,
.faq-page .page-title-section h1,
.contact-page .page-title-section h1 {
    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1.05 !important;
}


/* =========================================================
   ABOUT
========================================================= */

.about-page .about-vision-title,
.about-page .heading-animation .title-style01 > h2 {
    font-size: clamp(34px, 3.2vw, 48px) !important;
    line-height: 1.08 !important;
}


/* =========================================================
   STUDENTS
========================================================= */

.students-page .student-hero-title {
    font-size: clamp(40px, 4vw, 58px) !important;
    line-height: 1.04 !important;
}

.students-page .student-section .student-title {
    font-size: clamp(32px, 3vw, 44px) !important;
    line-height: 1.08 !important;
}


/* =========================================================
   INSTITUTIONS
========================================================= */

.institutions-page .institutions-display,
.institutions-page .institutions-title {
    font-size: clamp(38px, 3.8vw, 54px) !important;
    line-height: 1.05 !important;
}

.institutions-page .heading-animation .title-font.display-3 {
    font-size: clamp(32px, 3vw, 44px) !important;
    line-height: 1.08 !important;
}


/* =========================================================
   CONSULTANT
========================================================= */

.cl-consultant-page .cl-consultant-hero-title {
    font-size: clamp(40px, 4vw, 58px) !important;
    line-height: 1.04 !important;
}

.cl-consultant-page .cl-consultant-title:not(.cl-consultant-hero-title) {
    font-size: clamp(32px, 3vw, 44px) !important;
    line-height: 1.08 !important;
}


/* =========================================================
   CONTACT
========================================================= */

.cl-contact-page .cl-contact-title {
    font-size: clamp(32px, 3vw, 44px) !important;
    line-height: 1.08 !important;
}


/* =========================================================
   FAQ
========================================================= */

.faq-page .career-static-heading h2 {
    font-size: clamp(36px, 3.5vw, 50px) !important;
    line-height: 1.08 !important;
}


/* =========================================================
   CAREER DIMENSION PAGES
   Vocational / Behaviour / Social / Leadership / Abilities
========================================================= */

.bwa-page main section:not(.bwa-photo-banner) h2,
.abilities-page .ability-main-title {
    font-size: clamp(32px, 3vw, 46px) !important;
    line-height: 1.08 !important;
}


/* =========================================================
   INNER PAGE BODY TEXT
========================================================= */

.about-page main p,
.students-page main p,
.institutions-page main p,
.cl-consultant-page main p,
.cl-contact-page main p,
.faq-page main p,
.vocational-page main p,
.sei-page main p,
.lead-page main p,
.abilities-page main p,
.bwa-page main p {
    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .about-page .page-title-section h1,
    .students-page .page-title-section h1,
    .institutions-page .page-title-section h1,
    .consultant-page .page-title-section h1,
    .faq-page .page-title-section h1,
    .contact-page .page-title-section h1 {
        font-size: 42px !important;
    }

    .students-page .student-hero-title,
    .institutions-page .institutions-display,
    .institutions-page .institutions-title,
    .cl-consultant-page .cl-consultant-hero-title {
        font-size: 42px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .about-page .page-title-section h1,
    .students-page .page-title-section h1,
    .institutions-page .page-title-section h1,
    .consultant-page .page-title-section h1,
    .faq-page .page-title-section h1,
    .contact-page .page-title-section h1 {
        font-size: 32px !important;
    }

    .about-page .about-vision-title,
    .about-page .heading-animation .title-style01 > h2,
    .students-page .student-section .student-title,
    .institutions-page .heading-animation .title-font.display-3,
    .cl-consultant-page .cl-consultant-title,
    .cl-contact-page .cl-contact-title,
    .faq-page .career-static-heading h2,
    .bwa-page main section:not(.bwa-photo-banner) h2,
    .abilities-page .ability-main-title {
        font-size: 30px !important;
        line-height: 1.1 !important;
    }

    .students-page .student-hero-title,
    .institutions-page .institutions-display,
    .institutions-page .institutions-title,
    .cl-consultant-page .cl-consultant-hero-title {
        font-size: 34px !important;
    }

    .about-page main p,
    .students-page main p,
    .institutions-page main p,
    .cl-consultant-page main p,
    .cl-contact-page main p,
    .faq-page main p,
    .bwa-page main p {
        font-size: 15px;
        line-height: 1.6;
    }
}
}



/* =========================================================
   CAREER LINES — PRICING PAGE PROFESSIONAL ENHANCEMENTS
   Load this AFTER css/pricing-page.css

   Scope: Pricing main content only.
   Header / banner / footer / chatbot are not re-styled here.
========================================================= */


/* =========================================================
   01. GLOBAL PRICING CONTENT
========================================================= */

.pricing-main-section,
#career-discovery-plan,
#after-payment,
#professional-support,
.pricing-final-cta {
    position: relative;
    overflow: hidden;
}

.pricing-main-section .container,
#career-discovery-plan .container,
#after-payment .container,
#professional-support .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   02. FIX BROKEN / CLIPPED TITLES
   Existing About-page animation classes can clip headings.
   Pricing headings use a clean reveal instead.
========================================================= */

/* Disable the old split-text clipping behaviour only here */
.pricing-main-section .heading-animation,
#career-discovery-plan .heading-animation,
#after-payment .heading-animation,
#professional-support .heading-animation {
    overflow: visible !important;
}

.pricing-main-section .heading-animation *,
#career-discovery-plan .heading-animation *,
#after-payment .heading-animation *,
#professional-support .heading-animation * {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

/* Main pricing title */
.pricing-main-section .about-vision-title,
#career-discovery-plan .heading-animation h2,
#after-payment .heading-animation h2,
#professional-support .heading-animation h2 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;

    animation: pricingHeadingReveal .8s cubic-bezier(.2,.75,.25,1) both;
}

/* Make every title span fully visible */
.pricing-main-section .about-vision-title span,
#career-discovery-plan .heading-animation h2 span,
#after-payment .heading-animation h2 span,
#professional-support .heading-animation h2 span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: inline-block;
}


/* =========================================================
   03. HERO / INVESTMENT SECTION
========================================================= */

.pricing-main-section {
    padding: 105px 0 115px;
    background:
        radial-gradient(circle at 8% 82%, rgba(9,128,130,.12), transparent 28%),
        radial-gradient(circle at 96% 4%, rgba(81,212,106,.16), transparent 26%),
        linear-gradient(135deg, #f8fcfb 0%, #edf8f5 56%, #e9f8eb 100%);
}

.pricing-main-section::before {
    content: "";
    position: absolute;
    width: 540px;
    height: 540px;
    right: -200px;
    top: -260px;
    border-radius: 50%;
    background: rgba(81,212,106,.10);
    filter: blur(6px);
    pointer-events: none;
}

.pricing-main-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -150px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(8,127,129,.08);
    pointer-events: none;
}

.pricing-main-section .title-style01 {
    margin-bottom: 0;
}

.pricing-main-section .about-vision-title {
    max-width: 760px !important;
    margin: 18px 0 24px !important;
    color: #004f53 !important;
    font-size: clamp(46px, 4.8vw, 70px) !important;
    line-height: .98 !important;
    letter-spacing: -2.4px !important;
    font-weight: 700 !important;
}

.pricing-main-section .about-title-line {
    display: block !important;
    opacity: 1 !important;
}

.pricing-main-section .about-title-accent {
    display: block !important;
    color: #51d46a !important;
}

.pricing-main-section .about-section-lead {
    max-width: 740px;
    margin-bottom: 38px !important;
    color: #617b7f !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
}


/* subtle eyebrow */
.pricing-main-section .sub-title {
    color: #008987 !important;
    letter-spacing: 2.1px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}


/* =========================================================
   04. BENEFIT CARDS — MORE PREMIUM
========================================================= */

.pricing-main-section .pricing-highlight-card {
    min-height: 276px;
    padding: 22px 20px 20px !important;

    border: 1px solid rgba(0,79,83,.08) !important;
    border-radius: 20px !important;

    background: rgba(255,255,255,.90) !important;

    box-shadow:
        0 14px 35px rgba(0,63,66,.06),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.pricing-main-section .pricing-highlight-card:hover {
    transform: translateY(-8px);
    border-color: rgba(81,212,106,.35) !important;
    box-shadow: 0 24px 46px rgba(0,63,66,.11);
}

.pricing-main-section .about-pillar-number {
    color: rgba(0,79,83,.12) !important;
    font-size: 34px !important;
}

.pricing-main-section .about-pillar-icon {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 18px !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: linear-gradient(135deg,#087f81,#51d46a) !important;
    box-shadow: 0 10px 22px rgba(8,127,129,.18);
}

.pricing-main-section .pricing-highlight-card h3 {
    margin: 0 0 10px !important;
    color: #004f53 !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
}

.pricing-main-section .pricing-highlight-card p {
    margin: 0 !important;
    color: #607b7f !important;
    font-size: 13px !important;
    line-height: 1.62 !important;
}


/* =========================================================
   05. PRICE CARD
========================================================= */

.pricing-main-section .pricing-card {
    position: relative;
    padding: 42px !important;
    border: 1px solid rgba(0,79,83,.08) !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 28px 72px rgba(0,63,66,.15) !important;
}

.pricing-main-section .pricing-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(81,212,106,.10);
    border-radius: 22px;
    pointer-events: none;
}

.pricing-main-section .pricing-card-badge,
.pricing-main-section .pricing-card-price,
.pricing-main-section .pricing-old-rate,
.pricing-main-section .pricing-card > p,
.pricing-main-section .pricing-card .butn-style01,
.pricing-main-section .pricing-card-note {
    position: relative;
    z-index: 2;
}

.pricing-main-section .pricing-card-badge {
    background: linear-gradient(135deg,#51d46a,#64df79) !important;
    color: #075458 !important;
    box-shadow: 0 10px 22px rgba(81,212,106,.18);
}

.pricing-main-section .pricing-card-price {
    margin: 24px 0 18px !important;
}

.pricing-main-section .pricing-card-price strong {
    color: #004f53 !important;
    font-size: clamp(82px, 7vw, 112px) !important;
    line-height: .82 !important;
    letter-spacing: -5px !important;
}

.pricing-main-section .pricing-card-price span {
    color: #51d46a !important;
    font-size: 23px !important;
}

.pricing-main-section .pricing-old-rate {
    padding: 15px 18px !important;
    border-left: 4px solid #51d46a !important;
    border-radius: 14px !important;
    background: #f4fbf7 !important;
}

.pricing-main-section .pricing-card > p {
    color: #627b7f !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
}

.pricing-main-section .pricing-card .butn-style01 {
    min-height: 58px;
    border-radius: 14px !important;
    background: #51d46a !important;
    color: #045156 !important;
    font-weight: 800;
}

.pricing-main-section .pricing-card-note {
    color: #809396 !important;
}


/* =========================================================
   06. DISCOVERY PLAN — CLEAN 4-COLUMN GRID
========================================================= */

#career-discovery-plan {
    padding: 110px 0;
    background:
        radial-gradient(circle at 10% 15%, rgba(8,127,129,.07), transparent 25%),
        #eaf4f5 !important;
}

#career-discovery-plan .pricing-package-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch;
}

#career-discovery-plan .about-step-card {
    min-height: 350px !important;
    padding: 24px 20px !important;
    border: 1px solid rgba(0,79,83,.07) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(0,63,66,.06) !important;
}

#career-discovery-plan .about-step-top {
    margin-bottom: 18px !important;
}

#career-discovery-plan .about-step-number {
    color: rgba(0,79,83,.18) !important;
}

#career-discovery-plan .about-step-icon {
    background: linear-gradient(135deg,#087f81,#51d46a) !important;
    color: #fff !important;
}

#career-discovery-plan .about-step-card h3 {
    color: #004f53 !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
}

#career-discovery-plan .about-step-card li {
    color: #607b7f !important;
    font-size: 12.5px !important;
    line-height: 1.58 !important;
}

#career-discovery-plan .about-step-card li strong {
    color: #087f81 !important;
}


/* Section heading */
#career-discovery-plan .heading-animation h2 {
    margin-bottom: 18px !important;
    color: #004f53 !important;
    font-size: clamp(38px,4.2vw,56px) !important;
    line-height: 1.03 !important;
    letter-spacing: -1.6px !important;
}

#career-discovery-plan .heading-animation h2 .about-title-accent {
    color: #51d46a !important;
}


/* =========================================================
   07. AFTER PAYMENT
========================================================= */

#after-payment {
    padding: 110px 0 !important;
    background: linear-gradient(135deg,#005254 0%,#087c7c 57%,#12948d 100%) !important;
}

#after-payment::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -230px;
    bottom: -280px;
    border-radius: 50%;
    background: rgba(81,212,106,.08);
}

#after-payment .about-guidance-map {
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.10);
    backdrop-filter: blur(8px);
}

#after-payment .heading-animation h2 {
    color: #fff !important;
    font-size: clamp(38px,4.2vw,56px) !important;
    line-height: 1.03 !important;
    letter-spacing: -1.6px !important;
}

#after-payment .heading-animation h2 .about-title-accent {
    color: #65df79 !important;
}

#after-payment .sub-title {
    color: #b9f1c0 !important;
}

#after-payment .about-light-copy p {
    color: rgba(255,255,255,.78) !important;
    font-size: 15.5px !important;
    line-height: 1.76 !important;
}


/* =========================================================
   08. PROFESSIONAL SUPPORT
========================================================= */

#professional-support {
    padding: 105px 0 !important;
    background: #edf7f7 !important;
}

#professional-support .heading-animation h2 {
    color: #004f53 !important;
    font-size: clamp(38px,4.2vw,56px) !important;
    line-height: 1.03 !important;
}

#professional-support .heading-animation h2 .about-title-accent {
    color: #51d46a !important;
}

#professional-support .about-pillar-card {
    min-height: 300px;
    padding: 28px 24px !important;
    border: 1px solid rgba(0,79,83,.08) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(0,63,66,.06) !important;
    transition: transform .35s ease, box-shadow .35s ease;
}

#professional-support .about-pillar-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 44px rgba(0,63,66,.11) !important;
}

#professional-support .about-pillar-icon {
    color: #fff !important;
    background: linear-gradient(135deg,#087f81,#51d46a) !important;
}

#professional-support .about-pillar-card h3 {
    color: #004f53 !important;
    font-size: 19px !important;
}

#professional-support .about-pillar-card p {
    color: #607b7f !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   09. FINAL CTA
========================================================= */

.pricing-final-cta {
    background: linear-gradient(135deg,#4fd369 0%,#28bb84 100%) !important;
}

.pricing-final-cta .about-cta-label,
.pricing-final-cta h2,
.pricing-final-cta p {
    color: #fff !important;
}


/* =========================================================
   10. RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {
    #career-discovery-plan .pricing-package-grid {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    .pricing-main-section {
        padding: 82px 0 88px;
    }

    .pricing-main-section .about-vision-title {
        font-size: 52px !important;
    }

    #career-discovery-plan .pricing-package-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .pricing-main-section {
        padding: 68px 0 72px;
    }

    .pricing-main-section .about-vision-title {
        font-size: 41px !important;
        letter-spacing: -1.4px !important;
    }

    .pricing-main-section .about-section-lead {
        font-size: 15px !important;
    }

    .pricing-main-section .pricing-highlight-card {
        min-height: 0;
    }

    .pricing-main-section .pricing-card {
        padding: 26px !important;
    }

    #career-discovery-plan,
    #after-payment,
    #professional-support {
        padding: 75px 0 !important;
    }

    #career-discovery-plan .pricing-package-grid {
        grid-template-columns: 1fr !important;
    }

    #career-discovery-plan .about-step-card {
        min-height: 0 !important;
    }

    #career-discovery-plan .heading-animation h2,
    #after-payment .heading-animation h2,
    #professional-support .heading-animation h2 {
        font-size: 38px !important;
    }
}

@media (max-width: 575.98px) {
    .pricing-main-section .about-vision-title {
        font-size: 34px !important;
    }

    .pricing-main-section .pricing-card-price strong {
        font-size: 70px !important;
        letter-spacing: -3px !important;
    }

    #career-discovery-plan .heading-animation h2,
    #after-payment .heading-animation h2,
    #professional-support .heading-animation h2 {
        font-size: 32px !important;
    }
}


/* =========================================================
   11. TITLE REVEAL
========================================================= */

@keyframes pricingHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* =========================================================
   END
========================================================= */