/* =========================================================
   IAIR LANDING PAGE — STYLESHEET
   Design tokens per brief:
   Navy: #0A1128 | Primary Blue: #166BFF | White: #FFFFFF
   Light Gray: #F5F7FA | Border: #E8EDF4
   Dark Text: #101828 | Paragraph: #667085
   ========================================================= */

:root {
  --navy-dark: #0A1128;
  --navy-darker: #060B1A;
  --primary-blue: #166BFF;
  --primary-blue-dark: #0F52C9;
  --white: #FFFFFF;
  --light-gray: #F5F7FA;
  --border-color: #E8EDF4;
  --dark-text: #101828;
  --paragraph: #667085;
  --shadow-soft: 0 4px 24px rgba(16, 24, 40, 0.06);
  --shadow-medium: 0 8px 32px rgba(16, 24, 40, 0.10);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --transition: all 300ms ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--dark-text);
  background-color: var(--white);
  font-weight: 400;
  line-height: 1.6;
}

a { text-decoration: none; }

.text-blue { color: var(--primary-blue)!important; }

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.site-header { z-index: 1000; }

.iair-navbar {
  background: var(--white);
  padding: 2px 0;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.iair-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 22px;
  color: var(--dark-text);
}

.logo-mark {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-blue), #4A90FF);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
}

.logo-text { letter-spacing: -0.02em; }

.nav-links { gap: 4px; }

.nav-links .nav-link {
  color: var(--dark-text);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 10px !important;
  border-radius: 8px;
  transition: var(--transition);
}


@media screen and (max-width: 1400px) {

.hero-student-image img {
  width: 470px!important;
}

}

@media screen and (min-width: 2000px) {

  .timeline-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 131px!important;
      text-align: center;
    } 
}



.nav-links .nav-link:hover {
  color: var(--primary-blue);
  background: var(--light-gray);
}

.btn-icon-search {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--light-gray);
  border: none;
  color: var(--dark-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.btn-icon-search:hover { background: var(--border-color); }

.btn-login {
  color: var(--dark-text);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  transition: var(--transition);
}
.btn-login:hover { background: var(--light-gray); color: var(--dark-text); }

.btn-enroll {
  background: var(--primary-blue);
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 10px;
  transition: var(--transition);
  border: 1px solid var(--primary-blue);
}
.btn-enroll:hover {
  background: var(--primary-blue-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero-section {
  position: relative;
  background: var(--navy-dark);
  overflow: hidden;
  padding: 0px 0 0px;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 107, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 107, 255, 0.12) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, #000 40%, transparent 100%);
}

.hero-overlay {
  position: absolute;
  /* inset: 0; */
  /* background: radial-gradient(ellipse 60% 50% at 75% 30%, rgba(22, 107, 255, 0.35), transparent 70%),
              linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-darker) 100%); */
    /* background: radial-gradient(ellipse 60% 100% at 95% 100%, rgb(1 6 29), transparent 70%), linear-gradient(180deg, #000920 0%, #00051c 100%); */
}

.hero-row { position: relative; z-index: 2; }

.eyebrow-badge {
display: inline-flex;
  align-items: center;
  color: #ffffff;
  background: rgba(22, 107, 255, 0.12);
  border: 1px solid rgb(0 81 215);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 15px;
  margin-top: 25px;
}

.hero-heading {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 8px;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 28px;
  margin-top:16px;
}

.feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom:10px;
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 4px;
  border-radius: 100px;
}
.feature-badge i { color: var(--primary-blue); }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom:25px; }

.btn-primary-cta {
  background: var(--primary-blue);
  color: var(--white);
  font-weight: 600;
  font-size: 13.5px;
  padding: 14px 28px;
  border-radius: 12px;
  transition: var(--transition);
  border: 1px solid var(--primary-blue);
}
.btn-primary-cta:hover {
  background: var(--primary-blue-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 107, 255, 0.35);
}

.btn-secondary-cta {
  background: transparent;
  color: var(--white);
  font-weight: 600;
  font-size: 13.5px;
  padding: 14px 28px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: var(--transition);
}
.btn-secondary-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.hero-right { position: relative; z-index: 2; margin-top: 0px; }

.hero-image-wrap { position: relative; max-width: 460px; margin: 0 auto; }

.hero-student-image {
  width: 100%;
  /* aspect-ratio: 5 / 5; */
  border-radius: var(--radius-lg);
  /* background: linear-gradient(160deg, #1B2A55 0%, #0F1938 100%);
  border: 1px solid rgba(255, 255, 255, 0.1); */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-medium);
}

.hero-student-icon {
  font-size: 110px;
  color: rgba(22, 107, 255, 0.5);
}

.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--dark-text);
  animation: float 4s ease-in-out infinite;
}

.fc-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(22, 107, 255, 0.1);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.card-healthcare { top: 8%; left: -8%; animation-delay: 0s; }
.card-engineering { top: 45%; right: -10%; animation-delay: 1.3s; }
.card-finance { bottom: 6%; left: -4%; animation-delay: 2.6s; }

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

/* =========================================================
   SHARED SECTION STYLES
   ========================================================= */
section { padding:15px 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom:15px;
}

.section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dark-text);
  margin-bottom: 8px;
}

.section-subtitle {
  color: var(--paragraph);
  font-size: 16px;
  font-weight: 400;
  /* max-width: 520px; */
  margin-bottom: 0;
}

.btn-outline-view {
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 20px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  white-space: nowrap;
  transition: var(--transition);
}
.btn-outline-view:hover {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
}

/* =========================================================
   STREAMS SECTION
   ========================================================= */
.streams-section { background: var(--white); }

.stream-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  text-align: center;
  height: 100%;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.stream-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
  border-color: var(--primary-blue);
}

.stream-icon {
  width: 43px;
  height: 43px;
  margin: 0 auto 16px;
  border-radius: 14px;
  /* background: rgba(22, 107, 255, 0.08); */
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding-top:6px;
}

.stream-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 6px;
  /* min-height: 40px; */
}

.stream-count {
  font-size: 13px;
  color: var(--paragraph);
  margin-bottom: 0;
}

/* =========================================================
   COURSES SECTION
   ========================================================= */
.courses-section { background: var(--light-gray); }

.course-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  height: 100%;
  transition: var(--transition);
  border: 1px solid var(--border-color);
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
}

.course-image {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  color: var(--white);
}
.ci-1 { background: linear-gradient(135deg, #166BFF, #4A90FF); }
.ci-2 { background: linear-gradient(135deg, #0F1938, #26407A); }
.ci-3 { background: linear-gradient(135deg, #1E3A8A, #166BFF); }
.ci-4 { background: linear-gradient(135deg, #0A1128, #1B2A55); }

.course-body { padding: 5px 20px; }

.course-category {
  color: var(--primary-blue);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


@media screen and (max-width:1100px) {

  .course-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--dark-text);
    margin: 8px 0 14px;
    line-height: 1.4;
    min-height: 48px;
  }

}




.course-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-text);
  margin: 8px 0 14px;
  line-height: 1.4;
  min-height: 48px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  color: var(--paragraph);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 18px;
}
.course-meta i { color: var(--primary-blue); margin-right: 4px; }

.btn-enroll-card {
  background: var(--primary-blue);
  color: var(--white);
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 0;
  border-radius: 10px;
  transition: var(--transition);
}
.btn-enroll-card:hover { background: var(--primary-blue-dark); color: var(--white); }

/* =========================================================
   WHY SECTION
   ========================================================= */
/*==========================================
 WHY SECTION
===========================================*/
.why-section {
  padding: 10px 0;
  background:
    radial-gradient(circle at top right, #dcecff 0%, transparent 35%),
    radial-gradient(circle at bottom left, #eef5ff 0%, transparent 35%),
    #f8fbff;
  position: relative;
  overflow: hidden;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 40px;
  background: #e8f1ff;
  color: #166bff;
  font-size: 14px;
  font-weight: 600;
}

.section-title {
  font-size: 33px;
  font-weight: 800;
  color: #081c3a;
}

.section-title span {
  color: #166bff;
}

.section-subtitle {
  /* max-width: 620px; */
  color: #6d7a8c;
  font-size: 17px;
}

.why-card {
  background: #fff;
  border-radius: 22px;
  padding: 10px 20px;
  text-align: center;
  height: 100%;
  position: relative;
  overflow: hidden;

  border: 1px solid #edf2fb;

  transition: .45s;

  box-shadow:
    0 12px 40px rgba(25, 80, 170, .08);
}

.why-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #166bff, #00d2ff);
  transform: scaleX(0);
  transition: .4s;
}

.why-card:hover::before {
  transform: scaleX(1);
}

.why-card:hover {

  transform: translateY(-12px);

  box-shadow:
    0 25px 50px rgba(22, 107, 255, .18);

  border-color: #d6e5ff;
}

.icon-bg {

  width: 65px;
  height: 65px;

  margin: auto auto 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 22px;

  background:
    linear-gradient(135deg, #166bff, #00c6ff);

  color: #fff;

  font-size: 34px;

  transition: .4s;

  box-shadow:
    0 15px 30px rgba(22, 107, 255, .25);

}

.why-card:hover .icon-bg {

  transform:
    rotate(-8deg) scale(1.08);

}

.why-card h4 {

  font-size: 14px;
  font-weight: 700;
  color: #0f274d;
  line-height: 1.5;
  margin: 0;

}

/* Large Screen */

@media(min-width:1400px) {

  .row-cols-xl-7>* {
    width: 14.285714%;
  }

}

/* Tablet */

@media(max-width:991px) {

  .section-title {
    font-size: 34px;
  }

  .why-card {
    padding: 28px 18px;
  }

}

/* Mobile */

@media(max-width:576px) {

  .why-section {
    padding: 10px 0;
  }

  .btn-outline-view{
    display:none;
  }

  .section-title {
    font-size: 28px;
  }

  .section-subtitle {
    font-size: 15px;
  }

  .icon-bg {

    width: 68px;
    height: 68px;
    font-size: 28px;

  }

  .why-card h4 {

    font-size: 15px;

  }

  .timeline-wrap {
  background: #fff;
  border-radius: 24px;
  padding: 35px 25px;
  display: block!important;;
  align-items: flex-start;
  justify-content: flex-start;
  /* <-- Center ki jagah */
  gap: 18px;

  overflow-x: auto;
  overflow-y: hidden;

  box-shadow: 0 15px 45px rgba(0, 0, 0, .08);
  border: 1px solid #edf1f8;

  scrollbar-width: none;
}


}

/* =========================================================
   LEARNING JOURNEY
   ========================================================= */
.journey-section { background: var(--light-gray); }

.timeline-wrap {
  background: #fff;
  border-radius: 24px;
  padding: 35px 25px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* <-- Center ki jagah */
  gap: 18px;

  overflow-x: auto;
  overflow-y: hidden;

  box-shadow: 0 15px 45px rgba(0, 0, 0, .08);
  border: 1px solid #edf1f8;

  scrollbar-width: none;
}



.timeline-wrap::-webkit-scrollbar {
  display: none;
}

.timeline-step {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.step-circle {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
  transition: .35s;
}

.step-circle i {
  font-size: 30px !important;
}

.timeline-step:hover .step-circle {
  transform: translateY(-6px);
}

.step-label {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.45;
}

.timeline-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #30b9fd;
  font-size: 24px;
  margin-top: 22px;
  flex-shrink: 0;
}

.timeline-arrow i {
  animation: arrowMove 1.6s infinite;
}

@keyframes arrowMove {

  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(6px);
  }

  100% {
    transform: translateX(0);
  }

}



@media(max-width:991px) {

  .timeline-wrap {

    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 25px 20px;

  }

  .timeline-step {

    min-width: 150px;

  }

  .timeline-arrow {

    margin-top: 28px;

  }

}


@media(max-width:576px) {

  .timeline-wrap {

    gap: 12px;
    padding: 18px;

  }

  .timeline-step {

    min-width: 125px;

  }

  .step-circle {

    width: 58px;
    height: 58px;
    border-radius: 18px;

  }

  .step-circle i {

    font-size: 24px !important;

  }

  .step-label {

    font-size: 12px;

  }

  .timeline-arrow {

    font-size: 20px;
    margin-top: 18px;

  }

}


.university-card {
  /* background: linear-gradient(160deg, #0a2550, #18396e); */
    /* background: linear-gradient(160deg, #0a2550, #18396e); */
      background-image: url(/img/university-bg-img.png);
      background-position: center;
      width: 100%;
      background-size: cover;
      border-radius: var(--radius-lg);
      padding: 7px 28px;
      height: 100%;
      color: var(--white);
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: var(--shadow-medium);
}

.university-icon { font-size: 36px; margin-bottom: 16px; opacity: 0.9; }

.university-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.university-card p {
color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  margin-bottom: 9px;
  width: 225px;
}


.btn-white-cta {
  background: var(--white);
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: 10px;
  align-self: flex-start;
  transition: var(--transition);
}
.btn-white-cta:hover { background: var(--light-gray); color: var(--primary-blue-dark); }

/* =========================================================
   SUCCESS STORIES
   ========================================================= */
.stories-section { background: var(--white); }

.story-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 26px;
  height: 100%;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.story-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-4px); }

.story-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--light-gray);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.story-quote {
  font-size: 14.5px;
  color: var(--dark-text);
  line-height: 1.6;
  margin-bottom: 18px;
  font-style: italic;
}

.story-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.story-course { font-size: 13px; color: var(--paragraph); margin-bottom: 0; }

.stats-card {
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: 15px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  box-shadow: var(--shadow-medium);
}

.stat-item { text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0px; }
.stat-item:last-child { border-bottom: none; padding-bottom: 0; }

.stat-number {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

/* =========================================================
   BLOG SECTION
   ========================================================= */
.blog-section { background: var(--light-gray); }

.blog-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  height: 100%;
  transition: var(--transition);
  border: 1px solid var(--border-color);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); }

.blog-image {
  /* aspect-ratio: 16 / 9; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: var(--white);
}
.bi-1 { background: linear-gradient(135deg, #166BFF, #0A1128); }
.bi-2 { background: linear-gradient(135deg, #0F1938, #166BFF); }
.bi-3 { background: linear-gradient(135deg, #1E3A8A, #4A90FF); }

.blog-body { padding: 20px; }

.blog-date {
  font-size: 12.5px;
  color: var(--primary-blue);
  font-weight: 600;
}

.blog-title {
  font-size: 11.5px;
  font-weight: 700;
  color:#08398e;
  margin: 8px 0 0;
  line-height: 1.4;
}

/* =========================================================
   FOOTER
   ========================================================= */
/* .site-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 30px 0 24px;
}

.footer-top { margin-bottom: 30px; }

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 14px;
}

.footer-about {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.footer-social a:hover { background: var(--primary-blue); }

.footer-heading {
  color: var(--white);
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  transition: var(--transition);
}
.footer-links a:hover { color: var(--primary-blue); }

.newsletter-form { display: flex; gap: 8px; margin-bottom: 8px; }

.newsletter-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
}
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.newsletter-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-blue);
  box-shadow: none;
  color: var(--white);
}

.btn-subscribe {
  background: var(--primary-blue);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 10px;
  white-space: nowrap;
  transition: var(--transition);
}
.btn-subscribe:hover { background: var(--primary-blue-dark); color: var(--white); }

.newsletter-msg { font-size: 13px; color: #4ADE80; min-height: 18px; margin-bottom: 0; }

.footer-divider {  margin: 10px 0 24px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.copyright { font-size: 13.5px; color: rgba(255, 255, 255, 0.5); margin-bottom: 0; }

.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  transition: var(--transition);
}
.footer-bottom-links a:hover { color: var(--primary-blue); } */


/* bottom footer start styling  */

/* =========================
        FOOTER CSS
========================= */
/* =========================
   FOOTER
========================= */

.iair-footer {
  position: relative;
  background: linear-gradient(135deg, #020024 0%, #061b57 45%, #0a4db3 100%);
  color: #fff;
  padding: 8px 3% 3px;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* GLOW EFFECT */

.iair-footer::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  background: rgba(48, 185, 253, 0.12);
  border-radius: 50%;
  top: -120px;
  left: -120px;
  filter: blur(90px);
}

.iair-footer::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  bottom: -100px;
  right: -100px;
  filter: blur(90px);
}

/* CONTENT */

.footer-container,
.footer-bottom {
  position: relative;
  z-index: 2;
}


/* =========================
   GRID
========================= */

.footer-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1.9fr;
  gap: 0px;
  align-items: flex-start;
}


/* =========================
   LOGO
========================= */

.footer-logo {
  width: 170px;
  max-width: 100%;
}


/* =========================
   HEADING
========================= */

.footer-col h3 {
  font-size: 18px;
  margin-bottom: 18px;
  font-weight: 600;
  position: relative;
}

.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 45px;
  height: 3px;
  background: #30b9fd;
  border-radius: 20px;
}


/* =========================
   QUICK LINKS
========================= */

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 7px;
}

/* ICON ADD */

.footer-col ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;

  display: flex;
  align-items: center;
  gap: 12px;

  transition: .3s ease;
}

/* ICON */
.footer-col ul li a {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-col ul li a::before {
  content: "\F285";
  /* bi-chevron-right */
  font-family: "bootstrap-icons";

  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(48, 185, 253, .18);

  color: #30b9fd;
  font-size: 12px;

  transition: .3s;
}

.footer-col ul li a:hover::before {
  background: #30b9fd;
  color: #fff;
}

/* HOVER */

.footer-col ul li a:hover {
  color: #30b9fd;
  transform: translateX(4px);
}

.footer-col ul li a:hover::before {
  background: #30b9fd;
  color: #fff;
}


/* =========================
   CONTACT
========================= */

.footer-col p {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  font-size: 14px;
  line-height: 1.8;
  color: #f1f1f1;

  margin-bottom: 7px;
}

.footer-col p i {
  color: #30b9fd;
  font-size: 14px;
  margin-top: 4px;
}


/* =========================
   SOCIAL
========================= */

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  text-decoration: none;

  transition: .3s ease;
}

.social-links a:hover {
  background: #30b9fd;
  transform: translateY(-4px);
}


/* footer styling */

/* SECTION */

.cta-footer {
  /* background: linear-gradient(90deg, #0050E6 0%, #001A66 100%); */
  background: linear-gradient(135deg, #30b9fd, #1b3f91);
  padding: 5px 50px;
  overflow: hidden;
}

.cta-container {
  max-width: 100%;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* LEFT CONTENT */

.cta-content {
  max-width: 560px;
}

.cta-content h2 {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 5px;
}

.cta-content p {
  font-size: 11px;
  /* line-height: 1.8; */
  color: rgba(255, 255, 255, 0.88);
}

/* RIGHT BOXES */

.cta-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* CARD */

.cta-card {
  width: 210px;
  height: 65px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.03);

  transition: 0.35s ease;
  cursor: pointer;
}

/* .cta-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
} */

/* ICON */

.cta-card i {
  font-size: 25px;
  color: #ffffff;
  margin-bottom: 5px;
}

/* TEXT */

.cta-card h4 {
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

/* TABLET */

@media(max-width:1200px) {

  .cta-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-boxes {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-card {
    width: 100%;
  }

}

/* MOBILE */

@media(max-width:768px) {

  .cta-footer {
    padding: 15px 20px;
  }

  .cta-content h2 {
    font-size: 34px;
  }

  .cta-content p {
    font-size: 17px;
  }

  .cta-boxes {
    grid-template-columns: 1fr;
  }

  .cta-card {
    height: 80px;
  }

  .cta-card i {
    font-size: 25px;
  }

  .cta-card h4 {
    font-size: 15px;
  }

  .footer-bottom p {
    margin: 0;
    font-size: 10px !important;
    color: #e5e5e5;
    font-weight: 500;
  }

}

/* SMALL MOBILE */

@media(max-width:480px) {

  .cta-content h2 {
    font-size: 14px;
    line-height: 1.35;
  }

  .cta-content p {
    font-size: 12px;
    line-height: 1.7;
  }

  .topbar {
    /* background: var(--primary-dk); */
    padding: 10px 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.75);
  }

  /* .topbar{
        display:none;
    } */





}



/* bootom footer */
.footer-bottom {
  border-top: 2px solid rgba(255, 255, 255, 0.12);

  /* margin-top: 30px; */
  padding-top: 18px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #e5e5e5;
}

.footer-company span {
  color: #fff;
  font-weight: 700;

}




/* =========================
   TABLET
========================= */

@media(max-width:992px) {

  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:600px) {

  .iair-footer {
    padding: 35px 20px 15px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .footer-logo {
    width: 180px;
  }

  .footer-col h3 {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .footer-col ul li a {
    font-size: 15px;
  }

  .footer-col p {
    font-size: 14px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

}

.fa-facebook-f {
  color: #1877F2;
}

.fa-instagram {
  color: #E4405F;
}

.fa-linkedin-in {
  color: #0A66C2;
}

.fa-youtube {
  color: #FF0000;
}

.fa-x-twitter {}







/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px) {
  .hero-heading { font-size: 42px; }
  section { padding: 10px 0; }
  .hero-section { padding: 60px 0 80px; }
  .nav-links { margin: 20px 0; gap: 2px; }
  .nav-actions { flex-wrap: wrap; gap: 10px; margin-top: 12px; }
  .timeline-wrap { flex-direction: column; }
  .timeline-arrow { transform: rotate(90deg); margin: -6px 0; }
  .step-circle { margin-bottom: 8px; }
  .hero-right { margin-top: 80px; }
}

@media (max-width: 767.98px) {
  .hero-heading { font-size: 34px; }
  .section-title { font-size: 26px; }
  .hero-image-wrap { max-width: 320px; }
  .floating-card { font-size: 11.5px; padding: 9px 12px; }
  .fc-icon { width: 28px; height: 28px; font-size: 12px; }
  .card-healthcare { left: -4%; }
  .card-engineering { right: -6%; }
  .card-finance { left: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480.98px) {
  .hero-heading { font-size: 28px; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; text-align: center; }
  .newsletter-form { flex-direction: column; }

  .iair-logo img{
    width: 250px !important;;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .floating-card { animation: none; }
  html { scroll-behavior: auto; }
}






/* custom css */

.all-stream{
  position: relative;
  top:-13px;
}

.stream-icon i{
  font-size:35px;
}


/* submenu css */

.dropdown-menu {
  border: none;
  border-radius: 12px;
  padding: 10px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.dropdown-item {
  padding: 5px 20px;
  font-size: 13px;
  font-weight: 500;
  transition: .3s;
}

.dropdown-item:hover {
  background: #0d6efd;
  color: #fff;
  padding-left: 28px;
}


/* Standard Syntax */
@media screen and (max-width:1300px) {
.nav-links .nav-link {
    color: var(--dark-text);
    font-weight: 500;
    font-size: 11px;
    padding: 8px 10px !important;
    border-radius: 8px;
    transition: var(--transition);
  }
}


.hero-banner {
  background: url('/img/B-3.png') center center no-repeat;
  background-size: cover;
  /* ya contain */
  width: 100%;
  /* min-height: 700px; */
}



.terms-wrapper {
  position: relative;

  padding: 40px 3%;

  background: #ffffff;

  overflow: hidden;
}

/* BIG BG TEXT */

.bg-title {
  position: absolute;

  top: 20px;
  left: 50%;

  transform: translateX(-50%);

  font-size: 85px;
  font-weight: 800;

  color: rgba(0, 0, 0, 0.04);

  white-space: nowrap;

  z-index: 0;
}

/* HEADING */

.terms-heading {
  position: relative;

  z-index: 2;

  margin-bottom: 50px;
}

.terms-heading h2 {
  font-size: 34px;
  font-weight: 800;

  color: #000;

  margin-bottom: 12px;
}

.terms-heading p {
  max-width: 100%;

  color: #4b5563;

  line-height: 1.8;

  font-size: 13px;
}

/* ITEM */

.terms-item {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 40px;
}

/* NUMBER */

.terms-number {
  width: 55px;
  height: 55px;

  min-width: 55px;

  border-radius: 50%;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  font-weight: 700;

  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

/* CONTENT */

.terms-content h4 {
  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 15px;
  font-weight: 700;

  color: #111827;

  margin-bottom: 12px;
}

/* ICON */

.terms-content h4 i {
  font-size: 18px;

  background: linear-gradient(135deg, #2563eb, #38bdf8);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.25));
}

/* PARAGRAPH */

.terms-content p {
  color: #4b5563;

  line-height: 1.9;

  font-size: 13px;

  max-width: 100%;
  text-align: justify;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:992px) {

  .bg-title {
    font-size: 58px;
  }

}

@media(max-width:768px) {

  .terms-wrapper {
    padding: 40px 20px;
  }

  .bg-title {
    font-size: 40px;

    top: 30px;
  }

  .terms-heading h2 {
    font-size: 28px;
  }

  .terms-item {
    gap: 15px;
  }

  .terms-content h4 {
    font-size: 15px;
  }

}

@media(max-width:480px) {

  .bg-title {
    font-size: 28px;
  }

  .terms-item {
    flex-direction: column;
  }

  .terms-number {
    width: 50px;
    height: 50px;

    min-width: 50px;
  }

  .terms-content h4 {
    font-size: 15px;
    line-height: 1.5;
  }

  .terms-content p {
    font-size: 14px;
  }

  .nav-logo img {
    width: 260px !important;
    ;
  }

}


/* About sec */

/* about us -our ai eduaction stystem  */

/* =========================================
      AI EDUCATION ECOSYSTEM
========================================= */
.understanding-iair {
  width: 100%;
  padding: 30px 3%;
  background: #ffffff;
}

.ui-container {
  /* max-width: 100%;
    margin: auto; */
  display: flex;
  align-items: center;
  gap: 60px;
}

/* LEFT */

.ui-left {
  flex: 0 0 380px;
  min-width: 300px;
}

.ui-image-box {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(88, 122, 255, 0.2);
}

.ui-image-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* RIGHT */

.ui-right {
  flex: 1;
  min-width: 0;
}

.ui-right h2 {
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 8px;
  font-weight: 800;
  color: #08143c;
}

.ui-right h2 span {
  color: #2f57ab;
}

.ui-right p {
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 0px;
  font-weight: 500;
}

/* FEATURE BOX */

.ui-feature-box {
  margin-top: 3px;
  border: 1px solid #dbe4ff;
  border-radius: 20px;
  padding: 0px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #fff;
}

.ui-feature-item {
  text-align: center;
  padding: 10px;
}

.ui-icon {
  width: 70px;
  height: 70px;
  margin: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #edf4ff, #ffffff);
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #5b7cff;
  font-size: 28px;
}

.ui-feature-item h4 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #111827;
  font-weight: 700;
}

.ui-feature-item p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

/* =========================
        LARGE TABLET
========================= */

@media (max-width: 1199px) {

  .ui-container {
    gap: 40px;
  }

  .ui-left {
    flex: 0 0 320px;
  }

}

/* =========================
          TABLET
========================= */

@media (max-width: 991px) {

  .ui-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .ui-left {
    flex: none;
    width: 100%;
    max-width: 450px;
    min-width: auto;
  }

  .ui-right {
    width: 100%;
  }

  .ui-right h2 {
    font-size: 32px;
    text-align: center;
  }

  .ui-right p {
    text-align: center;
  }

  .ui-feature-box {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
          MOBILE
========================= */

@media (max-width: 600px) {

  .understanding-iair {
    padding: 20px 15px;
  }

  .ui-container {
    gap: 20px !important;
  }

  .ui-left {
    width: 100%;
    max-width: 100%;
  }

  .ui-image-box {
    border-radius: 18px;
  }

  .ui-right h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .ui-right p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
  }

  .ui-feature-box {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }

  .ui-feature-item {
    padding: 0;
  }

  .ui-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 12px;
  }

  .ui-feature-item h4 {
    font-size: 16px;
  }

  .ui-feature-item p {
    font-size: 14px;
  }
}



.ai-ecosystem-section {
  width: 100%;
  padding: 10px 3%;
  background: #ffffff;
}

.ecosystem-container {
  max-width: 100%;
  margin: auto;
}

/* HEADING */

.ecosystem-heading {
  text-align: center;
  margin-bottom: 15px;
}

.ecosystem-heading h2 {
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 15px;
}

.ecosystem-heading h2 span {
  color: #2f57ab;
}

.eco-line {
  width: 70px;
  height: 4px;
  background: #111827;
  border-radius: 20px;
  margin: auto;
  margin-bottom: 8px;
}

.ecosystem-heading p {
  max-width: 850px;
  margin: auto;
  color: #64748b;
  font-size: 13px;
  line-height: 1.9;
}

/* GRID */

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* CARD */

.eco-card {
  border-radius: 24px;
  padding: 10px 15px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: 0.4s ease;
}

.eco-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.eco-top-text {
  font-size: 14px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 25px;
}

.eco-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  margin-bottom: 10px;
}

.eco-green-bg {
  background: #4caf50;
}

.eco-blue-bg {
  background: #2563eb;
}

.eco-purple-bg {
  background: #9333ea;
}

.eco-card h3 {
  font-size: 25px;
  margin-bottom: 5px;
  font-weight: 800;
}

.eco-green h3 {
  color: #4caf50;
}

.eco-blue h3 {
  color: #2563eb;
}

.eco-purple h3 {
  color: #9333ea;
}

.eco-card h4 {
  font-size: 16px;
  line-height: 1.5;
  color: #0f172a;
  margin-bottom: 18px;
  font-weight: 700;
}

.eco-desc {
  font-size: 13px;
  line-height: 1.8;
  color: #64748b;
  margin-bottom: 15px;
}

/* LIST */

.eco-card ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.eco-card ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #475569;
  line-height: 1.7;
  font-size: 15px;
}

.eco-card ul li::before {
  content: "\F26A";
  /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 15px;
  color: #0d6efd;
}



.eco-green ul li::before {
  color: #4caf50;
}

.eco-blue ul li::before {
  color: #2563eb;
}

.eco-purple ul li::before {
  color: #9333ea;
}

/* BUTTON */

.eco-btn {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.4s ease;
}

.eco-btn-green {
  border: 2px solid #4caf50;
  color: #4caf50;
}

.eco-btn-blue {
  border: 2px solid #2563eb;
  color: #2563eb;
}

.eco-btn-purple {
  border: 2px solid #9333ea;
  color: #9333ea;
}

.eco-btn:hover {
  transform: translateY(-3px);
}

/* =========================================
              TABLET
========================================= */

@media(max-width:991px) {

  .ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecosystem-heading h2 {
    font-size: 40px;
  }

  .eco-card h3 {
    font-size: 34px;
  }

  .eco-card h4 {
    font-size: 22px;
  }

}

/* =========================================
              MOBILE
========================================= */

@media(max-width:768px) {

  .ai-ecosystem-section {
    padding: 0px 20px;
  }

  .ecosystem-grid {
    grid-template-columns: 1fr;
  }

  .ecosystem-heading h2 {
    font-size: 23px;
  }

  .ecosystem-heading p {
    font-size: 15px;
    line-height: 1.8;
  }

  .eco-card {
    padding: 28px 22px;
  }

  .eco-card h3 {
    font-size: 20px;
  }

  .eco-card h4 {
    font-size: 14px;
  }

}

/* what we do section  */

/* =========================================
          WHAT WE DO SECTION
========================================= */

.what-we-do-section {
  width: 100%;
  padding: 10px 3%;
  background: #ffffff;
}

.wwd-container {
  max-width: 100%;
  margin: auto;
}

/* HEADING */

.wwd-heading {
  text-align: center;
  margin-bottom: 15px;
}

.wwd-heading h2 {
  font-size: 30px;
  font-weight: 800;
  color: #08143c;
  margin-bottom: 12px;
}

.wwd-heading h2 span {
  color: #38bdf8;
}

.wwd-line {
  width: 70px;
  height: 4px;
  border-radius: 20px;
  background: #111827;
  margin: auto;
}

/* GRID */

.wwd-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* CARD */

.wwd-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px 26px;
  border: 1px solid #edf2ff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  transition: 0.4s ease;
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.wwd-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* ICON */

.wwd-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  margin-bottom: 26px;
}

.blue-bg {
  background: #2563eb;
}

.purple-bg {
  background: #7c3aed;
}

.cyan-bg {
  background: #06b6d4;
}

.green-bg {
  background: #43a047;
}

.violet-bg {
  background: #9333ea;
}

/* CONTENT */

.wwd-card h3 {
  font-size: 16px;
  line-height: 1.4;
  color: #111827;
  margin-bottom: 5px;
  font-weight: 800;
}

.wwd-card p {
  font-size: 14px;
  line-height: 2;
  color: #4b5563;
  margin-bottom: 4px;
  flex: 1;
}

/* ARROW */

.wwd-card a {
  font-size: 28px;
  color: #2563eb;
  transition: 0.3s;
  align-self: flex-end;
}

.wwd-card a:hover {
  transform: translateX(5px);
}

/* =========================================
                LAPTOP
========================================= */

@media(max-width:1200px) {

  .wwd-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* =========================================
                TABLET
========================================= */

@media(max-width:991px) {

  .wwd-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wwd-heading h2 {
    font-size: 42px;
  }

}

/* =========================================
                MOBILE
========================================= */

@media(max-width:768px) {

  .what-we-do-section {
    padding: 70px 20px;
  }

  .wwd-grid {
    grid-template-columns: 1fr;
  }

  .wwd-heading h2 {
    font-size: 34px;
  }

  .wwd-card {
    min-height: auto;
    padding: 28px 22px;
  }

  .wwd-card h3 {
    font-size: 24px;
  }

  .wwd-card p {
    font-size: 15px;
    line-height: 1.9;
  }

}

/* =========================================
          WHO WE SERVE SECTION
========================================= */

.who-we-serve-section {
  width: 100%;
  padding: 5px 3%;
  background: #ffffff;
}

.wws-container {
  max-width: 100%;
  margin: auto;
}

/* HEADING */

.wws-heading {
  text-align: center;
  margin-bottom: 15px;
}

.wws-heading h2 {
  font-size: 30px;
  font-weight: 800;
  color: #08143c;
  margin-bottom: 14px;
}

.wws-heading h2 span {
  color: #2f57ab;
}

.wws-line {
  width: 70px;
  height: 4px;
  border-radius: 30px;
  background: #111827;
  margin: auto;
}

/* GRID */

.wws-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* CARD */

.wws-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px 10px;
  border: 1px solid #eef2ff;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  transition: 0.4s ease;
  min-height: 240px;
}

.wws-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

/* ICON */

.wws-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin: auto;
  margin-bottom: 26px;
  background: linear-gradient(135deg, #4f71ca, #264779);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}

/* CONTENT */

.wws-card h3 {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 5px;
  color: #111827;
  font-weight: 800;
}

.wws-card p {
  font-size: 12px;
  line-height: 2;
  color: #4b5563;
}

/* =========================================
                LAPTOP
========================================= */

@media(max-width:1200px) {

  .wws-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* =========================================
                TABLET
========================================= */

@media(max-width:991px) {

  .wws-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wws-heading h2 {
    font-size: 42px;
  }

}

/* =========================================
                MOBILE
========================================= */

@media(max-width:768px) {

  .who-we-serve-section {
    padding: 10px 20px;
  }

  .wws-grid {
    grid-template-columns: 1fr;
  }

  .wws-heading h2 {
    font-size: 22px;
  }

  .wws-card {
    min-height: auto;
    padding: 32px 22px;
  }

  .wws-card h3 {
    font-size: 19px;
  }

  .wws-card p {
    font-size: 14px;
    line-height: 1.9;
  }

}







/* =========================================
                WHY IAIR
========================================= */

.why-iair-section {
  width: 100%;
  padding: 10px 3%;
  background: linear-gradient(135deg, #4f71ca, #264779);
  position: relative;
  overflow: hidden;
}

/* BACKGROUND GLOW */

.why-iair-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle,
      rgba(59, 130, 246, 0.35),
      transparent 70%);
  pointer-events: none;
}

/* CONTAINER */

.why-iair-container {
  max-width: 100%;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* HEADING */

.why-iair-heading {
  text-align: center;
  margin-bottom: 20px;
}

.why-iair-heading h2 {
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.why-iair-heading h2 span {
  color: #ffffff;
}

.why-line {
  width: 70px;
  height: 4px;
  border-radius: 20px;
  background: #ffffff;
  margin: auto;
}

/* GRID */

.why-iair-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

/* ITEM */

.why-item {
  text-align: center;
  padding: 0 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.no-border {
  border-right: none;
}

/* ICON */

.why-icon {
  width: 60px;
  height: 60px;
  margin: auto;
  margin-bottom: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7dd3fc;
  font-size: 22px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.25);
}

/* CONTENT */

.why-item h3 {
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 2px;
  font-weight: 700;
}

.why-item p {
  font-size: 13px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.82);
}

/* =========================================
                LAPTOP
========================================= */

@media(max-width:1200px) {

  .why-iair-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .why-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 35px;
  }

}

/* =========================================
                TABLET
========================================= */

@media(max-width:991px) {

  .why-iair-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-iair-heading h2 {
    font-size: 42px;
  }

}

/* =========================================
                MOBILE
========================================= */

@media(max-width:768px) {

  .why-iair-section {
    padding: 10px 20px;
  }

  .why-iair-grid {
    grid-template-columns: 1fr;
  }

  .why-iair-heading h2 {
    font-size: 34px;
  }

  .why-item {
    padding: 0;
    padding-bottom: 10px;
  }

  .why-item h3 {
    font-size: 20px;
  }

  .why-item p {
    font-size: 13px;
    line-height: 1.9;
  }

}




/* TOGETHER SECTION STYLING  */

/* =========================================================
   IAIR FUTURE CTA SECTION
========================================================= */

.iair-future-section {
  padding: 13px 5%;

  background: #ffffff;

  border-top: 4px solid #081f78;
}

/* CONTAINER */

.iair-future-container {
  max-width: 100%;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
}

/* LEFT */

.iair-future-left {
  display: flex;
  align-items: center;

  gap: 28px;
}

/* ICON */

.iair-future-icon {
  width: 65px;
  height: 65px;
  min-width: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  position: relative;
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.25);
}

/* OUTER RING */

.iair-future-icon::after {
  content: "";

  position: absolute;

  inset: -10px;

  border-radius: 50%;

  border:
    2px dashed rgba(37, 99, 235, 0.35);
}

/* TEXT */

.iair-future-content h2 {
  font-size: 15px;

  line-height: 1.3;

  font-weight: 700;

  color: #0f172a;
}

.iair-future-content h2 span {
  background:
    linear-gradient(135deg, #2563eb, #38bdf8);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* BUTTONS */

.iair-future-buttons {
  display: flex;
  align-items: center;

  gap: 22px;
}

/* BUTTON */

.iair-future-btn {
  min-width: 180px;
  height: 56px;
  padding: 0 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: 0.35s ease;
}

/* PRIMARY */

.primary-btn {
  background:
    linear-gradient(135deg, #2563eb, #1d4ed8);

  color: #fff;

  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.25);
}

.primary-btn:hover {
  transform: translateY(-5px);
}

/* OUTLINE */

.outline-btn {
  border: 2px solid #93c5fd;

  color: #2563eb;

  background: #fff;
}

.outline-btn:hover {
  background: #eff6ff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px) {

  .iair-future-container {
    flex-direction: column;

    align-items: flex-start;
  }

}

@media(max-width:992px) {

  .iair-future-content h2 {
    font-size: 42px;
  }

  .iair-future-buttons {
    width: 100%;

    flex-wrap: wrap;
  }

}

@media(max-width:768px) {

  .iair-future-section {
    padding: 20px 20px;
  }

  .iair-future-left {
    flex-direction: column;

    align-items: flex-start;
  }

  .iair-future-content h2 {
    font-size: 34px;
  }

  .iair-future-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;

    font-size: 25px;
  }

  .iair-future-btn {
    width: 100%;
    min-width: 100%;
    height: 45px;
    font-size: 16px;
  }

}

@media(max-width:480px) {

  .iair-future-content h2 {
    font-size: 16px;

    line-height: 1.5;
  }

}




/* leadership-section */
/* =========================================
            OUR LEADERSHIP
========================================= */

.leadership-section {
  width: 100%;
  padding: 10px 3%;
  background: #ffffff;
}

.leadership-container {
  max-width: 100%;
  margin: auto;
}

/* HEADING */

.leadership-heading {
  text-align: center;
  margin-bottom: 10px;
}

.leadership-heading h2 {
  font-size: 30px;
  font-weight: 800;
  color: #08143c;
  margin-bottom: 14px;
}

.leadership-heading h2 span {
  color: #385a9d;
}

.leadership-line {
  width: 70px;
  height: 4px;
  border-radius: 20px;
  background: #111827;
  margin: auto;
  margin-bottom: 2px;
}

.leadership-heading p {
  max-width: 850px;
  margin: auto;
  font-size: 14px;
  line-height: 1.9;
  color: #64748b;
}

/* GRID */

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* CARD */

.leader-card {
  background: #fff;
  border-radius: 24px;
  border: 1px solid #edf2ff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: 0.4s ease;
}

.leader-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* IMAGE */

.leader-image {
  padding: 18px;
  padding-bottom: 0;
  display: flex;
  justify-content: center;
}

.leader-image img {
  width: 200px;
  height: 200px;
  border-radius: 18px;
  display: block;
  object-fit: cover;
}

/* CONTENT */

.leader-content {
  padding: 15px 25px 25px;
  text-align: center;
}

.leader-content h3,
.leader-content h4,
.leader-content p {
  text-align: center;
      text-align: center;
        font-size: 20px;
        font-weight: bold;
}


.leader-divider {
  margin: 10px auto 15px;
}

.leader-divider {
  width: 55px;
  height: 3px;
  border-radius: 20px;
  background: #3b82f6;
  margin-bottom: 0px;
}


.leader-content p {
  font-size: 12px;
  line-height: 2;
  color: #475569;
  margin-bottom: 2px;
}

/* LINK */

.leader-link {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f1f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  text-decoration: none;
  font-size: 20px;
  transition: 0.3s;
}

.leader-link:hover {
  background: #2563eb;
  color: #fff;
}

/* =========================================
                LAPTOP
========================================= */

@media(max-width:1200px) {

  .leaders-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* =========================================
                MOBILE
========================================= */

@media(max-width:768px) {

  .leadership-section {
    padding: 10px 20px;
  }

  .leaders-grid {
    grid-template-columns: 1fr;
  }

  .leadership-heading h2 {
    font-size: 36px;
  }

  .leadership-heading p {
    font-size: 15px;
    line-height: 1.8;
  }

  .leader-content h3 {
    font-size: 17px;
  }

  .leader-content h4 {
    font-size: 16px;
  }

  .leader-content p {
    font-size: 14px;
    line-height: 1.9;
  }

}


/* our shared vision  */

/* =========================================
            OUR SHARED VISION
========================================= */

.shared-vision-section {
  width: 100%;
  padding: 10px 3%;
  background: #ffffff;
}

.shared-vision-container {
  max-width: 100%;
  margin: auto;
  border: 1px solid #edf2ff;
  border-radius: 32px;
  padding: 10px;
  background: #03a9f40d;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

/* HEADING */

.shared-vision-heading {
  text-align: center;
  margin-bottom: 10px;
}

.shared-vision-heading h2 {
  font-size: 25px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}

.shared-vision-heading h2 span {
  color: #385a9d;
}

.shared-line {
  width: 70px;
  height: 4px;
  border-radius: 20px;
  background: #111827;
  margin: auto;
}

/* WRAPPER */

.shared-vision-wrapper {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* LEFT */

.shared-left {
  width: 36%;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-right: 40px;
  border-right: 1px solid #e5e7eb;
}

.shared-main-icon {
  min-width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-size: 40px;
}

.shared-left-content p {
  font-size: 14px;
  line-height: 2;
  color: #334155;
  font-weight: 500;
}

/* RIGHT */

.shared-right {
  width: 64%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* ITEM */

.shared-item {
  padding: 0 28px;
  border-right: 1px solid #e5e7eb;
}

.no-border-item {
  border-right: none;
}

/* ICON */

.shared-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin-bottom: 5px;
}

.blue-icon {
  background: #2563eb;
}

.cyan-icon {
  background: #06b6d4;
}

.purple-icon {
  background: #7c3aed;
}

.green-icon {
  background: #65a30d;
}

/* CONTENT */

.shared-item h3 {
  font-size: 15px;
  color: #111827;
  margin-bottom: 1px;
  font-weight: 700;
}

.shared-item p {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

/* =========================================
                TABLET
========================================= */

@media(max-width:1200px) {

  .shared-vision-wrapper {
    flex-direction: column;
  }

  .shared-left,
  .shared-right {
    width: 100%;
  }

  .shared-left {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding-right: 0;
    padding-bottom: 35px;
  }

  .shared-right {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .shared-item {
    border-right: none;
  }

}

/* =========================================
                MOBILE
========================================= */

@media(max-width:768px) {

  .shared-vision-section {
    padding: 10px 20px;
  }

  .shared-vision-container {
    padding: 35px 25px;
    border-radius: 24px;
  }

  .shared-vision-heading h2 {
    font-size: 20px;
  }

  .shared-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .shared-left-content p {
    font-size: 13px;
    line-height: 1.9;
  }

  .shared-right {
    grid-template-columns: 1fr;
  }

  .shared-item {
    text-align: center;
    padding: 0;
  }

  .shared-icon {
    margin-inline: auto;
  }

  .shared-item h3 {
    font-size: 14px;
  }

}

/* =========================================
        JOIN IAIR CTA SECTION
========================================= */
.join-iair-section {
  width: 100%;
  padding: 10px 3%;
  background: #fff;
}

.join-iair-container {
  background: #4365b3;
  border-radius: 30px;

  padding: 30px 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  border: 1px solid rgba(255, 255, 255, .08);
}

.join-left {
  flex: 1;
}

.join-left h2 {
  font-size: 20px;
  color: #fff;
  font-weight: 800;
  margin-bottom: 12px;
}

.join-left p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .8);
  margin: 0;
  max-width: 700px;
}

.join-right {
  flex-shrink: 0;
}

.join-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 16px 30px;

  background: #2563eb;
  color: #fff;

  text-decoration: none;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 600;

  transition: .3s;
}

.join-btn:hover {
  transform: translateY(-3px);
  background: #1d4ed8;
}

/* Tablet */

@media(max-width:991px) {

  .join-iair-container {
    flex-direction: column;
    text-align: center;
  }

  .join-left p {
    max-width: 100%;
  }
}

/* Mobile */

@media(max-width:768px) {

  .join-iair-container {
    padding: 25px 20px;
  }

  .join-left h2 {
    font-size: 24px;
  }

  .join-left p {
    font-size: 14px;
  }

  .join-btn {
    width: 100%;
    justify-content: center;
  }
}








/* =========================================================
   IAIR MISSION & VISION
========================================================= */

.iair-mv-section {
  padding: 30px 3%;
  background: #ffffff;
}

/* CONTAINER */

.iair-mv-container {
  max-width: 100%;
  margin: auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 30px;
}

/* BOX */

.iair-mv-box {
  position: relative;
  background: #fff;
  border-radius: 28px;
  padding: 5px 35px 5px;
  border: 1px solid #dbeafe;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: 0.35s ease;
}


.iair-mv-box:hover {
  transform: translateY(-6px);

  box-shadow:
    0 20px 45px rgba(37, 99, 235, 0.10);
}

/* ICON */

.iair-mv-icon {
  width: 50px;
  height: 50px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: auto auto 6px;

  color: #fff;

  font-size: 28px;

  box-shadow:
    0 10px 25px rgba(37, 99, 235, 0.22);
}

/* MISSION */

.iair-mission-icon {
  background:
    linear-gradient(135deg, #2563eb, #38bdf8);
}

/* VISION */

.iair-vision-icon {
  background:
    linear-gradient(135deg, #7c3aed, #9333ea);
}

/* HEADING */

.iair-mv-box h2 {
  text-align: center;

  font-size: 25px;

  font-weight: 700;

  margin-bottom: 16px;

  color: #1e293b;
}

.iair-mv-box h2 span {
  background: linear-gradient(135deg,
      #27457a 0%,
      #3f63b4 35%,
      #5373c9 65%,
      #7a95da 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.iair-vision-box h2 span {
  background: linear-gradient(135deg,
      #27457a 0%,
      #3f63b4 35%,
      #5373c9 65%,
      #7a95da 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* DIVIDER */

.iair-mv-divider {
  width: 70px;
  height: 5px;

  border-radius: 30px;

  margin: auto auto 5px;

  background:
    linear-gradient(135deg, #2563eb, #38bdf8);
}

.iair-vision-divider {
  background:
    linear-gradient(135deg, #7c3aed, #38bdf8);
}

/* DESCRIPTION */

.iair-mv-description {
  text-align: center;

  font-size: 14px;

  line-height: 2;

  color: #475569;

  margin-bottom: 10px;
}

/* LIST */

.iair-mv-list {
  list-style: none;

  padding: 0;
  margin: 0;
}

.iair-mv-list li {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  margin-bottom: 20px;

  font-size: 14px;

  line-height: 1.8;

  color: #1e293b;

  font-weight: 500;
}

/* ICONS */

.iair-mv-list li i {
  color: #2563eb;

  margin-top: 5px;

  font-size: 18px;
}

.iair-vision-list li i {
  color: #7c3aed;
}

/* BOTTOM DESIGN */

.iair-mv-box::after {
  content: "";

  position: absolute;

  left: -10%;
  bottom: -70px;

  width: 120%;
  height: 150px;
  /* 
    background:
        radial-gradient(circle at top,
            rgba(37, 99, 235, 0.10),
            transparent 70%); */

  opacity: 0.7;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px) {

  .iair-mv-box h2 {
    font-size: 40px;
  }

}

@media(max-width:992px) {

  .iair-mv-container {
    grid-template-columns: 1fr;
  }

}

@media(max-width:768px) {

  .iair-mv-section {
    padding: 30px 20px;
  }

  .iair-mv-box {
    padding: 60px 28px 40px;
  }

  .iair-mv-box h2 {
    font-size: 34px;
  }

  .iair-mv-description {
    font-size: 12px;
  }

  .iair-mv-list li {
    font-size: 12px;
  }

}

@media(max-width:480px) {

  .iair-mv-box {
    padding: 1px 10px 5px;
  }

  .iair-mv-icon {
    width: 50px;
    height: 50px;

    font-size: 24px;
  }

  .iair-mv-box h2 {
    font-size: 28px;
  }

  .iair-mv-description {
    line-height: 1.8;
  }

}



/* about -guidelines sections styling  */

/* =========================================================
   GUIDING PRINCIPLES
========================================================= */

.iair-principles-section {
  padding: 0px 3%;
  background: #ffffff;
}

/* HEADING */

.iair-principles-heading {
  text-align: center;
  margin-bottom: 10px;
}

.iair-principles-heading h2 {
  font-size: 25px;
  font-weight: 700;
  color: #111827;
}

.iair-principles-heading h2 span {
  background: linear-gradient(135deg,
      #27457a 0%,
      #3f63b4 35%,
      #5373c9 65%,
      #7a95da 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* LINE */

.iair-principles-line {
  width: 70px;
  height: 5px;

  margin: 18px auto 0;

  border-radius: 50px;

  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

/* GRID */

.iair-principles-grid {
  max-width: 100%;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 25px;
}

/* CARD */

.iair-principle-card {
  background: #2a6bee0d;

  border-radius: 26px;

  padding: 10px 25px;

  text-align: center;

  border: 1px solid #edf2f7;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.04);

  transition: 0.35s ease;
}

.iair-principle-card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 18px 40px rgba(37, 99, 235, 0.12);
}

/* ICON */

.iair-principle-icon {
  width: 55px;
  height: 55px;

  margin: auto auto 24px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  font-size: 32px;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.12);
}

/* ICON COLORS */

.integrity-icon {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.innovation-icon {
  background: linear-gradient(135deg, #6d28d9, #9333ea);
}

.collaboration-icon {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.inclusivity-icon {
  background: linear-gradient(135deg, #15803d, #4ade80);
}

.excellence-icon {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

/* TITLE */

.iair-principle-card h3 {
  font-size: 15px;
  font-weight: 700;

  color: #111827;

  margin-bottom: 5px;
}

/* TEXT */

.iair-principle-card p {
  font-size: 14px;

  line-height: 1.9;

  color: #4b5563;

  font-weight: 500;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px) {

  .iair-principles-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media(max-width:768px) {

  .iair-principles-section {
    padding: 0px 20px;
  }

  .iair-principles-heading h2 {
    font-size: 20px;
  }

  .iair-principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media(max-width:576px) {

  .iair-principles-grid {
    grid-template-columns: 1fr;
  }

  .iair-principle-card {
    padding: 35px 22px;
  }

  .iair-principle-card h3 {
    font-size: 16px;
  }

  .iair-principle-card p {
    font-size: 13px;
  }

}


/* Commitment STYLING  */
/* =========================================================
   IAIR COMMITMENT & IMPACT
========================================================= */

.iair-impact-section {
  padding: 15px 3%;
  margin-top: 15PX;

  background: linear-gradient(135deg,
      #27457a 0%,
      #3f63b4 35%,
      #5373c9 65%,
      #7a95da 100%);

  overflow: hidden;

  position: relative;
}

/* CONTAINER */

.iair-impact-container {
  max-width: 100%;
  margin: auto;
}

/* HEADING */

.iair-impact-heading {
  text-align: center;

  margin-bottom: 25px;
}

.iair-impact-heading h2 {
  font-size: 25px;
  font-weight: 700;
  padding-bottom: 5px;
  color: #ffffff;
}

.iair-impact-heading h2 span {
  background: linear-gradient(135deg, #ffffff, #ffffff);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* GRID */

.iair-impact-grid {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 0;
}

/* CARD */

.iair-impact-card {
  display: flex;

  gap: 18px;

  padding: 0 28px;

  border-right:
    1px solid rgba(255, 255, 255, 0.15);
}

.no-border {
  border-right: none;
}

/* ICON */

.iair-impact-icon {
  min-width: 50px;
  height: 50px;

  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  color: #fff;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);
}

/* ICON COLORS */

.education-icon {
  color: #60a5fa;
}

.research-icon {
  color: #38bdf8;
}

.collaboration-icon2 {
  color: #c084fc;
}

.social-icon {
  color: #d8b4fe;
}

.nation-icon {
  color: #67e8f9;
}

/* CONTENT */

.iair-impact-content h3 {
  font-size: 15px;

  line-height: 1.5;

  color: #fff;

  margin-bottom: 12px;
}

.iair-impact-content p {
  color: rgba(255, 255, 255, 0.72);

  line-height: 1.9;

  font-size: 14px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px) {

  .iair-impact-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 30px;
  }

  .iair-impact-card {
    border-right: none;

    padding: 0;
  }

}

@media(max-width:768px) {

  .iair-impact-section {
    padding: 8px 20px;
  }

  .iair-impact-heading h2 {
    font-size: 16px;

    line-height: 1.4;
  }

  .iair-impact-grid {
    grid-template-columns: 1fr;
  }

  .iair-impact-card {
    flex-direction: row;

    align-items: flex-start;
  }

  .iair-impact-content h3 {
    font-size: 15px;
  }

}

@media(max-width:480px) {

  .iair-impact-heading h2 {
    font-size: 20px;
  }

  .iair-impact-card {
    gap: 16px;
  }

  .iair-impact-icon {
    min-width: 60px;
    height: 60px;

    font-size: 24px;
  }

  .iair-impact-content h3 {
    font-size: 15px;
  }

  .iair-impact-content p {
    font-size: 13px;
  }

}


/* TOGETHER SECTION STYLING  */

/* =========================================================
   IAIR FUTURE CTA SECTION
========================================================= */

.iair-future-section {
  padding: 13px 5%;

  background: #ffffff;

  border-top: 4px solid #081f78;
}

/* CONTAINER */

.iair-future-container {
  max-width: 100%;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
}

/* LEFT */

.iair-future-left {
  display: flex;
  align-items: center;

  gap: 28px;
}

/* ICON */

.iair-future-icon {
  width: 65px;
  height: 65px;
  min-width: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  position: relative;
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.25);
}

/* OUTER RING */

.iair-future-icon::after {
  content: "";

  position: absolute;

  inset: -10px;

  border-radius: 50%;

  border:
    2px dashed rgba(37, 99, 235, 0.35);
}

/* TEXT */

.iair-future-content h2 {
  font-size: 15px;

  line-height: 1.3;

  font-weight: 700;

  color: #0f172a;
}

.iair-future-content h2 span {
  background:
    linear-gradient(135deg, #2563eb, #38bdf8);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* BUTTONS */

.iair-future-buttons {
  display: flex;
  align-items: center;

  gap: 22px;
}

/* BUTTON */

.iair-future-btn {
  min-width: 180px;
  height: 56px;
  padding: 0 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: 0.35s ease;
}

/* PRIMARY */

.primary-btn {
  background:
    linear-gradient(135deg, #2563eb, #1d4ed8);

  color: #fff;

  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.25);
}

.primary-btn:hover {
  transform: translateY(-5px);
}

/* OUTLINE */

.outline-btn {
  border: 2px solid #93c5fd;

  color: #2563eb;

  background: #fff;
}

.outline-btn:hover {
  background: #eff6ff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px) {

  .iair-future-container {
    flex-direction: column;

    align-items: flex-start;
  }

}

@media(max-width:992px) {

  .iair-future-content h2 {
    font-size: 42px;
  }

  .iair-future-buttons {
    width: 100%;

    flex-wrap: wrap;
  }

}

@media(max-width:768px) {

  .iair-future-section {
    padding: 20px 20px;
  }

  .iair-future-left {
    flex-direction: column;

    align-items: flex-start;
  }

  .iair-future-content h2 {
    font-size: 34px;
  }

  .iair-future-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;

    font-size: 25px;
  }

  .iair-future-btn {
    width: 100%;
    min-width: 100%;
    height: 45px;
    font-size: 16px;
  }

}

@media(max-width:480px) {

  .iair-future-content h2 {
    font-size: 16px;

    line-height: 1.5;
  }

}



/* LIST */

.iair-mv-list {
  list-style: none;

  padding: 0;
  margin: 0;
}

.iair-mv-list li {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  margin-bottom: 20px;

  font-size: 14px;

  line-height: 1.8;

  color: #1e293b;

  font-weight: 500;
}

/* ICONS */
.iair-mv-list li i {
  color: #2563eb;

  margin-top: 5px;

  font-size: 18px;
}

.iair-vision-list li i {
  color: #7c3aed;
}

/* BOTTOM DESIGN */

.iair-mv-box::after {
  content: "";

  position: absolute;

  left: -10%;
  bottom: -70px;

  width: 120%;
  height: 150px;
  /* 
    background:
        radial-gradient(circle at top,
            rgba(37, 99, 235, 0.10),
            transparent 70%); */

  opacity: 0.7;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px) {

  .iair-mv-box h2 {
    font-size: 40px;
  }

}

@media(max-width:992px) {

  .iair-mv-container {
    grid-template-columns: 1fr;
  }

}

@media(max-width:768px) {

  .iair-mv-section {
    padding: 30px 20px;
  }

  .iair-mv-box {
    padding: 60px 28px 40px;
  }

  .iair-mv-box h2 {
    font-size: 34px;
  }

  .iair-mv-description {
    font-size: 12px;
  }

  .iair-mv-list li {
    font-size: 12px;
  }

}

@media(max-width:480px) {

  .iair-mv-box {
    padding: 1px 10px 5px;
  }

  .iair-mv-icon {
    width: 50px;
    height: 50px;

    font-size: 24px;
  }

  .iair-mv-box h2 {
    font-size: 28px;
  }

  .iair-mv-description {
    line-height: 1.8;
  }

}






.iair-mv-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.iair-mv-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  line-height: 1.7;
}

.iair-mv-list li::before {
  content: "\F26A";
  /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  color: #2d9cff;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 18px;
}





/* why choose tab in academic disple */

/* =========================================
   BUSINESS BENEFITS SECTION
========================================= */

.business-benefits-section {
    background: #ffffff;
    padding: 35px 0 20px;
}


/* =========================================
   SECTION HEADING
========================================= */

.business-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}

.business-section-title h2 {
    margin: 0;
    color: #183b83;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.02em;
}

.title-line {
    width: 70px;
    height: 2px;
    background: #dce5f5;
    border-radius: 50px;
}


/* =========================================
   BENEFIT CARD
========================================= */

.business-benefit-card {
    height: 100%;
    min-height: 205px;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 14px;

    padding: 16px 12px 14px;

    text-align: center;

    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.035);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.business-benefit-card:hover {
    transform: translateY(-4px);

    border-color: #cfd9ea;

    box-shadow:
        0 8px 24px rgba(16, 24, 40, 0.08);
}


/* =========================================
   ICON
========================================= */

.business-benefit-icon {
    width: 54px;
    height: 54px;

    margin: 0 auto 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 29px;
}


.business-benefit-icon i {
    line-height: 1;
}


/* =========================================
   ICON COLORS
========================================= */

.icon-green {
    color: #45a98a;
    background: rgba(69, 169, 138, 0.08);
}

.icon-blue {
    color: #3476dc;
    background: rgba(52, 118, 220, 0.08);
}

.icon-orange {
    color: #e69b32;
    background: rgba(230, 155, 50, 0.08);
}

.icon-purple {
    color: #7c35c8;
    background: rgba(124, 53, 200, 0.08);
}

.icon-teal {
    color: #259aa4;
    background: rgba(37, 154, 164, 0.08);
}

.icon-pink {
    color: #c73580;
    background: rgba(199, 53, 128, 0.08);
}


/* =========================================
   CARD HEADING
========================================= */

.business-benefit-card h3 {
    margin: 0 0 8px;

    color: #183b83;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.35;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.business-benefit-card p {
    margin: 0;

    color: #667085;

    font-size: 12.5px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .business-benefits-section {
        padding: 30px 0;
    }

    .business-section-title h2 {
        font-size: 21px;
    }

    .business-benefit-card {
        min-height: 190px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .business-section-title {
        gap: 10px;
    }

    .business-section-title h2 {
        font-size: 18px;
    }

    .title-line {
        width: 35px;
    }

    .business-benefit-card {
        min-height: 180px;
        padding: 15px 10px;
    }

    .business-benefit-icon {
        width: 48px;
        height: 48px;
        font-size: 25px;
    }

    .business-benefit-card h3 {
        font-size: 12px;
    }

    .business-benefit-card p {
        font-size: 10.5px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 424.98px) {

    .business-benefits-section {
        padding: 25px 0;
    }

    .business-section-title h2 {
        font-size: 16px;
    }

    .title-line {
        display: none;
    }

    .business-benefit-card {
        min-height: 185px;
    }

}



/* =========================================
   BUSINESS FUTURE SECTION
========================================= */

.business-future-section {
    background: #ffffff;
    padding: 0px 0 20px;
}


/* =========================================
   COMMON CARDS
========================================= */

.business-future-card,
.business-salary-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   HEADINGS
========================================= */

.business-future-heading,
.business-salary-heading {
    text-align: center;
    margin-bottom: 18px;
}

.business-future-heading h2,
.business-salary-heading h2 {
    margin: 0;
    color: #183b83;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

.business-future-heading span,
.business-salary-heading span {
    display: block;
    margin-top: 4px;
    color: #183b83;
    font-size: 16px;
    font-weight: 700;
}


/* =========================================
   BUSINESS TIMELINE
========================================= */

.business-timeline {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    padding-top: 4px;
}


/* Connecting line */

.business-timeline::before {
    content: "";

    position: absolute;

    top: 31px;
    left: 9%;
    right: 9%;

    height: 2px;

    background: #d9e2ef;

    z-index: 0;
}


.timeline-item {
    position: relative;
    z-index: 1;

    text-align: center;

    min-width: 0;
}


/* =========================================
   TIMELINE ICON
========================================= */

.timeline-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 8px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    font-size: 21px;

    border: 3px solid #ffffff;

    box-shadow: 0 2px 7px rgba(16, 24, 40, 0.08);
}

.timeline-green {
    background: #119c70;
}

.timeline-blue {
    background: #1688db;
}

.timeline-orange {
    background: #ef8a19;
}

.timeline-purple {
    background: #711ca2;
}


.timeline-item > strong {
    display: block;

    color: #183b83;

    font-size: 14px;
    font-weight: 800;

    margin-bottom: 5px;
}


.timeline-item h3 {
    margin: 0 0 8px;

    color: #183b83;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.35;
}


.timeline-item p {
    margin: 0 auto;

    max-width: 155px;

    color: #667085;

    font-size: 10.8px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   MARKET STATS
========================================= */

.business-market-stats {
    display: grid;

    grid-template-columns: 1.25fr 1fr 1fr 1fr;

    align-items: center;

    margin-top: 22px;

    padding: 14px 15px;

    background: #f5f5fc;

    border-radius: 13px;
}


/* Market title */

.market-title {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-right: 12px;
}

.market-title i {
    font-size: 32px;
    color: #6731c8;
}

.market-title strong {
    color: #24408e;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.3;
}


/* Individual stats */

.market-stat {
    min-height: 46px;

    padding-left: 16px;

    border-left: 2px solid #d9cff2;

    text-align: center;
}

.market-stat strong {
    display: block;

    color: #3a2595;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.1;
}

.market-stat span {
    display: block;

    margin-top: 3px;

    color: #334b91;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.3;
}


/* Source */

.business-source {
    margin: 7px 5px 0;

    text-align: right;

    color: #667085;

    font-size: 9px;
    font-weight: 500;
}


/* =========================================
   SALARY GRID
========================================= */

.salary-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;
}


.salary-item {
    min-height: 225px;

    padding: 22px 10px 14px;

    border: 1px solid #e4e9f2;

    border-radius: 14px;

    text-align: center;

    background: #ffffff;
}


/* Salary amount */

.salary-item > strong {
    display: block;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.2;
}


.salary-unit {
    display: block;

    margin-top: 5px;

    font-size: 12px;
    font-weight: 800;
}


/* Divider */

.salary-divider {
    width: 80%;
    height: 2px;

    margin: 20px auto 18px;

    background: #e8edf4;
}


/* Level */

.salary-item h3 {
    margin: 0;

    font-size: 13px;
    font-weight: 800;

    color: #183b83;
}

.salary-item p {
    margin: 7px 0 0;

    color: #183b83;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.35;
}


/* =========================================
   SALARY COLORS
========================================= */

.salary-green > strong,
.salary-green .salary-unit {
    color: #13926d;
}

.salary-blue > strong,
.salary-blue .salary-unit {
    color: #1765d8;
}

.salary-orange > strong,
.salary-orange .salary-unit {
    color: #ed7418;
}

.salary-purple > strong,
.salary-purple .salary-unit {
    color: #8b27a7;
}


/* =========================================
   SALARY NOTE
========================================= */

.salary-note {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 22px;

    padding: 15px 18px;

    background: #f4f4fb;

    border-radius: 14px;
}


.salary-note-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #f29120;

    font-size: 28px;
}


.salary-note p {
    margin: 0 0 4px;

    color: #34477f;

    font-size: 12.5px;
    font-weight: 600;

    line-height: 1.45;
}


.salary-note span {
    color: #52618b;

    font-size: 10.5px;
    font-weight: 500;
}


/* =========================================
   HOVER
========================================= */

.timeline-item,
.salary-item {
    transition: transform 0.25s ease;
}

.timeline-item:hover,
.salary-item:hover {
    transform: translateY(-3px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .business-timeline {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 25px;
    }

    .business-timeline::before {
        display: none;
    }

    .salary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .business-market-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .market-title {
        padding-bottom: 10px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .business-future-section {
        padding: 25px 0 35px;
    }

    .business-future-card,
    .business-salary-card {
        padding: 14px;
    }

    .business-future-heading h2,
    .business-salary-heading h2 {
        font-size: 20px;
    }

    .business-future-heading span,
    .business-salary-heading span {
        font-size: 13px;
    }

    .business-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .business-market-stats {
        grid-template-columns: 1fr 1fr;
    }

    .market-title {
        grid-column: 1 / -1;
        justify-content: center;
        border-bottom: 1px solid #e1dff0;
        padding-bottom: 12px;
    }

    .market-stat {
        border-left: none;
        border-right: 1px solid #d9cff2;
    }

    .market-stat:nth-child(4) {
        border-right: none;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .business-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .timeline-item p {
        font-size: 10px;
    }

    .timeline-item h3 {
        font-size: 11px;
    }

    .timeline-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .salary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .salary-item {
        min-height: 185px;
        padding: 16px 7px 12px;
    }

    .salary-item > strong {
        font-size: 18px;
    }

    .salary-item h3 {
        font-size: 11px;
    }

    .salary-item p {
        font-size: 10px;
    }

    .salary-divider {
        margin: 14px auto;
    }

    .salary-note {
        align-items: flex-start;
        padding: 12px;
    }

    .salary-note-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 22px;
    }

    .salary-note p {
        font-size: 10.5px;
    }

    .salary-note span {
        font-size: 9px;
    }

}




/* =========================================
   INDUSTRIES + CAREER SECTION
========================================= */

.business-career-section {
    width: 100%;
    padding: 0px 0 20px;
    background: #ffffff;
}


/* =========================================
   MAIN CARDS
========================================= */

.business-career-card {
    width: 100%;
    height: 100%;

    background: #ffffff;

    border: 1px solid #e5eaf2;
    border-radius: 16px;

    padding: 18px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   SECTION TITLE
========================================= */

.business-career-title {
    margin: 0 0 20px;

    text-align: center;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================
   INDUSTRIES GRID
========================================= */

.industries-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    column-gap: 15px;
    row-gap: 20px;
}


.industry-item {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* =========================================
   INDUSTRY ICON
========================================= */

.industry-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 25px;

    background: #f7f9fc;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.industry-item:hover .industry-icon {
    transform: translateY(-3px);

    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}


/* Industry Colors */

.industry-blue {
    color: #3677e8;
    background: rgba(54, 119, 232, 0.07);
}

.industry-green {
    color: #62a96b;
    background: rgba(98, 169, 107, 0.08);
}

.industry-pink {
    color: #c63b79;
    background: rgba(198, 59, 121, 0.07);
}

.industry-light-blue {
    color: #2d9cdb;
    background: rgba(45, 156, 219, 0.08);
}

.industry-purple {
    color: #7d45c7;
    background: rgba(125, 69, 199, 0.08);
}


/* =========================================
   INDUSTRY TEXT
========================================= */

.industry-item h3 {
    margin: 0;

    color: #183b83;

    font-size: 11.5px;
    font-weight: 700;

    line-height: 1.4;
}


/* =========================================
   CAREER GRID
========================================= */

.career-profiles-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 25px;
    row-gap: 16px;
}


/* =========================================
   CAREER PROFILE
========================================= */

.career-profile {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;
}


.career-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 21px;
}


.career-orange {
    color: #ef8b25;
    background: rgba(239, 139, 37, 0.08);
}

.career-teal {
    color: #269e9b;
    background: rgba(38, 158, 155, 0.08);
}

.career-blue {
    color: #2c83df;
    background: rgba(44, 131, 223, 0.08);
}

.career-pink {
    color: #c53a7c;
    background: rgba(197, 58, 124, 0.08);
}


/* =========================================
   CAREER CONTENT
========================================= */

.career-content {
    min-width: 0;
}


.career-content h3 {
    margin: 0 0 3px;

    color: #183b83;

    font-size: 12.5px;
    font-weight: 800;

    line-height: 1.35;
}


.career-content p {
    margin: 0;

    color: #667085;

    font-size: 10.5px;
    font-weight: 500;

    line-height: 1.45;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199.98px) {

    .industries-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));

        column-gap: 8px;
    }

    .industry-icon {
        width: 52px;
        height: 52px;

        font-size: 22px;
    }

    .industry-item h3 {
        font-size: 10.5px;
    }

    .career-profiles-grid {
        column-gap: 15px;
    }

    .career-content h3 {
        font-size: 11.5px;
    }

    .career-content p {
        font-size: 10px;
    }

}


/* =========================================
   TABLET / SMALL LAPTOP
========================================= */

@media (max-width: 991.98px) {

    .business-career-section {
        padding: 30px 0 40px;
    }

    .business-career-title {
        font-size: 21px;
    }

    /*
       At this width the two main cards
       become full width one after another.
    */

    .industries-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));

        column-gap: 15px;
        row-gap: 20px;
    }

    .industry-icon {
        width: 58px;
        height: 58px;

        font-size: 24px;
    }

    .industry-item h3 {
        font-size: 11.5px;
    }

    .career-profiles-grid {
        column-gap: 25px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .business-career-section {
        padding: 25px 0 35px;
    }

    .business-career-card {
        padding: 15px 12px;
        border-radius: 14px;
    }

    .business-career-title {
        font-size: 19px;
        margin-bottom: 18px;
    }


    /* Industries */

    .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 15px;
        row-gap: 22px;
    }

    .industry-icon {
        width: 54px;
        height: 54px;

        font-size: 23px;
    }

    .industry-item h3 {
        font-size: 11px;
    }


    /* Career profiles */

    .career-profiles-grid {
        grid-template-columns: 1fr;

        row-gap: 18px;
    }

    .career-profile {
        gap: 12px;
    }

    .career-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .career-content h3 {
        font-size: 12.5px;
    }

    .career-content p {
        font-size: 10.5px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .business-career-card {
        padding: 14px 10px;
    }

    .business-career-title {
        font-size: 17px;
    }

    .industries-grid {
        column-gap: 8px;
        row-gap: 18px;
    }

    .industry-icon {
        width: 48px;
        height: 48px;

        font-size: 20px;
    }

    .industry-item h3 {
        font-size: 10px;
    }

    .career-content h3 {
        font-size: 11.5px;
    }

    .career-content p {
        font-size: 10px;
    }

}



/* =========================================
   AI TOOLS + SKILLS SECTION
========================================= */

.business-tools-skills-section {
    width: 100%;
    padding: 0px 0 20px;
    background: #ffffff;
}


/* =========================================
   COMMON CARD
========================================= */

.tools-skills-card {
    width: 100%;
    height: 100%;

    position: relative;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 16px;

    padding: 18px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);

    overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.tools-skills-title {
    margin: 0 0 18px;

    text-align: center;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================
   AI TOOLS GRID
========================================= */

.ai-tools-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 8px;
}


/* =========================================
   TOOL ITEM
========================================= */

.ai-tool {
    min-width: 0;

    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 7px 8px;

    border: 1px solid #e6eaf1;

    border-radius: 9px;

    background: #ffffff;

    color: #263b70;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.ai-tool:hover {
    transform: translateY(-2px);

    border-color: #cfd9ea;

    box-shadow: 0 5px 14px rgba(16, 24, 40, 0.07);
}


/* =========================================
   TOOL ICON
========================================= */

.tool-logo {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}


/* Tool colors */

.tool-black {
    color: #111827;
}

.tool-gray {
    color: #555b66;
}

.tool-blue {
    color: #2563eb;
}

.tool-microsoft {
    color: #1674d1;
}

.tool-purple {
    color: #6036d9;
}

.tool-excel {
    color: #159447;
}

.tool-powerbi {
    color: #d99100;
}

.tool-tableau {
    color: #3d7f9e;
}

.tool-notion {
    color: #111111;
}

.tool-canva {
    color: #3478e5;
}

.tool-zapier {
    color: #ef4b23;
}

.tool-hubspot {
    color: #ef7622;
}

.tool-salesforce {
    color: #1597d2;
}

.tool-make {
    color: #6e35d5;
}

.tool-uipath {
    color: #ef551c;
}

.tool-python {
    color: #3776ab;
}

.tool-tensorflow {
    color: #ed8b22;
}

.tool-sklearn {
    color: #e67e22;
}

.tool-openai {
    color: #4b5563;
}

.tool-analytics {
    color: #e99b00;
}


/* =========================================
   TOOLS FOOTER
========================================= */

.tools-footer {
    margin: 12px 0 0;

    text-align: center;

    color: #667085;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================
   SKILLS GRID
========================================= */

.skills-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px 30px;

    position: relative;
    z-index: 2;
}


/* =========================================
   SKILLS LIST
========================================= */

.business-skills-list {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 14px;
}


.business-skills-list li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: #263b70;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


.business-skills-list li i {
    flex: 0 0 auto;

    margin-top: 1px;

    color: #168b6a;

    font-size: 16px;
}


/* =========================================
   DECORATIVE GRAPH
========================================= */

.skills-decoration {
    position: absolute;

    right: -8px;
    bottom: -15px;

    color: rgba(57, 139, 204, 0.07);

    font-size: 190px;

    line-height: 1;

    transform: rotate(-5deg);

    pointer-events: none;
}

.skills-decoration i {
    display: block;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

    .ai-tools-grid {
        gap: 7px;
    }

    .ai-tool {
        padding: 6px;

        font-size: 10px;
    }

    .tool-logo {
        width: 27px;
        height: 27px;

        flex-basis: 27px;

        font-size: 15px;
    }

    .skills-grid {
        gap: 10px 18px;
    }

    .business-skills-list li {
        font-size: 11px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .business-tools-skills-section {
        padding: 30px 0 40px;
    }

    .tools-skills-card {
        padding: 16px;
    }

    .tools-skills-title {
        font-size: 21px;
    }


    /* Tools become 3 columns */

    .ai-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 9px;
    }

    .ai-tool {
        min-height: 55px;

        font-size: 11px;
    }


    /* Skills remain 2 columns */

    .skills-grid {
        gap: 12px 25px;
    }

    .business-skills-list li {
        font-size: 11.5px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .business-tools-skills-section {
        padding: 25px 0 35px;
    }

    .tools-skills-card {
        padding: 14px 12px;

        border-radius: 14px;
    }

    .tools-skills-title {
        font-size: 19px;

        margin-bottom: 16px;
    }


    /* Tools 2 columns */

    .ai-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .ai-tool {
        min-height: 52px;

        padding: 7px;

        font-size: 10.5px;
    }

    .tool-logo {
        width: 28px;
        height: 28px;

        flex-basis: 28px;

        font-size: 15px;
    }


    /* Skills 1 column */

    .skills-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .business-skills-list {
        gap: 12px;
    }

    .business-skills-list + .business-skills-list {
        margin-top: 12px;
    }

    .business-skills-list li {
        font-size: 11px;
    }


    .skills-decoration {
        font-size: 140px;
        right: -15px;
        bottom: -10px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .tools-skills-card {
        padding: 13px 10px;
    }

    .tools-skills-title {
        font-size: 17px;
    }

    .ai-tools-grid {
        gap: 6px;
    }

    .ai-tool {
        min-height: 48px;

        gap: 5px;

        padding: 6px;

        font-size: 9.5px;
    }

    .tool-logo {
        width: 25px;
        height: 25px;

        flex-basis: 25px;

        font-size: 14px;
    }

    .tools-footer {
        font-size: 9.5px;
    }

    .business-skills-list {
        gap: 10px;
    }

    .business-skills-list li {
        font-size: 10.5px;
    }

    .business-skills-list li i {
        font-size: 14px;
    }

}



/* =========================================
   BUSINESS RECOMMENDED COURSES
========================================= */

.business-courses-section {
    width: 100%;
    padding: 0px 0 30px;
    background: #ffffff;
}


/* =========================================
   SECTION TITLE
========================================= */

.business-courses-title {
    margin: 0 0 18px;

    text-align: center;

    color: #183b83;

    font-size: 24px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================
   COURSE CARD
========================================= */

.business-course-card {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e2e7ef;
    border-radius: 13px;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.035);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.business-course-card:hover {
    transform: translateY(-4px);

    border-color: #cbd6e7;

    box-shadow:
        0 9px 24px rgba(16, 24, 40, 0.10);
}


/* =========================================
   COURSE IMAGE
========================================= */

.business-course-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1.85 / 1;

    overflow: hidden;

    background: #edf2f8;
}


.business-course-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.business-course-card:hover
.business-course-image img {
    transform: scale(1.035);
}


/* =========================================
   BADGE
========================================= */

.course-badge {
    position: absolute;

    top: 11px;
    left: 10px;

    display: inline-flex;
    align-items: center;

    min-height: 23px;

    padding: 3px 9px;

    background: rgba(255, 255, 255, 0.96);

    border-radius: 20px;

    color: #253a69;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.2px;

    box-shadow: 0 2px 7px rgba(16, 24, 40, 0.08);
}


/* =========================================
   DURATION
========================================= */

.course-duration {
    position: absolute;

    left: 10px;
    bottom: 7px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}


/* =========================================
   COURSE BODY
========================================= */

.business-course-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 10px 11px 12px;
}


.business-course-body h3 {
    margin: 0 0 5px;

    color: #183b83;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.35;
}


.business-course-body p {
    margin: 0 0 10px;

    color: #667085;

    font-size: 10.5px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   VIEW COURSE
========================================= */

.course-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin-top: auto;

    width: fit-content;

    color: #1768df;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.course-link i {
    font-size: 12px;
}


.course-link:hover {
    color: #0d4db3;

    gap: 8px;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1399.98px) {

    .business-course-body {
        padding: 9px 10px 11px;
    }

    .business-course-body h3 {
        font-size: 12px;
    }

    .business-course-body p {
        font-size: 10px;
    }

    .course-link {
        font-size: 10.5px;
    }

}


/* =========================================
   LAPTOP / TABLET
========================================= */

@media (max-width: 1199.98px) {

    .business-courses-title {
        font-size: 22px;
    }

    .business-course-image {
        aspect-ratio: 1.9 / 1;
    }

    .business-course-body h3 {
        font-size: 13px;
    }

    .business-course-body p {
        font-size: 10.5px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .business-courses-section {
        padding: 30px 0 40px;
    }

    .business-courses-title {
        font-size: 21px;
        margin-bottom: 17px;
    }

    .business-course-image {
        aspect-ratio: 2 / 1;
    }

    .business-course-body {
        padding: 11px 12px 13px;
    }

    .business-course-body h3 {
        font-size: 13px;
    }

    .business-course-body p {
        font-size: 11px;
    }

    .course-link {
        font-size: 11px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .business-courses-section {
        padding: 25px 0 35px;
    }

    .business-courses-title {
        font-size: 19px;
        margin-bottom: 16px;
    }

    .business-course-card {
        border-radius: 11px;
    }

    .business-course-image {
        aspect-ratio: 1.9 / 1;
    }

    .course-badge {
        top: 8px;
        left: 8px;

        padding: 3px 7px;

        font-size: 7px;
    }

    .course-duration {
        left: 8px;
        bottom: 6px;

        font-size: 9px;
    }

    .business-course-body {
        padding: 9px 10px 11px;
    }

    .business-course-body h3 {
        font-size: 11.5px;
    }

    .business-course-body p {
        font-size: 10px;

        line-height: 1.45;
    }

    .course-link {
        font-size: 10px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .business-courses-title {
        font-size: 17px;
    }

    .business-course-image {
        aspect-ratio: 1.75 / 1;
    }

    .business-course-body {
        padding: 8px 9px 10px;
    }

    .business-course-body h3 {
        font-size: 10.5px;
    }

    .business-course-body p {
        font-size: 9px;

        margin-bottom: 8px;
    }

    .course-link {
        font-size: 9.5px;
    }

}


/* =========================================
   VERY SMALL DEVICES
========================================= */

@media (max-width: 380px) {

    .business-course-body h3 {
        font-size: 10px;
    }

    .business-course-body p {
        font-size: 8.5px;
    }

    .course-link {
        font-size: 9px;
    }

}





/* =========================================
   FINANCE BENEFITS SECTION
========================================= */

.finance-benefits-section {
    width: 100%;
    padding: 35px 0 20px;
    background: #ffffff;
}


/* =========================================
   SECTION TITLE
========================================= */

.finance-section-title {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-bottom: 18px;
}

.finance-section-title h2 {
    margin: 0;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;

    text-align: center;
}

.finance-title-line {
    width: 70px;
    height: 2px;

    flex: 0 0 70px;

    background: #dce5f5;

    border-radius: 50px;
}


/* =========================================
   BENEFIT CARD
========================================= */

.finance-benefit-card {
    width: 100%;
    height: 100%;

    min-height: 205px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 16px 12px 14px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e4e9f2;

    border-radius: 14px;

    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.035);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.finance-benefit-card:hover {
    transform: translateY(-4px);

    border-color: #cfd9ea;

    box-shadow:
        0 8px 24px rgba(16, 24, 40, 0.08);
}


/* =========================================
   ICON
========================================= */

.finance-benefit-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 11px;

    border-radius: 50%;

    font-size: 28px;
}


/* =========================================
   ICON COLORS
========================================= */

.finance-green {
    color: #35a87f;
    background: rgba(53, 168, 127, 0.08);
}

.finance-blue {
    color: #1769d8;
    background: rgba(23, 105, 216, 0.08);
}

.finance-orange {
    color: #f28a20;
    background: rgba(242, 138, 32, 0.08);
}


/* =========================================
   CARD HEADING
========================================= */

.finance-benefit-card h3 {
    margin: 0 0 8px;

    color: #183b83;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.35;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.finance-benefit-card p {
    max-width: 220px;

    margin: 0;

    color: #667085;

    font-size: 12.5px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

    .finance-benefit-card {
        padding-left: 9px;
        padding-right: 9px;
    }

    .finance-benefit-card h3 {
        font-size: 12px;
    }

    .finance-benefit-card p {
        font-size: 10.5px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .finance-benefits-section {
        padding: 30px 0;
    }

    .finance-section-title h2 {
        font-size: 21px;
    }

    .finance-benefit-card {
        min-height: 195px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .finance-benefits-section {
        padding: 25px 0 35px;
    }

    .finance-section-title {
        gap: 10px;
    }

    .finance-section-title h2 {
        font-size: 18px;
    }

    .finance-title-line {
        width: 35px;
        flex-basis: 35px;
    }

    .finance-benefit-card {
        min-height: 180px;

        padding: 15px 10px;
    }

    .finance-benefit-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        font-size: 25px;
    }

    .finance-benefit-card h3 {
        font-size: 12px;
    }

    .finance-benefit-card p {
        font-size: 10.5px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 424.98px) {

    .finance-section-title h2 {
        font-size: 16px;
    }

    .finance-title-line {
        display: none;
    }

    .finance-benefit-card {
        min-height: 185px;
    }

    .finance-benefit-card h3 {
        font-size: 11px;
    }

    .finance-benefit-card p {
        font-size: 10px;
    }

}



/* =========================================
   FINANCE FUTURE + SALARY SECTION
========================================= */

.finance-future-section {
    width: 100%;
    padding: 5px 0 20px;
    background: #ffffff;
}


/* =========================================
   MAIN CARDS
========================================= */

.finance-future-card,
.finance-salary-card {
    width: 100%;
    height: 100%;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 16px;

    padding: 18px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   HEADINGS
========================================= */

.finance-future-heading,
.finance-salary-heading {
    text-align: center;
    margin-bottom: 18px;
}

.finance-future-heading h2,
.finance-salary-heading h2 {
    margin: 0;

    color: #183b83;

    font-size: 24px;
    font-weight: 800;

    line-height: 1.25;
}

.finance-future-heading span,
.finance-salary-heading span {
    display: block;

    margin-top: 4px;

    color: #183b83;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================
   FINANCE TIMELINE
========================================= */

.finance-timeline {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

    padding-top: 4px;
}


/* Connecting Line */

.finance-timeline::before {
    content: "";

    position: absolute;

    top: 31px;
    left: 9%;
    right: 9%;

    height: 2px;

    background: #d9e2ef;

    z-index: 0;
}


.finance-timeline-item {
    position: relative;
    z-index: 1;

    min-width: 0;

    text-align: center;
}


/* =========================================
   TIMELINE ICON
========================================= */

.finance-timeline-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 21px;

    border: 3px solid #ffffff;

    box-shadow: 0 2px 7px rgba(16, 24, 40, 0.08);
}

.finance-timeline-green {
    background: #139c70;
}

.finance-timeline-blue {
    background: #176ed1;
}

.finance-timeline-orange {
    background: #ef851b;
}

.finance-timeline-purple {
    background: #6250a8;
}


/* =========================================
   TIMELINE TEXT
========================================= */

.finance-timeline-item > strong {
    display: block;

    margin-bottom: 5px;

    color: #183b83;

    font-size: 14px;
    font-weight: 800;
}


.finance-timeline-item h3 {
    margin: 0 0 8px;

    color: #183b83;

    font-size: 12.5px;
    font-weight: 800;

    line-height: 1.35;
}


.finance-timeline-item p {
    max-width: 155px;

    margin: 0 auto;

    color: #667085;

    font-size: 11.5px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   MARKET STATS
========================================= */

.finance-market-stats {
    display: grid;

    grid-template-columns: 1.35fr 0.9fr 1.15fr;

    align-items: center;

    margin-top: 22px;

    padding: 13px 15px;

    background: #eff9f3;

    border-radius: 13px;
}


/* Market title */

.finance-market-title {
    display: flex;
    align-items: center;

    gap: 12px;

    padding-right: 14px;
}

.finance-market-title > i {
    flex: 0 0 auto;

    color: #138d63;

    font-size: 34px;
}


.finance-market-title strong {
    display: block;

    color: #23794f;

    font-size: 12px;
    font-weight: 800;
}


.finance-market-title b {
    display: block;

    margin-top: 2px;

    color: #168354;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.1;
}


.finance-market-title span {
    display: block;

    margin-top: 2px;

    color: #23794f;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================
   MARKET STAT
========================================= */

.finance-market-stat {
    min-height: 60px;

    padding-left: 15px;

    border-left: 2px solid #b9dbc9;

    text-align: center;
}

.finance-market-stat strong {
    display: block;

    color: #198653;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.1;
}

.finance-market-stat span {
    display: block;

    margin-top: 4px;

    color: #2f7654;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.3;
}


/* =========================================
   SOURCE
========================================= */

.finance-source {
    margin: 7px 5px 0;

    text-align: right;

    color: #667085;

    font-size: 9px;
    font-weight: 500;
}


/* =========================================
   SALARY GRID
========================================= */

.finance-salary-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;
}


.finance-salary-item {
    min-height: 210px;

    padding: 20px 9px 14px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e4e9f2;

    border-radius: 14px;
}


/* Salary Amount */

.finance-salary-item > strong {
    display: block;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.2;
}


.finance-salary-unit {
    display: block;

    margin-top: 5px;

    font-size: 12px;
    font-weight: 800;
}


/* Divider */

.finance-salary-divider {
    width: 80%;
    height: 2px;

    margin: 20px auto 17px;

    background: #e8edf4;
}


/* Level */

.finance-salary-item h3 {
    margin: 0;

    color: #183b83;

    font-size: 13px;
    font-weight: 800;
}

.finance-salary-item p {
    margin: 7px 0 0;

    color: #183b83;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.35;
}


/* =========================================
   SALARY COLORS
========================================= */

.salary-fin-green > strong,
.salary-fin-green .finance-salary-unit {
    color: #15916b;
}

.salary-fin-blue > strong,
.salary-fin-blue .finance-salary-unit {
    color: #1769d8;
}

.salary-fin-orange > strong,
.salary-fin-orange .finance-salary-unit {
    color: #ef7519;
}

.salary-fin-purple > strong,
.salary-fin-purple .finance-salary-unit {
    color: #752ca0;
}


/* =========================================
   SALARY NOTE
========================================= */

.finance-salary-note {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 22px;

    padding: 14px 17px;

    background: #f4f4fb;

    border-radius: 14px;
}


.finance-salary-note-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #f29120;

    font-size: 27px;
}


.finance-salary-note p {
    margin: 0 0 4px;

    color: #34477f;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.45;
}


.finance-salary-note span {
    color: #52618b;

    font-size: 10px;
    font-weight: 500;
}


/* =========================================
   HOVER
========================================= */

.finance-timeline-item,
.finance-salary-item {
    transition: transform 0.25s ease;
}

.finance-timeline-item:hover,
.finance-salary-item:hover {
    transform: translateY(-3px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .finance-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 25px;
    }

    .finance-timeline::before {
        display: none;
    }

    .finance-salary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .finance-future-section {
        padding: 25px 0 35px;
    }

    .finance-future-card,
    .finance-salary-card {
        padding: 14px;
    }

    .finance-future-heading h2,
    .finance-salary-heading h2 {
        font-size: 20px;
    }

    .finance-future-heading span,
    .finance-salary-heading span {
        font-size: 13px;
    }

    .finance-market-stats {
        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .finance-market-title {
        grid-column: 1 / -1;

        justify-content: center;

        padding-bottom: 12px;

        border-bottom: 1px solid #cce4d7;
    }

    .finance-market-stat {
        border-left: none;
        border-right: 1px solid #b9dbc9;
    }

    .finance-market-stat:last-child {
        border-right: none;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .finance-timeline {
        gap: 10px;
    }

    .finance-timeline-icon {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }

    .finance-timeline-item h3 {
        font-size: 11px;
    }

    .finance-timeline-item p {
        font-size: 9.5px;
    }

    .finance-timeline-item > strong {
        font-size: 12px;
    }

    .finance-market-title b {
        font-size: 19px;
    }

    .finance-market-stat strong {
        font-size: 19px;
    }

    .finance-market-stat span {
        font-size: 9px;
    }

    .finance-salary-item {
        min-height: 185px;

        padding: 16px 7px 12px;
    }

    .finance-salary-item > strong {
        font-size: 18px;
    }

    .finance-salary-item h3 {
        font-size: 11px;
    }

    .finance-salary-item p {
        font-size: 10px;
    }

    .finance-salary-divider {
        margin: 14px auto;
    }

    .finance-salary-note {
        align-items: flex-start;

        padding: 12px;
    }

    .finance-salary-note-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 22px;
    }

    .finance-salary-note p {
        font-size: 10.5px;
    }

    .finance-salary-note span {
        font-size: 9px;
    }

}



/* =========================================
   FINANCE INDUSTRIES + CAREER SECTION
========================================= */

.finance-career-section {
    width: 100%;
    padding: 5px 0 20px;
    background: #ffffff;
}


/* =========================================
   MAIN CARD
========================================= */

.finance-career-card {
    width: 100%;
    height: 100%;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 16px;

    padding: 18px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   TITLE
========================================= */

.finance-career-title {
    margin: 0 0 20px;

    text-align: center;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================
   INDUSTRIES GRID
========================================= */

.finance-industries-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    column-gap: 12px;
    row-gap: 20px;
}


/* =========================================
   INDUSTRY ITEM
========================================= */

.finance-industry-item {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* =========================================
   INDUSTRY ICON
========================================= */

.finance-industry-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 24px;

    background: #f6f8fb;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.finance-industry-item:hover .finance-industry-icon {
    transform: translateY(-3px);

    box-shadow:
        0 6px 16px rgba(16, 24, 40, 0.08);
}


/* Icon Colors */

.finance-icon-green {
    color: #39a36d;
    background: rgba(57, 163, 109, 0.08);
}

.finance-icon-blue {
    color: #3275dc;
    background: rgba(50, 117, 220, 0.07);
}

.finance-icon-orange {
    color: #e99325;
    background: rgba(233, 147, 37, 0.08);
}

.finance-icon-purple {
    color: #7648c6;
    background: rgba(118, 72, 198, 0.08);
}


/* =========================================
   INDUSTRY TEXT
========================================= */

.finance-industry-item h3 {
    margin: 0;

    color: #183b83;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;
}


/* =========================================
   CAREER GRID
========================================= */

.finance-career-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 25px;
    row-gap: 15px;
}


/* =========================================
   CAREER PROFILE
========================================= */

.finance-career-profile {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;
}


/* =========================================
   PROFILE ICON
========================================= */

.finance-profile-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #459c65;

    background: rgba(69, 156, 101, 0.08);

    font-size: 20px;
}


.finance-profile-green {
    color: #459c65;
    background: rgba(69, 156, 101, 0.08);
}


/* =========================================
   PROFILE CONTENT
========================================= */

.finance-profile-content {
    min-width: 0;
}


.finance-profile-content h3 {
    margin: 0 0 3px;

    color: #183b83;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.35;
}


.finance-profile-content p {
    margin: 0;

    color: #667085;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.4;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

    .finance-industries-grid {
        column-gap: 7px;
    }

    .finance-industry-icon {
        width: 52px;
        height: 52px;

        font-size: 22px;
    }

    .finance-industry-item h3 {
        font-size: 10px;
    }

    .finance-career-grid {
        column-gap: 16px;
    }

    .finance-profile-content h3 {
        font-size: 11px;
    }

    .finance-profile-content p {
        font-size: 9.5px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .finance-career-section {
        padding: 30px 0 40px;
    }

    .finance-career-title {
        font-size: 21px;
    }

    .finance-industries-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));

        column-gap: 12px;
        row-gap: 20px;
    }

    .finance-industry-icon {
        width: 56px;
        height: 56px;

        font-size: 23px;
    }

    .finance-industry-item h3 {
        font-size: 11px;
    }

    .finance-career-grid {
        column-gap: 25px;
    }

    .finance-profile-content h3 {
        font-size: 12px;
    }

    .finance-profile-content p {
        font-size: 10px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .finance-career-section {
        padding: 25px 0 35px;
    }

    .finance-career-card {
        padding: 15px 12px;

        border-radius: 14px;
    }

    .finance-career-title {
        font-size: 19px;

        margin-bottom: 18px;
    }


    /* Industries */

    .finance-industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 12px;
        row-gap: 22px;
    }

    .finance-industry-icon {
        width: 52px;
        height: 52px;

        font-size: 22px;
    }

    .finance-industry-item h3 {
        font-size: 10.5px;
    }


    /* Career profiles */

    .finance-career-grid {
        grid-template-columns: 1fr;

        row-gap: 17px;
    }

    .finance-career-profile {
        gap: 11px;
    }

    .finance-profile-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }

    .finance-profile-content h3 {
        font-size: 12px;
    }

    .finance-profile-content p {
        font-size: 10px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .finance-career-card {
        padding: 14px 10px;
    }

    .finance-career-title {
        font-size: 17px;
    }

    .finance-industries-grid {
        column-gap: 8px;
        row-gap: 18px;
    }

    .finance-industry-icon {
        width: 48px;
        height: 48px;

        font-size: 20px;
    }

    .finance-industry-item h3 {
        font-size: 9.5px;
    }

    .finance-profile-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 18px;
    }

    .finance-profile-content h3 {
        font-size: 11px;
    }

    .finance-profile-content p {
        font-size: 9.5px;
    }

}


/* =========================================
   FINANCE AI TOOLS + SKILLS
========================================= */

.finance-tools-skills-section {
    width: 100%;
    padding: 10px 0 20px;
    background: #ffffff;
}


/* =========================================
   MAIN CARD
========================================= */

.finance-tools-card {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 16px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);

    overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.finance-tools-title {
    position: relative;
    z-index: 2;

    margin: 0 0 18px;

    text-align: center;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================
   TOOLS GRID
========================================= */

.finance-tools-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 8px;
}


/* =========================================
   TOOL CARD
========================================= */

.finance-tool {
    min-width: 0;
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 6px 7px;

    border: 1px solid #e5e9f0;
    border-radius: 8px;

    background: #ffffff;

    color: #263b70;

    font-size: 11.5px;
    font-weight: 700;

    line-height: 1.2;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.finance-tool:hover {
    transform: translateY(-2px);

    border-color: #cbd6e6;

    box-shadow: 0 5px 13px rgba(16, 24, 40, 0.07);
}


/* =========================================
   TOOL ICON
========================================= */

.finance-tool-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
}


/* =========================================
   TOOL COLORS
========================================= */

.tool-python {
    color: #3776ab;
}

.tool-r {
    color: #276dc3;
}

.tool-sql {
    color: #336791;
}

.tool-excel {
    color: #16864a;
}

.tool-powerbi {
    color: #e69b00;
}

.tool-tableau {
    color: #4388a9;
}

.tool-tensorflow {
    color: #ed8b22;
}

.tool-sklearn {
    color: #e87922;
}

.tool-xgboost {
    color: #2f6fa3;
}

.tool-keras {
    color: #c51d2c;
}

.tool-colab {
    color: #ef8b00;
}

.tool-chatgpt {
    color: #25a47a;
}

.tool-claude {
    color: #62656d;
}

.tool-hugging {
    color: #f0b900;
}

.tool-copilot {
    color: #4b62d5;
}

.tool-openai {
    color: #4d5562;
}

.tool-zapier {
    color: #ed4b25;
}

.tool-alteryx {
    color: #1694b8;
}

.tool-knime {
    color: #e9bd29;
}

.tool-pycaret {
    color: #3776ab;
}


/* =========================================
   FOOTER
========================================= */

.finance-tools-footer {
    position: relative;
    z-index: 2;

    margin: 12px 0 0;

    text-align: center;

    color: #667085;

    font-size: 10.5px;
    font-weight: 600;
}


/* =========================================
   SKILLS GRID
========================================= */

.finance-skills-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 30px;
}


/* =========================================
   SKILLS LIST
========================================= */

.finance-skills-list {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 15px;
}


.finance-skills-list li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: #263b70;

    font-size: 11.5px;
    font-weight: 600;

    line-height: 1.4;
}


.finance-skills-list li i {
    flex: 0 0 auto;

    margin-top: 1px;

    color: #31946d;

    font-size: 15px;
}


/* =========================================
   DECORATIVE ₹
========================================= */

.finance-skills-decoration {
    position: absolute;

    right: -5px;
    bottom: -35px;

    z-index: 1;

    color: rgba(35, 133, 100, 0.055);

    font-size: 220px;
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

    .finance-tools-grid {
        gap: 7px;
    }

    .finance-tool {
        padding: 6px;

        font-size: 9.5px;
    }

    .finance-tool-icon {
        width: 26px;
        height: 26px;

        flex-basis: 26px;

        font-size: 14px;
    }

    .finance-skills-grid {
        column-gap: 18px;
    }

    .finance-skills-list li {
        font-size: 10.5px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .finance-tools-skills-section {
        padding: 30px 0 40px;
    }

    .finance-tools-card {
        padding: 16px;
    }

    .finance-tools-title {
        font-size: 21px;
    }


    /* Tools */

    .finance-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 9px;
    }

    .finance-tool {
        min-height: 46px;

        font-size: 10.5px;
    }


    /* Skills */

    .finance-skills-grid {
        column-gap: 25px;
    }

    .finance-skills-list li {
        font-size: 11.5px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .finance-tools-skills-section {
        padding: 25px 0 35px;
    }

    .finance-tools-card {
        padding: 14px 12px;

        border-radius: 14px;
    }

    .finance-tools-title {
        font-size: 19px;

        margin-bottom: 16px;
    }


    /* Tools - 2 columns */

    .finance-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .finance-tool {
        min-height: 45px;

        gap: 6px;

        padding: 6px;

        font-size: 10px;
    }

    .finance-tool-icon {
        width: 27px;
        height: 27px;

        flex-basis: 27px;

        font-size: 14px;
    }


    /* Skills - 1 column */

    .finance-skills-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .finance-skills-list {
        gap: 12px;
    }

    .finance-skills-list + .finance-skills-list {
        margin-top: 12px;
    }

    .finance-skills-list li {
        font-size: 11px;
    }


    .finance-skills-decoration {
        font-size: 150px;

        right: -15px;
        bottom: -20px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .finance-tools-card {
        padding: 13px 10px;
    }

    .finance-tools-title {
        font-size: 17px;
    }

    .finance-tools-grid {
        gap: 6px;
    }

    .finance-tool {
        min-height: 43px;

        gap: 5px;

        font-size: 9px;
    }

    .finance-tool-icon {
        width: 25px;
        height: 25px;

        flex-basis: 25px;

        font-size: 13px;
    }

    .finance-tools-footer {
        font-size: 9.5px;
    }

    .finance-skills-list {
        gap: 10px;
    }

    .finance-skills-list li {
        font-size: 10.5px;
    }

    .finance-skills-list li i {
        font-size: 14px;
    }

}




/* =========================================
   COMMERCE BENEFITS SECTION
========================================= */

.commerce-benefits-section {
    width: 100%;
    padding: 10px 0 20px;

    background: #ffffff;
}


/* =========================================
   SECTION HEADING
========================================= */

.commerce-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-bottom: 18px;
}

.commerce-section-heading h2 {
    margin: 0;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;

    text-align: center;
}

.commerce-heading-line {
    width: 65px;
    height: 2px;

    flex: 0 0 65px;

    background: #d8dff0;

    border-radius: 50px;
}


/* =========================================
   BENEFIT CARD
========================================= */

.commerce-benefit-card {
    width: 100%;
    height: 100%;

    min-height: 205px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 15px 12px 14px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e3e8f0;

    border-radius: 14px;

    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.035);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.commerce-benefit-card:hover {
    transform: translateY(-4px);

    border-color: #ccd6e7;

    box-shadow:
        0 9px 24px rgba(16, 24, 40, 0.09);
}


/* =========================================
   ICON
========================================= */

.commerce-benefit-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 11px;

    border-radius: 50%;

    font-size: 27px;
}


/* =========================================
   ICON COLORS
========================================= */

.commerce-purple {
    color: #7734d4;

    background: rgba(119, 52, 212, 0.08);
}


.commerce-orange {
    color: #f39a18;

    background: rgba(243, 154, 24, 0.09);
}


.commerce-green {
    color: #26926d;

    background: rgba(38, 146, 109, 0.08);
}


.commerce-blue {
    color: #1769df;

    background: rgba(23, 105, 223, 0.08);
}


.commerce-pink {
    color: #d92d78;

    background: rgba(217, 45, 120, 0.08);
}


/* =========================================
   CARD HEADING
========================================= */

.commerce-benefit-card h3 {
    margin: 0 0 8px;

    color: #183b83;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.35;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.commerce-benefit-card p {
    max-width: 220px;

    margin: 0;

    color: #667085;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

    .commerce-benefit-card {
        padding-left: 9px;
        padding-right: 9px;
    }

    .commerce-benefit-card h3 {
        font-size: 12px;
    }

    .commerce-benefit-card p {
        font-size: 10px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .commerce-benefits-section {
        padding: 30px 0 40px;
    }

    .commerce-section-heading h2 {
        font-size: 21px;
    }

    .commerce-benefit-card {
        min-height: 195px;
    }

    .commerce-benefit-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 25px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .commerce-benefits-section {
        padding: 25px 0 35px;
    }

    .commerce-section-heading {
        gap: 10px;
    }

    .commerce-section-heading h2 {
        font-size: 18px;
    }

    .commerce-heading-line {
        width: 35px;
        flex-basis: 35px;
    }

    .commerce-benefit-card {
        min-height: 180px;

        padding: 14px 9px;
    }

    .commerce-benefit-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        margin-bottom: 9px;

        font-size: 23px;
    }

    .commerce-benefit-card h3 {
        font-size: 11.5px;
    }

    .commerce-benefit-card p {
        font-size: 10px;

        line-height: 1.45;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 424.98px) {

    .commerce-section-heading h2 {
        font-size: 16px;
    }

    .commerce-heading-line {
        display: none;
    }

    .commerce-benefit-card {
        min-height: 185px;
    }

    .commerce-benefit-card h3 {
        font-size: 10.5px;
    }

    .commerce-benefit-card p {
        font-size: 9px;
    }

}



/* =========================================
   COMMERCE FUTURE SECTION
========================================= */

.commerce-future-section {
    width: 100%;
    padding: 15px 0 20px;

    background: #ffffff;
}


/* =========================================
   MAIN CARDS
========================================= */

.commerce-future-card,
.commerce-salary-card {
    width: 100%;
    height: 100%;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 16px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   HEADINGS
========================================= */

.commerce-future-heading,
.commerce-salary-heading {
    text-align: center;

    margin-bottom: 18px;
}

.commerce-future-heading h2,
.commerce-salary-heading h2 {
    margin: 0;

    color: #183b83;

    font-size: 24px;
    font-weight: 800;

    line-height: 1.25;
}

.commerce-future-heading span,
.commerce-salary-heading span {
    display: block;

    margin-top: 4px;

    color: #183b83;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================
   TIMELINE
========================================= */

.commerce-timeline {
    position: relative;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;

    padding-top: 3px;
}


/* connecting line */

.commerce-timeline::before {
    content: "";

    position: absolute;

    top: 29px;
    left: 8%;
    right: 8%;

    height: 2px;

    background: linear-gradient(
        90deg,
        #8a36d1,
        #f29a18,
        #38a57b,
        #276bd5
    );

    z-index: 0;
}


.commerce-timeline-item {
    position: relative;
    z-index: 1;

    min-width: 0;

    text-align: center;
}


/* =========================================
   TIMELINE ICON
========================================= */

.commerce-timeline-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 8px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 20px;

    border: 3px solid #ffffff;

    box-shadow: 0 2px 7px rgba(16, 24, 40, 0.08);
}


.commerce-purple-bg {
    background: #7b31bd;
}

.commerce-orange-bg {
    background: #f19a19;
}

.commerce-green-bg {
    background: #278a70;
}

.commerce-blue-bg {
    background: #2169d1;
}


/* =========================================
   TIMELINE TEXT
========================================= */

.commerce-timeline-item > strong {
    display: block;

    margin-bottom: 5px;

    color: #183b83;

    font-size: 13px;
    font-weight: 800;
}


.commerce-timeline-item h3 {
    margin: 0 0 7px;

    color: #183b83;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.35;
}


.commerce-timeline-item p {
    max-width: 145px;

    margin: 0 auto;

    color: #667085;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   MARKET STATS
========================================= */

.commerce-market-stats {
    display: grid;

    grid-template-columns: 1.3fr 0.85fr 1.1fr;

    align-items: center;

    margin-top: 20px;

    padding: 12px 14px;

    background: #f5f2fb;

    border-radius: 13px;
}


/* Main market stat */

.commerce-market-main {
    display: flex;
    align-items: center;

    gap: 11px;

    padding-right: 14px;
}


.commerce-market-main > i {
    flex: 0 0 auto;

    color: #7837c1;

    font-size: 34px;
}


.commerce-market-main strong {
    display: block;

    color: #3c4a7b;

    font-size: 11px;
    font-weight: 800;
}


.commerce-market-main b {
    display: block;

    margin-top: 2px;

    color: #6931ad;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.1;
}


.commerce-market-main span {
    display: block;

    margin-top: 2px;

    color: #5b6384;

    font-size: 9.5px;
}


/* =========================================
   MARKET STAT BOX
========================================= */

.commerce-market-stat {
    min-height: 58px;

    padding-left: 14px;

    border-left: 2px solid #d9cfee;

    text-align: center;
}


.commerce-market-stat strong {
    display: block;

    color: #6630ad;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.1;
}


.commerce-market-stat span {
    display: block;

    margin-top: 3px;

    color: #596184;

    font-size: 9.5px;
    font-weight: 600;

    line-height: 1.3;
}


/* =========================================
   SOURCE
========================================= */

.commerce-source {
    margin: 7px 4px 0;

    text-align: right;

    color: #667085;

    font-size: 8.5px;
}


/* =========================================
   SALARY GRID
========================================= */

.commerce-salary-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 11px;
}


.commerce-salary-box {
    min-height: 205px;

    padding: 19px 8px 13px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e4e9f2;

    border-radius: 14px;
}


/* =========================================
   SALARY AMOUNT
========================================= */

.commerce-salary-box > strong {
    display: block;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.2;
}


.salary-lpa {
    display: block;

    margin-top: 5px;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================
   SALARY COLORS
========================================= */

.salary-green > strong,
.salary-green .salary-lpa {
    color: #188867;
}

.salary-blue > strong,
.salary-blue .salary-lpa {
    color: #155ed0;
}

.salary-orange > strong,
.salary-orange .salary-lpa {
    color: #ed7416;
}

.salary-purple > strong,
.salary-purple .salary-lpa {
    color: #702aa0;
}


/* =========================================
   SALARY DIVIDER
========================================= */

.salary-divider {
    width: 78%;
    height: 2px;

    margin: 19px auto 16px;

    background: #e8edf3;
}


/* =========================================
   SALARY LEVEL
========================================= */

.commerce-salary-box h3 {
    margin: 0;

    color: #183b83;

    font-size: 12.5px;
    font-weight: 800;
}


.commerce-salary-box p {
    margin: 6px 0 0;

    color: #183b83;

    font-size: 11.5px;
    font-weight: 600;
}


/* =========================================
   SALARY NOTE
========================================= */

.commerce-salary-note {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 20px;

    padding: 13px 15px;

    background: #f5f5fa;

    border-radius: 13px;
}


.commerce-salary-star {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff8ed;

    color: #f19a20;

    font-size: 25px;
}


.commerce-salary-note p {
    margin: 0 0 3px;

    color: #394879;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;
}


.commerce-salary-note span {
    color: #596184;

    font-size: 9px;
}


/* =========================================
   HOVER
========================================= */

.commerce-timeline-item,
.commerce-salary-box {
    transition: transform 0.25s ease;
}

.commerce-timeline-item:hover,
.commerce-salary-box:hover {
    transform: translateY(-3px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .commerce-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 25px;
    }

    .commerce-timeline::before {
        display: none;
    }

    .commerce-salary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .commerce-future-section {
        padding: 25px 0 35px;
    }

    .commerce-future-card,
    .commerce-salary-card {
        padding: 14px;
    }

    .commerce-future-heading h2,
    .commerce-salary-heading h2 {
        font-size: 20px;
    }

    .commerce-future-heading span,
    .commerce-salary-heading span {
        font-size: 12.5px;
    }


    /* Market */

    .commerce-market-stats {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .commerce-market-main {
        grid-column: 1 / -1;

        justify-content: center;

        padding: 0 0 11px;

        border-bottom: 1px solid #ddd5eb;
    }

    .commerce-market-stat {
        border-left: none;

        border-right: 1px solid #d9cfee;
    }

    .commerce-market-stat:last-child {
        border-right: none;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .commerce-timeline {
        gap: 9px;
    }

    .commerce-timeline-icon {
        width: 41px;
        height: 41px;

        font-size: 17px;
    }

    .commerce-timeline-item > strong {
        font-size: 11px;
    }

    .commerce-timeline-item h3 {
        font-size: 10.5px;
    }

    .commerce-timeline-item p {
        font-size: 9px;
    }


    .commerce-market-main b {
        font-size: 19px;
    }

    .commerce-market-stat strong {
        font-size: 18px;
    }

    .commerce-market-stat span {
        font-size: 8.5px;
    }


    .commerce-salary-box {
        min-height: 180px;

        padding: 16px 6px 12px;
    }

    .commerce-salary-box > strong {
        font-size: 18px;
    }

    .commerce-salary-box h3 {
        font-size: 11px;
    }

    .commerce-salary-box p {
        font-size: 9.5px;
    }

    .salary-divider {
        margin: 14px auto;
    }


    .commerce-salary-note {
        align-items: flex-start;

        padding: 11px;
    }

    .commerce-salary-star {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 21px;
    }

    .commerce-salary-note p {
        font-size: 10px;
    }

    .commerce-salary-note span {
        font-size: 8.5px;
    }

}



/* =========================================
   COMMERCE CAREER SECTION
========================================= */

.commerce-career-section {
    width: 100%;
    padding: 10px 0 20px;

    background: #ffffff;
}


/* =========================================
   MAIN CARD
========================================= */

.commerce-career-card {
    width: 100%;
    height: 100%;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 16px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   TITLE
========================================= */

.commerce-career-title {
    margin: 0 0 20px;

    text-align: center;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================
   INDUSTRIES GRID
========================================= */

.commerce-industries-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    column-gap: 10px;
    row-gap: 20px;
}


/* =========================================
   INDUSTRY ITEM
========================================= */

.commerce-industry-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* =========================================
   INDUSTRY ICON
========================================= */

.commerce-industry-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 8px;

    border-radius: 50%;

    font-size: 23px;

    background: #f6f8fb;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.commerce-industry-item:hover .commerce-industry-icon {
    transform: translateY(-3px);

    box-shadow:
        0 6px 15px rgba(16, 24, 40, 0.08);
}


/* =========================================
   INDUSTRY COLORS
========================================= */

.icon-blue {
    color: #3676d7;
    background: rgba(54, 118, 215, 0.08);
}

.icon-green {
    color: #3e9a70;
    background: rgba(62, 154, 112, 0.08);
}

.icon-orange {
    color: #ed9524;
    background: rgba(237, 149, 36, 0.09);
}

.icon-purple {
    color: #7545c3;
    background: rgba(117, 69, 195, 0.08);
}


/* =========================================
   INDUSTRY TEXT
========================================= */

.commerce-industry-item h3 {
    margin: 0;

    color: #183b83;

    font-size: 10.5px;
    font-weight: 700;

    line-height: 1.4;
}


/* =========================================
   CAREER GRID
========================================= */

.commerce-career-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 25px;
    row-gap: 15px;
}


/* =========================================
   CAREER PROFILE
========================================= */

.commerce-career-profile {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;
}


/* =========================================
   PROFILE ICON
========================================= */

.commerce-profile-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 19px;
}


/* =========================================
   PROFILE COLORS
========================================= */

.profile-blue {
    color: #4677c9;
    background: rgba(70, 119, 201, 0.08);
}

.profile-green {
    color: #5c9c6f;
    background: rgba(92, 156, 111, 0.08);
}

.profile-yellow {
    color: #b2a23c;
    background: rgba(178, 162, 60, 0.09);
}

.profile-orange {
    color: #ef8d22;
    background: rgba(239, 141, 34, 0.09);
}

.profile-red {
    color: #c86a63;
    background: rgba(200, 106, 99, 0.08);
}


/* =========================================
   PROFILE CONTENT
========================================= */

.commerce-profile-content {
    min-width: 0;
}


.commerce-profile-content h3 {
    margin: 0 0 3px;

    color: #183b83;

    font-size: 11.5px;
    font-weight: 800;

    line-height: 1.35;
}


.commerce-profile-content p {
    margin: 0;

    color: #667085;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.4;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

    .commerce-industries-grid {
        column-gap: 6px;
    }

    .commerce-industry-icon {
        width: 52px;
        height: 52px;

        font-size: 21px;
    }

    .commerce-industry-item h3 {
        font-size: 10px;
    }

    .commerce-career-grid {
        column-gap: 16px;
    }

    .commerce-profile-content h3 {
        font-size: 11px;
    }

    .commerce-profile-content p {
        font-size: 9.3px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .commerce-career-section {
        padding: 30px 0 40px;
    }

    .commerce-career-title {
        font-size: 21px;
    }

    .commerce-industries-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));

        column-gap: 10px;
        row-gap: 20px;
    }

    .commerce-industry-icon {
        width: 54px;
        height: 54px;

        font-size: 22px;
    }

    .commerce-industry-item h3 {
        font-size: 10.5px;
    }

    .commerce-career-grid {
        column-gap: 22px;
    }

    .commerce-profile-content h3 {
        font-size: 11.5px;
    }

    .commerce-profile-content p {
        font-size: 9.8px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .commerce-career-section {
        padding: 25px 0 35px;
    }

    .commerce-career-card {
        padding: 15px 12px;

        border-radius: 14px;
    }

    .commerce-career-title {
        font-size: 19px;

        margin-bottom: 18px;
    }


    /* Industries */

    .commerce-industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 12px;
        row-gap: 22px;
    }

    .commerce-industry-icon {
        width: 51px;
        height: 51px;

        font-size: 21px;
    }

    .commerce-industry-item h3 {
        font-size: 10px;
    }


    /* Career profiles */

    .commerce-career-grid {
        grid-template-columns: 1fr;

        row-gap: 17px;
    }

    .commerce-career-profile {
        gap: 10px;
    }

    .commerce-profile-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .commerce-profile-content h3 {
        font-size: 11.5px;
    }

    .commerce-profile-content p {
        font-size: 10px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .commerce-career-card {
        padding: 14px 10px;
    }

    .commerce-career-title {
        font-size: 17px;
    }

    .commerce-industries-grid {
        column-gap: 8px;
        row-gap: 18px;
    }

    .commerce-industry-icon {
        width: 47px;
        height: 47px;

        font-size: 19px;
    }

    .commerce-industry-item h3 {
        font-size: 9.3px;
    }

    .commerce-profile-icon {
        width: 39px;
        height: 39px;

        flex-basis: 39px;

        font-size: 17px;
    }

    .commerce-profile-content h3 {
        font-size: 10.5px;
    }

    .commerce-profile-content p {
        font-size: 9.2px;
    }

}


/* =========================================
   COMMERCE TOOLS + SKILLS SECTION
========================================= */

.commerce-tools-section {
    width: 100%;
    padding: 5px 0 20px;
    background: #ffffff;
}


/* =========================================
   MAIN CARD
========================================= */

.commerce-tools-card {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 16px;

    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);

    overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.commerce-tools-title {
    position: relative;
    z-index: 2;

    margin: 0 0 18px;

    text-align: center;

    color: #183b83;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================
   TOOLS GRID
========================================= */

.commerce-tools-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 8px;
}


/* =========================================
   TOOL
========================================= */

.commerce-tool {
    min-width: 0;
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 6px 7px;

    background: #ffffff;

    border: 1px solid #e4e8ef;
    border-radius: 8px;

    color: #263b70;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.2;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.commerce-tool:hover {
    transform: translateY(-2px);

    border-color: #ccd6e6;

    box-shadow:
        0 5px 14px rgba(16, 24, 40, 0.07);
}


/* =========================================
   TOOL ICON
========================================= */

.commerce-tool i {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
}


/* =========================================
   TOOL COLORS
========================================= */

.tool-excel {
    color: #198754;
}

.tool-powerbi {
    color: #e7a900;
}

.tool-tableau {
    color: #4285a8;
}

.tool-sheets {
    color: #2d9b5b;
}

.tool-sql {
    color: #36719b;
}

.tool-python {
    color: #3776ab;
}

.tool-pandas {
    color: #3c5a9a;
}

.tool-sklearn {
    color: #e77825;
}

.tool-chatgpt {
    color: #22a477;
}

.tool-claude {
    color: #6b6d72;
}

.tool-tally {
    color: #e75d31;
}

.tool-quickbooks {
    color: #48a942;
}

.tool-zoho {
    color: #e56b32;
}

.tool-dext {
    color: #ed633c;
}

.tool-docu {
    color: #3978c8;
}

.tool-r {
    color: #276dc3;
}

.tool-uipath {
    color: #ef4b2d;
}

.tool-zapier {
    color: #ef4c26;
}

.tool-alteryx {
    color: #1594b8;
}

.tool-copilot {
    color: #4c69d5;
}


/* =========================================
   FOOTER
========================================= */

.commerce-tools-footer {
    position: relative;
    z-index: 2;

    margin: 12px 0 0;

    text-align: center;

    color: #667085;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================
   SKILLS GRID
========================================= */

.commerce-skills-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 30px;
}


/* =========================================
   SKILLS LIST
========================================= */

.commerce-skills-list {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 15px;
}


.commerce-skills-list li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: #263b70;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;
}


.commerce-skills-list li i {
    flex: 0 0 auto;

    margin-top: 1px;

    color: #278e68;

    font-size: 14px;
}


/* =========================================
   DECORATIVE GRAPH
========================================= */

.commerce-skills-decoration {
    position: absolute;

    right: 5px;
    bottom: -18px;

    z-index: 1;

    display: flex;
    align-items: flex-end;

    gap: 4px;

    color: rgba(38, 122, 100, 0.055);

    pointer-events: none;
}


.commerce-skills-decoration i:first-child {
    font-size: 120px;
}

.commerce-skills-decoration i:last-child {
    position: absolute;

    right: 10px;
    bottom: 35px;

    font-size: 75px;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

    .commerce-tools-grid {
        gap: 7px;
    }

    .commerce-tool {
        padding: 6px;

        font-size: 9.3px;
    }

    .commerce-tool i {
        width: 25px;
        height: 25px;

        flex-basis: 25px;

        font-size: 14px;
    }

    .commerce-skills-grid {
        column-gap: 18px;
    }

    .commerce-skills-list li {
        font-size: 10.3px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .commerce-tools-section {
        padding: 30px 0 40px;
    }

    .commerce-tools-card {
        padding: 16px;
    }

    .commerce-tools-title {
        font-size: 21px;
    }


    /* Tools */

    .commerce-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 9px;
    }

    .commerce-tool {
        min-height: 45px;

        font-size: 10px;
    }


    /* Skills */

    .commerce-skills-grid {
        column-gap: 25px;
    }

    .commerce-skills-list li {
        font-size: 11px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .commerce-tools-section {
        padding: 25px 0 35px;
    }

    .commerce-tools-card {
        padding: 14px 12px;

        border-radius: 14px;
    }

    .commerce-tools-title {
        font-size: 19px;

        margin-bottom: 16px;
    }


    /* Tools */

    .commerce-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .commerce-tool {
        min-height: 44px;

        gap: 6px;

        padding: 6px;

        font-size: 9.5px;
    }

    .commerce-tool i {
        width: 26px;
        height: 26px;

        flex-basis: 26px;

        font-size: 14px;
    }


    /* Skills */

    .commerce-skills-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .commerce-skills-list {
        gap: 12px;
    }

    .commerce-skills-list + .commerce-skills-list {
        margin-top: 12px;
    }

    .commerce-skills-list li {
        font-size: 10.5px;
    }


    .commerce-skills-decoration {
        right: -10px;
        bottom: -15px;
    }

    .commerce-skills-decoration i:first-child {
        font-size: 100px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .commerce-tools-card {
        padding: 13px 10px;
    }

    .commerce-tools-title {
        font-size: 17px;
    }

    .commerce-tools-grid {
        gap: 6px;
    }

    .commerce-tool {
        min-height: 42px;

        gap: 5px;

        font-size: 8.8px;
    }

    .commerce-tool i {
        width: 24px;
        height: 24px;

        flex-basis: 24px;

        font-size: 13px;
    }

    .commerce-tools-footer {
        font-size: 9px;
    }

    .commerce-skills-list {
        gap: 10px;
    }

    .commerce-skills-list li {
        font-size: 10px;
    }

    .commerce-skills-list li i {
        font-size: 13px;
    }

}



/* engneering -page-tab */

/* =========================================
   ENGINEERING BENEFITS SECTION
========================================= */

.engineering-benefits-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   SECTION HEADING
========================================= */

.engineering-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 15px;

  margin-bottom: 18px;
}

.engineering-section-heading h2 {
  margin: 0;

  color: #183b83;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.3;
  text-align: center;
}

.engineering-heading-line {
  width: 65px;
  height: 2px;

  flex: 0 0 65px;

  background: #d6ddec;

  border-radius: 50px;
}


/* =========================================
   BENEFIT CARD
========================================= */

.engineering-benefit-card {
  width: 100%;
  height: 100%;

  min-height: 218px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px 12px 14px;

  text-align: center;

  background: #ffffff;

  border: 1px solid #e3e8f0;

  border-radius: 14px;

  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.035);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.engineering-benefit-card:hover {
  transform: translateY(-4px);

  border-color: #cbd6e7;

  box-shadow:
    0 9px 24px rgba(16, 24, 40, 0.09);
}


/* =========================================
   ICON
========================================= */

.engineering-benefit-icon {
  width: 56px;
  height: 56px;

  flex: 0 0 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 11px;

  border-radius: 50%;

  font-size: 29px;
}


/* =========================================
   ICON COLORS
========================================= */

.engineering-blue {
  color: #1591b7;
  background: rgba(21, 145, 183, 0.08);
}

.engineering-orange {
  color: #f28c18;
  background: rgba(242, 140, 24, 0.08);
}

.engineering-green {
  color: #298b67;
  background: rgba(41, 139, 103, 0.08);
}

.engineering-purple {
  color: #7231c4;
  background: rgba(114, 49, 196, 0.08);
}

.engineering-cyan {
  color: #158bb0;
  background: rgba(21, 139, 176, 0.08);
}

.engineering-growth {
  color: #f28a12;
  background: rgba(242, 138, 18, 0.08);
}


/* =========================================
   CARD HEADING
========================================= */

.engineering-benefit-card h3 {
  margin: 0 0 9px;

  color: #183b83;

  font-size: 13px;
  font-weight: 800;

  line-height: 1.35;
}


/* =========================================
   DESCRIPTION
========================================= */

.engineering-benefit-card p {
  max-width: 220px;

  margin: 0;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .engineering-benefit-card {
    padding-left: 9px;
    padding-right: 9px;
  }

  .engineering-benefit-card h3 {
    font-size: 12px;
  }

  .engineering-benefit-card p {
    font-size: 10px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .engineering-benefits-section {
    padding: 30px 0 40px;
  }

  .engineering-section-heading h2 {
    font-size: 21px;
  }

  .engineering-benefit-card {
    min-height: 205px;
  }

  .engineering-benefit-icon {
    width: 53px;
    height: 53px;

    flex-basis: 53px;

    font-size: 26px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .engineering-benefits-section {
    padding: 25px 0 35px;
  }

  .engineering-section-heading {
    gap: 10px;
  }

  .engineering-section-heading h2 {
    font-size: 18px;
  }

  .engineering-heading-line {
    width: 35px;
    flex-basis: 35px;
  }

  .engineering-benefit-card {
    min-height: 190px;

    padding: 14px 9px;
  }

  .engineering-benefit-icon {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    margin-bottom: 9px;

    font-size: 23px;
  }

  .engineering-benefit-card h3 {
    font-size: 11.5px;
  }

  .engineering-benefit-card p {
    font-size: 10px;

    line-height: 1.45;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 424.98px) {

  .engineering-section-heading h2 {
    font-size: 16px;
  }

  .engineering-heading-line {
    display: none;
  }

  .engineering-benefit-card {
    min-height: 185px;
  }

  .engineering-benefit-card h3 {
    font-size: 10.5px;
  }

  .engineering-benefit-card p {
    font-size: 9px;
  }

}



/* =========================================
   FINANCE FUTURE SECTION
========================================= */

.finance-future-section {
  width: 100%;
  padding: 10px 0 20px;

  background: #ffffff;
}


/* =========================================
   MAIN CARDS
========================================= */

.finance-future-card,
.finance-salary-card {
  width: 100%;
  height: 100%;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e3e8f0;
  border-radius: 16px;

  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   HEADINGS
========================================= */

.finance-future-heading,
.finance-salary-heading {
  text-align: center;

  margin-bottom: 18px;
}

.finance-future-heading h2,
.finance-salary-heading h2 {
  margin: 0;

  color: #183b83;

  font-size: 24px;
  font-weight: 800;

  line-height: 1.25;
}

.finance-future-heading span,
.finance-salary-heading span {
  display: block;

  margin-top: 4px;

  color: #183b83;

  font-size: 14px;
  font-weight: 700;
}


/* =========================================
   TIMELINE
========================================= */

.finance-timeline {
  position: relative;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;

  padding-top: 3px;
}


/* Connecting line */

.finance-timeline::before {
  content: "";

  position: absolute;

  top: 26px;
  left: 8%;
  right: 8%;

  height: 2px;

  background: linear-gradient(90deg,
      #7832c0,
      #f39a17,
      #288d70,
      #2269d1);

  z-index: 0;
}


/* =========================================
   TIMELINE ITEM
========================================= */

.finance-timeline-item {
  position: relative;
  z-index: 1;

  min-width: 0;

  text-align: center;
}


/* =========================================
   TIMELINE ICON
========================================= */

.finance-timeline-icon {
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 7px;

  border-radius: 50%;

  border: 3px solid #ffffff;

  color: #ffffff;

  font-size: 19px;

  box-shadow:
    0 2px 7px rgba(16, 24, 40, 0.08);
}


.finance-purple {
  background: #7b31bd;
}

.finance-orange {
  background: #f19a19;
}

.finance-green {
  background: #278a70;
}

.finance-blue {
  background: #2169d1;
}


/* =========================================
   TIMELINE TEXT
========================================= */

.finance-timeline-item>strong {
  display: block;

  margin-bottom: 5px;

  color: #183b83;

  font-size: 13px;
  font-weight: 800;
}


.finance-timeline-item h3 {
  margin: 0 0 7px;

  color: #183b83;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.35;
}


.finance-timeline-item p {
  max-width: 145px;

  margin: 0 auto;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   MARKET STATS
========================================= */

.finance-market-stats {
  display: grid;

  grid-template-columns: 1.3fr 0.85fr 1.1fr;

  align-items: center;

  margin-top: 19px;

  padding: 11px 13px;

  background: #f6f3fb;

  border-radius: 13px;
}


/* Main market */

.finance-market-main {
  display: flex;
  align-items: center;

  gap: 10px;

  padding-right: 13px;
}


.finance-market-main>i {
  flex: 0 0 auto;

  color: #7737c0;

  font-size: 33px;
}


.finance-market-main strong {
  display: block;

  color: #3d4b7d;

  font-size: 10.5px;
  font-weight: 800;
}


.finance-market-main b {
  display: block;

  margin-top: 2px;

  color: #6930ad;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.1;
}


.finance-market-main span {
  display: block;

  margin-top: 2px;

  color: #596184;

  font-size: 9px;
}


/* =========================================
   MARKET STAT
========================================= */

.finance-market-stat {
  min-height: 57px;

  padding-left: 13px;

  border-left: 2px solid #d8cde9;

  text-align: center;
}


.finance-market-stat strong {
  display: block;

  color: #6630ad;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.1;
}


.finance-market-stat span {
  display: block;

  margin-top: 3px;

  color: #596184;

  font-size: 9px;
  font-weight: 600;

  line-height: 1.3;
}


/* =========================================
   SOURCE
========================================= */

.finance-source {
  margin: 6px 3px 0;

  text-align: right;

  color: #667085;

  font-size: 8.5px;
}


/* =========================================
   SALARY GRID
========================================= */

.finance-salary-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
}


.finance-salary-box {
  min-height: 174px;

  padding: 18px 7px 12px;

  text-align: center;

  background: #ffffff;

  border: 1px solid #e1e7ef;

  border-radius: 13px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.finance-salary-box:hover {
  transform: translateY(-3px);

  box-shadow:
    0 7px 18px rgba(16, 24, 40, 0.07);
}


/* =========================================
   SALARY AMOUNT
========================================= */

.finance-salary-box>strong {
  display: block;

  font-size: 22px;
  font-weight: 800;

  line-height: 1.2;
}


.finance-salary-box>span {
  display: block;

  margin-top: 5px;

  font-size: 12px;
  font-weight: 800;
}


/* =========================================
   SALARY COLORS
========================================= */

.salary-green>strong,
.salary-green>span {
  color: #188867;
}

.salary-blue>strong,
.salary-blue>span {
  color: #155ed0;
}

.salary-orange>strong,
.salary-orange>span {
  color: #ed7416;
}

.salary-purple>strong,
.salary-purple>span {
  color: #702aa0;
}


/* =========================================
   DIVIDER
========================================= */

.finance-salary-divider {
  width: 78%;
  height: 2px;

  margin: 17px auto 14px;

  background: #e7ebf0;
}


/* =========================================
   SALARY LEVEL
========================================= */

.finance-salary-box h3 {
  margin: 0;

  color: #183b83;

  font-size: 12px;
  font-weight: 800;
}


.finance-salary-box p {
  margin: 6px 0 0;

  color: #183b83;

  font-size: 11px;
  font-weight: 600;
}


/* =========================================
   SALARY NOTE
========================================= */

.finance-salary-note {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 20px;

  padding: 12px 14px;

  background: #f6f5fa;

  border-radius: 13px;
}


.finance-star {
  width: 45px;
  height: 45px;

  flex: 0 0 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff8ec;

  color: #f19a20;

  font-size: 24px;
}


.finance-salary-note p {
  margin: 0 0 3px;

  color: #394879;

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.4;
}


.finance-salary-note span {
  color: #596184;

  font-size: 8.8px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .finance-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    row-gap: 24px;
  }

  .finance-timeline::before {
    display: none;
  }

  .finance-salary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .finance-future-section {
    padding: 25px 0 35px;
  }

  .finance-future-card,
  .finance-salary-card {
    padding: 14px;
  }

  .finance-future-heading h2,
  .finance-salary-heading h2 {
    font-size: 20px;
  }

  .finance-future-heading span,
  .finance-salary-heading span {
    font-size: 12px;
  }


  /* Market stats */

  .finance-market-stats {
    grid-template-columns: 1fr 1fr;

    gap: 10px;
  }

  .finance-market-main {
    grid-column: 1 / -1;

    justify-content: center;

    padding: 0 0 10px;

    border-bottom: 1px solid #ddd5eb;
  }

  .finance-market-stat {
    padding-left: 0;

    border-left: none;
  }

  .finance-market-stat:first-of-type {
    border-right: 1px solid #d8cde9;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .finance-timeline {
    gap: 8px;
  }

  .finance-timeline-icon {
    width: 41px;
    height: 41px;

    font-size: 17px;
  }

  .finance-timeline-item>strong {
    font-size: 11px;
  }

  .finance-timeline-item h3 {
    font-size: 10.5px;
  }

  .finance-timeline-item p {
    font-size: 9px;
  }


  .finance-market-main b {
    font-size: 18px;
  }

  .finance-market-stat strong {
    font-size: 18px;
  }

  .finance-market-stat span {
    font-size: 8.5px;
  }


  .finance-salary-box {
    min-height: 170px;

    padding: 15px 5px 11px;
  }

  .finance-salary-box>strong {
    font-size: 18px;
  }

  .finance-salary-box h3 {
    font-size: 10.5px;
  }

  .finance-salary-box p {
    font-size: 9px;
  }

  .finance-salary-divider {
    margin: 13px auto;
  }


  .finance-salary-note {
    align-items: flex-start;

    padding: 10px;
  }

  .finance-star {
    width: 39px;
    height: 39px;

    flex-basis: 39px;

    font-size: 20px;
  }

  .finance-salary-note p {
    font-size: 9.5px;
  }

  .finance-salary-note span {
    font-size: 8px;
  }

}



/* =========================================
   INDUSTRY + CAREER SECTION
========================================= */

.finance-industry-career-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   CARD
========================================= */

.finance-industry-card {
  width: 100%;
  height: 100%;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e3e8f0;
  border-radius: 16px;

  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);
}


/* =========================================
   TITLE
========================================= */

.finance-industry-title {
  margin: 0 0 20px;

  text-align: center;

  color: #183b83;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.3;
}


/* =========================================
   INDUSTRIES GRID
========================================= */

.finance-industries-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  column-gap: 10px;
  row-gap: 20px;
}


/* =========================================
   INDUSTRY ITEM
========================================= */

.finance-industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================
   INDUSTRY ICON
========================================= */

.finance-industry-icon {
  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 8px;

  border-radius: 50%;

  font-size: 23px;

  transition: transform .25s ease,
    box-shadow .25s ease;
}

.finance-industry-item:hover .finance-industry-icon {
  transform: translateY(-3px);

  box-shadow:
    0 6px 15px rgba(16, 24, 40, .08);
}


/* =========================================
   INDUSTRY COLORS
========================================= */

.fi-blue {
  color: #3475c8;
  background: rgba(52, 117, 200, .08);
}

.fi-green {
  color: #4d9a6c;
  background: rgba(77, 154, 108, .08);
}

.fi-orange {
  color: #ef8c20;
  background: rgba(239, 140, 32, .09);
}

.fi-purple {
  color: #8b59c5;
  background: rgba(139, 89, 197, .08);
}

.fi-pink {
  color: #c85c8f;
  background: rgba(200, 92, 143, .08);
}


/* =========================================
   INDUSTRY TEXT
========================================= */

.finance-industry-item h3 {
  margin: 0;

  color: #183b83;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.4;
}


/* =========================================
   CAREER GRID
========================================= */

.finance-career-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 25px;
  row-gap: 16px;
}


/* =========================================
   CAREER ITEM
========================================= */

.finance-career-item {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 10px;
}


/* =========================================
   CAREER ICON
========================================= */

.finance-career-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 19px;
}


/* =========================================
   CAREER COLORS
========================================= */

.fc-blue {
  color: #4878c6;
  background: rgba(72, 120, 198, .08);
}

.fc-green {
  color: #5b9d70;
  background: rgba(91, 157, 112, .08);
}

.fc-yellow {
  color: #aaa043;
  background: rgba(170, 160, 67, .09);
}

.fc-orange {
  color: #ed9026;
  background: rgba(237, 144, 38, .09);
}

.fc-red {
  color: #c56e68;
  background: rgba(197, 110, 104, .08);
}


/* =========================================
   CAREER CONTENT
========================================= */

.finance-career-item>div:last-child {
  min-width: 0;
}

.finance-career-item h3 {
  margin: 0 0 3px;

  color: #183b83;

  font-size: 11.5px;
  font-weight: 800;

  line-height: 1.35;
}

.finance-career-item p {
  margin: 0;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.4;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .finance-industries-grid {
    column-gap: 6px;
  }

  .finance-industry-icon {
    width: 52px;
    height: 52px;

    font-size: 21px;
  }

  .finance-industry-item h3 {
    font-size: 10px;
  }

  .finance-career-grid {
    column-gap: 17px;
  }

  .finance-career-item h3 {
    font-size: 11px;
  }

  .finance-career-item p {
    font-size: 9.3px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .finance-industry-career-section {
    padding: 30px 0 40px;
  }

  .finance-industry-title {
    font-size: 21px;
  }

  .finance-industries-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));

    column-gap: 10px;
    row-gap: 20px;
  }

  .finance-industry-icon {
    width: 54px;
    height: 54px;

    font-size: 22px;
  }

  .finance-industry-item h3 {
    font-size: 10.5px;
  }

  .finance-career-grid {
    column-gap: 22px;
  }

  .finance-career-item h3 {
    font-size: 11.5px;
  }

  .finance-career-item p {
    font-size: 9.8px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .finance-industry-career-section {
    padding: 25px 0 35px;
  }

  .finance-industry-card {
    padding: 15px 12px;

    border-radius: 14px;
  }

  .finance-industry-title {
    font-size: 19px;

    margin-bottom: 18px;
  }


  /* Industries */

  .finance-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 12px;
    row-gap: 22px;
  }

  .finance-industry-icon {
    width: 51px;
    height: 51px;

    font-size: 21px;
  }

  .finance-industry-item h3 {
    font-size: 10px;
  }


  /* Career */

  .finance-career-grid {
    grid-template-columns: 1fr;

    row-gap: 17px;
  }

  .finance-career-item {
    gap: 10px;
  }

  .finance-career-icon {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }

  .finance-career-item h3 {
    font-size: 11.5px;
  }

  .finance-career-item p {
    font-size: 10px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .finance-industry-card {
    padding: 14px 10px;
  }

  .finance-industry-title {
    font-size: 17px;
  }

  .finance-industries-grid {
    column-gap: 8px;
    row-gap: 18px;
  }

  .finance-industry-icon {
    width: 47px;
    height: 47px;

    font-size: 19px;
  }

  .finance-industry-item h3 {
    font-size: 9.3px;
  }

  .finance-career-icon {
    width: 39px;
    height: 39px;

    flex-basis: 39px;

    font-size: 17px;
  }

  .finance-career-item h3 {
    font-size: 10.5px;
  }

  .finance-career-item p {
    font-size: 9.2px;
  }

}


/* =========================================
   AI TOOLS + KEY SKILLS SECTION
========================================= */

.finance-tools-skills-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   MAIN CARD
========================================= */

.finance-tools-card {
  position: relative;

  width: 100%;
  height: 100%;

  padding: 17px;

  background: #ffffff;

  border: 1px solid #e3e8f0;
  border-radius: 16px;

  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);

  overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.finance-tools-title {
  position: relative;
  z-index: 2;

  margin: 0 0 17px;

  text-align: center;

  color: #183b83;

  font-size: 22px;
  font-weight: 800;

  line-height: 1.3;
}


/* =========================================
   TOOLS GRID
========================================= */

.finance-tools-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 7px;
}


/* =========================================
   TOOL ITEM
========================================= */

.finance-tool {
  min-width: 0;
  min-height: 38px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 5px 7px;

  background: #ffffff;

  border: 1px solid #e4e8ef;
  border-radius: 7px;

  color: #263b70;

  font-size: 11.5px;
  font-weight: 700;

  line-height: 1.15;

  transition: all .25s ease;
}

.finance-tool:hover {
  transform: translateY(-2px);

  border-color: #cdd6e5;

  box-shadow: 0 5px 12px rgba(16, 24, 40, .07);
}


/* =========================================
   TOOL ICON
========================================= */

.finance-tool i {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
}


/* =========================================
   TOOL COLORS
========================================= */

.tool-excel {
  color: #18864b;
}

.tool-powerbi {
  color: #e7a900;
}

.tool-tableau {
  color: #4382aa;
}

.tool-sheets {
  color: #2f9c59;
}

.tool-sql {
  color: #36729c;
}

.tool-python {
  color: #3776ab;
}

.tool-pandas {
  color: #3c5a9a;
}

.tool-sklearn {
  color: #e87825;
}

.tool-chatgpt {
  color: #249b73;
}

.tool-claude {
  color: #77777a;
}

.tool-tally {
  color: #e55c32;
}

.tool-quickbooks {
  color: #4aa944;
}

.tool-zoho {
  color: #e46732;
}

.tool-dext {
  color: #ed633d;
}

.tool-docu {
  color: #397ac8;
}

.tool-r {
  color: #276dc1;
}

.tool-uipath {
  color: #ef4b2d;
}

.tool-zapier {
  color: #ef4b26;
}

.tool-alteryx {
  color: #1993b5;
}

.tool-copilot {
  color: #526fd3;
}


/* =========================================
   FOOTER
========================================= */

.finance-tools-footer {
  position: relative;
  z-index: 2;

  margin: 11px 0 0;

  text-align: center;

  color: #667085;

  font-size: 9px;
  font-weight: 600;
}


/* =========================================
   SKILLS GRID
========================================= */

.finance-skills-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 28px;
}


/* =========================================
   SKILLS LIST
========================================= */

.finance-skills-list {
  list-style: none;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;

  gap: 13px;
}


.finance-skills-list li {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  color: #263b70;

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.35;
}


.finance-skills-list li i {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #23855f;

  font-size: 13px;
}


/* =========================================
   DECORATIVE GRAPH
========================================= */

.finance-skills-decoration {
  position: absolute;

  right: 2px;
  bottom: -18px;

  z-index: 1;

  color: rgba(36, 116, 94, .055);

  pointer-events: none;
}


.finance-skills-decoration i:first-child {
  font-size: 120px;
}

.finance-skills-decoration i:last-child {
  position: absolute;

  right: 13px;
  bottom: 30px;

  font-size: 68px;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .finance-tools-grid {
    gap: 6px;
  }

  .finance-tool {
    padding: 5px;

    font-size: 8.8px;
  }

  .finance-tool i {
    width: 23px;
    height: 23px;

    flex-basis: 23px;

    font-size: 13px;
  }

  .finance-skills-grid {
    column-gap: 18px;
  }

  .finance-skills-list li {
    font-size: 10px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .finance-tools-skills-section {
    padding: 30px 0 40px;
  }

  .finance-tools-card {
    padding: 16px;
  }

  .finance-tools-title {
    font-size: 21px;
  }

  .finance-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;
  }

  .finance-tool {
    min-height: 42px;

    font-size: 10px;
  }

  .finance-skills-grid {
    column-gap: 22px;
  }

  .finance-skills-list li {
    font-size: 10.5px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .finance-tools-skills-section {
    padding: 25px 0 35px;
  }

  .finance-tools-card {
    padding: 14px 12px;

    border-radius: 14px;
  }

  .finance-tools-title {
    font-size: 19px;

    margin-bottom: 15px;
  }


  /* Tools */

  .finance-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .finance-tool {
    min-height: 43px;

    gap: 6px;

    padding: 6px;

    font-size: 9px;
  }

  .finance-tool i {
    width: 25px;
    height: 25px;

    flex-basis: 25px;

    font-size: 14px;
  }


  /* Skills */

  .finance-skills-grid {
    grid-template-columns: 1fr;

    gap: 11px;
  }

  .finance-skills-list {
    gap: 11px;
  }

  .finance-skills-list li {
    font-size: 10px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .finance-tools-card {
    padding: 13px 10px;
  }

  .finance-tools-title {
    font-size: 17px;
  }

  .finance-tools-grid {
    gap: 6px;
  }

  .finance-tool {
    min-height: 41px;

    gap: 5px;

    padding: 5px;

    font-size: 8.5px;
  }

  .finance-tool i {
    width: 23px;
    height: 23px;

    flex-basis: 23px;

    font-size: 13px;
  }

  .finance-tools-footer {
    font-size: 8.5px;
  }

  .finance-skills-list {
    gap: 9px;
  }

  .finance-skills-list li {
    font-size: 9.5px;
  }

  .finance-skills-list li i {
    font-size: 12px;
  }

}



/* =========================================
   AGRICULTURE BENEFITS SECTION
========================================= */

.agri-benefits-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   SECTION HEADING
========================================= */

.agri-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 15px;

  margin-bottom: 18px;
}

.agri-section-heading h2 {
  margin: 0;

  color: #18734f;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.3;
  text-align: center;
}

.agri-heading-line {
  width: 65px;
  height: 2px;

  flex: 0 0 65px;

  background: #b7d8c8;

  border-radius: 50px;
}


/* =========================================
   BENEFIT CARD
========================================= */

.agri-benefit-card {
  width: 100%;
  height: 100%;

  min-height: 218px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px 11px 14px;

  text-align: center;

  background: #ffffff;

  border: 1px solid #e3e8ef;

  border-radius: 14px;

  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.035);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.agri-benefit-card:hover {
  transform: translateY(-4px);

  border-color: #cbded5;

  box-shadow:
    0 9px 24px rgba(16, 24, 40, 0.08);
}


/* =========================================
   ICON
========================================= */

.agri-benefit-icon {
  width: 56px;
  height: 56px;

  flex: 0 0 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 11px;

  border-radius: 50%;

  font-size: 29px;
}


/* =========================================
   ICON COLORS
========================================= */

.agri-blue {
  color: #1769e0;
  background: rgba(23, 105, 224, 0.07);
}

.agri-green {
  color: #3f8f35;
  background: rgba(63, 143, 53, 0.08);
}

.agri-orange {
  color: #f27d17;
  background: rgba(242, 125, 23, 0.08);
}

.agri-purple {
  color: #7131c4;
  background: rgba(113, 49, 196, 0.07);
}

.agri-teal {
  color: #168f87;
  background: rgba(22, 143, 135, 0.07);
}

.agri-red {
  color: #ed641b;
  background: rgba(237, 100, 27, 0.08);
}


/* =========================================
   CARD HEADING
========================================= */

.agri-benefit-card h3 {
  margin: 0 0 9px;

  color: #183b83;

  font-size: 13px;
  font-weight: 800;

  line-height: 1.35;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.agri-benefit-card p {
  max-width: 220px;

  margin: 0;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .agri-benefit-card {
    padding-left: 9px;
    padding-right: 9px;
  }

  .agri-benefit-card h3 {
    font-size: 12px;
  }

  .agri-benefit-card p {
    font-size: 10px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .agri-benefits-section {
    padding: 30px 0 40px;
  }

  .agri-section-heading h2 {
    font-size: 21px;
  }

  .agri-benefit-card {
    min-height: 205px;
  }

  .agri-benefit-icon {
    width: 53px;
    height: 53px;

    flex-basis: 53px;

    font-size: 26px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .agri-benefits-section {
    padding: 25px 0 35px;
  }

  .agri-section-heading {
    gap: 10px;
  }

  .agri-section-heading h2 {
    font-size: 18px;
  }

  .agri-heading-line {
    width: 35px;
    flex-basis: 35px;
  }


  .agri-benefit-card {
    min-height: 190px;

    padding: 14px 9px;
  }

  .agri-benefit-icon {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    margin-bottom: 9px;

    font-size: 23px;
  }

  .agri-benefit-card h3 {
    font-size: 11.5px;
  }

  .agri-benefit-card p {
    font-size: 10px;

    line-height: 1.45;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 424.98px) {

  .agri-section-heading h2 {
    font-size: 16px;
  }

  .agri-heading-line {
    display: none;
  }

  .agri-benefit-card {
    min-height: 185px;
  }

  .agri-benefit-card h3 {
    font-size: 10.5px;
  }

  .agri-benefit-card p {
    font-size: 9px;
  }

}


/* =========================================
   AGRICULTURE FUTURE SECTION
========================================= */

.agri-future-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   MAIN CARDS
========================================= */

.agri-future-card,
.agri-salary-card {
  width: 100%;
  height: 100%;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e3e8ef;
  border-radius: 16px;

  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);

  overflow: hidden;
}


/* =========================================
   HEADINGS
========================================= */

.agri-future-heading,
.agri-salary-heading {
  text-align: center;
  margin-bottom: 18px;
}

.agri-future-heading h2,
.agri-salary-heading h2 {
  margin: 0;

  color: #17683f;

  font-size: 24px;
  font-weight: 800;

  line-height: 1.25;
}

.agri-salary-heading h2 {
  color: #183b83;
}

.agri-future-heading span,
.agri-salary-heading span {
  display: block;

  margin-top: 4px;

  color: #183b83;

  font-size: 14px;
  font-weight: 700;
}


/* =========================================
   TIMELINE
========================================= */

.agri-timeline {
  position: relative;

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 7px;

  padding-top: 3px;
}


/* Connecting line */

.agri-timeline::before {
  content: "";

  position: absolute;

  top: 26px;
  left: 7%;
  right: 7%;

  height: 2px;

  background: linear-gradient(90deg,
      #20845a,
      #286dd4,
      #ef7719,
      #7330b8,
      #23844e);

  z-index: 0;
}


/* =========================================
   TIMELINE ITEM
========================================= */

.agri-timeline-item {
  position: relative;

  z-index: 1;

  min-width: 0;

  text-align: center;
}


/* =========================================
   TIMELINE ICON
========================================= */

.agri-timeline-icon {
  width: 45px;
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 7px;

  border-radius: 50%;

  border: 3px solid #ffffff;

  color: #ffffff;

  font-size: 18px;

  box-shadow:
    0 2px 7px rgba(16, 24, 40, 0.08);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.agri-timeline-item:hover .agri-timeline-icon {
  transform: scale(1.08);

  box-shadow:
    0 5px 14px rgba(16, 24, 40, .13);
}


.agri-icon-green {
  background: #198253;
}

.agri-icon-blue {
  background: #2169d4;
}

.agri-icon-orange {
  background: #ef7818;
}

.agri-icon-purple {
  background: #7230b8;
}

.agri-icon-darkgreen {
  background: #26844e;
}


/* =========================================
   TIMELINE TEXT
========================================= */

.agri-timeline-item>strong {
  display: block;

  margin-bottom: 5px;

  color: #183b83;

  font-size: 12px;
  font-weight: 800;
}


.agri-timeline-item h3 {
  margin: 0 0 7px;

  color: #183b83;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.35;
}


.agri-timeline-item p {
  max-width: 125px;

  margin: 0 auto;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   MARKET STATS
========================================= */

.agri-market-stats {
  display: grid;

  grid-template-columns: 1.25fr .85fr 1.15fr;

  align-items: center;

  margin-top: 19px;

  padding: 11px 13px;

  background: #f1f8f3;

  border-radius: 13px;
}


/* =========================================
   MARKET MAIN
========================================= */

.agri-market-main {
  display: flex;
  align-items: center;

  gap: 10px;

  padding-right: 13px;
}

.agri-market-main>i {
  flex: 0 0 auto;

  color: #18784c;

  font-size: 34px;
}

.agri-market-main strong {
  display: block;

  color: #28724e;

  font-size: 10px;
  font-weight: 800;
}

.agri-market-main b {
  display: block;

  margin-top: 2px;

  color: #18784c;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.1;
}

.agri-market-main span {
  display: block;

  margin-top: 2px;

  color: #596b62;

  font-size: 9px;
}


/* =========================================
   MARKET STAT
========================================= */

.agri-market-stat {
  min-height: 57px;

  padding-left: 13px;

  border-left: 2px solid #c8ddcf;

  text-align: center;
}

.agri-market-stat strong {
  display: block;

  color: #18784c;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.1;
}

.agri-market-stat span {
  display: block;

  margin-top: 3px;

  color: #596b62;

  font-size: 9px;
  font-weight: 600;

  line-height: 1.3;
}


/* =========================================
   SOURCE
========================================= */

.agri-source {
  margin: 6px 3px 0;

  text-align: right;

  color: #667085;

  font-size: 8.5px;
}


/* =========================================
   SALARY GRID
========================================= */

.agri-salary-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
}


/* =========================================
   SALARY BOX
========================================= */

.agri-salary-box {
  min-height: 174px;

  padding: 18px 7px 12px;

  text-align: center;

  background: #ffffff;

  border: 1px solid #e1e7ef;

  border-radius: 13px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.agri-salary-box:hover {
  transform: translateY(-3px);

  box-shadow:
    0 7px 18px rgba(16, 24, 40, .07);
}


/* =========================================
   SALARY COLORS
========================================= */

.agri-salary-box>strong {
  display: block;

  font-size: 22px;
  font-weight: 800;

  line-height: 1.2;
}

.agri-salary-box>span {
  display: block;

  margin-top: 5px;

  font-size: 12px;
  font-weight: 800;
}

.salary-green>strong,
.salary-green>span {
  color: #188867;
}

.salary-blue>strong,
.salary-blue>span {
  color: #155ed0;
}

.salary-orange>strong,
.salary-orange>span {
  color: #ed7416;
}

.salary-purple>strong,
.salary-purple>span {
  color: #702aa0;
}


/* =========================================
   DIVIDER
========================================= */

.agri-salary-divider {
  width: 78%;
  height: 2px;

  margin: 17px auto 14px;

  background: #e7ebf0;
}


/* =========================================
   SALARY LEVEL
========================================= */

.agri-salary-box h3 {
  margin: 0;

  color: #183b83;

  font-size: 12px;
  font-weight: 800;
}

.agri-salary-box p {
  margin: 6px 0 0;

  color: #183b83;

  font-size: 11px;
  font-weight: 600;
}


/* =========================================
   SALARY NOTE
========================================= */

.agri-salary-note {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 20px;

  padding: 12px 14px;

  background: #f6f5fa;

  border-radius: 13px;
}

.agri-star {
  width: 45px;
  height: 45px;

  flex: 0 0 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff8ec;

  color: #f19a20;

  font-size: 24px;
}

.agri-salary-note p {
  margin: 0 0 3px;

  color: #394879;

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.4;
}

.agri-salary-note span {
  color: #596184;

  font-size: 8.8px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .agri-timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 5px;
  }

  .agri-timeline::before {
    left: 5%;
    right: 5%;
  }

  .agri-timeline-item h3 {
    font-size: 10px;
  }

  .agri-timeline-item p {
    font-size: 8.5px;
  }

  .agri-salary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .agri-future-section {
    padding: 25px 0 35px;
  }

  .agri-future-card,
  .agri-salary-card {
    padding: 14px;
  }

  .agri-future-heading h2,
  .agri-salary-heading h2 {
    font-size: 20px;
  }

  .agri-future-heading span,
  .agri-salary-heading span {
    font-size: 12px;
  }


  /* Timeline becomes 2 columns */

  .agri-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px 8px;
  }

  .agri-timeline::before {
    display: none;
  }

  .agri-timeline-icon {
    width: 42px;
    height: 42px;

    font-size: 17px;
  }

  .agri-timeline-item>strong {
    font-size: 11px;
  }

  .agri-timeline-item h3 {
    font-size: 10.5px;
  }

  .agri-timeline-item p {
    font-size: 9px;
  }


  /* Market */

  .agri-market-stats {
    grid-template-columns: 1fr 1fr;

    gap: 10px;
  }

  .agri-market-main {
    grid-column: 1 / -1;

    justify-content: center;

    padding: 0 0 10px;

    border-bottom: 1px solid #c8ddcf;
  }

  .agri-market-stat {
    padding-left: 0;

    border-left: none;
  }

  .agri-market-stat:first-of-type {
    border-right: 1px solid #c8ddcf;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .agri-timeline-icon {
    width: 39px;
    height: 39px;

    font-size: 16px;
  }

  .agri-timeline-item h3 {
    font-size: 10px;
  }

  .agri-timeline-item p {
    font-size: 8.5px;
  }

  .agri-market-main b {
    font-size: 18px;
  }

  .agri-market-stat strong {
    font-size: 18px;
  }

  .agri-market-stat span {
    font-size: 8px;
  }


  .agri-salary-box {
    min-height: 165px;

    padding: 15px 5px 11px;
  }

  .agri-salary-box>strong {
    font-size: 18px;
  }

  .agri-salary-box h3 {
    font-size: 10.5px;
  }

  .agri-salary-box p {
    font-size: 9px;
  }

  .agri-salary-divider {
    margin: 13px auto;
  }

  .agri-salary-note {
    align-items: flex-start;

    padding: 10px;
  }

  .agri-star {
    width: 39px;
    height: 39px;

    flex-basis: 39px;

    font-size: 20px;
  }

  .agri-salary-note p {
    font-size: 9.5px;
  }

  .agri-salary-note span {
    font-size: 8px;
  }

}



/* =========================================
   AGRICULTURE INDUSTRY + CAREER SECTION
========================================= */

.agri-industry-career-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   MAIN CARD
========================================= */

.agri-industry-card {
  width: 100%;
  height: 100%;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e3e9e5;
  border-radius: 16px;

  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);

  overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.agri-industry-title {
  margin: 0 0 20px;

  text-align: center;

  color: #17683f;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.3;
}


/* =========================================
   INDUSTRIES GRID
========================================= */

.agri-industries-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  column-gap: 10px;
  row-gap: 20px;
}


/* =========================================
   INDUSTRY ITEM
========================================= */

.agri-industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================
   INDUSTRY ICON
========================================= */

.agri-industry-icon {
  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 8px;

  border-radius: 50%;

  font-size: 23px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.agri-industry-item:hover .agri-industry-icon {
  transform: translateY(-3px);

  box-shadow:
    0 6px 15px rgba(16, 24, 40, .08);
}


/* =========================================
   INDUSTRY ICON COLORS
========================================= */

.agri-i-green {
  color: #398c57;
  background: rgba(57, 140, 87, .08);
}

.agri-i-blue {
  color: #3977c9;
  background: rgba(57, 119, 201, .08);
}

.agri-i-orange {
  color: #ed8a21;
  background: rgba(237, 138, 33, .08);
}


/* =========================================
   INDUSTRY TEXT
========================================= */

.agri-industry-item h3 {
  margin: 0;

  color: #183b83;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.4;
}


/* =========================================
   CAREER GRID
========================================= */

.agri-career-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 25px;
  row-gap: 16px;
}


/* =========================================
   CAREER ITEM
========================================= */

.agri-career-item {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 10px;
}


/* =========================================
   CAREER ICON
========================================= */

.agri-career-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 19px;
}


/* =========================================
   CAREER ICON COLORS
========================================= */

.agri-c-green {
  color: #3f9060;
  background: rgba(63, 144, 96, .08);
}

.agri-c-lime {
  color: #7d9d31;
  background: rgba(125, 157, 49, .09);
}


/* =========================================
   CAREER TEXT
========================================= */

.agri-career-item>div:last-child {
  min-width: 0;
}

.agri-career-item h3 {
  margin: 0 0 3px;

  color: #17683f;

  font-size: 11.5px;
  font-weight: 800;

  line-height: 1.35;
}

.agri-career-item p {
  margin: 0;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.4;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .agri-industries-grid {
    column-gap: 6px;
  }

  .agri-industry-icon {
    width: 52px;
    height: 52px;

    font-size: 21px;
  }

  .agri-industry-item h3 {
    font-size: 10px;
  }

  .agri-career-grid {
    column-gap: 17px;
  }

  .agri-career-item h3 {
    font-size: 11px;
  }

  .agri-career-item p {
    font-size: 9.3px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .agri-industry-career-section {
    padding: 30px 0 40px;
  }

  .agri-industry-title {
    font-size: 21px;
  }

  .agri-industries-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));

    column-gap: 10px;
    row-gap: 20px;
  }

  .agri-industry-icon {
    width: 54px;
    height: 54px;

    font-size: 22px;
  }

  .agri-industry-item h3 {
    font-size: 10.5px;
  }

  .agri-career-grid {
    column-gap: 22px;
  }

  .agri-career-item h3 {
    font-size: 11.5px;
  }

  .agri-career-item p {
    font-size: 9.8px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .agri-industry-career-section {
    padding: 25px 0 35px;
  }

  .agri-industry-card {
    padding: 15px 12px;

    border-radius: 14px;
  }

  .agri-industry-title {
    font-size: 19px;

    margin-bottom: 18px;
  }


  /* Industries */

  .agri-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 12px;
    row-gap: 22px;
  }

  .agri-industry-icon {
    width: 51px;
    height: 51px;

    font-size: 21px;
  }

  .agri-industry-item h3 {
    font-size: 10px;
  }


  /* Career */

  .agri-career-grid {
    grid-template-columns: 1fr;

    row-gap: 17px;
  }

  .agri-career-item {
    gap: 10px;
  }

  .agri-career-icon {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }

  .agri-career-item h3 {
    font-size: 11.5px;
  }

  .agri-career-item p {
    font-size: 10px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .agri-industry-card {
    padding: 14px 10px;
  }

  .agri-industry-title {
    font-size: 17px;
  }

  .agri-industries-grid {
    column-gap: 8px;
    row-gap: 18px;
  }

  .agri-industry-icon {
    width: 47px;
    height: 47px;

    font-size: 19px;
  }

  .agri-industry-item h3 {
    font-size: 9.3px;
  }

  .agri-career-icon {
    width: 39px;
    height: 39px;

    flex-basis: 39px;

    font-size: 17px;
  }

  .agri-career-item h3 {
    font-size: 10.5px;
  }

  .agri-career-item p {
    font-size: 9.2px;
  }

}


/* =========================================
   AGRICULTURE TOOLS + SKILLS
========================================= */

.agri-tools-skills-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   MAIN CARD
========================================= */

.agri-tools-card {
  position: relative;

  width: 100%;
  height: 100%;

  padding: 17px;

  background: #ffffff;

  border: 1px solid #e2e9e4;
  border-radius: 16px;

  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.035);

  overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.agri-tools-title {
  position: relative;
  z-index: 2;

  margin: 0 0 17px;

  text-align: center;

  color: #17683f;

  font-size: 22px;
  font-weight: 800;

  line-height: 1.3;
}


/* =========================================
   TOOLS GRID
========================================= */

.agri-tools-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 7px;
}


/* =========================================
   TOOL
========================================= */

.agri-tool {
  min-width: 0;
  min-height: 38px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 5px 7px;

  background: #ffffff;

  border: 1px solid #e2e8e5;
  border-radius: 7px;

  color: #263b70;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.15;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.agri-tool:hover {
  transform: translateY(-2px);

  border-color: #c8dace;

  box-shadow:
    0 5px 12px rgba(16, 24, 40, .07);
}


/* =========================================
   TOOL ICON
========================================= */

.agri-tool i {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
}


/* =========================================
   TOOL COLORS
========================================= */

.tool-python {
  color: #3776ab;
}

.tool-r {
  color: #276dc1;
}

.tool-tensorflow {
  color: #ef7d19;
}

.tool-pytorch {
  color: #ee6b22;
}

.tool-earth {
  color: #4285f4;
}

.tool-arcgis {
  color: #258b68;
}

.tool-qgis {
  color: #65a04c;
}

.tool-opencv {
  color: #2381b8;
}

.tool-sklearn {
  color: #e67b28;
}

.tool-keras {
  color: #d51d37;
}

.tool-hugging {
  color: #f2a51c;
}

.tool-azure {
  color: #147ac2;
}

.tool-aws {
  color: #8c43c7;
}

.tool-rapidminer {
  color: #d59b24;
}

.tool-tableau {
  color: #4b8bb5;
}

.tool-powerbi {
  color: #e6a800;
}

.tool-excel {
  color: #18864b;
}

.tool-drone {
  color: #347bc7;
}

.tool-leaf {
  color: #72a92f;
}

.tool-streamlit {
  color: #e67920;
}


/* =========================================
   TOOLS FOOTER
========================================= */

.agri-tools-footer {
  position: relative;
  z-index: 2;

  margin: 11px 0 0;

  text-align: center;

  color: #667085;

  font-size: 9px;
  font-weight: 600;
}


/* =========================================
   SKILLS GRID
========================================= */

.agri-skills-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 28px;
}


/* =========================================
   SKILLS LIST
========================================= */

.agri-skills-list {
  list-style: none;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;

  gap: 13px;
}


/* =========================================
   SKILL ITEM
========================================= */

.agri-skills-list li {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  color: #263b70;

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.35;
}


.agri-skills-list li i {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #23845c;

  font-size: 13px;
}


/* =========================================
   DECORATIVE AGRICULTURE GRAPHIC
========================================= */

.agri-skills-decoration {
  position: absolute;

  right: -3px;
  bottom: -22px;

  z-index: 1;

  color: rgba(69, 132, 70, .09);

  pointer-events: none;
}


.agri-skills-decoration i:first-child {
  font-size: 105px;
}

.agri-skills-decoration i:last-child {
  position: absolute;

  right: 17px;
  bottom: 28px;

  font-size: 68px;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .agri-tools-grid {
    gap: 6px;
  }

  .agri-tool {
    padding: 5px;

    font-size: 8.8px;
  }

  .agri-tool i {
    width: 23px;
    height: 23px;

    flex-basis: 23px;

    font-size: 13px;
  }

  .agri-skills-grid {
    column-gap: 18px;
  }

  .agri-skills-list li {
    font-size: 10px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .agri-tools-skills-section {
    padding: 30px 0 40px;
  }

  .agri-tools-card {
    padding: 16px;
  }

  .agri-tools-title {
    font-size: 21px;
  }

  .agri-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;
  }

  .agri-tool {
    min-height: 42px;

    font-size: 10px;
  }

  .agri-skills-grid {
    column-gap: 22px;
  }

  .agri-skills-list li {
    font-size: 10.5px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .agri-tools-skills-section {
    padding: 25px 0 35px;
  }

  .agri-tools-card {
    padding: 14px 12px;

    border-radius: 14px;
  }

  .agri-tools-title {
    font-size: 19px;

    margin-bottom: 15px;
  }


  /* Tools */

  .agri-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .agri-tool {
    min-height: 43px;

    gap: 6px;

    padding: 6px;

    font-size: 9px;
  }

  .agri-tool i {
    width: 25px;
    height: 25px;

    flex-basis: 25px;

    font-size: 14px;
  }


  /* Skills */

  .agri-skills-grid {
    grid-template-columns: 1fr;

    gap: 11px;
  }

  .agri-skills-list {
    gap: 11px;
  }

  .agri-skills-list li {
    font-size: 10px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .agri-tools-card {
    padding: 13px 10px;
  }

  .agri-tools-title {
    font-size: 17px;
  }

  .agri-tools-grid {
    gap: 6px;
  }

  .agri-tool {
    min-height: 41px;

    gap: 5px;

    padding: 5px;

    font-size: 8.5px;
  }

  .agri-tool i {
    width: 23px;
    height: 23px;

    flex-basis: 23px;

    font-size: 13px;
  }

  .agri-tools-footer {
    font-size: 8.5px;
  }

  .agri-skills-list {
    gap: 9px;
  }

  .agri-skills-list li {
    font-size: 9.5px;
  }

  .agri-skills-list li i {
    font-size: 12px;
  }

}



/* =========================================
   PROGRAM HIGHLIGHTS
========================================= */

.program-highlights {
  width: 100%;
  overflow: hidden;
}


/* =========================================
   TOP SECTION
========================================= */

.program-highlights-top {
  width: 100%;
  padding: 12px 0;

  background:
    linear-gradient(90deg,
      #edf8e9 0%,
      #f7fae9 50%,
      #edf8e9 100%);

  border-top: 1px solid #e0ebdb;
  border-bottom: 1px solid #d5e6d0;
}


.program-top-content {
  display: flex;
  align-items: center;

  gap: 28px;
}


/* =========================================
   TITLE
========================================= */

.program-title {
  flex: 0 0 auto;

  margin: 0;

  color: #164d2c;

  font-size: 17px;
  font-weight: 800;

  white-space: nowrap;
}


/* =========================================
   FEATURES
========================================= */

.program-features {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap: 15px;
}


.program-feature {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}


.program-feature-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  background: rgba(255, 255, 255, .5);
}


.program-feature h3 {
  margin: 0 0 1px;

  color: #29415e;

  font-size: 9.5px;
  font-weight: 800;

  line-height: 1.25;
}


.program-feature p {
  margin: 0;

  color: #46566d;

  font-size: 8.5px;
  font-weight: 600;

  line-height: 1.25;
}


/* =========================================
   ICON COLORS
========================================= */

.icon-blue {
  color: #2779c8;
}

.icon-orange {
  color: #e8751a;
}

.icon-yellow {
  color: #dca500;
}

.icon-green {
  color: #4c9a68;
}

.icon-purple {
  color: #9852c2;
}

.icon-pink {
  color: #ca5d99;
}


/* =========================================
   BOTTOM STATS
========================================= */

.program-stats {
  width: 100%;

  padding: 9px 0;

  background:
    linear-gradient(90deg,
      #126b28,
      #18752b,
      #075e24);
}


.program-stats-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}


.program-stat {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 0 18px;

  border-right: 1px solid rgba(255, 255, 255, .22);
}


.program-stat:last-child {
  border-right: 0;
}


/* =========================================
   STAT ICON
========================================= */

.program-stat-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-size: 22px;
}


/* =========================================
   STAT TEXT
========================================= */

.program-stat strong {
  display: block;

  color: #ffffff;

  font-size: 17px;
  font-weight: 800;

  line-height: 1.05;
}


.program-stat span {
  display: block;

  margin-top: 2px;

  color: rgba(255, 255, 255, .88);

  font-size: 8.5px;
  font-weight: 600;

  line-height: 1.2;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .program-top-content {
    gap: 18px;
  }

  .program-features {
    gap: 9px;
  }

  .program-feature {
    gap: 6px;
  }

  .program-feature-icon {
    width: 33px;
    height: 33px;

    flex-basis: 33px;

    font-size: 19px;
  }

  .program-feature h3 {
    font-size: 8.5px;
  }

  .program-feature p {
    font-size: 7.8px;
  }

  .program-title {
    font-size: 15px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .program-highlights-top {
    padding: 15px 0;
  }

  .program-top-content {
    display: block;
  }

  .program-title {
    margin-bottom: 13px;

    text-align: center;

    font-size: 18px;
  }

  .program-features {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 14px;
  }

  .program-feature-icon {
    width: 35px;
    height: 35px;

    flex-basis: 35px;
  }

  .program-feature h3 {
    font-size: 9px;
  }

  .program-feature p {
    font-size: 8px;
  }

  .program-stats-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    row-gap: 10px;
  }

  .program-stat {
    padding: 4px 12px;
  }

  .program-stat:nth-child(3) {
    border-right: 0;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .program-highlights-top {
    padding: 16px 0;
  }

  .program-title {
    font-size: 17px;
  }

  .program-features {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px 10px;
  }

  .program-feature {
    gap: 8px;

    padding: 4px;
  }

  .program-feature-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    font-size: 20px;
  }

  .program-feature h3 {
    font-size: 9.5px;
  }

  .program-feature p {
    font-size: 8.5px;
  }


  /* Stats */

  .program-stats {
    padding: 12px 0;
  }

  .program-stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px 0;
  }

  .program-stat {
    justify-content: flex-start;

    padding: 3px 12px;

    border-right: 1px solid rgba(255, 255, 255, .22);
  }

  .program-stat:nth-child(2),
  .program-stat:nth-child(4) {
    border-right: 0;
  }

  .program-stat-icon {
    width: 30px;
    height: 30px;

    flex-basis: 30px;

    font-size: 19px;
  }

  .program-stat strong {
    font-size: 15px;
  }

  .program-stat span {
    font-size: 8px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .program-title {
    font-size: 16px;
  }

  .program-features {
    gap: 9px 6px;
  }

  .program-feature {
    align-items: flex-start;
  }

  .program-feature-icon {
    width: 31px;
    height: 31px;

    flex-basis: 31px;

    font-size: 17px;
  }

  .program-feature h3 {
    font-size: 8.5px;
  }

  .program-feature p {
    font-size: 7.5px;
  }

  .program-stat {
    gap: 6px;

    padding: 2px 7px;
  }

  .program-stat-icon {
    width: 27px;
    height: 27px;

    flex-basis: 27px;

    font-size: 17px;
  }

  .program-stat strong {
    font-size: 13px;
  }

  .program-stat span {
    font-size: 7px;
  }

}


/* =========================================
   HEALTHCARE BENEFITS SECTION
========================================= */

.healthcare-benefits-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   HEADING
========================================= */

.healthcare-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 15px;

  margin-bottom: 18px;
}

.healthcare-section-heading h2 {
  margin: 0;

  color: #183b83;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.3;

  text-align: center;
}

.healthcare-heading-line {
  width: 65px;
  height: 2px;

  flex: 0 0 65px;

  background: #d5dce9;

  border-radius: 50px;
}


/* =========================================
   CARD
========================================= */

.healthcare-benefit-card {
  width: 100%;
  height: 100%;

  min-height: 200px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px 11px 14px;

  text-align: center;

  background: #ffffff;

  border: 1px solid #e2e7ef;

  border-radius: 12px;

  box-shadow:
    0 2px 10px rgba(16, 24, 40, 0.035);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


/* =========================================
   HOVER
========================================= */

.healthcare-benefit-card:hover {
  transform: translateY(-5px);

  border-color: #cbd5e5;

  box-shadow:
    0 10px 25px rgba(16, 24, 40, 0.09);
}


/* =========================================
   ICON
========================================= */

.healthcare-icon {
  width: 57px;
  height: 57px;

  flex: 0 0 57px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 11px;

  border-radius: 50%;

  font-size: 28px;

  transition:
    transform .3s ease;
}

.healthcare-benefit-card:hover .healthcare-icon {
  transform: scale(1.08);
}


/* =========================================
   ICON COLORS
========================================= */

.healthcare-blue {
  color: #188b68;
  background: rgba(24, 139, 104, .07);
}

.healthcare-purple {
  color: #7029c5;
  background: rgba(112, 41, 197, .07);
}

.healthcare-orange {
  color: #f27b19;
  background: rgba(242, 123, 25, .08);
}

.healthcare-teal {
  color: #168da0;
  background: rgba(22, 141, 160, .07);
}

.healthcare-pink {
  color: #df2672;
  background: rgba(223, 38, 114, .07);
}

.healthcare-darkblue {
  color: #145dd5;
  background: rgba(20, 93, 213, .07);
}


/* =========================================
   CARD TITLE
========================================= */

.healthcare-benefit-card h3 {
  margin: 0 0 9px;

  color: #183b83;

  font-size: 12.5px;
  font-weight: 800;

  line-height: 1.4;
}


/* =========================================
   DESCRIPTION
========================================= */

.healthcare-benefit-card p {
  max-width: 210px;

  margin: 0;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .healthcare-benefit-card {
    padding-left: 8px;
    padding-right: 8px;
  }

  .healthcare-benefit-card h3 {
    font-size: 11.5px;
  }

  .healthcare-benefit-card p {
    font-size: 9.5px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .healthcare-benefits-section {
    padding: 30px 0 40px;
  }

  .healthcare-section-heading h2 {
    font-size: 21px;
  }

  .healthcare-benefit-card {
    min-height: 195px;
  }

  .healthcare-icon {
    width: 53px;
    height: 53px;

    flex-basis: 53px;

    font-size: 26px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .healthcare-benefits-section {
    padding: 25px 0 35px;
  }

  .healthcare-section-heading {
    gap: 10px;
  }

  .healthcare-section-heading h2 {
    font-size: 18px;
  }

  .healthcare-heading-line {
    width: 35px;
    flex-basis: 35px;
  }

  .healthcare-benefit-card {
    min-height: 185px;

    padding: 13px 8px;
  }

  .healthcare-icon {
    width: 49px;
    height: 49px;

    flex-basis: 49px;

    margin-bottom: 9px;

    font-size: 23px;
  }

  .healthcare-benefit-card h3 {
    font-size: 10.8px;
  }

  .healthcare-benefit-card p {
    font-size: 9.2px;

    line-height: 1.45;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 424.98px) {

  .healthcare-section-heading h2 {
    font-size: 16px;
  }

  .healthcare-heading-line {
    display: none;
  }

  .healthcare-benefit-card {
    min-height: 180px;

    padding-left: 7px;
    padding-right: 7px;
  }

  .healthcare-icon {
    width: 45px;
    height: 45px;

    flex-basis: 45px;

    font-size: 21px;
  }

  .healthcare-benefit-card h3 {
    font-size: 10px;
  }

  .healthcare-benefit-card p {
    font-size: 8.5px;
  }

}



/* =========================================
   HEALTHCARE FUTURE SECTION
========================================= */

.healthcare-future-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   MAIN CARDS
========================================= */

.healthcare-future-card,
.healthcare-salary-card {
  width: 100%;
  height: 100%;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e3e8ef;
  border-radius: 16px;

  box-shadow:
    0 2px 12px rgba(16, 24, 40, 0.035);

  overflow: hidden;
}


/* =========================================
   HEADINGS
========================================= */

.healthcare-future-heading,
.healthcare-salary-heading {
  text-align: center;

  margin-bottom: 18px;
}

.healthcare-future-heading h2,
.healthcare-salary-heading h2 {
  margin: 0;

  color: #183b83;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.25;
}

.healthcare-future-heading span,
.healthcare-salary-heading span {
  display: block;

  margin-top: 4px;

  color: #183b83;

  font-size: 13px;
  font-weight: 700;
}


/* =========================================
   TIMELINE
========================================= */

.healthcare-timeline {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;

  padding-top: 3px;
}


/* Connecting line */

.healthcare-timeline::before {
  content: "";

  position: absolute;

  top: 26px;
  left: 9%;
  right: 9%;

  height: 2px;

  background: linear-gradient(90deg,
      #188e91,
      #2876d4,
      #7434ba,
      #dd3676);

  z-index: 0;
}


/* =========================================
   TIMELINE ITEM
========================================= */

.healthcare-timeline-item {
  position: relative;

  z-index: 1;

  min-width: 0;

  text-align: center;
}


/* =========================================
   TIMELINE ICON
========================================= */

.healthcare-timeline-icon {
  width: 43px;
  height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 7px;

  border-radius: 50%;

  border: 3px solid #ffffff;

  color: #ffffff;

  font-size: 17px;

  box-shadow:
    0 2px 8px rgba(16, 24, 40, .08);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.healthcare-timeline-item:hover .healthcare-timeline-icon {
  transform: scale(1.08);

  box-shadow:
    0 5px 14px rgba(16, 24, 40, .13);
}


/* =========================================
   TIMELINE COLORS
========================================= */

.hc-teal {
  background: #168c8c;
}

.hc-blue {
  background: #2375d5;
}

.hc-purple {
  background: #7433b9;
}

.hc-pink {
  background: #dc3572;
}


/* =========================================
   TIMELINE TEXT
========================================= */

.healthcare-timeline-item>strong {
  display: block;

  margin-bottom: 5px;

  color: #183b83;

  font-size: 11.5px;
  font-weight: 800;
}

.healthcare-timeline-item h3 {
  margin: 0 0 7px;

  color: #183b83;

  font-size: 10.5px;
  font-weight: 800;

  line-height: 1.35;
}

.healthcare-timeline-item p {
  max-width: 125px;

  margin: 0 auto;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   HEALTHCARE MARKET
========================================= */

.healthcare-market-stats {
  display: grid;

  grid-template-columns:
    1.35fr .8fr 1fr;

  align-items: center;

  margin-top: 19px;

  padding: 10px 13px;

  background: #f7f1fb;

  border-radius: 12px;
}


/* Main market */

.healthcare-market-main {
  display: flex;
  align-items: center;

  gap: 10px;

  padding-right: 13px;
}

.healthcare-market-main>i {
  color: #7932be;

  font-size: 34px;
}

.healthcare-market-main strong {
  display: block;

  color: #3e337b;

  font-size: 9.5px;
  font-weight: 800;
}

.healthcare-market-main b {
  display: block;

  margin-top: 2px;

  color: #4b2295;

  font-size: 20px;
  font-weight: 800;
}

.healthcare-market-main span {
  display: block;

  color: #667085;

  font-size: 8.5px;
}


/* =========================================
   MARKET STAT
========================================= */

.healthcare-market-stat {
  min-height: 50px;

  padding-left: 13px;

  border-left: 2px solid #d7cde5;

  text-align: center;
}

.healthcare-market-stat strong {
  display: block;

  color: #55279c;

  font-size: 19px;
  font-weight: 800;
}

.healthcare-market-stat span {
  display: block;

  margin-top: 2px;

  color: #596184;

  font-size: 8.5px;
  font-weight: 600;

  line-height: 1.25;
}


/* =========================================
   SOURCE
========================================= */

.healthcare-source {
  margin: 6px 3px 0;

  text-align: right;

  color: #667085;

  font-size:11px;
}


/* =========================================
   SALARY GRID
========================================= */

.healthcare-salary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 9px;
}


/* =========================================
   SALARY BOX
========================================= */

.healthcare-salary-box {
  min-height: 174px;

  padding: 17px 6px 12px;

  text-align: center;

  background: #ffffff;

  border: 1px solid #e1e7ef;

  border-radius: 12px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.healthcare-salary-box:hover {
  transform: translateY(-3px);

  box-shadow:
    0 7px 18px rgba(16, 24, 40, .07);
}


/* =========================================
   SALARY COLORS
========================================= */

.healthcare-salary-box>strong {
  display: block;

  font-size: 21px;
  font-weight: 800;
}

.healthcare-salary-box>span {
  display: block;

  margin-top: 5px;

  font-size: 12px;
  font-weight: 800;
}


.salary-hc-green>strong,
.salary-hc-green>span {
  color: #188b70;
}

.salary-hc-blue>strong,
.salary-hc-blue>span {
  color: #1764d4;
}

.salary-hc-purple>strong,
.salary-hc-purple>span {
  color: #7134b1;
}

.salary-hc-pink>strong,
.salary-hc-pink>span {
  color: #d52c70;
}


/* =========================================
   DIVIDER
========================================= */

.healthcare-salary-divider {
  width: 78%;
  height: 2px;

  margin: 17px auto 14px;

  background: #e5e9ef;
}


/* =========================================
   SALARY LEVEL
========================================= */

.healthcare-salary-box h3 {
  margin: 0;

  color: #183b83;

  font-size: 11.5px;
  font-weight: 800;
}

.healthcare-salary-box p {
  margin: 6px 0 0;

  color: #183b83;

  font-size: 10.5px;
  font-weight: 600;
}


/* =========================================
   SALARY NOTE
========================================= */

.healthcare-salary-note {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-top: 20px;

  padding: 11px 13px;

  background: #f6f6fa;

  border-radius: 12px;
}

.healthcare-star {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff8e9;

  color: #f29a1d;

  font-size: 23px;
}

.healthcare-salary-note p {
  margin: 0 0 3px;

  color: #394879;

  font-size: 10px;
  font-weight: 600;

  line-height: 1.4;
}

.healthcare-salary-note span {
  color: #596184;

  font-size: 11px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .healthcare-timeline {
    gap: 5px;
  }

  .healthcare-timeline-item h3 {
    font-size: 10px;
  }

  .healthcare-timeline-item p {
    font-size: 8.3px;
  }

  .healthcare-salary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .healthcare-future-section {
    padding: 25px 0 35px;
  }

  .healthcare-future-card,
  .healthcare-salary-card {
    padding: 14px;
  }

  .healthcare-future-heading h2,
  .healthcare-salary-heading h2 {
    font-size: 20px;
  }

  .healthcare-future-heading span,
  .healthcare-salary-heading span {
    font-size: 11.5px;
  }


  /* Timeline */

  .healthcare-timeline {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 22px 8px;
  }

  .healthcare-timeline::before {
    display: none;
  }

  .healthcare-timeline-icon {
    width: 41px;
    height: 41px;

    font-size: 16px;
  }

  .healthcare-timeline-item>strong {
    font-size: 11px;
  }

  .healthcare-timeline-item h3 {
    font-size: 10px;
  }

  .healthcare-timeline-item p {
    font-size: 8.7px;
  }


  /* Market */

  .healthcare-market-stats {
    grid-template-columns:
      1fr 1fr;

    gap: 10px;
  }

  .healthcare-market-main {
    grid-column: 1 / -1;

    justify-content: center;

    padding: 0 0 10px;

    border-bottom: 1px solid #d7cde5;
  }

  .healthcare-market-stat {
    padding-left: 0;

    border-left: 0;
  }

  .healthcare-market-stat:first-of-type {
    border-right: 1px solid #d7cde5;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .healthcare-future-heading h2,
  .healthcare-salary-heading h2 {
    font-size: 18px;
  }

  .healthcare-timeline-icon {
    width: 38px;
    height: 38px;

    font-size: 15px;
  }

  .healthcare-timeline-item h3 {
    font-size: 9.5px;
  }

  .healthcare-timeline-item p {
    font-size: 8px;
  }

  .healthcare-market-main b {
    font-size: 18px;
  }

  .healthcare-market-stat strong {
    font-size: 17px;
  }

  .healthcare-salary-box {
    min-height: 160px;

    padding-top: 15px;
  }

  .healthcare-salary-box>strong {
    font-size: 18px;
  }

  .healthcare-salary-box h3 {
    font-size: 10px;
  }

  .healthcare-salary-box p {
    font-size: 9px;
  }

  .healthcare-salary-note {
    align-items: flex-start;

    padding: 10px;
  }

  .healthcare-star {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    font-size: 20px;
  }

}


/* =========================================
   HEALTHCARE INDUSTRIES + CAREERS
========================================= */

.hc-industry-career-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   PANEL
========================================= */

.hc-panel {
  width: 100%;
  height: 100%;

  padding: 17px;

  background: #ffffff;

  border: 1px solid #e3e8ef;
  border-radius: 15px;

  box-shadow:
    0 2px 11px rgba(16, 24, 40, 0.035);

  overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.hc-panel-title {
  margin: 0 0 18px;

  text-align: center;

  color: #183b83;

  font-size: 22px;
  font-weight: 800;

  line-height: 1.3;
}


/* =========================================
   INDUSTRIES
========================================= */

.hc-industries-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  column-gap: 8px;
  row-gap: 18px;
}


.hc-industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================
   INDUSTRY ICON
========================================= */

.hc-industry-icon {
  width: 53px;
  height: 53px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 7px;

  border-radius: 50%;

  font-size: 21px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.hc-industry-item:hover .hc-industry-icon {
  transform: translateY(-3px) scale(1.04);

  box-shadow:
    0 6px 14px rgba(16, 24, 40, .08);
}


/* =========================================
   ICON COLORS
========================================= */

.hc-blue {
  color: #2582d4;
  background: rgba(37, 130, 212, .07);
}

.hc-green {
  color: #53a45e;
  background: rgba(83, 164, 94, .08);
}

.hc-purple {
  color: #8748c8;
  background: rgba(135, 72, 200, .07);
}

.hc-orange {
  color: #ed711c;
  background: rgba(237, 113, 28, .08);
}

.hc-pink {
  color: #d95a9d;
  background: rgba(217, 90, 157, .08);
}


/* =========================================
   INDUSTRY TEXT
========================================= */

.hc-industry-item h3 {
  margin: 0;

  color: #183b83;

  font-size: 9.8px;
  font-weight: 700;

  line-height: 1.4;
}


/* =========================================
   CAREER GRID
========================================= */

.hc-career-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 22px;
  row-gap: 14px;
}


/* =========================================
   CAREER ITEM
========================================= */

.hc-career-item {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 8px;
}


.hc-career-icon {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 17px;
}


/* =========================================
   CAREER COLORS
========================================= */

.hc-career-purple {
  color: #7541c1;
  background: rgba(117, 65, 193, .08);
}

.hc-career-teal {
  color: #1598a1;
  background: rgba(21, 152, 161, .08);
}

.hc-career-blue {
  color: #3184cc;
  background: rgba(49, 132, 204, .08);
}

.hc-career-pink {
  color: #d34f91;
  background: rgba(211, 79, 145, .08);
}


/* =========================================
   CAREER TEXT
========================================= */

.hc-career-item>div:last-child {
  min-width: 0;
}


.hc-career-item h3 {
  margin: 0 0 2px;

  color: #183b83;

  font-size: 10.8px;
  font-weight: 800;

  line-height: 1.3;
}


.hc-career-item p {
  margin: 0;

  color: #667085;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.4;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .hc-industries-grid {
    column-gap: 5px;
  }

  .hc-industry-icon {
    width: 50px;
    height: 50px;

    font-size: 20px;
  }

  .hc-industry-item h3 {
    font-size: 9.3px;
  }

  .hc-career-grid {
    column-gap: 15px;
  }

  .hc-career-item h3 {
    font-size: 10.3px;
  }

  .hc-career-item p {
    font-size: 8.5px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .hc-industry-career-section {
    padding: 30px 0 40px;
  }

  .hc-panel-title {
    font-size: 21px;
  }

  .hc-industries-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    column-gap: 8px;
    row-gap: 20px;
  }

  .hc-industry-icon {
    width: 52px;
    height: 52px;
  }

  .hc-industry-item h3 {
    font-size: 9.8px;
  }

  .hc-career-grid {
    column-gap: 20px;
  }

  .hc-career-item h3 {
    font-size: 10.8px;
  }

  .hc-career-item p {
    font-size: 9px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .hc-industry-career-section {
    padding: 25px 0 35px;
  }

  .hc-panel {
    padding: 14px 11px;

    border-radius: 13px;
  }

  .hc-panel-title {
    font-size: 19px;

    margin-bottom: 17px;
  }


  /* Industries */

  .hc-industries-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 12px;
    row-gap: 21px;
  }

  .hc-industry-icon {
    width: 49px;
    height: 49px;

    font-size: 20px;
  }

  .hc-industry-item h3 {
    font-size: 9.8px;
  }


  /* Careers */

  .hc-career-grid {
    grid-template-columns: 1fr;

    row-gap: 15px;
  }

  .hc-career-icon {
    width: 40px;
    height: 40px;

    flex-basis: 40px;
  }

  .hc-career-item h3 {
    font-size: 11px;
  }

  .hc-career-item p {
    font-size: 9.5px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .hc-panel {
    padding: 13px 9px;
  }

  .hc-panel-title {
    font-size: 17px;
  }

  .hc-industries-grid {
    column-gap: 7px;
    row-gap: 18px;
  }

  .hc-industry-icon {
    width: 45px;
    height: 45px;

    font-size: 18px;
  }

  .hc-industry-item h3 {
    font-size: 8.8px;
  }

  .hc-career-item {
    gap: 8px;
  }

  .hc-career-icon {
    width: 37px;
    height: 37px;

    flex-basis: 37px;

    font-size: 16px;
  }

  .hc-career-item h3 {
    font-size: 10.2px;
  }

  .hc-career-item p {
    font-size: 8.7px;
  }

}


/* =========================================
   HEALTHCARE TOOLS + SKILLS
========================================= */

.hc-tools-skills-section {
  width: 100%;
  padding: 10px 0 20px;
  background: #ffffff;
}


/* =========================================
   MAIN PANELS
========================================= */

.hc-tools-panel,
.hc-skills-panel {
  position: relative;

  width: 100%;
  height: 100%;

  padding: 14px 15px 16px;

  background: #ffffff;

  border: 1px solid #e1e7ef;
  border-radius: 14px;

  box-shadow:
    0 2px 10px rgba(16, 24, 40, 0.035);

  overflow: hidden;
}


/* =========================================
   TITLES
========================================= */

.hc-tools-title,
.hc-skills-title {
  margin: 0 0 13px;

  text-align: center;

  color: #183b83;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.3;
}


/* =========================================
   TOOLS GRID
========================================= */

.hc-tools-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 6px;
}


/* =========================================
   TOOL CARD
========================================= */

.hc-tool {
  min-width: 0;
  min-height: 38px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding: 5px 8px;

  border: 1px solid #e4e9f0;

  border-radius: 8px;

  background: #ffffff;

  color: #24365d;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.hc-tool:hover {
  transform: translateY(-2px);

  border-color: #cbd7e8;

  box-shadow:
    0 5px 12px rgba(16, 24, 40, .07);
}


/* =========================================
   TOOL LOGO
========================================= */

.tool-logo {
  width: 22px;
  height: 22px;

  flex: 0 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 800;

  border-radius: 5px;
}


/* Tool colors */

.python-logo {
  color: #176fae;
  background: #edf6fb;
}

.tensorflow-logo {
  color: #e87516;
  background: #fff3e7;

  font-size: 9px;
}

.pytorch-logo {
  color: #e74840;
  background: #fff0ef;
}

.sklearn-logo {
  color: #367ab8;
  background: #eef6fc;
}

.keras-logo {
  color: #d92330;
  background: #fff0f1;
}

.opencv-logo {
  color: #48a35a;
  background: #effaf1;
}

.pandas-logo {
  color: #6953a8;
  background: #f3f0fb;
}

.numpy-logo {
  color: #357ab7;
  background: #edf6fc;
}

.matlab-logo {
  color: #e45128;
  background: #fff0eb;
}

.powerbi-logo {
  color: #e7a900;
  background: #fff9df;
}

.googleai-logo {
  color: #4788db;
  background: #eef5ff;
}

.nvidia-logo {
  color: #54a63e;
  background: #eff9ec;
}

.huggingface-logo {
  background: #fff7dc;
}

.langchain-logo {
  color: #5c9d45;
  background: #eff9ec;
}

.monai-logo {
  color: #428ac4;
  background: #eef6fc;
}

.chatgpt-logo {
  color: #218d86;
  background: #edf9f7;
}

.biopython-logo {
  color: #518cc0;
  background: #eef6fb;
}

.dicom-logo {
  color: #4283c2;
  background: #edf5fc;
}

.tableau-logo {
  color: #d84a88;
  background: #fff0f6;
}

.powerauto-logo {
  color: #2177cf;
  background: #edf5ff;
}


/* =========================================
   SKILLS
========================================= */

.hc-skills-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px 30px;
}

.hc-skill-column {
  display: flex;
  flex-direction: column;

  gap: 11px;
}


/* =========================================
   SKILL ITEM
========================================= */

.hc-skill {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  color: #263b68;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.45;

  transition:
    transform .2s ease,
    color .2s ease;
}

.hc-skill:hover {
  transform: translateX(3px);

  color: #183b83;
}

.hc-skill i {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #168e9d;

  font-size: 14px;
}


/* =========================================
   DNA DECORATION
========================================= */

.hc-dna-decoration {
  position: absolute;

  right: 8px;
  bottom: -15px;

  z-index: 1;

  color: rgba(49, 126, 190, .08);

  font-size: 130px;

  transform: rotate(-20deg);

  pointer-events: none;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .hc-tools-grid {
    gap: 5px;
  }

  .hc-tool {
    padding: 5px 6px;

    font-size: 8.8px;
  }

  .hc-skill {
    font-size: 9.5px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .hc-tools-skills-section {
    padding: 25px 0 40px;
  }

  .hc-tools-title,
  .hc-skills-title {
    font-size: 20px;
  }

  .hc-tools-grid {
    gap: 7px;
  }

  .hc-tool {
    min-height: 40px;

    font-size: 9.5px;
  }

  .hc-skill {
    font-size: 10px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .hc-tools-panel,
  .hc-skills-panel {
    padding: 14px 10px;
  }

  .hc-tools-title,
  .hc-skills-title {
    font-size: 18px;

    margin-bottom: 14px;
  }


  /* Tools become 2 columns */

  .hc-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .hc-tool {
    min-height: 40px;

    padding: 6px 7px;

    font-size: 9px;
  }

  .tool-logo {
    width: 21px;
    height: 21px;

    flex-basis: 21px;
  }


  /* Skills */

  .hc-skills-grid {
    grid-template-columns: 1fr;

    gap: 11px;
  }

  .hc-skill-column {
    gap: 10px;
  }

  .hc-skill {
    font-size: 9.5px;
  }

  .hc-dna-decoration {
    font-size: 100px;

    right: -8px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .hc-tools-title,
  .hc-skills-title {
    font-size: 17px;
  }

  .hc-tool {
    min-height: 38px;

    padding: 5px 6px;

    font-size: 8.3px;

    gap: 5px;
  }

  .tool-logo {
    width: 19px;
    height: 19px;

    flex-basis: 19px;

    font-size: 12px;
  }

  .hc-skill {
    font-size: 8.8px;

    gap: 7px;
  }

  .hc-skill i {
    font-size: 12px;
  }

}



/* =========================================
   PROGRAM HIGHLIGHTS
========================================= */

.program-highlights {
  width: 100%;

  background:
    linear-gradient(90deg,
      #061b55 0%,
      #0b347d 50%,
      #07589a 100%);

  padding: 12px 0 13px;

  overflow: hidden;
}


/* =========================================
   WRAPPER
========================================= */

.program-highlights-wrap {
  width: 100%;
}


/* =========================================
   HEADING
========================================= */

.program-heading {
  margin-bottom: 9px;

  color: #ffffff;

  font-size: 16px;
  font-weight: 800;

  line-height: 1.2;
}


/* =========================================
   GRID
========================================= */

.program-highlight-grid {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  align-items: center;

  gap: 12px;
}


/* =========================================
   ITEM
========================================= */

.program-highlight-item {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;

  cursor: pointer;

  transition:
    transform .25s ease;
}

.program-highlight-item:hover {
  transform: translateY(-2px);
}


/* =========================================
   ICON
========================================= */

.program-highlight-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  font-size: 22px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.program-highlight-item:hover .program-highlight-icon {
  transform: scale(1.08);

  box-shadow:
    0 5px 14px rgba(0, 0, 0, .18);
}


/* =========================================
   ICON COLORS
========================================= */

.icon-blue {
  color: #26c9ff;
  background: rgba(0, 150, 255, .15);
}

.icon-purple {
  color: #b04cff;
  background: rgba(157, 65, 255, .18);
}

.icon-orange {
  color: #ffae3d;
  background: rgba(255, 142, 0, .18);
}

.icon-cyan {
  color: #25d9ff;
  background: rgba(0, 210, 255, .14);
}

.icon-pink {
  color: #d95cff;
  background: rgba(195, 55, 255, .17);
}

.icon-yellow {
  color: #ffc044;
  background: rgba(255, 187, 0, .16);
}

.icon-green {
  color: #6bdc4d;
  background: rgba(58, 210, 74, .15);
}


/* =========================================
   CONTENT
========================================= */

.program-highlight-content {
  min-width: 0;
}

.program-highlight-content h3 {
  margin: 0 0 2px;

  color: #ffffff;

  font-size: 10.5px;
  font-weight: 800;

  line-height: 1.25;
}

.program-highlight-content p {
  margin: 0;

  color: rgba(255, 255, 255, .88);

  font-size: 9.2px;
  font-weight: 500;

  line-height: 1.35;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199.98px) {

  .program-highlight-grid {
    gap: 8px;
  }

  .program-highlight-item {
    gap: 7px;
  }

  .program-highlight-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    font-size: 19px;
  }

  .program-highlight-content h3 {
    font-size: 9.5px;
  }

  .program-highlight-content p {
    font-size: 8.4px;
  }

}


/* =========================================
   TABLET / SMALL LAPTOP
========================================= */

@media (max-width: 991.98px) {

  .program-highlights {
    padding: 14px 0 16px;
  }

  .program-heading {
    font-size: 16px;
  }

  .program-highlight-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    row-gap: 15px;
  }

  .program-highlight-icon {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    font-size: 20px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .program-highlights {
    padding: 15px 0 17px;
  }

  .program-heading {
    margin-bottom: 13px;

    font-size: 17px;
  }

  .program-highlight-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 14px 18px;
  }

  .program-highlight-item {
    gap: 8px;
  }

  .program-highlight-icon {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    font-size: 20px;
  }

  .program-highlight-content h3 {
    font-size: 10px;
  }

  .program-highlight-content p {
    font-size: 8.8px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .program-heading {
    font-size: 16px;
  }

  .program-highlight-grid {
    grid-template-columns: 1fr 1fr;

    gap: 13px 10px;
  }

  .program-highlight-item {
    align-items: flex-start;

    gap: 6px;
  }

  .program-highlight-icon {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    font-size: 17px;

    border-radius: 6px;
  }

  .program-highlight-content h3 {
    font-size: 9px;
  }

  .program-highlight-content p {
    font-size: 8px;
  }

}


/* =========================================
   EDUCATION BENEFITS SECTION
========================================= */

.education-benefits-section {
  width: 100%;

  padding: 10px 0 20px;

  background: #ffffff;
}


/* =========================================
   SECTION HEADING
========================================= */

.education-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-bottom: 17px;
}

.education-section-heading h2 {
  margin: 0;

  color: #17406d;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.3;

  text-align: center;
}

.education-heading-line {
  width: 58px;
  height: 2px;

  flex: 0 0 58px;

  background: #82a5b8;

  border-radius: 50px;
}


/* =========================================
   CARD
========================================= */

.education-benefit-card {
  width: 100%;
  height: 100%;

  min-height: 164px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 12px 9px 13px;

  text-align: center;

  background: #ffffff;

  border: 1px solid #e0e7ee;

  border-radius: 10px;

  box-shadow:
    0 2px 9px rgba(20, 50, 80, 0.035);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


/* =========================================
   HOVER
========================================= */

.education-benefit-card:hover {
  transform: translateY(-4px);

  border-color: #c8d7e2;

  box-shadow:
    0 9px 22px rgba(20, 50, 80, 0.09);
}


/* =========================================
   ICON
========================================= */

.education-benefit-icon {
  width: 53px;
  height: 53px;

  flex: 0 0 53px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 9px;

  border-radius: 50%;

  font-size: 27px;

  transition:
    transform .25s ease;
}

.education-benefit-card:hover .education-benefit-icon {
  transform: scale(1.08);
}


/* =========================================
   ICON COLORS
========================================= */

.edu-blue {
  color: #078ab3;
  background: rgba(7, 138, 179, .07);
}

.edu-purple {
  color: #6725c5;
  background: rgba(103, 37, 197, .07);
}

.edu-orange {
  color: #ef790f;
  background: rgba(239, 121, 15, .07);
}

.edu-pink {
  color: #e72b68;
  background: rgba(231, 43, 104, .07);
}

.edu-green {
  color: #5d9f25;
  background: rgba(93, 159, 37, .07);
}

.edu-blue-dark {
  color: #1466d5;
  background: rgba(20, 102, 213, .07);
}


/* =========================================
   TITLE
========================================= */

.education-benefit-card h3 {
  margin: 0 0 8px;

  color: #173a78;

  font-size: 12.2px;
  font-weight: 800;

  line-height: 1.4;
}


/* =========================================
   DESCRIPTION
========================================= */

.education-benefit-card p {
  max-width: 185px;

  margin: 0;

  color: #596985;

  font-size:11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .education-benefit-card {
    padding-left: 7px;
    padding-right: 7px;
  }

  .education-benefit-icon {
    width: 50px;
    height: 50px;

    flex-basis: 50px;

    font-size: 25px;
  }

  .education-benefit-card h3 {
    font-size: 10.5px;
  }

  .education-benefit-card p {
    font-size: 8.6px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .education-benefits-section {
    padding: 28px 0 38px;
  }

  .education-section-heading h2 {
    font-size: 20px;
  }

  .education-benefit-card {
    min-height: 175px;
  }

  .education-benefit-icon {
    width: 52px;
    height: 52px;

    flex-basis: 52px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .education-benefits-section {
    padding: 25px 0 35px;
  }

  .education-section-heading {
    gap: 9px;

    margin-bottom: 14px;
  }

  .education-section-heading h2 {
    font-size: 17px;
  }

  .education-heading-line {
    width: 30px;
    flex-basis: 30px;
  }

  .education-benefit-card {
    min-height: 178px;

    padding: 12px 8px;
  }

  .education-benefit-icon {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    margin-bottom: 8px;

    font-size: 23px;
  }

  .education-benefit-card h3 {
    font-size: 10.2px;
  }

  .education-benefit-card p {
    font-size: 8.7px;

    line-height: 1.45;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .education-section-heading h2 {
    font-size: 15.5px;
  }

  .education-heading-line {
    display: none;
  }

  .education-benefit-card {
    min-height: 175px;

    padding-left: 6px;
    padding-right: 6px;
  }

  .education-benefit-icon {
    width: 44px;
    height: 44px;

    flex-basis: 44px;

    font-size: 21px;
  }

  .education-benefit-card h3 {
    font-size: 9.5px;
  }

  .education-benefit-card p {
    font-size: 8.1px;
  }

}



/* =========================================
   EDUCATION FUTURE + SALARY
========================================= */

.edu-future-salary {
  width: 100%;
  padding: 10px 0 0px;
  background: #ffffff;
}


/* =========================================
   PANELS
========================================= */

.edu-future-panel,
.edu-salary-panel {
  position: relative;

  width: 100%;
  height: 100%;

  padding: 12px 14px 14px;

  background: #ffffff;

  border: 1px solid #e1e7ef;
  border-radius: 13px;

  box-shadow:
    0 2px 10px rgba(20, 50, 80, .035);

  overflow: hidden;
}


/* =========================================
   TITLES
========================================= */

.edu-future-title,
.edu-salary-title {
  margin: 0;

  text-align: center;

  color: #173b83;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.25;
}

.edu-future-subtitle,
.edu-salary-subtitle {
  margin-top: 2px;

  text-align: center;

  color: #183b83;

  font-size: 13px;
  font-weight: 700;
}


/* =========================================
   TIMELINE
========================================= */

.edu-timeline {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  margin-top: 15px;
}


/* Connecting line */

.edu-timeline::before {
  content: "";

  position: absolute;

  top: 27px;
  left: 7%;
  right: 7%;

  height: 2px;

  background:
    linear-gradient(90deg,
      #238c9b,
      #315bd1,
      #f39b19,
      #7140aa,
      #1b82d5);

  z-index: 0;
}


/* =========================================
   TIMELINE ITEM
========================================= */

.edu-timeline-item {
  position: relative;

  min-width: 0;

  text-align: center;

  z-index: 1;
}


/* =========================================
   ICON
========================================= */

.edu-timeline-top {
  height: 55px;

  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.edu-timeline-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 2px solid #ffffff;

  color: #ffffff;

  font-size: 20px;

  box-shadow:
    0 1px 4px rgba(0, 0, 0, .08);
}

.edu-tl-teal {
  background: #168d99;
}

.edu-tl-purple {
  background: #6533ad;
}

.edu-tl-orange {
  background: #f39a13;
}

.edu-tl-pink {
  background: #db3970;
}

.edu-tl-blue {
  background: #2687d7;
}


/* =========================================
   YEAR
========================================= */

.edu-timeline-year {
  margin-top: 1px;

  color: #153e85;

  font-size: 12px;
  font-weight: 800;
}


/* =========================================
   TIMELINE TITLE
========================================= */

.edu-timeline-item h3 {
  min-height: 43px;

  margin: 6px 3px 6px;

  color: #173b83;

  font-size: 10.5px;
  font-weight: 800;

  line-height: 1.45;
}


/* =========================================
   TIMELINE DESCRIPTION
========================================= */

.edu-timeline-item p {
  min-height: 66px;

  margin: 0 4px;

  color: #52627f;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   MARKET STATISTICS
========================================= */

.edu-market-stats {
  display: grid;

  grid-template-columns:
    auto 1.25fr 1px 1fr 1px 1.25fr;

  align-items: center;

  gap: 10px;

  margin: 12px 5px 0;

  padding: 10px 12px;

  border-radius: 11px;

  background:
    linear-gradient(90deg,
      #eef8f6,
      #f3f2fc,
      #eef7fb);
}


/* Globe */

.edu-market-icon {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #4d30c5;

  font-size: 38px;
}


/* Stats */

.edu-market-block {
  display: flex;
  flex-direction: column;
}

.edu-market-label {
  color: #183d7d;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.3;
}

.edu-market-block strong {
  margin-top: 1px;

  color: #4c27b7;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.15;
}

.edu-market-block small {
  color: #173b83;

  font-size: 8.5px;
  font-weight: 600;
}

.edu-cagr strong {
  font-size: 22px;
}

.edu-ai-use {
  text-align: center;
}

.edu-ai-use strong {
  font-size: 24px;
}

.edu-ai-use span {
  color: #183b83;

  font-size: 9px;
  font-weight: 600;

  line-height: 1.25;
}


/* Dividers */

.edu-stat-divider {
  width: 1px;
  height: 46px;

  background: #c9cde1;
}


/* Source */

.edu-source {
  margin-top: 4px;

  text-align: right;

  color: #5c6680;

  font-size: 11px;
  font-weight: 500;
}


/* =========================================
   SALARY GRID
========================================= */

.edu-salary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  margin-top: 18px;
}


/* =========================================
   SALARY CARD
========================================= */

.edu-salary-card {
  min-height: 255px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 25px 7px 15px;

  text-align: center;

  border: 1.5px solid;

  border-radius: 12px;

  background: #ffffff;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.edu-salary-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 8px 18px rgba(20, 50, 80, .07);
}


/* =========================================
   SALARY COLORS
========================================= */

.salary-green {
  color: #159269;
  border-color: #b9ddd0;
}

.salary-blue {
  color: #2363d5;
  border-color: #c6d7f5;
}

.salary-orange {
  color: #ef7418;
  border-color: #f4d2b8;
}

.salary-purple {
  color: #7132a9;
  border-color: #dac6e9;
}


/* =========================================
   AMOUNT
========================================= */

.edu-salary-amount {
  font-size: 23px;
  font-weight: 800;

  line-height: 1.15;

  white-space: nowrap;
}

.edu-salary-lpa {
  margin-top: 6px;

  font-size: 14px;
  font-weight: 800;
}


/* =========================================
   LINE
========================================= */

.edu-salary-line {
  width: 72px;
  height: 2px;

  margin: 17px 0 19px;

  background: currentColor;

  opacity: .14;
}


/* =========================================
   LEVEL
========================================= */

.edu-salary-level {
  color: #173b83;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.35;
}

.edu-salary-exp {
  margin-top: 7px;

  color: #173b83;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.4;
}


/* =========================================
   SALARY NOTE
========================================= */

.edu-salary-note {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 18px;

  padding: 12px 14px;

  border-radius: 11px;

  background:
    linear-gradient(90deg,
      #f5f5fa,
      #f4f4f8);
}


/* Star */

.edu-note-icon {
  width: 50px;
  height: 50px;

  flex: 0 0 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #f39b12;

  background: #fff6e7;

  font-size: 27px;
}


/* Note text */

.edu-note-content {
  color: #193d80;

  font-size: 10px;
  font-weight: 600;

  line-height: 1.45;
}

.edu-note-content span {
  display: block;

  margin-top: 2px;

  font-weight: 500;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .edu-timeline-item h3 {
    font-size: 9.7px;
  }

  .edu-timeline-item p {
    font-size: 8.1px;
  }

  .edu-salary-card {
    min-height: 235px;

    padding-top: 21px;
  }

  .edu-salary-amount {
    font-size: 20px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .edu-future-salary {
    padding: 22px 0 35px;
  }

  .edu-future-panel,
  .edu-salary-panel {
    padding: 13px;
  }

  .edu-future-title,
  .edu-salary-title {
    font-size: 20px;
  }

  .edu-timeline {
    margin-top: 18px;
  }

  .edu-timeline-item h3 {
    font-size: 10px;
  }

  .edu-timeline-item p {
    font-size: 8.5px;
  }

  .edu-salary-card {
    min-height: 225px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .edu-future-salary {
    padding: 20px 0 32px;
  }

  .edu-future-title,
  .edu-salary-title {
    font-size: 18px;
  }

  .edu-future-subtitle,
  .edu-salary-subtitle {
    font-size: 11px;
  }


  /* Timeline becomes 5 compact columns */

  .edu-timeline {
    overflow-x: auto;

    padding-bottom: 8px;

    scrollbar-width: none;
  }

  .edu-timeline::-webkit-scrollbar {
    display: none;
  }

  .edu-timeline {
    grid-template-columns:
      repeat(5, 125px);
  }

  .edu-timeline::before {
    left: 45px;
    right: 45px;
  }

  .edu-timeline-icon {
    width: 42px;
    height: 42px;

    font-size: 17px;
  }

  .edu-timeline-top {
    height: 49px;
  }

  .edu-timeline-item h3 {
    font-size: 9px;
  }

  .edu-timeline-item p {
    font-size: 7.8px;
  }


  /* Market stats */

  .edu-market-stats {
    grid-template-columns:
      auto 1fr 1fr;

    gap: 8px;

    padding: 9px;
  }

  .edu-stat-divider:nth-of-type(2),
  .edu-stat-divider:nth-of-type(4) {
    display: none;
  }

  .edu-market-icon {
    width: 43px;
    height: 43px;

    font-size: 30px;
  }

  .edu-market-block strong {
    font-size: 18px;
  }

  .edu-market-label {
    font-size: 8px;
  }

  .edu-market-block small,
  .edu-ai-use span {
    font-size: 7px;
  }

  .edu-ai-use {
    grid-column: 2 / 4;
    text-align: left;
  }


  /* Salary */

  .edu-salary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 9px;
  }

  .edu-salary-card {
    min-height: 190px;

    padding-top: 19px;
  }

  .edu-salary-amount {
    font-size: 19px;
  }

  .edu-salary-lpa {
    font-size: 12px;
  }

  .edu-salary-line {
    margin: 13px 0 15px;
  }

  .edu-salary-level {
    font-size: 10px;
  }

  .edu-salary-exp {
    font-size: 9px;
  }

  .edu-salary-note {
    gap: 9px;

    padding: 10px;
  }

  .edu-note-icon {
    width: 42px;
    height: 42px;

    flex-basis: 42px;

    font-size: 22px;
  }

  .edu-note-content {
    font-size: 8.5px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .edu-future-title,
  .edu-salary-title {
    font-size: 17px;
  }

  .edu-timeline {
    grid-template-columns:
      repeat(5, 115px);
  }

  .edu-timeline-item h3 {
    font-size: 8.5px;
  }

  .edu-timeline-item p {
    font-size: 7.4px;
  }

  .edu-market-stats {
    margin-left: 0;
    margin-right: 0;
  }

  .edu-market-block strong {
    font-size: 16px;
  }

  .edu-salary-card {
    min-height: 180px;

    padding-left: 5px;
    padding-right: 5px;
  }

  .edu-salary-amount {
    font-size: 17px;
  }

  .edu-salary-lpa {
    font-size: 11px;
  }

  .edu-salary-level {
    font-size: 9px;
  }

  .edu-salary-exp {
    font-size: 8px;
  }

}


/* =========================================
   EDUCATION INDUSTRIES + CAREER
========================================= */

.edu-career-section {
  width: 100%;
  padding: 25px 0 0px;
  background: #ffffff;
}


/* =========================================
   PANELS
========================================= */

.edu-industries-panel,
.edu-career-panel {
  width: 100%;
  height: 100%;

  padding: 13px 15px 17px;

  background: #ffffff;

  border: 1px solid #e2e8ef;
  border-radius: 13px;

  box-shadow:
    0 2px 10px rgba(20, 50, 80, .035);

  overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.edu-career-title {
  margin: 0 0 15px;

  text-align: center;

  color: #173d83;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.25;
}


/* =========================================
   INDUSTRIES GRID
========================================= */

.edu-industries-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  row-gap: 18px;
  column-gap: 8px;
}


/* =========================================
   INDUSTRY ITEM
========================================= */

.edu-industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  cursor: pointer;

  transition:
    transform .25s ease;
}

.edu-industry-item:hover {
  transform: translateY(-3px);
}


/* =========================================
   INDUSTRY ICON
========================================= */

.edu-industry-icon {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 7px;

  border-radius: 50%;

  font-size: 23px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.edu-industry-item:hover .edu-industry-icon {
  transform: scale(1.08);

  box-shadow:
    0 5px 14px rgba(20, 50, 80, .08);
}


/* Industry colors */

.industry-blue {
  color: #2375b4;
  background: #f1f7fc;
}

.industry-purple {
  color: #7138c4;
  background: #f7f1fc;
}

.industry-orange {
  color: #f07c20;
  background: #fff5eb;
}

.industry-green {
  color: #5b9c52;
  background: #f1f9ef;
}


/* =========================================
   INDUSTRY TITLE
========================================= */

.edu-industry-item h3 {
  margin: 0;

  color: #173a78;

  font-size: 10.5px;
  font-weight: 800;

  line-height: 1.45;
}


/* =========================================
   CAREER GRID
========================================= */

.edu-career-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 7px 25px;
}

.edu-career-column {
  display: flex;
  flex-direction: column;

  gap: 13px;
}


/* =========================================
   CAREER ITEM
========================================= */

.edu-career-item {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  min-width: 0;

  cursor: pointer;

  transition:
    transform .22s ease;
}

.edu-career-item:hover {
  transform: translateX(3px);
}


/* =========================================
   CAREER ICON
========================================= */

.edu-career-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 19px;

  transition:
    transform .25s ease;
}

.edu-career-item:hover .edu-career-icon {
  transform: scale(1.08);
}


/* Career colors */

.career-purple {
  color: #7141bd;
  background: #f5f0fc;
}

.career-orange {
  color: #ef791c;
  background: #fff3e8;
}

.career-blue {
  color: #237ab8;
  background: #eef6fc;
}

.career-pink {
  color: #e63e68;
  background: #fff0f4;
}

.career-green {
  color: #4d9a72;
  background: #eff9f3;
}


/* =========================================
   CAREER TEXT
========================================= */

.edu-career-item h3 {
  margin: 1px 0 3px;

  color: #173b7d;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.35;
}

.edu-career-item p {
  margin: 0;

  color: #52627e;

  font-size:11px;
  font-weight: 500;

  line-height: 1.45;
}


/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .edu-industries-grid {
    column-gap: 5px;
    row-gap: 15px;
  }

  .edu-industry-icon {
    width: 46px;
    height: 46px;

    font-size: 21px;
  }

  .edu-industry-item h3 {
    font-size: 9.5px;
  }

  .edu-career-grid {
    gap: 7px 15px;
  }

  .edu-career-column {
    gap: 11px;
  }

  .edu-career-item {
    gap: 7px;
  }

  .edu-career-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    font-size: 17px;
  }

  .edu-career-item h3 {
    font-size: 10px;
  }

  .edu-career-item p {
    font-size: 8.3px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .edu-career-section {
    padding: 22px 0 35px;
  }

  .edu-industries-panel,
  .edu-career-panel {
    padding: 14px;
  }

  .edu-career-title {
    font-size: 20px;
  }

  .edu-industries-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    row-gap: 18px;
  }

  .edu-industry-icon {
    width: 48px;
    height: 48px;
  }

  .edu-industry-item h3 {
    font-size: 9.5px;
  }

  .edu-career-grid {
    gap: 10px 20px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .edu-career-section {
    padding: 20px 0 32px;
  }

  .edu-career-title {
    font-size: 18px;

    margin-bottom: 15px;
  }


  /* Industries: 2 columns */

  .edu-industries-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    row-gap: 18px;
    column-gap: 10px;
  }

  .edu-industry-icon {
    width: 48px;
    height: 48px;

    font-size: 21px;
  }

  .edu-industry-item h3 {
    font-size: 9.5px;
  }


  /* Careers: single column */

  .edu-career-grid {
    grid-template-columns: 1fr;

    gap: 11px;
  }

  .edu-career-column {
    gap: 11px;
  }

  .edu-career-item {
    gap: 9px;
  }

  .edu-career-icon {
    width: 39px;
    height: 39px;

    flex-basis: 39px;

    font-size: 18px;
  }

  .edu-career-item h3 {
    font-size: 10px;
  }

  .edu-career-item p {
    font-size: 8.7px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .edu-career-title {
    font-size: 17px;
  }

  .edu-industries-panel,
  .edu-career-panel {
    padding: 12px 9px;
  }

  .edu-industries-grid {
    row-gap: 16px;
    column-gap: 7px;
  }

  .edu-industry-icon {
    width: 43px;
    height: 43px;

    font-size: 19px;
  }

  .edu-industry-item h3 {
    font-size: 8.5px;
  }

  .edu-career-item h3 {
    font-size: 9.5px;
  }

  .edu-career-item p {
    font-size: 8.2px;
  }

}


/* =========================================
   EDUCATION TOOLS + SKILLS
========================================= */

.edu-tools-skills-section {
  width: 100%;
  padding: 25px 0 40px;
  background: #ffffff;
}


/* =========================================
   PANELS
========================================= */

.edu-tools-panel,
.edu-skills-panel {
  position: relative;

  width: 100%;
  height: 100%;

  padding: 13px 14px 12px;

  background: #ffffff;

  border: 1px solid #e1e7ef;
  border-radius: 13px;

  box-shadow:
    0 2px 10px rgba(20, 50, 80, .035);

  overflow: hidden;
}


/* =========================================
   HEADINGS
========================================= */

.edu-tools-heading,
.edu-skills-heading {
  margin: 0 0 13px;

  color: #173c83;

  text-align: center;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.25;
}


/* =========================================
   TOOLS GRID
========================================= */

.edu-tools-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 6px;
}


/* =========================================
   TOOL CARD
========================================= */

.edu-tool {
  min-width: 0;
  min-height: 37px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding: 5px 8px;

  background: #ffffff;

  border: 1px solid #e1e7ef;

  border-radius: 7px;

  color: #293a5d;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.edu-tool:hover {
  transform: translateY(-2px);

  border-color: #c6d4e2;

  box-shadow:
    0 5px 12px rgba(20, 50, 80, .07);
}


/* =========================================
   TOOL LOGO
========================================= */

.edu-tool-logo {
  width: 22px;
  height: 22px;

  flex: 0 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 5px;

  font-size: 12px;
  font-weight: 800;

  line-height: 1;
}


/* =========================================
   TOOL LOGO COLORS
========================================= */

.logo-chatgpt {
  color: #168c83;
  background: #edf8f6;
}

.logo-claude {
  color: #ef7332;
  background: #fff2eb;
}

.logo-gemini {
  color: #5272d9;
  background: #eef2ff;
}

.logo-canva {
  color: #536dd5;
  background: #eef1ff;
}

.logo-midjourney {
  color: #596b82;
  background: #f0f3f6;
}

.logo-grammarly {
  color: #159d67;
  background: #edf9f3;
}

.logo-quizizz {
  color: #222222;
  background: #f2f2f2;
}

.logo-khan {
  color: #8c4a45;
  background: #fff1ef;
}

.logo-magic {
  color: #3075d4;
  background: #eef5ff;
}

.logo-synthesia {
  color: #286fd0;
  background: #eef5ff;
}

.logo-copilot {
  color: #2877cf;
  background: #edf5ff;
}

.logo-dalle {
  color: #4b5060;
  background: #f0f1f4;
}

.logo-loom {
  color: #7659c9;
  background: #f4f0ff;
}

.logo-curipod {
  color: #f36d32;
  background: #fff0e9;
}

.logo-notion {
  color: #242424;
  background: #f3f3f3;
}

.logo-tableau {
  color: #4c79c9;
  background: #eef4ff;
}

.logo-powerbi {
  color: #e9a600;
  background: #fff8df;
}

.logo-hp {
  color: #337cb3;
  background: #eef6fc;

  font-size: 9px;
}

.logo-colab {
  color: #e7782a;
  background: #fff3e8;
}

.logo-zapier {
  color: #ef512c;
  background: #fff0ec;
}


/* =========================================
   MORE TOOLS
========================================= */

.edu-more-tools {
  margin-top: 7px;

  text-align: center;

  color: #173c83;

  font-size: 9px;
  font-weight: 700;
}


/* =========================================
   SKILLS GRID
========================================= */

.edu-skills-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px 25px;
}

.edu-skill-column {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


/* =========================================
   SKILL
========================================= */

.edu-skill {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  color: #263b67;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.4;

  cursor: pointer;

  transition:
    color .2s ease,
    transform .2s ease;
}

.edu-skill:hover {
  color: #173c83;

  transform: translateX(3px);
}

.edu-skill i {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #168d68;

  font-size: 13px;
}


/* =========================================
   DECORATION
========================================= */

.edu-tools-decoration {
  position: absolute;

  right: 5px;
  bottom: -12px;

  color: rgba(34, 94, 145, .08);

  font-size: 105px;

  transform: rotate(-8deg);

  pointer-events: none;
}


/* =========================================
   ACTIVE STATES
========================================= */

.edu-tool.edu-tool-active {
  border-color: #91b6d2;

  background: #f7fbfe;

  transform: translateY(-2px);

  box-shadow:
    0 5px 13px rgba(20, 80, 130, .08);
}

.edu-skill.edu-skill-active {
  color: #168d68;

  transform: translateX(3px);
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .edu-tool {
    padding: 5px 6px;

    font-size: 8.3px;
  }

  .edu-tool-logo {
    width: 21px;
    height: 21px;

    flex-basis: 21px;
  }

  .edu-skills-grid {
    gap: 9px 15px;
  }

  .edu-skill {
    font-size: 8.8px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .edu-tools-skills-section {
    padding: 22px 0 35px;
  }

  .edu-tools-heading,
  .edu-skills-heading {
    font-size: 20px;
  }

  .edu-tool {
    font-size: 9px;
  }

  .edu-skill {
    font-size: 9.5px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .edu-tools-panel,
  .edu-skills-panel {
    padding: 13px 10px;
  }

  .edu-tools-heading,
  .edu-skills-heading {
    font-size: 18px;

    margin-bottom: 13px;
  }


  /* Tools 2 columns */

  .edu-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .edu-tool {
    min-height: 39px;

    padding: 5px 7px;

    font-size: 8.8px;
  }

  .edu-tool-logo {
    width: 21px;
    height: 21px;

    flex-basis: 21px;
  }


  /* Skills 1 column */

  .edu-skills-grid {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .edu-skill-column {
    gap: 9px;
  }

  .edu-skill {
    font-size: 9px;
  }

  .edu-tools-decoration {
    font-size: 85px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .edu-tools-heading,
  .edu-skills-heading {
    font-size: 17px;
  }

  .edu-tool {
    min-height: 37px;

    padding: 5px;

    gap: 5px;

    font-size: 8px;
  }

  .edu-tool-logo {
    width: 19px;
    height: 19px;

    flex-basis: 19px;

    font-size: 10px;
  }

  .edu-skill {
    font-size: 8.5px;

    gap: 7px;
  }

  .edu-skill i {
    font-size: 12px;
  }

}



/* =========================================
   EDUCATION PROGRAM HIGHLIGHTS
========================================= */

.edu-program-highlights {
  width: 100%;
  margin: 25px 0;

  background: #ffffff;

  border: 1px solid #e4e9ef;
  border-radius: 4px;

  overflow: hidden;

  box-shadow:
    0 2px 10px rgba(20, 50, 80, 0.035);
}


/* =========================================
   TOP SECTION
========================================= */

.edu-highlight-top {
  width: 100%;

  display: flex;
  align-items: center;

  padding: 8px 16px 9px;

  background: #ffffff;
}


/* =========================================
   HEADING
========================================= */

.edu-highlight-heading {
  flex: 0 0 145px;
}

.edu-highlight-heading h2 {
  margin: 0;

  color: #142b55;

  font-size: 17px;
  font-weight: 800;

  line-height: 1.2;
}


/* =========================================
   HIGHLIGHT ITEMS
========================================= */

.edu-highlight-items {
  flex: 1;

  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  align-items: center;

  gap: 10px;
}


/* =========================================
   INDIVIDUAL ITEM
========================================= */

.edu-highlight-item {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  cursor: pointer;

  transition:
    transform 0.25s ease;
}

.edu-highlight-item:hover {
  transform: translateY(-2px);
}


/* =========================================
   ICON
========================================= */

.edu-highlight-icon {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  font-size: 21px;

  transition:
    transform 0.25s ease;
}

.edu-highlight-item:hover .edu-highlight-icon {
  transform: scale(1.08);
}


/* Icon colors */

.edu-highlight-icon.icon-blue {
  color: #2279bd;
  background: #eef6fc;
}

.edu-highlight-icon.icon-purple {
  color: #7543bd;
  background: #f4effc;
}

.edu-highlight-icon.icon-orange {
  color: #ef861d;
  background: #fff4e9;
}

.edu-highlight-icon.icon-cyan {
  color: #148fa0;
  background: #eaf8fa;
}

.edu-highlight-icon.icon-pink {
  color: #bd43a1;
  background: #fceff9;
}

.edu-highlight-icon.icon-violet {
  color: #6952bc;
  background: #f2effc;
}

.edu-highlight-icon.icon-green {
  color: #42a46c;
  background: #edf8f1;
}


/* =========================================
   TEXT
========================================= */

.edu-highlight-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  color: #172e59;

  line-height: 1.25;
}

.edu-highlight-text strong {
  font-size: 10px;
  font-weight: 800;
}

.edu-highlight-text span {
  font-size: 9px;
  font-weight: 600;
}


/* =========================================
   BOTTOM STATS BAR
========================================= */

.edu-stats-bar {
  width: 100%;

  display: flex;
  align-items: center;

  min-height: 55px;

  padding: 7px 20px;

  background:
    linear-gradient(90deg,
      #159f67 0%,
      #008f9c 48%,
      #273d9b 76%,
      #63209b 100%);

  color: #ffffff;
}


/* =========================================
   STAT ITEM
========================================= */

.edu-stat-item {
  flex: 1;

  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  cursor: pointer;

  transition:
    transform 0.25s ease;
}

.edu-stat-item:hover {
  transform: translateY(-2px);
}


/* =========================================
   STAT ICON
========================================= */

.edu-stat-icon {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-size: 25px;
}


/* =========================================
   STAT TEXT
========================================= */

.edu-stat-content {
  display: flex;
  flex-direction: column;

  line-height: 1.15;
}

.edu-stat-content strong {
  font-size: 19px;
  font-weight: 800;
}

.edu-stat-content span {
  margin-top: 2px;

  font-size: 9px;
  font-weight: 600;
}


/* =========================================
   DIVIDERS
========================================= */

.edu-stat-divider {
  width: 1px;
  height: 34px;

  flex: 0 0 1px;

  background: rgba(255, 255, 255, 0.28);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199.98px) {

  .edu-highlight-heading {
    flex-basis: 125px;
  }

  .edu-highlight-heading h2 {
    font-size: 15px;
  }

  .edu-highlight-items {
    gap: 6px;
  }

  .edu-highlight-item {
    gap: 5px;
  }

  .edu-highlight-icon {
    width: 31px;
    height: 31px;

    flex-basis: 31px;

    font-size: 18px;
  }

  .edu-highlight-text strong {
    font-size: 8.5px;
  }

  .edu-highlight-text span {
    font-size: 8px;
  }

  .edu-stats-bar {
    padding: 7px 12px;
  }

  .edu-stat-item {
    gap: 6px;
  }

  .edu-stat-icon {
    width: 30px;
    height: 30px;

    flex-basis: 30px;

    font-size: 21px;
  }

  .edu-stat-content strong {
    font-size: 16px;
  }

}


/* =========================================
   TABLET / SMALL LAPTOP
========================================= */

@media (max-width: 991.98px) {

  .edu-highlight-top {
    display: block;

    padding: 12px;
  }

  .edu-highlight-heading {
    width: 100%;

    margin-bottom: 12px;

    text-align: center;
  }

  .edu-highlight-items {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 12px;
  }

  .edu-highlight-item {
    justify-content: center;
  }

  .edu-stats-bar {
    flex-wrap: wrap;

    row-gap: 8px;
  }

  .edu-stat-item {
    flex: 1 1 20%;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .edu-program-highlights {
    margin: 20px 0;
  }


  /* Top */

  .edu-highlight-top {
    padding: 13px 10px;
  }

  .edu-highlight-heading {
    margin-bottom: 14px;
  }

  .edu-highlight-heading h2 {
    font-size: 18px;
  }

  .edu-highlight-items {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .edu-highlight-item {
    justify-content: flex-start;

    padding: 4px;
  }

  .edu-highlight-icon {
    width: 35px;
    height: 35px;

    flex-basis: 35px;

    font-size: 19px;
  }

  .edu-highlight-text strong {
    font-size: 9px;
  }

  .edu-highlight-text span {
    font-size: 8px;
  }


  /* Stats */

  .edu-stats-bar {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0;

    padding: 8px 10px;
  }

  .edu-stat-item {
    min-height: 52px;

    justify-content: flex-start;

    padding: 5px 7px;
  }

  .edu-stat-divider {
    display: none;
  }

  .edu-stat-icon {
    width: 29px;
    height: 29px;

    flex-basis: 29px;

    font-size: 20px;
  }

  .edu-stat-content strong {
    font-size: 15px;
  }

  .edu-stat-content span {
    font-size: 8px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .edu-highlight-items {
    gap: 7px;
  }

  .edu-highlight-item {
    gap: 6px;
  }

  .edu-highlight-icon {
    width: 32px;
    height: 32px;

    flex-basis: 32px;

    font-size: 17px;
  }

  .edu-highlight-text strong {
    font-size: 8.5px;
  }

  .edu-highlight-text span {
    font-size: 7.5px;
  }

  .edu-stat-item {
    gap: 5px;
  }

  .edu-stat-content strong {
    font-size: 14px;
  }

  .edu-stat-content span {
    font-size: 7.5px;
  }

}


/* =========================================
   GOVERNANCE - WHY CHOOSE AI
========================================= */

.gov-why-ai-section {
  width: 100%;
  padding: 10px 0 22px;

  background: #ffffff;
}


/* =========================================
   SECTION HEADING
========================================= */

.gov-section-heading {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  margin-bottom: 9px;
}

.gov-section-heading span {
  width: 38px;
  height: 2px;

  background: linear-gradient(90deg,
      transparent,
      #365bb4);

  border-radius: 20px;
}

.gov-section-heading span:last-child {
  background: linear-gradient(90deg,
      #365bb4,
      transparent);
}

.gov-section-heading h2 {
  margin: 0;

  color: #173b82;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.25;

  text-align: center;
}


/* =========================================
   BENEFITS GRID
========================================= */

.gov-benefits-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 14px;
}


/* =========================================
   CARD
========================================= */

.gov-benefit-card {
  min-width: 0;

  min-height: 184px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 13px 10px 11px;

  background: #ffffff;

  border: 1px solid #e3e9f0;

  border-radius: 10px;

  text-align: center;

  box-shadow:
    0 2px 8px rgba(30, 60, 90, .025);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.gov-benefit-card:hover {
  transform: translateY(-4px);

  border-color: #d2dce8;

  box-shadow:
    0 8px 20px rgba(25, 60, 100, .08);
}


/* =========================================
   ICON
========================================= */

.gov-benefit-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 8px;

  border-radius: 50%;

  font-size: 27px;

  transition:
    transform .25s ease;
}

.gov-benefit-card:hover .gov-benefit-icon {
  transform: scale(1.08);
}


/* =========================================
   ICON COLORS
========================================= */

.gov-green {
  color: #239050;
  background: #eff9f2;
}

.gov-orange {
  color: #f07d12;
  background: #fff5ea;
}

.gov-blue {
  color: #145be8;
  background: #eef4ff;
}

.gov-purple {
  color: #7a20c7;
  background: #f8efff;
}

.gov-red {
  color: #f02335;
  background: #fff0f1;
}

.gov-teal {
  color: #197d8b;
  background: #edf8fa;
}


/* =========================================
   CARD TITLE
========================================= */

.gov-benefit-card h3 {
  margin: 0 0 7px;

  color: #173b7d;

  font-size: 11.5px;
  font-weight: 800;

  line-height: 1.35;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.gov-benefit-card p {
  margin: 0;

  color: #4e6080;

  font-size: 11.5px;
  font-weight: 500;

  line-height: 1.55;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .gov-benefits-grid {
    gap: 10px;
  }

  .gov-benefit-card {
    min-height: 178px;

    padding: 11px 8px;
  }

  .gov-benefit-icon {
    width: 44px;
    height: 44px;

    flex-basis: 44px;

    font-size: 24px;
  }

  .gov-benefit-card h3 {
    font-size: 10.5px;
  }

  .gov-benefit-card p {
    font-size: 8.8px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .gov-section-heading h2 {
    font-size: 20px;
  }

  .gov-benefits-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 12px;
  }

  .gov-benefit-card {
    min-height: 175px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .gov-why-ai-section {
    padding: 16px 0 25px;
  }

  .gov-section-heading {
    gap: 9px;

    margin-bottom: 13px;
  }

  .gov-section-heading span {
    width: 22px;
  }

  .gov-section-heading h2 {
    font-size: 17px;
  }


  .gov-benefits-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .gov-benefit-card {
    min-height: 190px;

    padding: 12px 9px;
  }

  .gov-benefit-icon {
    width: 43px;
    height: 43px;

    flex-basis: 43px;

    font-size: 23px;
  }

  .gov-benefit-card h3 {
    font-size: 10px;
  }

  .gov-benefit-card p {
    font-size: 8.5px;

    line-height: 1.5;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .gov-section-heading {
    gap: 6px;
  }

  .gov-section-heading span {
    width: 16px;
  }

  .gov-section-heading h2 {
    font-size: 15px;
  }

  .gov-benefits-grid {
    gap: 8px;
  }

  .gov-benefit-card {
    min-height: 185px;

    padding: 10px 7px;
  }

  .gov-benefit-icon {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    font-size: 21px;

    margin-bottom: 7px;
  }

  .gov-benefit-card h3 {
    font-size: 9.3px;
  }

  .gov-benefit-card p {
    font-size: 8px;
  }

}




/* =========================================
   GOVERNANCE FUTURE + SALARY SECTION
========================================= */

.gov-future-section {
  width: 100%;
  padding: 8px 0 20px;
  background: #ffffff;
}

.gov-future-wrapper {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr);

  gap: 14px;

  padding: 0 8px;
}


/* =========================================
   COMMON CARD
========================================= */

.gov-future-card,
.gov-salary-card {
  min-width: 0;

  background: #ffffff;

  border: 1px solid #e1e7ef;

  border-radius: 10px;

  padding: 10px 12px;

  box-shadow:
    0 2px 8px rgba(20, 50, 80, .025);
}


/* =========================================
   HEADINGS
========================================= */

.gov-future-card>h2,
.gov-salary-card>h2 {
  margin: 0;

  text-align: center;

  color: #173b83;

  font-size: 21px;
  font-weight: 800;

  line-height: 1.25;
}

.gov-subtitle,
.gov-salary-subtitle {
  margin-top: 3px;

  text-align: center;

  color: #173b83;

  font-size: 13px;
  font-weight: 700;
}


/* =========================================
   TIMELINE
========================================= */

.gov-timeline {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);

  align-items: start;

  margin-top: 10px;

  gap: 0;
}


/* Horizontal line */

.gov-timeline::before {
  content: "";

  position: absolute;

  top: 23px;
  left: 7%;
  right: 7%;

  height: 2px;

  background:
    linear-gradient(90deg,
      #19966c,
      #1768d9,
      #ed861d,
      #7134b8,
      #218999);

  z-index: 0;
}


/* =========================================
   TIMELINE ITEM
========================================= */

.gov-timeline-item {
  position: relative;

  z-index: 2;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================
   TIMELINE ICON
========================================= */

.gov-timeline-icon {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 2px solid #ffffff;

  color: #ffffff;

  font-size: 21px;

  box-shadow:
    0 1px 4px rgba(0, 0, 0, .05);
}

.gov-icon-green {
  background: #168b59;
}

.gov-icon-blue {
  background: #1768dc;
}

.gov-icon-orange {
  background: #f27c16;
}

.gov-icon-purple {
  background: #7132b5;
}

.gov-icon-teal {
  background: #208b98;
}


/* =========================================
   YEAR
========================================= */

.gov-year {
  margin-top: 5px;

  color: #173b83;

  font-size: 11px;
  font-weight: 800;
}


/* =========================================
   TIMELINE TITLE
========================================= */

.gov-timeline-item h3 {
  min-height: 29px;

  margin: 2px 0 4px;

  color: #173b83;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.35;
}


/* =========================================
   TIMELINE DESCRIPTION
========================================= */

.gov-timeline-item p {
  margin: 0;

  color: #53627d;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================
   ARROWS
========================================= */

.gov-arrow {
  position: relative;

  z-index: 3;

  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #1768bc;

  font-size: 14px;
  opacity:0;
}


/* =========================================
   MARKET BOX
========================================= */

.gov-market-box {
  display: grid;

  grid-template-columns:
    1.35fr 1px 1fr 1px 1.25fr;

  align-items: center;

  gap: 12px;

  margin-top: 11px;

  padding: 8px 12px;

  background:
    linear-gradient(90deg,
      #eff9f3,
      #f2f8f5);

  border-radius: 10px;
}


/* =========================================
   MARKET MAIN
========================================= */

.gov-market-main {
  display: flex;
  align-items: center;

  gap: 9px;
}

.gov-market-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #168c58;

  font-size: 29px;
}

.gov-market-main>div:last-child {
  display: flex;
  flex-direction: column;
}

.gov-market-main span {
  color: #176b47;

  font-size: 9px;
  font-weight: 700;
}

.gov-market-main strong {
  color: #16884f;

  font-size: 20px;
  font-weight: 800;
}

.gov-market-main small {
  color: #245b48;

  font-size: 7.5px;
}


/* =========================================
   MARKET STATS
========================================= */

.gov-market-stat {
  display: flex;
  flex-direction: column;

  align-items: center;

  text-align: center;
}

.gov-market-stat span {
  color: #176b47;

  font-size: 9px;
  font-weight: 700;
}

.gov-market-stat strong {
  color: #16884f;

  font-size: 19px;
  font-weight: 800;
}

.gov-market-stat small {
  color: #245b48;

  font-size: 11px;
  line-height: 1.3;
}

.gov-market-divider {
  width: 1px;
  height: 38px;

  background: #b7d6c5;
}


/* =========================================
   SOURCE
========================================= */

.gov-source {
  margin-top: 4px;

  text-align: right;

  color: #69748b;

  font-size: 11px;
  font-weight: 500;
}


/* =========================================
   SALARY GRID
========================================= */

.gov-salary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  margin-top: 18px;
}


/* =========================================
   SALARY BOX
========================================= */

.gov-salary-box {
  min-height: 164px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px 7px;

  border: 1.5px solid;

  border-radius: 10px;

  text-align: center;
}

.gov-salary-box>strong {
  font-size: 21px;
  font-weight: 800;
}

.gov-salary-box>span {
  margin-top: 3px;

  font-size: 11px;
  font-weight: 700;
}

.salary-line {
  width: 75%;

  height: 1px;

  margin: 16px 0;

  background: currentColor;

  opacity: .18;
}

.gov-salary-box h3 {
  margin: 0;

  font-size: 11px;
  font-weight: 800;
}

.gov-salary-box p {
  margin: 5px 0 0;

  font-size: 10px;
  font-weight: 600;
}


/* =========================================
   SALARY COLORS
========================================= */

.salary-green {
  color: #168c68;
  border-color: #b9ddd2;
}

.salary-blue {
  color: #1765d6;
  border-color: #c0d5f6;
}

.salary-orange {
  color: #f07818;
  border-color: #f4d1ad;
}

.salary-purple {
  color: #7433a9;
  border-color: #d9c4eb;
}


/* =========================================
   SALARY NOTE
========================================= */

.gov-salary-note {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 18px;

  padding: 11px 14px;

  background:
    linear-gradient(90deg,
      #fafafa,
      #f5f6fa);

  border-radius: 10px;
}


/* =========================================
   STAR
========================================= */

.gov-star {
  width: 45px;
  height: 45px;

  flex: 0 0 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #f69a18;

  background: #fff4df;

  font-size: 24px;
}


/* =========================================
   NOTE TEXT
========================================= */

.gov-salary-note p {
  margin: 0 0 3px;

  color: #314a7b;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.4;
}

.gov-salary-note span {
  color: #52617c;

  font-size: 11px;
}


/* =========================================
   HOVER
========================================= */

.gov-timeline-item,
.gov-salary-box {
  transition:
    transform .25s ease;
}

.gov-timeline-item:hover {
  transform: translateY(-3px);
}

.gov-salary-box:hover {
  transform: translateY(-4px);
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .gov-future-wrapper {
    gap: 10px;
  }

  .gov-future-card,
  .gov-salary-card {
    padding: 9px;
  }

  .gov-future-card>h2,
  .gov-salary-card>h2 {
    font-size: 18px;
  }

  .gov-subtitle,
  .gov-salary-subtitle {
    font-size: 11px;
  }

  .gov-timeline-icon {
    width: 40px;
    height: 40px;

    font-size: 18px;
  }

  .gov-timeline-item h3 {
    font-size: 9px;
  }

  .gov-timeline-item p {
    font-size: 7.3px;
  }

  .gov-salary-box {
    min-height: 145px;
  }

  .gov-salary-box>strong {
    font-size: 18px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .gov-future-wrapper {
    grid-template-columns: 1fr;
  }

  .gov-future-card,
  .gov-salary-card {
    width: 100%;
  }

  .gov-timeline-item p {
    max-width: 130px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .gov-future-section {
    padding: 15px 0 25px;
  }

  .gov-future-wrapper {
    padding: 0 6px;

    gap: 12px;
  }

  .gov-future-card,
  .gov-salary-card {
    padding: 12px 9px;
  }


  /* Timeline becomes horizontal scroll */

  .gov-timeline {
    display: flex;

    overflow-x: auto;

    padding: 4px 5px 8px;

    gap: 0;

    scrollbar-width: thin;
  }

  .gov-timeline::before {
    top: 25px;

    left: 20px;
    right: 20px;

    width: 600px;
  }

  .gov-timeline-item {
    flex: 0 0 105px;
  }

  .gov-arrow {
    flex: 0 0 25px;

    height: 46px;
  }

  .gov-timeline-item p {
    font-size: 7.5px;
  }


  /* Market */

  .gov-market-box {
    grid-template-columns: 1fr 1fr;

    gap: 8px;
  }

  .gov-market-main {
    grid-column: 1 / -1;

    justify-content: center;
  }

  .gov-market-divider {
    display: none;
  }

  .gov-market-stat {
    padding-top: 6px;
  }


  /* Salary */

  .gov-salary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 13px;
  }

  .gov-salary-box {
    min-height: 145px;

    padding: 13px 6px;
  }

  .gov-salary-box>strong {
    font-size: 18px;
  }

  .gov-salary-box>span {
    font-size: 10px;
  }

  .gov-salary-box h3 {
    font-size: 9px;
  }

  .gov-salary-box p {
    font-size: 8px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .gov-future-card>h2,
  .gov-salary-card>h2 {
    font-size: 17px;
  }

  .gov-subtitle,
  .gov-salary-subtitle {
    font-size: 10px;
  }

  .gov-market-main strong {
    font-size: 18px;
  }

  .gov-salary-note {
    gap: 8px;

    padding: 9px;
  }

  .gov-star {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    font-size: 20px;
  }

  .gov-salary-note p {
    font-size: 8px;
  }

  .gov-salary-note span {
    font-size: 7px;
  }

}


/* =========================================
   GOVERNANCE
   INDUSTRIES + CAREER PROFILES
========================================= */

.gov-industry-career {
  width: 100%;
  padding: 8px 0 20px;
  background: #fff;
}

.gov-ic-wrapper {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr);

  gap: 14px;

  padding: 0 7px;
}


/* =========================================
   COMMON CARDS
========================================= */

.gov-industries-card,
.gov-career-card {
  min-width: 0;

  background: #fff;

  border: 1px solid #e3e9f0;

  border-radius: 10px;

  padding: 10px 12px;

  box-shadow:
    0 2px 8px rgba(20, 50, 80, .025);
}


/* =========================================
   HEADINGS
========================================= */

.gov-industries-card>h2,
.gov-career-card>h2 {
  margin: 0 0 9px;

  text-align: center;

  color: #173b82;

  font-size: 20px;
  font-weight: 800;

  line-height: 1.25;
}


/* =========================================
   INDUSTRIES GRID
========================================= */

.gov-industries-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  row-gap: 12px;
  column-gap: 8px;
}


/* =========================================
   INDUSTRY ITEM
========================================= */

.gov-industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transition:
    transform .25s ease;
}

.gov-industry-item:hover {
  transform: translateY(-3px);
}


/* =========================================
   INDUSTRY ICON
========================================= */

.gov-industry-icon {
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 5px;

  border-radius: 50%;

  border: 1px solid rgba(30, 70, 120, .04);

  font-size: 22px;

  transition:
    transform .25s ease;
}

.gov-industry-item:hover .gov-industry-icon {
  transform: scale(1.08);
}


/* =========================================
   INDUSTRY COLORS
========================================= */

.icon-green {
  color: #2c9b58;
  background: #f0f8f2;
}

.icon-blue {
  color: #2378cf;
  background: #f0f6ff;
}

.icon-orange {
  color: #f18a20;
  background: #fff5ea;
}


/* =========================================
   INDUSTRY TITLE
========================================= */

.gov-industry-item h3 {
  margin: 0;

  color: #173b82;

  font-size: 11.5px;
  font-weight: 800;

  line-height: 1.45;
}


/* =========================================
   CAREER GRID
========================================= */

.gov-career-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px 18px;
}


/* =========================================
   CAREER COLUMN
========================================= */

.gov-career-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 9px;
}


/* =========================================
   CAREER ITEM
========================================= */

.gov-career-item {
  min-width: 0;

  display: grid;

  grid-template-columns: 37px minmax(0, 1fr);

  gap: 8px;

  align-items: start;

  transition:
    transform .25s ease;
}

.gov-career-item:hover {
  transform: translateX(3px);
}


/* =========================================
   CAREER ICON
========================================= */

.gov-career-icon {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 17px;

  border: 1px solid rgba(30, 70, 120, .04);
}


/* =========================================
   CAREER COLORS
========================================= */

.career-green {
  color: #31975b;
  background: #f0f9f2;
}

.career-orange {
  color: #f08b25;
  background: #fff4e8;
}

.career-blue {
  color: #2674b9;
  background: #eef7fc;
}

.career-red {
  color: #ef706f;
  background: #fff0f0;
}

.career-purple {
  color: #8a49b7;
  background: #f7effc;
}


/* =========================================
   CAREER TITLE
========================================= */

.gov-career-item h3 {
  margin: 1px 0 2px;

  color: #173b82;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.3;
}


/* =========================================
   CAREER DESCRIPTION
========================================= */

.gov-career-item p {
  margin: 0;

  color: #50627e;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.45;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .gov-ic-wrapper {
    gap: 10px;
  }

  .gov-industries-card,
  .gov-career-card {
    padding: 9px;
  }

  .gov-industries-card>h2,
  .gov-career-card>h2 {
    font-size: 18px;
  }

  .gov-industries-grid {
    column-gap: 5px;
    row-gap: 10px;
  }

  .gov-industry-icon {
    width: 42px;
    height: 42px;

    font-size: 20px;
  }

  .gov-industry-item h3 {
    font-size: 8.5px;
  }

  .gov-career-grid {
    gap: 7px 12px;
  }

  .gov-career-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
  }

  .gov-career-icon {
    width: 33px;
    height: 33px;

    font-size: 15px;
  }

  .gov-career-item h3 {
    font-size: 9px;
  }

  .gov-career-item p {
    font-size: 7.3px;
  }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .gov-ic-wrapper {
    grid-template-columns: 1fr;
  }

  .gov-industries-card,
  .gov-career-card {
    width: 100%;
  }

  .gov-industries-grid {
    column-gap: 12px;
  }

  .gov-industry-icon {
    width: 46px;
    height: 46px;

    font-size: 22px;
  }

  .gov-industry-item h3 {
    font-size: 9.5px;
  }

  .gov-career-item h3 {
    font-size: 10px;
  }

  .gov-career-item p {
    font-size: 8px;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .gov-industry-career {
    padding: 14px 0 25px;
  }

  .gov-ic-wrapper {
    padding: 0 6px;
    gap: 12px;
  }

  .gov-industries-card,
  .gov-career-card {
    padding: 11px 9px;
  }

  .gov-industries-card>h2,
  .gov-career-card>h2 {
    font-size: 17px;
  }


  /* Industries */

  .gov-industries-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    row-gap: 16px;
    column-gap: 8px;
  }

  .gov-industry-icon {
    width: 43px;
    height: 43px;

    font-size: 20px;
  }

  .gov-industry-item h3 {
    font-size: 9px;
  }


  /* Careers */

  .gov-career-grid {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .gov-career-column {
    gap: 8px;
  }

  .gov-career-item {
    grid-template-columns: 38px minmax(0, 1fr);

    gap: 8px;
  }

  .gov-career-icon {
    width: 36px;
    height: 36px;

    font-size: 16px;
  }

  .gov-career-item h3 {
    font-size: 9.5px;
  }

  .gov-career-item p {
    font-size: 8px;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .gov-industries-card>h2,
  .gov-career-card>h2 {
    font-size: 16px;
  }

  .gov-industries-grid {
    row-gap: 14px;
  }

  .gov-industry-icon {
    width: 40px;
    height: 40px;

    font-size: 19px;
  }

  .gov-industry-item h3 {
    font-size: 8.5px;
  }

  .gov-career-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .gov-career-icon {
    width: 33px;
    height: 33px;

    font-size: 14px;
  }

  .gov-career-item h3 {
    font-size: 9px;
  }

  .gov-career-item p {
    font-size: 7.5px;
  }
}


/* =========================================
   GOVERNANCE
   AI TOOLS + KEY SKILLS
========================================= */

.gov-tools-skills {
  width: 100%;
  padding: 8px 0 20px;
  background: #ffffff;
}

.gov-ts-wrapper {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr);

  gap: 14px;

  padding: 0 7px;
}


/* =========================================
   COMMON CARDS
========================================= */

.gov-tools-card,
.gov-skills-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e3e9f0;

  border-radius: 10px;

  padding: 10px 12px;

  box-shadow:
    0 2px 8px rgba(20, 50, 80, .025);
}


/* =========================================
   HEADINGS
========================================= */

.gov-tools-card>h2,
.gov-skills-card>h2 {
  margin: 0 0 9px;

  color: #173b82;

  text-align: center;

  font-size: 20px;
  font-weight: 800;

  line-height: 1.25;
}


/* =========================================
   TOOLS GRID
========================================= */

.gov-tools-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 7px;
}


/* =========================================
   TOOL ITEM
========================================= */

.gov-tool {
  min-width: 0;

  height: 38px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding: 0 9px;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  background: #ffffff;

  color: #253d69;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.gov-tool:hover {
  transform: translateY(-2px);

  border-color: #bfd0e6;

  box-shadow:
    0 4px 10px rgba(30, 70, 110, .07);
}

.gov-tool>i {
  flex: 0 0 auto;

  font-size: 16px;

  color: #2876bf;
}

.gov-tool span {
  overflow: hidden;

  text-overflow: ellipsis;
}


/* =========================================
   TOOL BRAND SYMBOLS
========================================= */

.tool-r {
  color: #276db2;

  font-size: 18px;
  font-weight: 800;
}

.tool-tableau {
  color: #1d79ad;

  font-size: 17px;
}

.tool-colab {
  color: #f28b20;

  font-size: 16px;
}

.tool-scikit {
  color: #2673bb;

  font-size: 10px;
}

.tool-tf {
  color: #ef7c20;

  font-size: 17px;
  font-weight: 800;
}

.tool-hf {
  font-size: 14px;
}

.tool-spacy {
  color: #2875b4;

  font-size: 17px;
}

.tool-chatgpt {
  color: #208c6a;

  font-size: 17px;
}

.tool-copilot {
  color: #527ee4;

  font-size: 18px;
}

.tool-grammarly {
  color: #239b63;

  font-size: 17px;
  font-weight: 800;
}

.tool-dalle {
  color: #3c8191;

  font-size: 16px;
}


/* =========================================
   MORE TOOLS
========================================= */

.gov-tools-more {
  margin-top: 7px;

  color: #173b82;

  text-align: center;

  font-size: 8px;
  font-weight: 700;
}


/* =========================================
   SKILLS CONTENT
========================================= */

.gov-skills-content {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px;
}


/* =========================================
   SKILL COLUMN
========================================= */

.gov-skill-column {
  display: flex;
  flex-direction: column;

  gap: 8px;

  min-width: 0;
}


/* =========================================
   SKILL
========================================= */

.gov-skill {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;

  color: #263f70;

  font-size: 11.5px;
  font-weight: 700;

  line-height: 1.35;
}

.gov-skill i {
  flex: 0 0 auto;

  color: #21845c;

  font-size: 15px;
}

.gov-skill span {
  min-width: 0;
}


/* =========================================
   GOVERNMENT BUILDING DECORATION
========================================= */

.gov-building-decoration {
  position: absolute;

  right: 4px;
  bottom: -1px;

  width: 125px;
  height: 150px;

  opacity: .16;

  z-index: 1;

  pointer-events: none;
}


/* Dome */

.gov-building-dome {
  position: absolute;

  left: 47px;
  top: 12px;

  width: 32px;
  height: 22px;

  background: #2c6680;

  border-radius:
    35px 35px 0 0;
}


/* Dome top */

.gov-building-roof {
  position: absolute;

  left: 61px;
  top: 2px;

  width: 5px;
  height: 12px;

  background: #2c6680;

  border-radius: 5px;
}


/* Main body */

.gov-building-body {
  position: absolute;

  left: 18px;
  top: 32px;

  width: 90px;
  height: 90px;

  background: #2c6680;

  border-radius: 4px 4px 0 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  gap: 7px;

  padding: 12px 8px 0;
}


/* Columns */

.gov-building-column {
  width: 9px;
  height: 68px;

  background: #ffffff;

  border-radius: 2px 2px 0 0;
}


/* Base */

.gov-building-base {
  position: absolute;

  left: 7px;
  bottom: 12px;

  width: 112px;
  height: 11px;

  background: #2c6680;

  border-radius: 2px;
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1199.98px) {

  .gov-ts-wrapper {
    gap: 10px;
  }

  .gov-tools-card,
  .gov-skills-card {
    padding: 9px;
  }

  .gov-tools-card>h2,
  .gov-skills-card>h2 {
    font-size: 18px;
  }

  .gov-tools-grid {
    gap: 6px;
  }

  .gov-tool {
    height: 35px;

    padding: 0 7px;

    gap: 5px;

    font-size: 7.8px;
  }

  .gov-tool>i {
    font-size: 14px;
  }

  .gov-skill {
    font-size: 8.8px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

  .gov-ts-wrapper {
    grid-template-columns: 1fr;
  }

  .gov-tools-card,
  .gov-skills-card {
    width: 100%;
  }

  .gov-tool {
    font-size: 8.5px;
  }

  .gov-skill {
    font-size: 9.5px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

  .gov-tools-skills {
    padding: 14px 0 25px;
  }

  .gov-ts-wrapper {
    padding: 0 6px;

    gap: 12px;
  }

  .gov-tools-card,
  .gov-skills-card {
    padding: 11px 9px;
  }

  .gov-tools-card>h2,
  .gov-skills-card>h2 {
    font-size: 17px;
  }


  /* Tools */

  .gov-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .gov-tool {
    height: 37px;

    font-size: 8.5px;
  }


  /* Skills */

  .gov-skills-content {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .gov-skill-column {
    gap: 8px;
  }

  .gov-skill {
    font-size: 9px;
  }


  /* Hide decoration on small screen */

  .gov-building-decoration {
    opacity: .07;

    width: 100px;
    height: 120px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .gov-tools-card>h2,
  .gov-skills-card>h2 {
    font-size: 16px;
  }

  .gov-tools-grid {
    gap: 6px;
  }

  .gov-tool {
    height: 35px;

    padding: 0 7px;

    font-size: 8px;
  }

  .gov-tool>i {
    font-size: 13px;
  }

  .gov-skill {
    font-size: 8.5px;

    gap: 7px;
  }

  .gov-skill i {
    font-size: 14px;
  }

}




/* ==========================================
   AI MEDIA - WHY CHOOSE SECTION
========================================== */

.ai-media-section {
  width: 100%;
  background: #fff;
  padding: 8px 20px 25px;
  box-sizing: border-box;
}

.ai-media-wrapper {
  width: 100%;
  /* max-width: 1400px; */
  margin: 0 auto;
}


/* ==========================================
   HEADING
========================================== */

.ai-media-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.ai-media-heading h2 {
  margin: 0;
  padding: 0;

  color: #0b1d96;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.ai-media-heading span {
  width: 26px;
  height: 2px;
  flex: 0 0 26px;

  background: #ef25dc;
}


/* ==========================================
   SIX CARDS
========================================== */

.ai-media-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 8px;

  align-items: stretch;
}


/* ==========================================
   CARD
========================================== */

.ai-media-card {
  width: 100%;
  min-width: 0;
  min-height: 180px;

  box-sizing: border-box;

  padding: 12px 10px 13px;

  background: #fff;

  border: 1px solid #e2e7f2;
  border-radius: 11px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  box-shadow: 0 2px 7px rgba(21, 44, 100, 0.035);

  transition: all .25s ease;
}

.ai-media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30, 50, 120, .09);
}


/* ==========================================
   ICON
========================================== */

.ai-media-icon {
  width: 46px;
  height: 46px;

  margin-bottom: 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.ai-media-icon svg {
  width: 38px;
  height: 38px;

  display: block;
}


/* Icon Colors */

.icon-red {
  color: #ed1645;
}

.icon-orange {
  color: #ff7200;
}

.icon-purple {
  color: #8d16a9;
}

.icon-teal {
  color: #087f95;
}

.icon-blue {
  color: #0568ed;
}

.icon-pink {
  color: #ed1d45;
}


/* ==========================================
   CARD TITLE
========================================== */

.ai-media-card h3 {
  margin: 1px 0 7px;

  color: #071a78;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.35;

  text-align: center;
}


/* ==========================================
   CARD DESCRIPTION
========================================== */

.ai-media-card p {
  width: 100%;
  max-width: 185px;

  margin: 0;

  color: #17296d;

  font-size: 12px;
  font-weight: 500;

  line-height: 1.5;

  text-align: center;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

  .ai-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .ai-media-card {
    min-height: 185px;
  }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 650px) {

  .ai-media-section {
    padding: 10px 12px 25px;
  }

  .ai-media-heading {
    gap: 8px;
    margin-bottom: 12px;
  }

  .ai-media-heading h2 {
    white-space: normal;
    font-size: 17px;
  }

  .ai-media-heading span {
    width: 18px;
    flex-basis: 18px;
  }

  .ai-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .ai-media-card {
    min-height: 190px;
    padding: 13px 8px;
  }

  .ai-media-icon {
    width: 42px;
    height: 42px;
  }

  .ai-media-icon svg {
    width: 34px;
    height: 34px;
  }

  .ai-media-card h3 {
    font-size: 12.5px;
  }

  .ai-media-card p {
    font-size: 10.5px;
  }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 400px) {

  .ai-media-grid {
    grid-template-columns: 1fr;
  }

  .ai-media-card {
    min-height: auto;
    padding: 16px 12px;
  }

  .ai-media-card p {
    max-width: 270px;
  }

}




/* =========================================================
   FUTURE OF MEDIA + SALARY SECTION
========================================================= */

.future-ai-section {
  width: 100%;
  padding: 8px 14px 18px;
  background: #fff;
  box-sizing: border-box;
  font-family: "Inter", Arial, sans-serif;
}

.future-ai-wrapper {
  width: 100%;
  /* max-width: 1400px; */
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.future-panel {
  position: relative;

  min-width: 0;

  background: #fff;

  border: 1px solid #e6eaf4;
  border-radius: 12px;

  box-shadow: 0 2px 8px rgba(30, 50, 100, 0.035);

  box-sizing: border-box;
}


/* =========================================================
   PANEL HEADINGS
========================================================= */

.future-panel>h2 {
  margin: 7px 10px 0;

  color: #081a91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;
  text-align: center;
}

.future-panel>h4 {
  margin: 6px 0 8px;

  color: #0a238e;

  font-size: 14px;
  font-weight: 700;

  text-align: center;
}


/* =========================================================
   TIMELINE
========================================================= */

.future-timeline {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(5, 1fr);

  padding: 0 12px;

  box-sizing: border-box;
}

.timeline-item {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================================
   TIMELINE ICON
========================================================= */

.timeline-icon {
  position: relative;

  width: 48px;
  height: 48px;

  margin-bottom: 5px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  box-sizing: border-box;

  z-index: 2;
}

.timeline-icon svg {
  width: 31px;
  height: 31px;
}


/* Connecting line */

.timeline-item:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 23px;
  left: calc(50% + 24px);

  width: calc(100% - 48px);

  height: 2px;

  background: #10248f;

  z-index: 0;
}


/* Arrow */

.timeline-arrow {
  position: absolute;

  top: 12px;
  right: -3px;

  color: #10248f;

  font-size: 27px;
  font-weight: 700;

  line-height: 1;

  z-index: 3;
  opacity: 0;
}


/* Timeline colors */

.timeline-green {
  background: #087d53;
}

.timeline-purple {
  background: #5d1599;
}

.timeline-orange {
  background: #ff6700;
}

.timeline-pink {
  background: #b30b7e;
}

.timeline-teal {
  background: #08748a;
}


/* =========================================================
   TIMELINE TEXT
========================================================= */

.timeline-item strong {
  color: #0b217e;

  font-size: 13px;
  font-weight: 700;

  margin-bottom: 3px;
}

.timeline-item h5 {
  min-height: 34px;

  margin: 0 0 5px;

  color: #111d75;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.35;

  text-align: center;
}

.timeline-item p {
  margin: 0;

  color: #26356f;

  font-size: 11.5px;
  font-weight: 500;

  line-height: 1.55;

  text-align: center;
}


/* =========================================================
   MARKET STATISTICS
========================================================= */

.market-stats {
  margin: 14px 12px 0;

  min-height: 91px;

  border-radius: 11px;

  background: #f7f6fa;

  display: grid;
  grid-template-columns: 72px 1.2fr 1px 1fr 1px 1.25fr;

  align-items: center;

  padding: 7px 12px;

  box-sizing: border-box;
}


/* Market Icon */

.market-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #7020a2;
}

.market-icon svg {
  width: 48px;
  height: 48px;
}


/* Market Stats */

.market-stat {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  min-width: 0;
}

.market-stat span:first-child {
  color: #8b2a9d;

  font-size: 9px;
  font-weight: 700;

  margin-bottom: 2px;
}

.market-stat strong {
  color: #62149a;

  font-size: 21px;
  font-weight: 700;

  line-height: 1.15;
}

.market-stat small {
  color: #17266e;

  font-size: 9px;
  font-weight: 600;
}


/* Dividers */

.market-divider {
  width: 2px;
  height: 54px;

  background: #d8b9dd;

  justify-self: center;
}


/* Center stat */

.center-stat {
  align-items: center;
  text-align: center;
}

.center-stat span {
  color: #102170 !important;
  font-size: 11px !important;
}

.center-stat strong {
  color: #18267b;
}


/* Last stat */

.last-stat {
  align-items: center;
  text-align: center;
}

.last-stat strong {
  color: #18267b;
  font-size: 23px;
}

.last-stat span {
  color: #293572 !important;
  font-size: 9px !important;
  line-height: 1.35;
  margin: 0 !important;
}

.last-stat small {
  margin-top: 1px;
}


/* Source */

.source-text {
  margin: 5px 12px 4px;

  color: #26346c;

  font-size: 7.5px;
  font-weight: 500;

  text-align: right;
}


/* =========================================================
   SALARY GRID
========================================================= */

.salary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  padding: 9px 14px 0;

  box-sizing: border-box;
}


/* =========================================================
   SALARY CARD
========================================================= */

.salary-card {
  min-width: 0;
  min-height: 181px;

  border: 2px solid;
  border-radius: 11px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  padding: 15px 7px 10px;

  box-sizing: border-box;
}


/* Salary colors */

.salary-green {
  border-color: #d9e8e2;
}

.salary-blue {
  border-color: #dce5fb;
}

.salary-orange {
  border-color: #f9e4d4;
}

.salary-purple {
  border-color: #e8dff0;
}


/* Amount */

.salary-amount {
  font-size: 21px;
  font-weight: 700;

  line-height: 1.15;
}

.salary-green .salary-amount {
  color: #087b55;
}

.salary-blue .salary-amount {
  color: #135bd2;
}

.salary-orange .salary-amount {
  color: #ef5d08;
}

.salary-purple .salary-amount {
  color: #7213a0;
}


/* LPA */

.salary-lpa {
  margin-top: 4px;

  font-size: 13px;
  font-weight: 700;
}

.salary-green .salary-lpa {
  color: #087b55;
}

.salary-blue .salary-lpa {
  color: #135bd2;
}

.salary-orange .salary-lpa {
  color: #ef5d08;
}

.salary-purple .salary-lpa {
  color: #7213a0;
}


/* Salary line */

.salary-line {
  width: 82%;

  height: 1px;

  margin: 17px 0 14px;

  background: #dce1e8;
}


/* Salary title */

.salary-card h5 {
  margin: 0 0 8px;

  color: #122172;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.25;
}

.salary-card p {
  margin: 0;

  color: #16236f;

  font-size: 12px;
  font-weight: 600;

  line-height: 1.35;
}


/* =========================================================
   SALARY NOTE
========================================================= */

.salary-note {
  margin: 34px 14px 12px;

  min-height: 63px;

  border-radius: 11px;

  background: #f7f6fa;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 9px 13px;

  box-sizing: border-box;
}


/* Star */

.star-circle {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border-radius: 50%;

  background: #fff3e4;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #f58200;
}

.star-circle svg {
  width: 29px;
  height: 29px;
}


/* Note Text */

.salary-note strong {
  display: block;

  color: #18236e;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.4;
}

.salary-note p {
  margin: 4px 0 0;

  color: #10218a;

  font-size: 10px;
  font-weight: 700;
}


/* =========================================================
   HOVER
========================================================= */

.salary-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.salary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px rgba(40, 50, 100, .08);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .future-ai-wrapper {
    grid-template-columns: 1fr;
  }

  .future-timeline {
    padding-left: 25px;
    padding-right: 25px;
  }

  .salary-grid {
    gap: 12px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .future-ai-section {
    padding: 10px;
  }

  .future-panel>h2 {
    font-size: 18px;
  }

  .future-panel>h4 {
    font-size: 12px;
  }

  .future-timeline {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 10px 20px;
  }

  .timeline-item {
    width: 100%;
  }

  .timeline-item:not(:last-child)::after {
    display: none;
  }

  .timeline-arrow {
    display: none;
  }

  .timeline-item h5 {
    min-height: auto;
  }

  .market-stats {
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    padding: 15px;
  }

  .market-icon {
    display: none;
  }

  .market-divider {
    display: none;
  }

  .market-stat {
    align-items: center;
    text-align: center;
  }

  .salary-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    padding: 10px;
  }

  .salary-card {
    min-height: 170px;
  }

  .salary-note {
    margin: 18px 10px 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .salary-grid {
    grid-template-columns: 1fr;
  }

  .market-stats {
    grid-template-columns: 1fr;
  }

  .source-text {
    text-align: center;
  }

}



/* =========================================================
   INDUSTRIES + CAREER PROFILES
========================================================= */

.career-industries-section {
  width: 100%;
  padding: 8px 8px 20px;
  background: #fff;
  box-sizing: border-box;
  font-family: "Inter", Arial, sans-serif;
}

.career-industries-wrapper {
  width: 100%;
  /* max-width: 1400px; */
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.career-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e5e9f3;
  border-radius: 12px;

  box-shadow: 0 2px 8px rgba(30, 50, 100, .035);

  box-sizing: border-box;
}


/* =========================================================
   HEADINGS
========================================================= */

.career-panel>h2 {
  margin: 8px 0 8px;

  color: #091b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   INDUSTRIES GRID
========================================================= */

.industries-grid {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  row-gap: 20px;

  padding: 3px 15px 14px;

  box-sizing: border-box;
}


/* =========================================================
   INDUSTRY ITEM
========================================================= */

.industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.industry-icon {
  width: 47px;
  height: 47px;

  margin-bottom: 6px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f5f8fc;

  box-sizing: border-box;
}

.industry-icon svg {
  width: 29px;
  height: 29px;

  display: block;
}


/* Industry icon colors */

.industry-icon.blue {
  color: #14769e;
  background: #f0f7fb;
}

.industry-icon.pink {
  color: #e72779;
  background: #fff1f7;
}

.industry-icon.orange {
  color: #ff6900;
  background: #fff6ed;
}

.industry-icon.green {
  color: #439b4d;
  background: #f0f9f1;
}

.industry-icon.lime {
  color: #8db421;
  background: #f7faeb;
}

.industry-icon.lightblue {
  color: #3e82c6;
  background: #eff7fd;
}


/* Industry title */

.industry-item h3 {
  margin: 0;

  color: #101e77;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.4;

  text-align: center;
}


/* =========================================================
   CAREER PROFILES
========================================================= */

.career-profiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;

  padding: 1px 12px 12px;

  box-sizing: border-box;
}

.career-profile-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   PROFILE
========================================================= */

.career-profile {
  display: grid;

  grid-template-columns: 36px minmax(0, 1fr);

  gap: 8px;

  align-items: start;

  min-width: 0;
}


/* =========================================================
   PROFILE ICON
========================================================= */

.profile-icon {
  width: 35px;
  height: 35px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.profile-icon svg {
  width: 22px;
  height: 22px;

  display: block;
}


/* Profile colors */

.profile-icon.purple {
  color: #7d20a5;
  background: #f5eefa;
}

.profile-icon.pink {
  color: #ed207c;
  background: #fff0f6;
}

.profile-icon.blue {
  color: #3879bd;
  background: #edf5fc;
}

.profile-icon.teal {
  color: #27899a;
  background: #edf8f9;
}


/* =========================================================
   PROFILE TEXT
========================================================= */

.career-profile h3 {
  margin: 1px 0 2px;

  color: #162079;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.25;
}

.career-profile p {
  margin: 0;

  color: #29356f;

  font-size:11.2px;
  font-weight: 500;

  line-height: 1.35;
}


/* =========================================================
   HOVER
========================================================= */

.industry-item,
.career-profile {
  transition: transform .2s ease;
}

.industry-item:hover {
  transform: translateY(-2px);
}

.career-profile:hover {
  transform: translateX(2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .career-industries-wrapper {
    grid-template-columns: 1fr;
  }

  .industries-grid {
    row-gap: 25px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .career-industries-section {
    padding: 10px;
  }

  .career-panel>h2 {
    font-size: 18px;
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;

    padding-left: 10px;
    padding-right: 10px;
  }

  .career-profiles-grid {
    grid-template-columns: 1fr;
  }

  .career-profile-column {
    gap: 12px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .industries-grid {
    grid-template-columns: 1fr 1fr;
  }

  .industry-icon {
    width: 43px;
    height: 43px;
  }

  .industry-icon svg {
    width: 27px;
    height: 27px;
  }

  .industry-item h3 {
    font-size: 10.5px;
  }

  .career-profile h3 {
    font-size: 10.5px;
  }

  .career-profile p {
    font-size: 9px;
  }

}




/* =========================================================
   AI TOOLS + KEY SKILLS SECTION
========================================================= */

.ai-tools-skills-section {
  width: 100%;
  padding: 8px 8px 20px;
  background: #fff;
  box-sizing: border-box;
  font-family: "Inter", Arial, sans-serif;
}

.ai-tools-skills-wrapper {
  width: 100%;
  /* max-width: 1400px; */
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.tools-skills-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e5e9f3;
  border-radius: 11px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}

.tools-skills-panel>h2 {
  margin: 7px 0 8px;

  color: #0b1c92;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   TOOLS GRID
========================================================= */

.tools-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 6px 8px;

  padding: 2px 10px 4px;

  box-sizing: border-box;
}


/* =========================================================
   TOOL CHIP
========================================================= */

.tool-chip {
  min-width: 0;
  height: 36px;

  padding: 4px 7px;

  border: 1px solid #e5e9f1;
  border-radius: 7px;

  background: #fff;

  display: flex;
  align-items: center;

  gap: 7px;

  box-sizing: border-box;

  color: #18246c;

  font-size:11px;
  font-weight: 700;

  white-space: nowrap;

  transition: all .2s ease;
}

.tool-chip:hover {
  transform: translateY(-2px);

  border-color: #ccd3e6;

  box-shadow: 0 4px 10px rgba(35, 50, 100, .07);
}


/* =========================================================
   TOOL LOGO
========================================================= */

.tool-logo {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 5px;

  font-size: 13px;
  font-weight: 800;

  line-height: 1;

  box-sizing: border-box;
}


/* Tool colors */

.chatgpt {
  color: #15976e;
  border: 2px solid #15976e;
  border-radius: 50%;
}

.claude {
  color: #ef663d;
  font-size: 15px;
}

.gemini {
  color: #6974e8;
  font-size: 17px;
}

.copyai {
  color: #079e91;
  border-radius: 50%;
}

.notion {
  color: #111;
  border: 1px solid #222;
}

.runway {
  color: #252525;
  border: 1px solid #333;
  font-size: 13px;
}

.descript {
  color: #3478e5;
  font-size: 16px;
}

.synthesia {
  color: #507fff;
  border-radius: 5px;
}

.midjourney {
  color: #6f6b73;
}

.canva {
  color: #2075e9;
  border-radius: 50%;
}

.dalle {
  color: #202020;
  border: 1px solid #222;
}

.pictory {
  color: #7b36bd;
}

.eleven {
  color: #222;
}

.lumen {
  color: #4d54e8;
}

.invideo {
  color: #3e65d7;
  border-radius: 50%;
}

.hootsuite {
  color: #e54848;
}

.brandwatch {
  color: #f07b3f;
}

.mention {
  color: #2494e8;
}

.grammarly {
  color: #168b63;
  border-radius: 50%;
}

.zapier {
  color: #ef4e21;
}


/* =========================================================
   MORE TOOLS
========================================================= */

.more-tools {
  margin: 1px 0 6px;

  color: #15237f;

  font-size: 8px;
  font-weight: 700;

  text-align: center;
}


/* =========================================================
   SKILLS CONTENT
========================================================= */

.skills-content {
  position: relative;

  display: flex;
  align-items: flex-start;

  padding: 4px 10px 8px;

  box-sizing: border-box;
}

.skills-columns {
  width: calc(100% - 135px);

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 4px 12px;
}


/* =========================================================
   SKILL ITEM
========================================================= */

.skill-item {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 7px;

  color: #26316d;

  font-size: 11px;
  font-weight: 600;

  line-height: 2.35;
}

.skill-check {
  width: 13px;
  height: 13px;

  flex: 0 0 13px;

  margin-top: 1px;

  border-radius: 50%;

  background: #6930aa;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 8px;
  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   SKILLS VISUAL
========================================================= */

.skills-visual {
  position: relative;

  width: 135px;
  height: 125px;

  flex: 0 0 135px;

  margin-top: 3px;
}


/* Monitor */

.monitor {
  position: absolute;

  width: 76px;
  height: 63px;

  right: 16px;
  bottom: 22px;
}

.monitor-screen {
  width: 76px;
  height: 52px;

  border: 3px solid #252d54;
  border-radius: 4px;

  background: #e9effa;

  box-sizing: border-box;

  position: relative;

  overflow: hidden;
}

.screen-top {
  height: 9px;

  display: flex;
  gap: 3px;

  padding: 3px 4px;
}

.screen-top span {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #7582a5;
}

.screen-chart {
  position: absolute;

  left: 7px;
  bottom: 6px;

  height: 28px;

  display: flex;
  align-items: flex-end;

  gap: 4px;
}

.chart-bar {
  width: 7px;

  background: #5968bd;

  border-radius: 2px 2px 0 0;
}

.bar-one {
  height: 13px;
}

.bar-two {
  height: 21px;
}

.bar-three {
  height: 17px;
}

.bar-four {
  height: 26px;
}


/* Play */

.screen-play {
  position: absolute;

  right: 8px;
  bottom: 8px;

  width: 19px;
  height: 19px;

  border-radius: 50%;

  background: #f07840;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 8px;
}


/* Monitor stand */

.monitor-stand {
  width: 18px;
  height: 9px;

  margin: 0 auto;

  background: #313952;
}

.monitor-base {
  width: 38px;
  height: 4px;

  margin: 0 auto;

  border-radius: 4px;

  background: #313952;
}


/* Small visual cards */

.visual-card {
  position: absolute;

  width: 29px;
  height: 29px;

  border-radius: 4px;

  background: #fff;

  border: 2px solid #263153;

  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 15px;
  font-weight: 700;
}

.visual-card-one {
  right: 2px;
  top: 12px;

  color: #ed7140;
}

.visual-card-two {
  right: 82px;
  top: 37px;

  color: #4652aa;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .ai-tools-skills-wrapper {
    grid-template-columns: 1fr;
  }

  .tools-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

  .tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .skills-columns {
    width: 100%;
  }

  .skills-visual {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .ai-tools-skills-section {
    padding: 10px;
  }

  .tools-skills-panel>h2 {
    font-size: 18px;
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .tool-chip {
    height: 38px;

    font-size: 10px;
  }

  .skills-columns {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .skill-item {
    font-size: 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .tools-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tool-chip {
    padding-left: 6px;
    padding-right: 5px;
  }

}



/* =========================================================
   KEY SKILLS PANEL - FIXED DESIGN
========================================================= */

.skills-panel {
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;

  padding: 0 0 10px;

  background: #fff;
  border: 1px solid #e4e8f2;
  border-radius: 11px;

  box-sizing: border-box;

  overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.skills-panel>h2 {
  margin: 8px 0 10px !important;

  color: #071b91;

  font-size: 20px !important;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.skills-content {
  width: 100%;

  min-height: 145px;

  display: flex;
  align-items: center;

  padding: 2px 14px 8px !important;

  box-sizing: border-box;
}


/* =========================================================
   TWO SKILL COLUMNS
========================================================= */

.skills-columns {
  width: calc(100% - 145px) !important;

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  column-gap: 22px;
  row-gap: 7px;

  align-self: center;
}


/* =========================================================
   SKILL COLUMN
========================================================= */

.skills-column {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* =========================================================
   SKILL ITEM
========================================================= */

.skill-item {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 7px;

  color: #18256d;

  font-size: 11px;
  font-weight: 500;

  line-height: 2.25;

  white-space: nowrap;
}


/* =========================================================
   PURPLE CHECK
========================================================= */

.skill-check {
  width: 13px !important;
  height: 13px !important;

  min-width: 13px !important;
  min-height: 13px !important;

  flex: 0 0 13px;

  border-radius: 50%;

  background: #7135b7;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 8px;
  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   RIGHT SIDE VISUAL
========================================================= */

.skills-visual {
  width: 135px !important;
  height: 125px !important;

  min-width: 135px !important;

  flex: 0 0 135px !important;

  position: relative;

  margin-left: 5px;
  margin-top: 0 !important;

  align-self: center;
}


/* =========================================================
   MONITOR
========================================================= */

.monitor {
  position: absolute;

  width: 78px;
  height: 66px;

  right: 12px;
  bottom: 20px;
}

.monitor-screen {
  width: 78px;
  height: 54px;

  border: 3px solid #27315c;
  border-radius: 4px;

  background: #eef2fb;

  position: relative;

  box-sizing: border-box;

  overflow: hidden;
}


/* Top dots */

.screen-top {
  height: 9px;

  display: flex;
  gap: 3px;

  padding: 3px 4px;
}

.screen-top span {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #8b94b2;
}


/* Chart */

.screen-chart {
  position: absolute;

  left: 9px;
  bottom: 7px;

  height: 28px;

  display: flex;
  align-items: flex-end;

  gap: 4px;
}

.chart-bar {
  width: 7px;

  background: #6674bd;

  border-radius: 2px 2px 0 0;
}

.bar-one {
  height: 12px;
}

.bar-two {
  height: 21px;
}

.bar-three {
  height: 16px;
}

.bar-four {
  height: 26px;
}


/* Play button */

.screen-play {
  position: absolute;

  right: 8px;
  bottom: 8px;

  width: 19px;
  height: 19px;

  border-radius: 50%;

  background: #f47a3d;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 8px;
}


/* Monitor stand */

.monitor-stand {
  width: 18px;
  height: 8px;

  margin: 0 auto;

  background: #2c3557;
}

.monitor-base {
  width: 38px;
  height: 4px;

  margin: 0 auto;

  border-radius: 4px;

  background: #2c3557;
}


/* =========================================================
   FLOATING VISUAL CARDS
========================================================= */

.visual-card {
  position: absolute;

  width: 29px;
  height: 29px;

  border-radius: 4px;

  background: #fff;

  border: 2px solid #263153;

  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 700;

  box-sizing: border-box;
}

.visual-card-one {
  right: 0;
  top: 10px;

  color: #ee7040;
}

.visual-card-two {
  left: 3px;
  top: 38px;

  color: #5967b5;
}


/* =========================================================
   DESKTOP BALANCE
========================================================= */

@media (min-width: 1101px) {

  .skills-content {
    min-height: 145px;
  }

  .skills-columns {
    padding-left: 0;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

  .skills-content {
    min-height: auto;
  }

  .skills-columns {
    width: 100% !important;

    grid-template-columns: 1fr 1fr !important;
  }

  .skills-visual {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .skills-panel>h2 {
    font-size: 18px !important;
  }

  .skills-content {
    padding: 5px 12px 12px !important;
  }

  .skills-columns {
    width: 100% !important;

    grid-template-columns: 1fr !important;

    row-gap: 8px;
  }

  .skills-column {
    gap: 8px;
  }

  .skill-item {
    font-size: 10px;
    white-space: normal;
  }

}



/* =========================================================
   HOSPITALITY / TOURISM AI SECTION
========================================================= */

.hospitality-ai-section {
  width: 100%;
  padding: 8px 8px 22px;
  background: #fff;
  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.hospitality-ai-wrapper {
  width: 100%;
  /* max-width: 1420px; */
  margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.hospitality-ai-heading {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-bottom: 9px;
}

.hospitality-ai-heading h2 {
  margin: 0;

  color: #0a1b96;

  font-size: 21px;
  font-weight: 700;

  line-height: 1.25;

  text-align: center;

  white-space: nowrap;
}

.hospitality-ai-heading span {
  width: 34px;
  height: 2px;

  flex: 0 0 34px;

  background: #ed26d7;
}


/* =========================================================
   GRID
========================================================= */

.hospitality-ai-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 14px;

  align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.hospitality-ai-card {
  min-width: 0;
  min-height: 234px;

  padding: 14px 14px 13px;

  background: #fff;

  border: 1px solid #e4e8f2;
  border-radius: 11px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  box-shadow: 0 2px 7px rgba(25, 45, 100, 0.035);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.hospitality-ai-card:hover {
  transform: translateY(-3px);

  box-shadow: 0 8px 20px rgba(30, 50, 110, .09);
}


/* =========================================================
   ICON
========================================================= */

.hospitality-icon {
  width: 58px;
  height: 58px;

  margin-bottom: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.hospitality-icon svg {
  width: 52px;
  height: 52px;

  display: block;
}


/* =========================================================
   ICON COLORS
========================================================= */

.icon-purple {
  color: #7624ae;
}

.icon-orange {
  color: #ff6500;
}

.icon-teal {
  color: #078092;
}

.icon-pink {
  color: #c81772;
}

.icon-green {
  color: #5b9c42;
}

.icon-gold {
  color: #f19a00;
}


/* =========================================================
   TITLE
========================================================= */

.hospitality-ai-card h3 {
  min-height: 38px;

  margin: 0 0 8px;

  color: #101e7b;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.35;

  text-align: center;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hospitality-ai-card p {
  max-width: 205px;

  margin: 0;

  color: #29356f;

  font-size: 11.5px;
  font-weight: 500;

  line-height: 1.55;

  text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .hospitality-ai-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .hospitality-ai-card {
    min-height: 215px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .hospitality-ai-section {
    padding: 10px 12px 20px;
  }

  .hospitality-ai-heading {
    gap: 8px;
    margin-bottom: 13px;
  }

  .hospitality-ai-heading h2 {
    font-size: 17px;
    white-space: normal;
  }

  .hospitality-ai-heading span {
    width: 20px;
    flex-basis: 20px;
  }

  .hospitality-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hospitality-ai-card {
    min-height: 205px;

    padding: 13px 8px 12px;
  }

  .hospitality-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 7px;
  }

  .hospitality-icon svg {
    width: 43px;
    height: 43px;
  }

  .hospitality-ai-card h3 {
    min-height: 35px;

    font-size: 12.5px;
  }

  .hospitality-ai-card p {
    font-size: 10.5px;
    line-height: 1.5;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .hospitality-ai-grid {
    grid-template-columns: 1fr;
  }

  .hospitality-ai-card {
    min-height: auto;
    padding: 18px 15px;
  }

  .hospitality-ai-card p {
    max-width: 280px;
  }

}



/* =========================================================
   HOSPITALITY FUTURE + SALARY SECTION
========================================================= */

.hospitality-future-section {
  width: 100%;
  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.hospitality-future-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.hf-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e5e9f3;
  border-radius: 12px;

  box-shadow: 0 2px 8px rgba(30, 50, 100, .035);

  box-sizing: border-box;
}


/* =========================================================
   HEADINGS
========================================================= */

.hf-panel>h2 {
  margin: 8px 10px 0;

  color: #091b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}

.hf-panel>h4 {
  margin: 6px 0 9px;

  color: #10228b;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   TIMELINE
========================================================= */

.hf-timeline {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(5, 1fr);

  padding: 0 13px;

  box-sizing: border-box;
}

.hf-timeline-item {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================================
   TIMELINE ICON
========================================================= */

.hf-timeline-icon {
  width: 47px;
  height: 47px;

  margin-bottom: 5px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  position: relative;

  z-index: 2;
}

.hf-timeline-icon svg {
  width: 31px;
  height: 31px;
}


/* Colors */

.hf-purple {
  background: #7021a7;
}

.hf-blue {
  background: #274cb8;
}

.hf-orange {
  background: #ff6900;
}

.hf-pink {
  background: #ad157c;
}

.hf-green {
  background: #08745d;
}


/* =========================================================
   TIMELINE CONNECTING LINE
========================================================= */

.hf-timeline-item:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 23px;
  left: calc(50% + 23px);

  width: calc(100% - 46px);

  height: 2px;

  background: #27399a;

  z-index: 0;
}


/* Arrow */

.hf-arrow {
  position: absolute;

  top: 10px;
  right: -3px;

  color: #27399a;

  font-size: 25px;
  font-weight: 700;

  line-height: 1;

  z-index: 3;
}


/* =========================================================
   TIMELINE TEXT
========================================================= */

.hf-timeline-item>strong {
  margin-bottom: 3px;

  color: #142477;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.2;
}

.hf-timeline-item h5 {
  min-height: 33px;

  margin: 0 0 5px;

  color: #152276;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.35;

  text-align: center;
}

.hf-timeline-item p {
  margin: 0;

  color: #29366f;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.55;

  text-align: center;
}


/* =========================================================
   MARKET STATISTICS
========================================================= */

.hf-market-stats {
  margin: 14px 13px 0;

  min-height: 84px;

  border-radius: 11px;

  background: #f7f6fa;

  display: grid;

  grid-template-columns:
    68px 1.3fr 1px 1fr 1px 1.25fr;

  align-items: center;

  padding: 7px 10px;

  box-sizing: border-box;
}


/* Market Icon */

.hf-market-icon {
  width: 53px;
  height: 53px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #6820a0;
}

.hf-market-icon svg {
  width: 49px;
  height: 49px;
}


/* Market Stat */

.hf-market-stat {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;
}

.hf-market-stat>span:first-child {
  margin-bottom: 2px;

  color: #8a2a9b;

  font-size: 8.5px;
  font-weight: 700;

  line-height: 1.2;
}

.hf-market-stat strong {
  color: #64139b;

  font-size: 21px;
  font-weight: 700;

  line-height: 1.15;
}

.hf-market-stat small {
  color: #17266f;

  font-size: 8.5px;
  font-weight: 600;
}


/* Dividers */

.hf-market-divider {
  width: 2px;
  height: 52px;

  justify-self: center;

  background: #d7b9df;
}


/* Center */

.hf-center {
  align-items: center;
  text-align: center;
}

.hf-center>span:first-child {
  color: #172575;
}


/* Last */

.hf-last {
  align-items: center;
  text-align: center;
}

.hf-last strong {
  color: #167450;

  font-size: 22px;
}

.hf-last>span {
  color: #27356e;

  font-size: 8.5px;
  font-weight: 600;

  line-height: 1.35;

  text-align: center;
}


/* Source */

.hf-source {
  margin: 4px 13px 4px;

  color: #27346c;

  font-size: 7.5px;
  font-weight: 500;

  text-align: right;
}


/* =========================================================
   SALARY GRID
========================================================= */

.hf-salary-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 17px;

  padding: 10px 14px 0;

  box-sizing: border-box;
}


/* =========================================================
   SALARY CARD
========================================================= */

.hf-salary-card {
  min-width: 0;
  min-height: 183px;

  padding: 15px 6px 10px;

  border: 2px solid;

  border-radius: 11px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  box-sizing: border-box;
}


/* Borders */

.hf-salary-green {
  border-color: #d8e7e1;
}

.hf-salary-blue {
  border-color: #d9e4fb;
}

.hf-salary-orange {
  border-color: #f7e0d2;
}

.hf-salary-purple {
  border-color: #e6ddec;
}


/* Amount */

.hf-salary-amount {
  font-size: 21px;
  font-weight: 700;

  line-height: 1.15;
}

.hf-salary-green .hf-salary-amount,
.hf-salary-green .hf-salary-lpa {
  color: #087a56;
}

.hf-salary-blue .hf-salary-amount,
.hf-salary-blue .hf-salary-lpa {
  color: #125dd4;
}

.hf-salary-orange .hf-salary-amount,
.hf-salary-orange .hf-salary-lpa {
  color: #ed5e0a;
}

.hf-salary-purple .hf-salary-amount,
.hf-salary-purple .hf-salary-lpa {
  color: #72149f;
}


/* LPA */

.hf-salary-lpa {
  margin-top: 4px;

  font-size: 13px;
  font-weight: 700;
}


/* Line */

.hf-salary-line {
  width: 82%;
  height: 1px;

  margin: 17px 0 15px;

  background: #dce1e8;
}


/* Title */

.hf-salary-card h5 {
  margin: 0 0 8px;

  color: #122172;

  font-size: 12.5px;
  font-weight: 700;

  line-height: 1.25;
}

.hf-salary-card p {
  margin: 0;

  color: #16236f;

  font-size: 11.5px;
  font-weight: 600;

  line-height: 1.35;
}


/* =========================================================
   SALARY NOTE
========================================================= */

.hf-salary-note {
  margin: 33px 14px 12px;

  min-height: 63px;

  padding: 8px 12px;

  border-radius: 11px;

  background: #f7f6fa;

  display: flex;
  align-items: center;

  gap: 12px;

  box-sizing: border-box;
}


/* Star */

.hf-star-circle {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border-radius: 50%;

  background: #fff1df;

  color: #f47d00;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hf-star-circle svg {
  width: 29px;
  height: 29px;
}


/* Note text */

.hf-salary-note strong {
  display: block;

  color: #17236d;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.4;
}

.hf-salary-note p {
  margin: 4px 0 0;

  color: #10218a;

  font-size: 9.5px;
  font-weight: 700;
}


/* =========================================================
   HOVER
========================================================= */

.hf-salary-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.hf-salary-card:hover {
  transform: translateY(-3px);

  box-shadow: 0 7px 18px rgba(35, 50, 100, .08);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .hospitality-future-wrapper {
    grid-template-columns: 1fr;
  }

  .hf-timeline {
    padding-left: 25px;
    padding-right: 25px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .hospitality-future-section {
    padding: 10px;
  }

  .hf-panel>h2 {
    font-size: 18px;
  }

  .hf-timeline {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 10px 20px;
  }

  .hf-timeline-item:not(:last-child)::after,
  .hf-arrow {
    display: none;
  }

  .hf-timeline-item h5 {
    min-height: auto;
  }

  .hf-market-stats {
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    padding: 14px;
  }

  .hf-market-icon,
  .hf-market-divider {
    display: none;
  }

  .hf-market-stat {
    align-items: center;
    text-align: center;
  }

  .hf-salary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding: 10px;
  }

  .hf-salary-card {
    min-height: 170px;
  }

  .hf-salary-note {
    margin: 18px 10px 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .hf-salary-grid {
    grid-template-columns: 1fr;
  }

  .hf-market-stats {
    grid-template-columns: 1fr;
  }

  .hf-source {
    text-align: center;
  }

}



/* =========================================================
   HOSPITALITY INDUSTRIES + CAREER PROFILES
========================================================= */

.hospitality-career-section {
  width: 100%;
  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.hospitality-career-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.hc-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e5e9f3;
  border-radius: 12px;

  box-shadow: 0 2px 8px rgba(30, 50, 100, .035);

  box-sizing: border-box;
}


/* =========================================================
   HEADING
========================================================= */

.hc-panel>h2 {
  margin: 8px 0 9px;

  color: #091b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   INDUSTRIES GRID
========================================================= */

.hc-industries-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  row-gap: 17px;

  padding: 2px 15px 13px;

  box-sizing: border-box;
}


/* =========================================================
   INDUSTRY ITEM
========================================================= */

.hc-industry {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transition: transform .2s ease;
}

.hc-industry:hover {
  transform: translateY(-2px);
}


/* =========================================================
   INDUSTRY ICON
========================================================= */

.hc-industry-icon {
  width: 47px;
  height: 47px;

  margin-bottom: 6px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.hc-industry-icon svg {
  width: 29px;
  height: 29px;

  display: block;
}


/* Icon backgrounds/colors */

.hc-industry-icon.purple {
  color: #7026a4;
  background: #f5effa;
}

.hc-industry-icon.green {
  color: #398f63;
  background: #edf8f1;
}

.hc-industry-icon.orange {
  color: #e85d16;
  background: #fff3ea;
}

.hc-industry-icon.blue {
  color: #376db6;
  background: #edf4fc;
}

.hc-industry-icon.pink {
  color: #d62983;
  background: #fff0f7;
}

.hc-industry-icon.teal {
  color: #287f83;
  background: #edf8f8;
}

.hc-industry-icon.coral {
  color: #e86948;
  background: #fff1ec;
}

.hc-industry-icon.lightgreen {
  color: #5d986f;
  background: #eff8f1;
}


/* =========================================================
   INDUSTRY TITLE
========================================================= */

.hc-industry h3 {
  margin: 0;

  color: #101e77;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.4;

  text-align: center;
}


/* =========================================================
   CAREER PROFILES
========================================================= */

.hc-profiles-grid {
  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  padding: 1px 12px 12px;

  box-sizing: border-box;
}

.hc-profile-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


/* =========================================================
   PROFILE ITEM
========================================================= */

.hc-profile {
  min-width: 0;

  display: grid;

  grid-template-columns: 37px minmax(0, 1fr);

  gap: 8px;

  align-items: start;
}


/* =========================================================
   PROFILE ICON
========================================================= */

.hc-profile-icon {
  width: 36px;
  height: 36px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.hc-profile-icon svg {
  width: 22px;
  height: 22px;

  display: block;
}


/* Profile colors */

.hc-profile-icon.purple {
  color: #7525a6;
  background: #f5eefb;
}

.hc-profile-icon.pink {
  color: #e32c80;
  background: #fff0f6;
}

.hc-profile-icon.blue {
  color: #3876ba;
  background: #edf5fc;
}

.hc-profile-icon.teal {
  color: #27898d;
  background: #edf8f8;
}

.hc-profile-icon.green {
  color: #4b9167;
  background: #eff8f1;
}

.hc-profile-icon.orange {
  color: #ec6b20;
  background: #fff2e9;
}

.hc-profile-icon.coral {
  color: #e46b4d;
  background: #fff1ec;
}


/* =========================================================
   PROFILE TEXT
========================================================= */

.hc-profile h3 {
  margin: 1px 0 2px;

  color: #172274;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.25;
}

.hc-profile p {
  margin: 0;

  color: #29366f;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.35;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .hospitality-career-wrapper {
    grid-template-columns: 1fr;
  }

  .hc-industries-grid {
    row-gap: 23px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .hospitality-career-section {
    padding: 10px;
  }

  .hc-panel>h2 {
    font-size: 18px;
  }

  .hc-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px 10px;

    padding-left: 10px;
    padding-right: 10px;
  }

  .hc-profiles-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .hc-profile-column {
    gap: 12px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .hc-industry h3 {
    font-size: 10.5px;
  }

  .hc-profile h3 {
    font-size: 10.5px;
  }

  .hc-profile p {
    font-size: 9px;
  }

}



/* =========================================================
   TOURISM AI TOOLS + SKILLS
========================================================= */

.tourism-tools-section {
  width: 100%;
  padding: 8px 8px 10px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.tourism-tools-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.tourism-tools-panel,
.tourism-skills-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e3e8f2;
  border-radius: 12px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}


/* =========================================================
   HEADINGS
========================================================= */

.tourism-tools-panel>h2,
.tourism-skills-panel>h2 {
  margin: 8px 0 9px;

  color: #081b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   AI TOOL GRID
========================================================= */

.tourism-tool-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 7px 8px;

  padding: 2px 14px 3px;

  box-sizing: border-box;
}


/* =========================================================
   TOOL CARD
========================================================= */

.tourism-tool {
  min-width: 0;
  height: 38px;

  padding: 4px 7px;

  border: 1px solid #e5e9f1;
  border-radius: 7px;

  background: #fff;

  display: flex;
  align-items: center;

  gap: 7px;

  box-sizing: border-box;

  color: #1a276b;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.tourism-tool:hover {
  transform: translateY(-2px);

  box-shadow: 0 4px 10px rgba(30, 50, 100, .08);
}


/* =========================================================
   TOOL MARK
========================================================= */

.tool-mark {
  width: 23px;
  height: 23px;

  flex: 0 0 23px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 800;

  line-height: 1;

  box-sizing: border-box;
}


/* Individual colors */

.chatgpt-mark {
  color: #168e68;

  border: 2px solid #168e68;
  border-radius: 50%;
}

.claude-mark {
  color: #ef6c3e;
  font-size: 17px;
}

.gemini-mark {
  color: #6472d9;
  font-size: 18px;
}

.canva-mark {
  color: #078d9d;

  border-radius: 50%;
}

.midjourney-mark {
  color: #5b5962;
  font-size: 16px;
}

.python-mark {
  color: #3776a8;
  font-size: 18px;
}

.tableau-mark {
  color: #28609c;
  font-size: 17px;
}

.powerbi-mark {
  color: #ef8b12;
  font-size: 17px;
}

.colab-mark {
  color: #e87920;
  font-size: 10px;
}

.looker-mark {
  color: #5b72ce;
  font-size: 18px;
}

.tensorflow-mark {
  color: #ef791b;
  font-size: 18px;
}

.sklearn-mark {
  color: #3a6790;
  font-size: 11px;
}

.pandas-mark {
  color: #344e8d;
  font-size: 13px;
}

.hugging-mark {
  color: #f3a229;
  font-size: 17px;
}

.dialogflow-mark {
  color: #f58c22;
  font-size: 16px;
}


/* =========================================================
   MORE TOOLS
========================================================= */

.tourism-more-tools {
  margin: 4px 0 7px;

  color: #11227c;

  font-size: 9px;
  font-weight: 700;

  text-align: center;
}


/* =========================================================
   SKILLS CONTENT
========================================================= */

.tourism-skills-content {
  position: relative;

  min-height: 187px;

  display: flex;
  align-items: center;

  padding: 2px 12px 8px;

  box-sizing: border-box;
}


/* =========================================================
   SKILLS GRID
========================================================= */

.tourism-skills-grid {
  width: calc(100% - 160px);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 7px 18px;

  align-self: center;
}

.tourism-skill-column {
  display: flex;
  flex-direction: column;

  gap: 8px;

  min-width: 0;
}


/* =========================================================
   SKILL ITEM
========================================================= */

.tourism-skill {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;

  color: #202d70;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.3;

  white-space: nowrap;
}


/* =========================================================
   CHECK
========================================================= */

.tourism-check {
  width: 14px;
  height: 14px;

  min-width: 14px;

  border-radius: 50%;

  background: #7132ad;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 8px;
  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   TRAVEL VISUAL
========================================================= */

.tourism-travel-visual {
  position: absolute;

  right: 7px;
  bottom: 1px;

  width: 155px;
  height: 150px;

  pointer-events: none;
}


/* =========================================================
   SUITCASES
========================================================= */

.travel-suitcase {
  position: absolute;

  border: 3px solid #28325c;

  background: #242c63;

  border-radius: 7px;

  box-sizing: border-box;

  box-shadow:
    inset -7px 0 0 rgba(255, 255, 255, .05),
    0 2px 4px rgba(0, 0, 0, .08);
}

.suitcase-back {
  width: 55px;
  height: 70px;

  right: 48px;
  bottom: 12px;

  transform: rotate(-2deg);
}

.suitcase-front {
  width: 57px;
  height: 76px;

  right: 12px;
  bottom: 8px;

  transform: rotate(2deg);
}


/* suitcase handles */

.suitcase-handle {
  position: absolute;

  width: 22px;
  height: 13px;

  left: 14px;
  top: -16px;

  border: 3px solid #28325c;
  border-bottom: 0;

  border-radius: 8px 8px 0 0;

  box-sizing: border-box;
}


/* suitcase detail */

.suitcase-front::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 6px;

  left: 9px;
  top: 9px;

  border-radius: 50%;

  background: #d7a92e;
}

.suitcase-lock {
  position: absolute;

  width: 9px;
  height: 11px;

  right: 9px;
  top: 30px;

  border-radius: 2px;

  background: #e2a92b;
}


/* =========================================================
   HAT
========================================================= */

.travel-hat {
  position: absolute;

  width: 74px;
  height: 44px;

  right: 4px;
  top: 2px;

  transform: rotate(-8deg);
}

.hat-top {
  position: absolute;

  width: 48px;
  height: 29px;

  left: 13px;
  top: 0;

  border-radius: 50% 50% 35% 35%;

  background: #d7b07c;

  box-shadow: inset 0 -5px 0 rgba(90, 60, 30, .08);
}

.hat-band {
  position: absolute;

  width: 55px;
  height: 8px;

  left: 9px;
  top: 22px;

  border-radius: 50%;

  background: #714b34;
}

.travel-hat::after {
  content: "";

  position: absolute;

  width: 73px;
  height: 13px;

  left: 0;
  top: 28px;

  border-radius: 50%;

  background: #caa26f;
}


/* =========================================================
   PLANT
========================================================= */

.travel-plant {
  position: absolute;

  width: 63px;
  height: 85px;

  left: 0;
  bottom: 0;
}

.plant-stem {
  position: absolute;

  width: 4px;
  height: 55px;

  left: 30px;
  bottom: 20px;

  background: #51854e;

  transform: rotate(-4deg);
}


/* Leaves */

.leaf {
  position: absolute;

  width: 24px;
  height: 14px;

  background: #5f9753;

  border-radius: 100% 0 100% 0;
}

.leaf-1 {
  left: 4px;
  bottom: 47px;

  transform: rotate(-35deg);
}

.leaf-2 {
  left: 30px;
  bottom: 56px;

  transform: rotate(25deg);
}

.leaf-3 {
  left: 0;
  bottom: 30px;

  transform: rotate(-55deg);
}

.leaf-4 {
  left: 32px;
  bottom: 36px;

  transform: rotate(40deg);
}


/* Pot */

.plant-pot {
  position: absolute;

  width: 40px;
  height: 25px;

  left: 11px;
  bottom: 0;

  background: #74634c;

  clip-path: polygon(8% 0,
      92% 0,
      80% 100%,
      20% 100%);

  border-radius: 3px;
}


/* =========================================================
   COURSE HEADING
========================================================= */

.tourism-course-heading {
  width: 100%;
  max-width: 1400px;

  margin: 12px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 15px;
}

.tourism-course-heading h2 {
  margin: 0;

  color: #0b1d92;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}

.tourism-course-heading span {
  width: 34px;
  height: 2px;

  flex: 0 0 34px;

  background: #d62cd8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .tourism-tools-wrapper {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 800px) {

  .tourism-tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tourism-skills-content {
    min-height: auto;
  }

  .tourism-skills-grid {
    width: 100%;
  }

  .tourism-travel-visual {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .tourism-tools-section {
    padding: 10px;
  }

  .tourism-tools-panel>h2,
  .tourism-skills-panel>h2 {
    font-size: 18px;
  }

  .tourism-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .tourism-tool {
    height: 38px;

    font-size: 10px;
  }

  .tourism-skills-grid {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .tourism-skill {
    font-size: 10px;

    white-space: normal;
  }

  .tourism-course-heading {
    gap: 8px;
  }

  .tourism-course-heading h2 {
    font-size: 17px;
  }

  .tourism-course-heading span {
    width: 20px;
    flex-basis: 20px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .tourism-tool-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tourism-more-tools {
    font-size: 8px;
  }

}



/* =========================================================
   SCIENTIFIC RESEARCH + EMERGING TECHNOLOGIES
========================================================= */

.scientific-ai-section {
  width: 100%;
  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.scientific-ai-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.scientific-ai-heading {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-bottom: 9px;
}

.scientific-ai-heading h2 {
  margin: 0;

  color: #091b91;

  font-size: 21px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;

  white-space: nowrap;
}

.scientific-ai-heading>span {
  width: 34px;
  height: 2px;

  flex: 0 0 34px;

  background: #c928e1;
}


/* =========================================================
   CARDS GRID
========================================================= */

.scientific-ai-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 14px;

  align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.scientific-ai-card {
  min-width: 0;
  min-height: 211px;

  padding: 12px 13px 12px;

  background: #fff;

  border: 1px solid #e3e8f2;
  border-radius: 11px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  box-shadow: 0 2px 7px rgba(25, 45, 100, .035);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.scientific-ai-card:hover {
  transform: translateY(-3px);

  box-shadow: 0 8px 18px rgba(30, 50, 110, .09);
}


/* =========================================================
   ICON
========================================================= */

.scientific-icon {
  width: 57px;
  height: 57px;

  margin-bottom: 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.scientific-icon svg {
  width: 51px;
  height: 51px;

  display: block;
}


/* =========================================================
   ICON COLORS
========================================================= */

.icon-blue {
  color: #0969ca;
}

.icon-royal {
  color: #1458db;
}

.icon-teal {
  color: #087c9b;
}

.icon-purple {
  color: #7220b8;
}

.icon-green {
  color: #348d51;
}


/* =========================================================
   CARD TITLE
========================================================= */

.scientific-ai-card h3 {
  min-height: 39px;

  margin: 0 0 8px;

  color: #0d1e82;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.32;

  text-align: center;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.scientific-ai-card p {
  max-width: 205px;

  margin: 0;

  color: #27356f;

  font-size: 11.5px;
  font-weight: 500;

  line-height: 1.55;

  text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .scientific-ai-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
  }

  .scientific-ai-card {
    min-height: 205px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .scientific-ai-section {
    padding: 10px 12px 20px;
  }

  .scientific-ai-heading {
    gap: 8px;

    margin-bottom: 12px;
  }

  .scientific-ai-heading h2 {
    font-size: 17px;

    white-space: normal;
  }

  .scientific-ai-heading>span {
    width: 20px;
    flex-basis: 20px;
  }

  .scientific-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .scientific-ai-card {
    min-height: 205px;

    padding: 12px 8px;
  }

  .scientific-icon {
    width: 48px;
    height: 48px;
  }

  .scientific-icon svg {
    width: 43px;
    height: 43px;
  }

  .scientific-ai-card h3 {
    min-height: 35px;

    font-size: 12.5px;
  }

  .scientific-ai-card p {
    font-size: 10.5px;

    line-height: 1.5;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .scientific-ai-grid {
    grid-template-columns: 1fr;
  }

  .scientific-ai-card {
    min-height: auto;

    padding: 17px 14px;
  }

  .scientific-ai-card p {
    max-width: 290px;
  }

}





/* =========================================================
   SCIENTIFIC FUTURE + SALARY SECTION
========================================================= */

.sci-future-section {
  width: 100%;
  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.sci-future-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   PANELS
========================================================= */

.sci-future-panel,
.sci-salary-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e3e8f2;
  border-radius: 11px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}


/* =========================================================
   HEADINGS
========================================================= */

.sci-future-panel>h2,
.sci-salary-panel>h2 {
  margin: 8px 8px 0;

  color: #071b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}

.sci-future-panel>h4,
.sci-salary-panel>h4 {
  margin: 6px 0 8px;

  color: #10238c;

  font-size: 12.5px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   TIMELINE
========================================================= */

.sci-future-timeline {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  padding: 0 14px;

  box-sizing: border-box;
}

.sci-future-stage {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================================
   STAGE ICON
========================================================= */

.sci-stage-icon {
  width: 45px;
  height: 45px;

  margin-bottom: 5px;

  border-radius: 50%;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  z-index: 2;
}

.sci-stage-icon svg {
  width: 29px;
  height: 29px;
}


/* Colors */

.sci-stage-green {
  background: #087653;
}

.sci-stage-blue {
  background: #234ec4;
}

.sci-stage-orange {
  background: #ff6900;
}

.sci-stage-purple {
  background: #8b168b;
}

.sci-stage-teal {
  background: #126b84;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.sci-future-stage:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 22px;
  left: calc(50% + 22px);

  width: calc(100% - 44px);

  height: 2px;

  background: #233fc0;

  z-index: 0;
}


/* Arrow */

.sci-stage-arrow {
  position: absolute;

  top: 8px;
  right: -2px;

  color: #213cb5;

  font-size: 25px;
  font-weight: 700;

  line-height: 1;

  z-index: 3;
}


/* =========================================================
   STAGE TEXT
========================================================= */

.sci-future-stage>strong {
  margin-bottom: 3px;

  color: #12257d;

  font-size: 11.5px;
  font-weight: 700;

  line-height: 1.2;
}

.sci-future-stage h5 {
  min-height: 31px;

  margin: 0 0 5px;

  color: #142474;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.3;
}

.sci-future-stage p {
  margin: 0;

  color: #29376f;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================================
   MARKET BOX
========================================================= */

.sci-market-box {
  margin: 13px 13px 0;

  min-height: 79px;

  padding: 7px 9px;

  border-radius: 10px;

  background: #f7f6fa;

  display: grid;

  grid-template-columns:
    62px 1.25fr 1px .9fr 1px 1.35fr;

  align-items: center;

  box-sizing: border-box;
}


/* Globe */

.sci-market-globe {
  width: 52px;
  height: 52px;

  color: #2c32b6;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sci-market-globe svg {
  width: 49px;
  height: 49px;
}


/* Stat */

.sci-market-stat {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.sci-market-stat>span:first-child {
  margin-bottom: 2px;

  color: #72249e;

  font-size: 8.2px;
  font-weight: 700;

  line-height: 1.2;
}

.sci-market-stat strong {
  color: #6515a0;

  font-size: 21px;
  font-weight: 700;

  line-height: 1.1;
}

.sci-market-stat small {
  color: #17266f;

  font-size: 8.3px;
  font-weight: 600;
}


/* Divider */

.sci-market-divider {
  width: 2px;
  height: 51px;

  background: #c9b6dd;

  justify-self: center;
}


/* CAGR */

.sci-cagr {
  align-items: center;

  text-align: center;
}

.sci-cagr>span:first-child {
  color: #17256f;
}

.sci-cagr strong {
  font-size: 21px;
}


/* Last stat */

.sci-market-last {
  align-items: center;

  text-align: center;
}

.sci-market-last strong {
  color: #16815d;

  font-size: 21px;
}

.sci-market-last span {
  color: #29366f;

  font-size: 8.2px;
  font-weight: 600;

  line-height: 1.35;

  text-align: center;
}


/* Source */

.sci-market-source {
  margin: 4px 13px 5px;

  color: #26336d;

  font-size: 7.3px;
  font-weight: 500;

  text-align: right;
}


/* =========================================================
   SALARY GRID
========================================================= */

.sci-salary-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

  padding: 11px 13px 0;

  box-sizing: border-box;
}


/* =========================================================
   SALARY CARD
========================================================= */

.sci-salary-card {
  min-width: 0;
  min-height: 158px;

  padding: 15px 5px 9px;

  border: 2px solid;

  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  box-sizing: border-box;

  transition: transform .2s ease, box-shadow .2s ease;
}

.sci-salary-card:hover {
  transform: translateY(-3px);

  box-shadow: 0 6px 15px rgba(30, 50, 100, .08);
}


/* Border colors */

.salary-green {
  border-color: #d4e6df;
}

.salary-blue {
  border-color: #d5e2fb;
}

.salary-orange {
  border-color: #f5ded1;
}

.salary-purple {
  border-color: #e4d9ec;
}


/* Amount */

.sci-salary-card>strong {
  font-size: 20px;
  font-weight: 700;

  line-height: 1.15;
}

.salary-green>strong,
.salary-green>span {
  color: #087658;
}

.salary-blue>strong,
.salary-blue>span {
  color: #155bd2;
}

.salary-orange>strong,
.salary-orange>span {
  color: #ef5b08;
}

.salary-purple>strong,
.salary-purple>span {
  color: #73149f;
}


/* LPA */

.sci-salary-card>span {
  margin-top: 4px;

  font-size: 13px;
  font-weight: 700;
}


/* Divider */

.sci-salary-card>div {
  width: 80%;
  height: 1px;

  margin: 15px 0 13px;

  background: #dce1e9;
}


/* Salary title */

.sci-salary-card h5 {
  margin: 0 0 7px;

  color: #142473;

  font-size: 11.5px;
  font-weight: 700;

  line-height: 1.25;
}

.sci-salary-card p {
  margin: 0;

  color: #17256f;

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.3;
}


/* =========================================================
   SALARY NOTE
========================================================= */

.sci-salary-note {
  margin: 20px 13px 11px;

  min-height: 61px;

  padding: 8px 11px;

  border-radius: 10px;

  background: #f7f6fa;

  display: flex;
  align-items: center;

  gap: 11px;

  box-sizing: border-box;
}


/* Star */

.sci-star {
  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  border-radius: 50%;

  background: #fff0dc;

  color: #f27d00;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sci-star svg {
  width: 28px;
  height: 28px;
}


/* Note */

.sci-salary-note strong {
  display: block;

  color: #17236e;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.35;
}

.sci-salary-note p {
  margin: 4px 0 0;

  color: #122486;

  font-size: 9px;
  font-weight: 700;

  line-height: 1.3;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .sci-future-wrapper {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .sci-future-section {
    padding: 10px;
  }

  .sci-future-panel>h2,
  .sci-salary-panel>h2 {
    font-size: 18px;
  }

  .sci-future-timeline {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 10px 20px;
  }

  .sci-future-stage:not(:last-child)::after,
  .sci-stage-arrow {
    display: none;
  }

  .sci-market-box {
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    padding: 13px;
  }

  .sci-market-globe,
  .sci-market-divider {
    display: none;
  }

  .sci-market-stat {
    align-items: center;

    text-align: center;
  }

  .sci-salary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding: 10px;
  }

  .sci-salary-card {
    min-height: 155px;
  }

  .sci-salary-note {
    margin: 15px 10px 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .sci-salary-grid {
    grid-template-columns: 1fr;
  }

  .sci-market-box {
    grid-template-columns: 1fr;
  }

  .sci-market-source {
    text-align: center;
  }

}


/* =========================================================
   SCIENTIFIC INDUSTRIES + CAREER PROFILES
========================================================= */

.sci-industry-career-section {
  width: 100%;
  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.sci-industry-career-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.sci-industry-panel,
.sci-career-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e3e8f2;
  border-radius: 12px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}


/* =========================================================
   HEADINGS
========================================================= */

.sci-industry-panel>h2,
.sci-career-panel>h2 {
  margin: 8px 0 10px;

  color: #091b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   INDUSTRIES GRID
========================================================= */

.sci-industry-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  row-gap: 17px;

  padding: 2px 14px 12px;

  box-sizing: border-box;
}


/* =========================================================
   INDUSTRY ITEM
========================================================= */

.sci-industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transition: transform .2s ease;
}

.sci-industry-item:hover {
  transform: translateY(-2px);
}


/* =========================================================
   INDUSTRY ICON
========================================================= */

.sci-industry-icon {
  width: 47px;
  height: 47px;

  margin-bottom: 6px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.sci-industry-icon svg {
  width: 29px;
  height: 29px;

  display: block;
}


/* =========================================================
   INDUSTRY COLORS
========================================================= */

.sci-industry-icon.sci-blue {
  color: #1665ca;
  background: #edf4ff;
}

.sci-industry-icon.sci-teal {
  color: #288c91;
  background: #edf8f8;
}

.sci-industry-icon.sci-green {
  color: #3d9156;
  background: #eef8f0;
}

.sci-industry-icon.sci-purple {
  color: #7625ad;
  background: #f5effb;
}

.sci-industry-icon.sci-pink {
  color: #c92d85;
  background: #fff0f7;
}


/* =========================================================
   INDUSTRY TITLE
========================================================= */

.sci-industry-item h3 {
  margin: 0;

  color: #101f79;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.4;

  text-align: center;
}


/* =========================================================
   CAREER GRID
========================================================= */

.sci-career-grid {
  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 13px;

  padding: 1px 12px 12px;

  box-sizing: border-box;
}

.sci-career-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


/* =========================================================
   CAREER ITEM
========================================================= */

.sci-career-item {
  min-width: 0;

  display: grid;

  grid-template-columns: 37px minmax(0, 1fr);

  gap: 7px;

  align-items: start;
}


/* =========================================================
   CAREER ICON
========================================================= */

.sci-career-icon {
  width: 36px;
  height: 36px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.sci-career-icon svg {
  width: 22px;
  height: 22px;

  display: block;
}


/* Career colors */

.sci-career-icon.blue {
  color: #1764cc;
  background: #edf4ff;
}

.sci-career-icon.green {
  color: #398d50;
  background: #eef8f0;
}

.sci-career-icon.purple {
  color: #7024a7;
  background: #f5effb;
}

.sci-career-icon.orange {
  color: #ef6b21;
  background: #fff1e9;
}

.sci-career-icon.pink {
  color: #cf2d83;
  background: #fff0f7;
}


/* =========================================================
   CAREER TEXT
========================================================= */

.sci-career-item h3 {
  margin: 1px 0 2px;

  color: #122276;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.25;
}

.sci-career-item p {
  margin: 0;

  color: #29366f;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.35;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .sci-industry-career-wrapper {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .sci-industry-career-section {
    padding: 10px;
  }

  .sci-industry-panel>h2,
  .sci-career-panel>h2 {
    font-size: 18px;
  }

  .sci-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px 10px;

    padding-left: 10px;
    padding-right: 10px;
  }

  .sci-career-grid {
    grid-template-columns: 1fr;

    gap: 13px;
  }

  .sci-career-column {
    gap: 11px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .sci-industry-item h3 {
    font-size: 10.5px;
  }

  .sci-career-item h3 {
    font-size: 10.5px;
  }

  .sci-career-item p {
    font-size: 9px;
  }

}


/* =========================================================
   RESEARCH TOOLS + SKILLS SECTION
========================================================= */

.research-tools-section {
  width: 100%;
  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.research-tools-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   PANELS
========================================================= */

.research-tools-panel,
.research-skills-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e3e8f2;
  border-radius: 12px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}


/* =========================================================
   HEADINGS
========================================================= */

.research-tools-panel>h2,
.research-skills-panel>h2 {
  margin: 8px 0 9px;

  color: #091b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   TOOLS GRID
========================================================= */

.research-tool-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 7px 8px;

  padding: 2px 14px 3px;

  box-sizing: border-box;
}


/* =========================================================
   TOOL CARD
========================================================= */

.research-tool {
  min-width: 0;
  height: 37px;

  padding: 4px 7px;

  border: 1px solid #e3e8f0;
  border-radius: 7px;

  background: #fff;

  display: flex;
  align-items: center;

  gap: 7px;

  box-sizing: border-box;

  color: #18266e;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  transition: transform .2s ease, box-shadow .2s ease;
}

.research-tool:hover {
  transform: translateY(-2px);

  box-shadow: 0 4px 10px rgba(30, 50, 100, .08);
}


/* =========================================================
   TOOL ICON
========================================================= */

.research-tool-icon {
  width: 22px;
  height: 22px;

  flex: 0 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 800;

  line-height: 1;
}


/* Tool colors */

.research-tool-icon.python {
  color: #3776a8;
}

.research-tool-icon.tensorflow {
  color: #ed7617;
  font-size: 17px;
}

.research-tool-icon.pytorch {
  color: #ee4d3d;
}

.research-tool-icon.jupyter {
  color: #ed6c19;
  font-size: 19px;
}

.research-tool-icon.colab {
  color: #e76d1c;
  font-size: 9px;
}

.research-tool-icon.sklearn {
  color: #28709f;
}

.research-tool-icon.hugging {
  color: #f2a327;
  font-size: 16px;
}

.research-tool-icon.openai {
  color: #2870b0;

  border: 1.5px solid #2870b0;
  border-radius: 50%;
}

.research-tool-icon.kaggle {
  color: #1671c7;
  font-size: 18px;
}

.research-tool-icon.matlab {
  color: #e65327;
  font-size: 18px;
}

.research-tool-icon.rlang {
  color: #2767a5;

  border: 1.5px solid #2767a5;
  border-radius: 50%;

  font-size: 12px;
}

.research-tool-icon.github {
  color: #192d53;
  font-size: 13px;
}

.research-tool-icon.dalle {
  color: #394e99;
  font-size: 16px;
}

.research-tool-icon.chatgpt {
  color: #1d68d1;

  border: 1.5px solid #1d68d1;
  border-radius: 50%;
}

.research-tool-icon.alphafold {
  color: #263bd0;
  font-size: 17px;
}


/* =========================================================
   MORE TOOLS
========================================================= */

.research-more-tools {
  margin: 4px 0 7px;

  color: #11227c;

  font-size: 9px;
  font-weight: 700;

  text-align: center;
}


/* =========================================================
   SKILLS CONTENT
========================================================= */

.research-skills-content {
  position: relative;

  min-height: 174px;

  display: flex;
  align-items: center;

  padding: 2px 12px 8px;

  box-sizing: border-box;
}


/* =========================================================
   SKILLS GRID
========================================================= */

.research-skills-grid {
  width: calc(100% - 125px);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 7px 20px;

  align-self: center;
}

.research-skill-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   SKILL
========================================================= */

.research-skill {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;
}

.research-skill>span {
  width: 14px;
  height: 14px;

  min-width: 14px;

  border-radius: 50%;

  background: #0b55b9;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 8px;
  font-weight: 900;

  line-height: 1;
}

.research-skill p {
  margin: 0;

  color: #17266f;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.3;

  white-space: nowrap;
}


/* =========================================================
   DNA ILLUSTRATION
========================================================= */

.research-dna {
  position: absolute;

  right: -1px;
  bottom: -2px;

  width: 125px;
  height: 165px;

  overflow: hidden;

  pointer-events: none;
}


/* DNA strands */

.dna-strand {
  position: absolute;

  width: 23px;
  height: 137px;

  top: 3px;

  border: 4px solid #2476d8;

  border-radius: 50%;

  box-sizing: border-box;
}

.dna-left {
  left: 32px;

  transform: rotate(16deg);
}

.dna-right {
  right: 27px;

  transform: rotate(-16deg);

  border-color: #21a8c2;
}


/* DNA center fill */

.dna-rung {
  position: absolute;

  width: 70px;
  height: 3px;

  left: 27px;

  background: #3b7ed8;

  border-radius: 3px;

  transform-origin: center;

  opacity: .9;
}

.rung-1 {
  top: 18px;
  transform: rotate(17deg);
}

.rung-2 {
  top: 38px;
  transform: rotate(-17deg);
}

.rung-3 {
  top: 58px;
  transform: rotate(17deg);
}

.rung-4 {
  top: 78px;
  transform: rotate(-17deg);
}

.rung-5 {
  top: 98px;
  transform: rotate(17deg);
}

.rung-6 {
  top: 118px;
  transform: rotate(-17deg);
}

.rung-7 {
  top: 138px;
  transform: rotate(17deg);
}


/* =========================================================
   FLASK
========================================================= */

.dna-flask {
  position: absolute;

  left: 1px;
  bottom: 1px;

  width: 43px;
  height: 63px;
}

.flask-neck {
  position: absolute;

  width: 13px;
  height: 25px;

  left: 15px;
  top: 0;

  border: 3px solid #2675cb;

  border-bottom: 0;

  box-sizing: border-box;
}

.flask-body {
  position: absolute;

  width: 41px;
  height: 38px;

  left: 1px;
  bottom: 0;

  border: 3px solid #2675cb;

  border-radius: 6px 6px 18px 18px;

  transform: rotate(0deg);

  box-sizing: border-box;
}

.flask-liquid {
  position: absolute;

  width: 33px;
  height: 19px;

  left: 5px;
  bottom: 4px;

  background: #20a4c1;

  border-radius: 3px 3px 14px 14px;

  opacity: .8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .research-tools-wrapper {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   SMALL LAPTOP / TABLET
========================================================= */

@media (max-width: 800px) {

  .research-tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .research-skills-content {
    min-height: auto;
  }

  .research-skills-grid {
    width: 100%;
  }

  .research-dna {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .research-tools-section {
    padding: 10px;
  }

  .research-tools-panel>h2,
  .research-skills-panel>h2 {
    font-size: 18px;
  }

  .research-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .research-tool {
    font-size: 10px;
  }

  .research-skills-grid {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .research-skill p {
    font-size: 10px;

    white-space: normal;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .research-tool-grid {
    grid-template-columns: 1fr 1fr;
  }

  .research-more-tools {
    font-size: 8px;
  }

}



/* =========================================================
   PROGRAM HIGHLIGHTS SECTION
========================================================= */

.program-highlights-section {
  width: 100%;

  background: #fff;

  font-family: "Inter", Arial, sans-serif;

  box-sizing: border-box;
}


/* =========================================================
   TOP HIGHLIGHTS
========================================================= */

.program-highlights-top {
  width: 100%;

  display: grid;

  grid-template-columns: 155px minmax(0, 1fr);

  align-items: center;

  min-height: 64px;

  padding: 3px 20px;

  box-sizing: border-box;

  border-top: 1px solid #e5e8f2;
  border-bottom: 1px solid #e5e8f2;

  background: #fff;
}


/* =========================================================
   TITLE
========================================================= */

.program-highlight-title {
  align-self: start;

  padding-top: 2px;
}

.program-highlight-title h2 {
  margin: 0;

  color: #101d76;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.2;
}


/* =========================================================
   HIGHLIGHT ITEMS
========================================================= */

.program-highlight-items {
  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  align-items: center;
}

.program-highlight-item {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 2px 8px;

  box-sizing: border-box;
}


/* =========================================================
   HIGHLIGHT ICON
========================================================= */

.program-highlight-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.program-highlight-icon svg {
  width: 31px;
  height: 31px;

  display: block;
}

.program-highlight-icon.blue {
  color: #1929d5;
}

.program-highlight-icon.pink {
  color: #e94274;
}

.program-highlight-icon.orange {
  color: #ff6124;
}

.program-highlight-icon.purple {
  color: #7226bd;
}


/* =========================================================
   HIGHLIGHT TEXT
========================================================= */

.program-highlight-item h3 {
  margin: 0 0 1px;

  color: #112477;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.2;
}

.program-highlight-item p {
  margin: 0;

  color: #162b80;

  font-size: 9px;
  font-weight: 600;

  line-height: 1.2;
}


/* =========================================================
   STATS BAR
========================================================= */

.program-stats-bar {
  width: 100%;

  min-height: 53px;

  padding: 4px 18px;

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    1fr 1px 1fr 1px 1fr 1px 1fr 1px 1.2fr;

  align-items: center;

  background:
    linear-gradient(100deg,
      #153c99 0%,
      #1238a8 48%,
      #2b17c8 100%);
}


/* =========================================================
   STAT
========================================================= */

.program-stat {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 1px 10px;

  box-sizing: border-box;
}

.program-stat-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

.program-stat-icon svg {
  width: 32px;
  height: 32px;

  display: block;
}


/* =========================================================
   STAT TEXT
========================================================= */

.program-stat-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.program-stat-text strong {
  margin: 0;

  color: #fff;

  font-size: 16px;
  font-weight: 700;

  line-height: 1.1;
}

.program-stat-text span {
  margin-top: 2px;

  color: rgba(255, 255, 255, .9);

  font-size: 9px;
  font-weight: 500;

  line-height: 1.2;
}


/* =========================================================
   DIVIDERS
========================================================= */

.program-stat-divider {
  width: 1px;
  height: 31px;

  background: rgba(255, 255, 255, .18);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .program-highlights-top {
    grid-template-columns: 120px 1fr;

    padding-left: 12px;
    padding-right: 12px;
  }

  .program-highlight-items {
    grid-template-columns: repeat(3, 1fr);

    row-gap: 5px;
  }

  .program-highlight-item {
    justify-content: flex-start;
  }

  .program-stat-text strong {
    font-size: 14px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .program-highlights-top {
    grid-template-columns: 1fr;

    padding: 8px 12px;
  }

  .program-highlight-title {
    padding: 0 0 7px;
  }

  .program-highlight-items {
    grid-template-columns: repeat(2, 1fr);

    gap: 8px 4px;
  }

  .program-highlight-item {
    justify-content: flex-start;

    padding: 3px 5px;
  }

  .program-highlight-item h3 {
    font-size: 9.5px;
  }

  .program-highlight-item p {
    font-size: 8.5px;
  }

  .program-highlight-icon {
    width: 29px;
    height: 29px;

    flex-basis: 29px;
  }

  .program-highlight-icon svg {
    width: 27px;
    height: 27px;
  }


  /* Stats */

  .program-stats-bar {
    grid-template-columns: 1fr 1fr;

    gap: 5px;

    padding: 8px 10px;
  }

  .program-stat-divider {
    display: none;
  }

  .program-stat {
    justify-content: flex-start;

    padding: 4px 5px;
  }

  .program-stat-icon {
    width: 29px;
    height: 29px;

    flex-basis: 29px;
  }

  .program-stat-icon svg {
    width: 27px;
    height: 27px;
  }

  .program-stat-text strong {
    font-size: 13px;
  }

  .program-stat-text span {
    font-size: 8px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .program-highlight-items {
    grid-template-columns: 1fr;
  }

  .program-highlight-item {
    padding: 4px 8px;
  }

  .program-stats-bar {
    grid-template-columns: 1fr;
  }

  .program-stat {
    justify-content: center;
  }

}


/* =========================================================
   WHY CHOOSE AI FOR CYBER SECURITY
========================================================= */

.cyber-why-section {
  width: 100%;

  padding: 8px 8px 18px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.cyber-why-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.cyber-why-heading {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  margin-bottom: 8px;
}

.cyber-why-heading h2 {
  margin: 0;

  color: #071b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;

  white-space: nowrap;
}

.cyber-why-heading>span {
  width: 34px;
  height: 2px;

  flex: 0 0 34px;

  background: #7533d7;
}


/* =========================================================
   GRID
========================================================= */

.cyber-why-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 8px;

  box-sizing: border-box;
}


/* =========================================================
   CARD
========================================================= */

.cyber-why-card {
  min-width: 0;
  min-height: 181px;

  padding: 11px 13px 12px;

  background: #fff;

  border: 1px solid #e3e8f1;

  border-radius: 9px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  box-shadow: 0 2px 6px rgba(24, 44, 100, .035);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.cyber-why-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 7px 16px rgba(35, 55, 120, .09);
}


/* =========================================================
   ICON
========================================================= */

.cyber-why-icon {
  width: 57px;
  height: 57px;

  margin-bottom: 5px;

  color: #10298d;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.cyber-why-icon svg {
  width: 51px;
  height: 51px;

  display: block;
}


/* =========================================================
   TITLE
========================================================= */

.cyber-why-card h3 {
  min-height: 18px;

  margin: 0 0 8px;

  color: #0b1e81;

  font-size: 12.5px;
  font-weight: 700;

  line-height: 1.3;

  text-align: center;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.cyber-why-card p {
  max-width: 175px;

  margin: 0;

  color: #29366f;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.55;

  text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .cyber-why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .cyber-why-section {
    padding: 10px 12px 20px;
  }

  .cyber-why-heading {
    gap: 8px;

    margin-bottom: 12px;
  }

  .cyber-why-heading h2 {
    font-size: 17px;

    white-space: normal;
  }

  .cyber-why-heading>span {
    width: 20px;

    flex-basis: 20px;
  }

  .cyber-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .cyber-why-card {
    min-height: 195px;

    padding: 12px 8px;
  }

  .cyber-why-icon {
    width: 49px;
    height: 49px;
  }

  .cyber-why-icon svg {
    width: 44px;
    height: 44px;
  }

  .cyber-why-card h3 {
    font-size: 12px;
  }

  .cyber-why-card p {
    font-size: 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .cyber-why-grid {
    grid-template-columns: 1fr;
  }

  .cyber-why-card {
    min-height: auto;

    padding: 15px 14px;
  }

  .cyber-why-card p {
    max-width: 290px;
  }

}



/* =========================================================
   CYBER SECURITY FUTURE + SALARY
========================================================= */

.cyber-future-section {
  width: 100%;

  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.cyber-future-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   PANELS
========================================================= */

.cyber-future-panel,
.cyber-salary-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e3e8f2;
  border-radius: 11px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}


/* =========================================================
   HEADINGS
========================================================= */

.cyber-future-panel>h2,
.cyber-salary-panel>h2 {
  margin: 8px 8px 0;

  color: #071b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}

.cyber-future-panel>h4,
.cyber-salary-panel>h4 {
  margin: 6px 0 8px;

  color: #142681;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   TIMELINE
========================================================= */

.cyber-future-timeline {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  padding: 0 13px;

  box-sizing: border-box;
}

.cyber-future-stage {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* =========================================================
   ICON
========================================================= */

.cyber-stage-icon {
  width: 46px;
  height: 46px;

  margin-bottom: 5px;

  border-radius: 50%;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  z-index: 2;
}

.cyber-stage-icon svg {
  width: 29px;
  height: 29px;
}


/* Colors */

.cyber-green {
  background: #4c0d8f;
}

.cyber-blue {
  background: #173da9;
}

.cyber-red {
  background: #ed3b31;
}

.cyber-purple {
  background: #7311a0;
}

.cyber-teal {
  background: #156879;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.cyber-future-stage:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 22px;
  left: calc(50% + 23px);

  width: calc(100% - 46px);

  height: 2px;

  background: #173cae;

  z-index: 0;
}


/* =========================================================
   ARROW
========================================================= */

.cyber-future-stage:not(:last-child)::before {
  content: "›";

  position: absolute;

  top: 8px;
  right: -2px;

  color: #193ca9;

  font-size: 25px;
  font-weight: 700;

  line-height: 1;

  z-index: 3;
}


/* =========================================================
   STAGE TEXT
========================================================= */

.cyber-future-stage>strong {
  margin-bottom: 3px;

  color: #142574;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.2;
}

.cyber-future-stage h5 {
  min-height: 30px;

  margin: 0 0 5px;

  color: #122477;

  font-size: 9.8px;
  font-weight: 700;

  line-height: 1.3;
}

.cyber-future-stage p {
  margin: 0;

  color: #29366e;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* =========================================================
   MARKET BOX
========================================================= */

.cyber-market-box {
  margin: 13px 13px 0;

  min-height: 78px;

  padding: 7px 9px;

  border-radius: 10px;

  background: #f7f6fa;

  display: grid;

  grid-template-columns:
    57px 1.25fr 1px .9fr 1px 1.35fr;

  align-items: center;

  box-sizing: border-box;
}


/* Market Icon */

.cyber-market-icon {
  width: 50px;
  height: 50px;

  color: #6920b0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-market-icon svg {
  width: 48px;
  height: 48px;
}


/* Stats */

.cyber-market-stat {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.cyber-market-stat>span:first-child {
  margin-bottom: 2px;

  color: #6e209c;

  font-size: 8px;
  font-weight: 700;

  line-height: 1.2;
}

.cyber-market-stat strong {
  color: #6412a1;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.1;
}

.cyber-market-stat small {
  color: #17266f;

  font-size: 8px;
  font-weight: 600;
}


/* Divider */

.cyber-market-divider {
  width: 2px;
  height: 50px;

  background: #cdb9dd;

  justify-self: center;
}


/* CAGR */

.cyber-cagr {
  align-items: center;

  text-align: center;
}

.cyber-cagr>span:first-child {
  color: #17256f;
}


/* Last stat */

.cyber-market-last {
  align-items: center;

  text-align: center;
}

.cyber-market-last strong {
  color: #16815d;

  font-size: 20px;
}

.cyber-market-last span {
  color: #29366e;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.35;

  text-align: center;
}


/* Source */

.cyber-market-source {
  margin: 4px 13px 5px;

  color: #26336d;

  font-size: 7.2px;
  font-weight: 500;

  text-align: right;
}


/* =========================================================
   SALARY GRID
========================================================= */

.cyber-salary-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

  padding: 11px 13px 0;

  box-sizing: border-box;
}


/* =========================================================
   SALARY CARD
========================================================= */

.cyber-salary-card {
  min-width: 0;
  min-height: 181px;

  padding: 18px 5px 9px;

  border: 2px solid;

  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  box-sizing: border-box;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.cyber-salary-card:hover {
  transform: translateY(-3px);

  box-shadow: 0 6px 15px rgba(30, 50, 100, .08);
}


/* Border colors */

.cyber-salary-green {
  border-color: #d5e6df;
}

.cyber-salary-blue {
  border-color: #d5e1fb;
}

.cyber-salary-orange {
  border-color: #f4ded2;
}

.cyber-salary-purple {
  border-color: #e3d8ed;
}


/* Amount */

.cyber-salary-card>strong {
  font-size: 20px;
  font-weight: 700;

  line-height: 1.15;
}

.cyber-salary-green>strong,
.cyber-salary-green>span {
  color: #087658;
}

.cyber-salary-blue>strong,
.cyber-salary-blue>span {
  color: #155bd2;
}

.cyber-salary-orange>strong,
.cyber-salary-orange>span {
  color: #ef5b08;
}

.cyber-salary-purple>strong,
.cyber-salary-purple>span {
  color: #73149f;
}


/* LPA */

.cyber-salary-card>span {
  margin-top: 4px;

  font-size: 13px;
  font-weight: 700;
}


/* Divider */

.cyber-salary-card>div {
  width: 78%;
  height: 1px;

  margin: 16px 0 14px;

  background: #dce1e9;
}


/* Level */

.cyber-salary-card h5 {
  margin: 0 0 7px;

  color: #142473;

  font-size: 11.5px;
  font-weight: 700;

  line-height: 1.25;
}

.cyber-salary-card p {
  margin: 0;

  color: #17256f;

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.3;
}


/* =========================================================
   SALARY NOTE
========================================================= */

.cyber-salary-note {
  margin: 20px 13px 11px;

  min-height: 68px;

  padding: 8px 11px;

  border-radius: 10px;

  background: #f7f6fa;

  display: flex;
  align-items: center;

  gap: 11px;

  box-sizing: border-box;
}


/* Star */

.cyber-salary-star {
  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  border-radius: 50%;

  background: #fff0dc;

  color: #f27d00;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-salary-star svg {
  width: 28px;
  height: 28px;
}


/* Note text */

.cyber-salary-note strong {
  display: block;

  color: #17236e;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.35;
}

.cyber-salary-note p {
  margin: 4px 0 0;

  color: #122486;

  font-size: 9px;
  font-weight: 700;

  line-height: 1.3;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .cyber-future-wrapper {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .cyber-future-section {
    padding: 10px;
  }

  .cyber-future-panel>h2,
  .cyber-salary-panel>h2 {
    font-size: 18px;
  }

  .cyber-future-timeline {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 10px 20px;
  }

  .cyber-future-stage:not(:last-child)::after,
  .cyber-future-stage:not(:last-child)::before {
    display: none;
  }

  .cyber-market-box {
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    padding: 13px;
  }

  .cyber-market-icon,
  .cyber-market-divider {
    display: none;
  }

  .cyber-market-stat {
    align-items: center;

    text-align: center;
  }

  .cyber-salary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding: 10px;
  }

  .cyber-salary-card {
    min-height: 165px;
  }

  .cyber-salary-note {
    margin: 15px 10px 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .cyber-salary-grid {
    grid-template-columns: 1fr;
  }

  .cyber-market-box {
    grid-template-columns: 1fr;
  }

  .cyber-market-source {
    text-align: center;
  }

}


/* =========================================================
   CYBER INDUSTRIES + CAREER PROFILES
========================================================= */

.cyber-industry-career-section {
  width: 100%;
  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.cyber-industry-career-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* =========================================================
   PANELS
========================================================= */

.cyber-industry-panel,
.cyber-career-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e3e8f2;
  border-radius: 11px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}


/* =========================================================
   HEADINGS
========================================================= */

.cyber-industry-panel>h2,
.cyber-career-panel>h2 {
  margin: 9px 0 10px;

  color: #091b91;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   INDUSTRIES GRID
========================================================= */

.cyber-industry-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  row-gap: 16px;

  padding: 1px 14px 13px;

  box-sizing: border-box;
}


/* =========================================================
   INDUSTRY ITEM
========================================================= */

.cyber-industry-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transition: transform .2s ease;
}

.cyber-industry-item:hover {
  transform: translateY(-2px);
}


/* =========================================================
   INDUSTRY ICON
========================================================= */

.cyber-industry-icon {
  width: 47px;
  height: 47px;

  margin-bottom: 6px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.cyber-industry-icon svg {
  width: 31px;
  height: 31px;

  display: block;
}


/* Colors */

.cyber-industry-icon.purple {
  color: #7124b0;
  background: #f5effb;
}

.cyber-industry-icon.blue {
  color: #155ed0;
  background: #edf4ff;
}

.cyber-industry-icon.red {
  color: #e93462;
  background: #fff0f5;
}

.cyber-industry-icon.orange {
  color: #f18a08;
  background: #fff5e7;
}


/* =========================================================
   INDUSTRY TITLE
========================================================= */

.cyber-industry-item h3 {
  margin: 0;

  color: #101f79;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.38;

  text-align: center;
}


/* =========================================================
   CAREER GRID
========================================================= */

.cyber-career-grid {
  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 13px;

  padding: 1px 12px 12px;

  box-sizing: border-box;
}

.cyber-career-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


/* =========================================================
   CAREER ITEM
========================================================= */

.cyber-career-item {
  min-width: 0;

  display: grid;

  grid-template-columns: 37px minmax(0, 1fr);

  gap: 7px;

  align-items: start;
}


/* =========================================================
   CAREER ICON
========================================================= */

.cyber-career-icon {
  width: 36px;
  height: 36px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.cyber-career-icon svg {
  width: 22px;
  height: 22px;

  display: block;
}

.cyber-career-icon.purple {
  color: #7224a9;
  background: #f5effb;
}

.cyber-career-icon.blue {
  color: #1b60c8;
  background: #edf4ff;
}


/* =========================================================
   CAREER TEXT
========================================================= */

.cyber-career-item h3 {
  margin: 1px 0 2px;

  color: #122276;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.25;
}

.cyber-career-item p {
  margin: 0;

  color: #29366f;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.35;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .cyber-industry-career-wrapper {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .cyber-industry-career-section {
    padding: 10px;
  }

  .cyber-industry-panel>h2,
  .cyber-career-panel>h2 {
    font-size: 18px;
  }

  .cyber-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px 10px;

    padding-left: 10px;
    padding-right: 10px;
  }

  .cyber-career-grid {
    grid-template-columns: 1fr;

    gap: 13px;
  }

  .cyber-career-column {
    gap: 11px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .cyber-industry-item h3 {
    font-size: 10.5px;
  }

  .cyber-career-item h3 {
    font-size: 10.5px;
  }

  .cyber-career-item p {
    font-size: 9px;
  }

}



/* =========================================================
   CYBER TOOLS + KEY SKILLS
========================================================= */

.cyber-tools-section {
  width: 100%;

  padding: 8px 8px 20px;

  background: #fff;

  box-sizing: border-box;

  font-family: "Inter", Arial, sans-serif;
}

.cyber-tools-wrapper {
  width: 100%;
  /* max-width: 1400px; */

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1.08fr;

  gap: 10px;
}


/* =========================================================
   PANELS
========================================================= */

.cyber-tools-panel,
.cyber-skills-panel {
  min-width: 0;

  background: #fff;

  border: 1px solid #e2e8f2;

  border-radius: 10px;

  box-sizing: border-box;

  box-shadow: 0 2px 7px rgba(30, 50, 100, .035);
}


/* =========================================================
   HEADINGS
========================================================= */

.cyber-tools-panel>h2,
.cyber-skills-panel>h2 {
  margin: 8px 0 9px;

  color: #081c91;

  font-size: 18px;

  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* =========================================================
   TOOLS GRID
========================================================= */

.cyber-tools-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 6px 7px;

  padding: 1px 10px 3px;

  box-sizing: border-box;
}


/* =========================================================
   TOOL CARD
========================================================= */

.cyber-tool {
  min-width: 0;

  height: 30px;

  padding: 3px 6px;

  border: 1px solid #e2e7ef;

  border-radius: 6px;

  background: #fff;

  display: flex;
  align-items: center;

  gap: 6px;

  box-sizing: border-box;

  color: #17266e;

  font-size: 11px;

  font-weight: 700;

  white-space: nowrap;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.cyber-tool:hover {
  transform: translateY(-2px);

  box-shadow:
    0 4px 10px rgba(20, 50, 110, .09);
}


/* =========================================================
   TOOL ICONS
========================================================= */

.cyber-tool-icon {
  width: 19px;
  height: 19px;

  flex: 0 0 19px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;

  font-weight: 800;

  line-height: 1;
}


/* Individual colors */

.cyber-tool-icon.python {
  color: #2875b6;
}

.cyber-tool-icon.wireshark {
  color: #258ca3;
  font-size: 16px;
}

.cyber-tool-icon.splunk {
  color: #54a52c;
  font-size: 20px;
}

.cyber-tool-icon.kibana {
  color: #d72b71;

  border-left: 3px solid #d72b71;

  font-size: 11px;
}

.cyber-tool-icon.sentinel {
  color: #1267be;

  border: 1px solid #1267be;

  border-radius: 50%;

  font-size: 10px;
}

.cyber-tool-icon.tensorflow {
  color: #ef7415;

  font-size: 15px;
}

.cyber-tool-icon.sklearn {
  color: #2a719e;
}

.cyber-tool-icon.nmap {
  color: #2372a4;

  border: 1px solid #2372a4;

  font-size: 9px;
}

.cyber-tool-icon.metasploit {
  color: #2265ae;

  border: 1px solid #2265ae;

  border-radius: 4px;

  font-size: 10px;
}

.cyber-tool-icon.burp {
  color: #e87319;

  font-size: 16px;
}

.cyber-tool-icon.pandas {
  color: #303e7d;

  font-size: 16px;
}

.cyber-tool-icon.elk {
  color: #238270;

  border: 1px solid #238270;

  border-radius: 50%;

  font-size: 10px;
}

.cyber-tool-icon.openai {
  color: #1576a8;

  border: 1px solid #1576a8;

  border-radius: 50%;

  font-size: 12px;
}

.cyber-tool-icon.shodan {
  color: #df3d70;

  font-size: 18px;
}

.cyber-tool-icon.mitre {
  color: #e34a31;

  font-size: 12px;
}


/* =========================================================
   MORE TEXT
========================================================= */

.cyber-tools-more {
  margin: 4px 0 7px;

  color: #10217b;

  font-size: 8.5px;

  font-weight: 700;

  text-align: center;
}


/* =========================================================
   SKILLS MAIN
========================================================= */

.cyber-skills-main {
  position: relative;

  min-height: 165px;

  padding: 1px 10px 7px;

  box-sizing: border-box;
}


/* =========================================================
   SKILLS GRID
========================================================= */

.cyber-skills-grid {
  width: calc(100% - 150px);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px 17px;

  padding-top: 4px;
}

.cyber-skills-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   SKILL ITEM
========================================================= */

.cyber-skill {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;
}

.cyber-skill>span {
  width: 14px;
  height: 14px;

  min-width: 14px;

  border-radius: 50%;

  background: #5c1db1;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 8px;

  font-weight: 900;

  line-height: 1;
}

.cyber-skill p {
  margin: 0;

  color: #18266d;

  font-size: 11px;

  font-weight: 600;

  line-height: 1.3;

  white-space: nowrap;
}


/* =========================================================
   CYBER SECURITY VISUAL
========================================================= */

.cyber-tools-visual {
  position: absolute;

  right: 0;
  top: 0;
  bottom: 0;

  width: 155px;

  overflow: hidden;

  background:
    radial-gradient(circle at 55% 50%,
      rgba(28, 157, 241, .22),
      rgba(7, 41, 104, .03) 55%,
      transparent 75%);

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}


/* Glow */

.cyber-visual-glow {
  position: absolute;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(26, 143, 235, .22) 0%,
      rgba(26, 143, 235, .08) 40%,
      transparent 72%);

  filter: blur(2px);
}


/* Shield */

.cyber-shield {
  position: relative;

  z-index: 3;

  width: 112px;
  height: 125px;

  display: flex;
  align-items: center;
  justify-content: center;

  filter:
    drop-shadow(0 5px 12px rgba(0, 111, 218, .28));
}

.cyber-shield svg {
  width: 110px;
  height: 120px;
}


/* =========================================================
   CIRCUIT ELEMENTS
========================================================= */

.cyber-circuit {
  position: absolute;

  height: 2px;

  background: #188fe2;

  opacity: .65;
}

.cyber-circuit::before,
.cyber-circuit::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 6px;

  border: 1px solid #20a9f2;

  border-radius: 50%;

  background: #fff;
}

.cyber-circuit::before {
  left: -3px;
  top: -2px;
}

.cyber-circuit::after {
  right: -3px;
  top: -2px;
}

.circuit-1 {
  width: 31px;

  top: 31px;
  left: 5px;

  transform: rotate(-25deg);
}

.circuit-2 {
  width: 25px;

  top: 52px;
  right: 5px;

  transform: rotate(25deg);
}

.circuit-3 {
  width: 30px;

  bottom: 32px;
  left: 9px;

  transform: rotate(25deg);
}

.circuit-4 {
  width: 27px;

  bottom: 43px;
  right: 6px;

  transform: rotate(-25deg);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .cyber-tools-wrapper {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width: 850px) {

  .cyber-tools-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .cyber-skills-grid {
    width: 100%;
  }

  .cyber-tools-visual {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .cyber-tools-section {
    padding: 10px;
  }

  .cyber-tools-panel>h2,
  .cyber-skills-panel>h2 {
    font-size: 18px;
  }

  .cyber-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .cyber-tool {
    height: 34px;

    font-size: 9px;
  }

  .cyber-skills-grid {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .cyber-skill p {
    white-space: normal;

    font-size: 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .cyber-tools-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cyber-tool {
    font-size: 8.5px;
  }

}



/* =========================================================
   CYBER PROGRAM HIGHLIGHTS
========================================================= */

.cyber-program-section {
  width: 100%;

  background: #fff;

  font-family: "Inter", Arial, sans-serif;

  box-sizing: border-box;
}


/* =========================================================
   TOP SECTION
========================================================= */

.cyber-program-highlights {
  width: 100%;

  min-height: 66px;

  padding: 3px 15px;

  box-sizing: border-box;

  display: grid;

  grid-template-columns: 135px minmax(0, 1fr);

  align-items: center;

  border-top: 1px solid #e4e8f2;
  border-bottom: 1px solid #e4e8f2;

  background: #fff;
}


/* =========================================================
   TITLE
========================================================= */

.cyber-program-title {
  align-self: start;

  padding-top: 2px;
}

.cyber-program-title h2 {
  margin: 0;

  color: #101d77;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.2;
}


/* =========================================================
   ITEMS
========================================================= */

.cyber-program-items {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  align-items: center;
}

.cyber-program-item {
  min-width: 0;

  display: flex;
  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 2px 7px;

  box-sizing: border-box;
}


/* =========================================================
   ICON
========================================================= */

.cyber-program-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-program-icon svg {
  width: 31px;
  height: 31px;

  display: block;
}

.cyber-program-icon.blue {
  color: #1729d3;
}

.cyber-program-icon.purple {
  color: #5e23b4;
}


/* =========================================================
   TEXT
========================================================= */

.cyber-program-item h3 {
  margin: 0 0 1px;

  color: #102177;

  font-size: 9.5px;
  font-weight: 700;

  line-height: 1.25;
}

.cyber-program-item p {
  margin: 0;

  color: #172b78;

  font-size: 8.5px;
  font-weight: 600;

  line-height: 1.25;
}


/* =========================================================
   STATS BAR
========================================================= */

.cyber-program-stats {
  width: 100%;

  min-height: 54px;

  padding: 4px 18px;

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    1fr 1px 1fr 1px 1fr 1px 1fr 1px 1.15fr;

  align-items: center;

  background:
    linear-gradient(100deg,
      #122765 0%,
      #14266e 50%,
      #171d59 100%);
}


/* =========================================================
   STAT ITEM
========================================================= */

.cyber-program-stat {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 1px 8px;

  box-sizing: border-box;
}


/* =========================================================
   STAT ICON
========================================================= */

.cyber-stat-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-stat-icon svg {
  width: 32px;
  height: 32px;

  display: block;
}


/* =========================================================
   STAT TEXT
========================================================= */

.cyber-stat-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.cyber-stat-text strong {
  color: #fff;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.1;
}

.cyber-stat-text span {
  margin-top: 2px;

  color: rgba(255, 255, 255, .9);

  font-size: 8.5px;
  font-weight: 500;

  line-height: 1.2;
}


/* =========================================================
   DIVIDER
========================================================= */

.cyber-stat-divider {
  width: 1px;
  height: 30px;

  background: rgba(255, 255, 255, .22);
}


/* =========================================================
   HOVER
========================================================= */

.cyber-program-item {
  transition: transform .2s ease;
}

.cyber-program-item:hover {
  transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .cyber-program-highlights {
    grid-template-columns: 110px 1fr;
  }

  .cyber-program-items {
    grid-template-columns: repeat(3, 1fr);

    row-gap: 5px;
  }

  .cyber-program-item {
    justify-content: flex-start;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .cyber-program-highlights {
    grid-template-columns: 1fr;

    padding: 8px 12px;
  }

  .cyber-program-title {
    padding: 0 0 7px;
  }

  .cyber-program-items {
    grid-template-columns: repeat(2, 1fr);

    gap: 8px 5px;
  }

  .cyber-program-item {
    justify-content: flex-start;

    padding: 3px 4px;
  }

  .cyber-program-item h3 {
    font-size: 9px;
  }

  .cyber-program-item p {
    font-size: 8px;
  }

  .cyber-program-icon {
    width: 29px;
    height: 29px;

    flex-basis: 29px;
  }

  .cyber-program-icon svg {
    width: 27px;
    height: 27px;
  }


  /* Stats */

  .cyber-program-stats {
    grid-template-columns: repeat(2, 1fr);

    gap: 5px;

    padding: 8px 10px;
  }

  .cyber-stat-divider {
    display: none;
  }

  .cyber-program-stat {
    justify-content: flex-start;

    padding: 4px 5px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .cyber-program-items {
    grid-template-columns: 1fr;
  }

  .cyber-program-stats {
    grid-template-columns: 1fr;
  }

  .cyber-program-stat {
    justify-content: center;
  }

}