/*  hero-content styles start  */
.hero-section {
   padding-top: 36px;
}

@media (min-width:992px) {
   .hero-section {
      padding-top: 72px;
   }
}

.hero-content .sub-heading {
   color: var(--white);
   text-align: left;
   font-family: var(--font-nunito);
   font-size: var(--font-18);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}

.hero-content .heading {
   font-family: var(--font-sora);
   font-size: var(--font-36);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   background: linear-gradient(92deg, #FFF 10.68%, #C75ED5 49.46%, #5F20BE 88.24%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-align: left;
}

.hero-content .heading span {
   display: block;
}

.hero-content .sub-item {
   text-align: left;
}

.hero-content .sub-item:nth-child(2) {
   border: 1px solid var(--white);
   width: 1px;
   background: var(--white);
   opacity: 0.3;
}

.hero-content .sub-item span {
   color: var(--white);
   font-family: var(--font-nunito);
   font-size: var(--font-18);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}

.hero-content .sub-item p {
   color: var(--white);
   font-family: var(--font-nunito);
   font-size: var(--font-12);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

/*  hero-content styles end  */


/*-- highlights styles start --*/
.course-highlights {
   background: linear-gradient(89deg, #102E95 0%, #7B0565 98.66%);
   padding: 24px 0;
   font-family: var(--font-nunito);
}

.course-highlights .item svg {
   display: block;
}

@media (max-width:768px) {
   .course-highlights .item svg {
      width: 25px;
      height: 25px;
   }
}

.course-highlights .item .highlights-points span {
   color: var(--white);
   font-size: var(--font-18);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: left;
}

.course-highlights .item .highlights-points p {
   color: var(--white);
   font-size: var(--font-14);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   text-align: left;
}

/*-- highlights styles end --*/

/* courses-sec styles start  */
.courses-sec {
   padding: 72px 0;
   background: var(--night-purple);
   position: relative;
}

.courses-sec .neon-purple {
   position: absolute;
   top: 0;
   right: 0;
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--neon-purple);
   filter: blur(100px);
}

.courses-sec .red {
   position: absolute;
   top: 25%;
   left: 0;
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--red);
   filter: blur(100px);
}

.courses-sec .neon-purple-two {
   position: absolute;
   top: 50%;
   right: 30%;
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--neon-purple);
   filter: blur(100px);
}

.courses-sec .container-lg {
   position: relative;
   z-index: 1;
}

.courses-sec h2 {
   text-align: center;
}

.courses-sec .course-card {
   border-radius: var(--radius-16);
   background: var(--white);
   box-shadow: 0 5px 10px 0 rgba(229, 9, 20, 0.15);
   overflow: hidden;
}

.courses-sec .course-card .course-image {
   width: 100%;
   height: auto;
   display: block;
}

.courses-sec .course-card .title {
   overflow: hidden;
   color: var(--bg-dark);
   text-overflow: ellipsis;
   font-family: var(--font-nunito);
   font-size: var(--font-18);
   font-style: normal;
   font-weight: 700;
   text-align: left;
}

.courses-sec .course-card .course-info {
   width: 100%;
}

.courses-sec .course-card .course-duration,
.courses-sec .course-card .course-start {
   color: var(--dark-grey);
   font-family: var(--font-nunito);
   font-size: var(--font-16);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

.courses-sec .course-card a.btn-enroll {
   color: var(--white);
   text-align: center;
   font-family: var(--font-nunito);
   font-size: var(--font-14);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-transform: uppercase;
   padding: 12px 24px;
   border-radius: var(--radius-8);
   border: 1px solid var(--amethyst-purple);
   background: var(--amethyst-purple);
   cursor: pointer;
   text-decoration: none;
}

.courses-sec .course-salary-cotainer {
   margin-top: 72px;
}

@media (max-width:992px) {
   .courses-sec .course-salary-cotainer {
      margin-top: 36px;
   }
}

.courses-sec .course-salary-info {
   background: var(--white);
   border-radius: var(--radius-16);
   height: 100%;
}

.courses-sec .course-salary-info span {
   color: var(--bg-dark);
   font-family: var(--font-nunito);
   font-size: var(--font-16);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   text-align: left;
}





.salary-card {
   width: min(980px, 100%);
   margin: 0 auto;
   background: var(--white);
   border-radius: var(--radius-16);
   padding: 16px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .03) inset;
   font-family: var(--font-nunito);
}

.card-title {
   font-weight: 700;
   font-size: var(--font-18);
   margin-bottom: 24px;
}

/* MOBILE scroll */
.chart-shell {
   width: 100%;
}

/* WRAPPER: chart area + labels area */
.chart-wrap {
   display: grid;
   grid-template-rows: auto auto;
   /* chart + labels */
   gap: 8px;
}

/* CHART (only axes & bars live here) */
.chart {
   position: relative;
   height: clamp(210px, 34vw, 320px);
   border-left: 1.6px solid var(--dark-grey);
   border-bottom: 1.6px solid var(--dark-grey);
   padding: 10px 6px 0 6px;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: clamp(10px, 2.6vw, 30px);
   align-items: end;
   padding: 26px 6px 0 6px;
}

/* dotted vertical gridlines */
/* .chart::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image:
      repeating-linear-gradient(to right,
         transparent 0,
         transparent calc(20% - 1px),
         var(--dark-grey) calc(20% - 1px),
         var(--dark-grey) calc(20%),
         transparent calc(20%));
} */

/* each column inside chart */
.bar-col {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   position: relative;
   z-index: 1;
}

.bar-wrap {
   width: min(34px, 6vw);
   height: 100%;
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

/* IMPORTANT: bar touches bottom border */
.bar {
   width: 100%;
   height: calc(var(--h) * 1%);
   background: var(--amethyst-purple);
   border-radius: 7px 7px 0 0;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
   margin-bottom: 0;
   /* ensure no gap */
}

/* value stays above bar */
.value {
   position: absolute;
   left: 50%;
   bottom: calc((var(--h) * 1%) + 24px);
   transform: translateX(-50%) rotate(-90deg);
   transform-origin: center;
   font-weight: 700;
   font-size: var(--font-12);
   color: var(--bg-dark);
   white-space: nowrap;
   pointer-events: none;
}

/* LABELS AREA (below border) */
.labels {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: clamp(10px, 2.6vw, 30px);
   padding: 0 6px;
}

.label-col {
   display: grid;
   justify-items: center;
   gap: 8px;
}

/* the small tick '|' touching the bottom axis line */
.tick {
   width: 2px;
   height: 14px;
   background: var(--dark-grey);
   margin-top: -8px;
   border-radius: var(--radius-8);
}

.role {
   text-align: center;
   font-size: var(--font-12);
   font-weight: 400;
   color: var(--dark-grey);
   line-height: normal;
   max-width: 150px;
}

@media (max-width:560px) {
   .chart-shell {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 6px;
   }

   .chart,
   .labels {
      min-width: 640px;
   }

   .chart {
      height: 240px;
   }
}


.hiring-company {
   background: var(--white);
   height: 100%;
   border-radius: var(--radius-8);
}

.hiring-company .heading {
   color: var(--bg-dark);
   text-align: left;
   font-family: var(--font-nunito);
   font-size: var(--font-18);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}

.hiring-company .source {
   color: var(--disable-grey);
   text-align: left;
   font-family: var(--font-nunito);
   font-size: var(--font-12);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

.course-expert-card {
   border-radius: var(--radius-16);
   background: linear-gradient(269deg, #102E95 0%, #7B0565 100%);
}

.course-expert-card .course-note {
   color: var(--white);
   font-family: var(--font-nunito);
   font-size: var(--font-18);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: center;
}

/* courses-sec styles end */


/*--------  expert-sec style start ----------*/
.expert-sec {
   background: var(--night-purple);
}

.expert-sec {
   text-align: center;
}

.expert-sec .myAdvisor {
   margin-top: 24px;
}

.expert-sec .item {
   height: auto;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
   font-family: var(--font-nunito);
   border-radius: var(--radius-8);
   border: 1px solid var(--amethyst-purple);
   background: var(--white);
   padding: 24px;
}

.expert-sec .item .profile-desc {
   width: 100%;
}

.expert-sec .item .profile-desc .avtar img {
   width: 74px;
   height: 74px;
   display: block;
   border-radius: 74px;
   object-fit: contain;
   border: 1px solid var(--border-grey);
}

.expert-sec .item .profile-desc .avtar-data {
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 16px;
}

.expert-sec .item .profile-desc .avtar-data .avtar-name {
   color: var(--bg-dark);
   font-size: var(--font-16);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-transform: uppercase;
}

.expert-sec .item:hover .profile-desc .avtar-data .avtar-name {
   color: var(--danger);
}

.expert-sec .item .profile-desc .avtar-data .avtar-exp {
   padding: 8px 16px;
   background: var(--light-blue);
   color: var(--disable-grey);
   text-align: center;
   font-family: var(--font-nunito);
   font-size: var(--font-14);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   border-radius: var(--radius-8);
}

.expert-sec .item .designation {
   font-weight: bold;
   font-size: var(--font-16);
   text-transform: uppercase;
   color: var(--dark-grey);
   font-weight: 400;
   text-align: left;
}

.expert-sec .item .summary {
   margin-top: 8px;
   font-size: var(--font-16);
   color: var(--dark-grey);
   font-weight: 400;
   text-align: left;
}

.expert-sec .item .summary .read-more,
.reviews-item .read-more {
   color: var(--amethyst-purple);
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   cursor: pointer;
   display: inline;
   margin-top: 8px;
}

.expert-sec .item .summary .hidden-text,
.reviews-item .summary .hidden-text {
   display: none;
}

/*------ expert-sec style end -----*/

/*------ review-sec style start ----*/
.reviews-section {
   background: var(--night-purple);
   position: relative;
}

.reviews-section .neon-purple {
   position: absolute;
   top: 25%;
   right: 25%;
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--neon-purple);
   filter: blur(100px);
}

.reviews-section .reviews-item {
   background: var(--white);
   border-radius: var(--radius-16);
   font-family: var(--font-nunito);
}

.reviews-section .reviews-item .reviews-img img {
   width: 50px;
   height: 50px;
   border-radius: 50px;
   display: block;
}

.reviews-section .reviews-item .name {
   color: var(--bg-dark);
   font-size: var(--font-16);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: left;
}

.reviews-section .reviews-item .location {
   color: var(--dark-grey);
   font-size: var(--font-14);
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: left;
}

.reviews-section .reviews-item .summary {
   color: var(--dark-grey);
   font-size: var(--font-16);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   text-align: left;
   border-top: 1px solid var(--border-grey);
   padding-top: 16px;
   margin-top: 16px;
}

.reviews-section .reviews-item .reviews i {
   color: var(--yellow);
   font-size: var(--font-14);
}

/*------ review-sec style end ----*/

/*------ why-choose-item style start ----*/
.clientele-whychoose-sec {
   background: var(--night-purple);
   padding: 72px 0;
   position: relative;
}

.clientele-whychoose-sec .neon-purple {
   position: absolute;
   top: 0;
   right: 0;
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--neon-purple);
   filter: blur(100px);
}

.clientele-whychoose-sec .red {
   position: absolute;
   top: 25%;
   left: 0;
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--red);
   filter: blur(100px);
}

.clientele .h2 {
   text-align: center;
}

.clientele-slider {
   width: 100%;
   overflow: hidden;
}

.clientele-slider .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
}

.clientele-slider img {
   height: 60px;
   object-fit: contain;
   filter: grayscale(100%);
   transition: 0.3s ease;
}

.clientele-slider img:hover {
   filter: grayscale(0%);
   transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
   .clientele-slider img {
      height: 45px;
   }
}





.why-choose .why-choose-content .h2 {
   text-align: center;
}

.why-choose .why-choose-content {
   border-radius: var(--radius-16);
   background: linear-gradient(89deg, #2738ED 0%, #6C0AE2 98.66%);
}

.why-choose .item {
   border-radius: var(--radius-8);
   border: 1px solid rgba(217, 217, 217, 0.20);
   background: rgba(255, 255, 255, 0.20);
   height: 100%;
}

/********* faq style start *****/
/* Use your :root exactly as you shared */

.faq-sec {
   background: var(--night-purple);
   padding: 72px 0;
}

.faq-sec .faq-sec-title {
   text-align: center;
}

.faq-item {
   background: transparent;
   border: 1px solid rgba(80, 76, 160, 0.60);
   border-radius: var(--radius-8);
   overflow: hidden;
}

.faq-question {
   width: 100%;
   background: transparent;
   border: 0;
   cursor: pointer;
   padding: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   color: var(--night-purple);
   font-size: var(--font-18);
   font-family: var(--font-sora);
   font-weight: 600;
   text-align: left;
}

.faq-question[aria-expanded="true"] {
   border-bottom: 1px solid rgba(80, 76, 160, 0.60);
}

.faq-question span {
   color: var(--white);
}

/* .faq-item:not(.is-open) .faq-question {
   border-bottom: 1px solid var(--border-grey);
} */

/* Arrow icon (right side) */
.faq-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   position: relative;
}

/* Down arrow default */
.faq-icon::before {
   content: "";
   width: 10px;
   height: 10px;
   border-right: 2px solid var(--neon-purple);
   border-bottom: 2px solid var(--neon-purple);
   transform: rotate(45deg);
   transition: transform 0.2s ease;
}

/* Up arrow when open */
.faq-item.is-open .faq-icon::before {
   transform: rotate(-135deg);
   /* up */
}

/* Answer panel */
.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.25s ease;
}

.faq-answer-inner {
   padding: 16px;
   font-family: var(--font-nunito);
   font-size: var(--font-16);
   line-height: 1.6;
   color: var(--white);
}

/* Responsive */
@media (max-width: 768px) {
   .faq-title {
      font-size: var(--font-28);
   }

   .faq-question {
      font-size: var(--font-16);
      padding: 14px 14px;
   }

   .faq-icon {
      width: 26px;
      height: 26px;
   }

   .faq-answer-inner {
      font-size: var(--font-16);
      padding: 12px 14px 14px 14px;
   }
}

@media (max-width: 420px) {
   .faq-item {
      border-radius: var(--radius-8);
   }
}

/******** faq style end *******/


/*------- reach-us sec start ------*/
.reach-us {
   padding: 72px 0;
   background: var(--night-purple);
   position: relative;
}


.reach-us .item {
   position: relative;
   z-index: 1;
}

.reach-us .red {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--red);
   filter: blur(100px);
}

.reach-us .reac-us-content span {
   font-size: var(--font-18);
   color: var(--white);
   font-family: var(--font-nunito);
   font-weight: 700;
   margin: 16px 0;
   display: inline-block;
}

.reach-us .form-input {
   width: 100%;
   font-family: var(--font-nunito);
}

.reach-us .form-input input {
   width: 100%;
   background: transparent;
   padding: 16px;
   font-size: var(--font-16);
   color: var(--white);
   font-weight: 400;
   line-height: normal;
   font-style: normal;
   border-radius: var(--radius-8);
   border: 1px solid var(--btn-default);
   font-family: var(--font-nunito);
}

.reach-us .form-input input:focus {
   border: 1px solid var(--btn-default);
   outline: none;
}

.reach-us .form-input input::placeholder {
   color: var(--white);
   font-family: var(--font-nunito);
   font-weight: 400;
}

.reach-us .form-condition {
   font-size: var(--font-16);
   color: var(--white);
   font-weight: 400;
   line-height: normal;
   font-style: normal;
   font-family: var(--font-nunito);
   display: flex;
   align-items: center;
   gap: 8px;
}

.reach-us .form-condition input[type="checkbox"] {
   accent-color: var(--white);
}

.reach-us .item-two {
   position: relative;
   z-index: 1;
}

.reach-us .item-two .neon-purple {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 281px;
   height: 281px;
   border-radius: 281px;
   background: var(--neon-purple);
   filter: blur(100px);
   z-index: -1;
}

/*------- reach-us sec end -------*/

/*>>>>>>>> swiper style start <<<<<<<<<<<<*/
.navigation {
   width: 100%;
   gap: 24px;
   margin-top: 24px;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
   width: 10% !important;
   display: flex;
   /* left: 50% !important;
  transform: translateX(-50%); */
   position: relative !important;
   bottom: 0 !important;
}

.swiper-pagination .swiper-pagination-bullet {
   width: 100%;
   height: 4px;
   border-radius: 0;
   margin: 0 !important;
   background: var(--white);
   opacity: 1;
}

.swiper-pagination .swiper-pagination-bullet[aria-label="Go to slide 1"] {
   border-radius: 5px 0 0 5px;
}

.swiper-pagination .swiper-pagination-bullet:first-child {
   border-radius: 5px 0 0 5px;
}

.swiper-pagination .swiper-pagination-bullet:last-child {
   border-radius: 0 5px 5px 0;
}

.swiper-button-next,
.swiper-button-prev {
   position: relative !important;
   margin: 0 !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
   content: '' !important;
   font-family: none !important;
   position: relative !important;
   font-size: 0 !important;
}

.swiper-button-next svg,
.swiper-button-prev svg {
   height: auto !important;
   width: auto !important;
}

.swiper-pagination-bullet-active {
   background-color: var(--amethyst-purple) !important;
}

/*>>>>>>>> swiper style end <<<<<<<<<<<*/