/* General Styling */
body {
  font-family: 'Arial', sans-serif;
  /* font-family: 'Inter', 'regular'; */
  background-color: #ECF1F8;
}

/* Navbar */
.navbar {
  padding: 15px 0;
}

.nav-link {
  color: #000;
}

.nav-link:hover {
  color: #007bff;
}

/* Header Section */
header {
  background-image: url('../assets/header-image.png');
  background-size: cover;
  background-position: center;
  color: white;
  height: 70vh;
}

header h1 {
  font-size: 2.5rem;
}

.vertical-line {
  margin-top: 3vh;
  width: 1px;   /* Line thickness */
  background-color: black;  /* Line color */
}

.horizontal-line {
margin-top: 2vh;
height: 0.5px;   /* Line thickness */
width: 100%;
background-color: black;  /* Line color */
}

/* Tab Container */
.tab-container {
  /* position: relative; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 50px; */
}

.tabs {
  margin-left: 190px;
  position: relative;
  display: flex;
  flex: none;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.left-spacer,
.button-wrapper {
  flex: 1; /* take up equal space on both sides of tabs */
}

.button-wrapper {
  margin-right: 190px;
  display: flex;
  justify-content: flex-end; /* push button to the far right */
}

@keyframes jump-highlight {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
  80% { transform: translateY(-10px); }
}

.button-5:hover {
  animation-play-state: paused;
}

.button-5 {
  /* ... your existing styles ... */
  animation: jump-highlight 1.6s ease-in-out infinite;
}

/* CSS */
.button-5 {
  align-items: center;
  background-clip: padding-box;
  background-color: #fa6400;
  border: 1px solid transparent;
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}

.button-5:hover,
.button-5:focus {
  background-color: #fb8332;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.button-5:hover {
  transform: translateY(-1px);
}

.button-5:active {
  background-color: #c85000;
  box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
  transform: translateY(0);
}

.tool-icons img
{
  margin: 2%;
  width: 7%;
  height: 8%;
}

.card-salary div
{
  padding: 0 3% 0.5% 3%;
}

.tab {
  padding: 15px 30px;
  font-size: 1rem;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2;
  font-weight: bold;
  color: black;
}

.tab.active {
  color: #fff;
}

.tab-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #007bff;
  border-radius: 30px;
  transition: transform 0.3s ease-in-out;
  z-index: 1;
}

/* Content */
.content-container {
  margin-top: 30px;
  text-align: center;
}

.content {
  display: none;
}

.content.active {
  display: block;
}

header p {
  font-size: 1.2rem;
}

/* Course Details Section */
.course-details h5 {
  font-weight: bold;
}

.course-details p {
  font-size: 1rem;
}

/* About the Course Section */
/* .about-course {
  background-color: #f7f7f7;
} */

.about-course h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Salary Comparison Table */
.salary-comparison table {
  width: 100%;
  background-color: #fff;
}

.salary-comparison h2 {
  margin-bottom: 20px;
}

/* Job Titles Section */
.job-titles ul {
  list-style-type: none;
  padding: 0;
}

.job-titles li {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* Footer */
footer {
  background-color: #333;
  color: white;
  font-size: 0.9rem;
}

/* .container p
{

} */

.downImage
{
width: 3%;
}

.downImage-project
{
width: 4%;
}

.number-style
{
position: absolute;
color: #fff;
font-weight: bold;
/* margin-left: 1.7%; */
margin-top: 1%;
}

/* Job Titles Section */
.job-titles-section {
  margin: 0 5% 0 5%;
  padding: 2rem;
}

.job-titles-section h2 {
  margin-bottom: 3rem;
  font-size: 24px;
  font-weight: bold;
  /* margin-bottom: 20px; */
  text-align: left;
}

.job-titles-section p {
  font-size: 16px;
  margin-bottom: 30px;
  color: #555;
  text-align: left;
}

/* Job Titles List Container */
.job-titles-container {
  display: flex;
  padding: 2%;
  justify-content: space-between;
  flex-direction: row;
  justify-content: center;
}

.job-list {
  list-style: none;
  /* flex: 1; */
  font-size: 16px;
}

.job-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

/* Check Icon Styling */
.check-icon {
  width: 3vh;
  margin-right: 10px;
}

/* Tools Section */
.tools {
margin: 0 5% 0 5%;
padding: 2rem;
margin-bottom: 3rem;
}

.tools h2
{
margin-bottom: 3rem;
}

.tool-icons {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}

.tools p
{
margin-bottom: 3vh;
}

@media (max-width: 430px) 
{
  header
  {
    background-image: url('../assets/responsive-header.png');
    background-size: cover;
    background-position: center;
    color: white;
    height: 70vh;
  }
  .vertical-line 
  {
    margin-right: 3vh;
    margin-left: 3vh;
    width: 88%;   
    height: 1px;
    background-color: black;
  }
  .downImage
  {
    width: 15%;
  }
  .number-style
  {
    position: absolute;
    color: #fff;
    font-weight: bold;
    /* margin-left: 5.7%; */
    margin-top: 4%;
  }
  .downImage-project
  {
    width: 50%;
  }
}

@media (max-width: 360px) 
{
  header
  {
    background-image: url('../assets/responsive-header.png');
    background-size: cover;
    background-position: center;
    color: white;
    height: 70vh;
  }
  .vertical-line 
  {
    margin-right: 3vh;
    margin-left: 3vh;
    width: 88%;   
    height: 1px;
    background-color: black;
  }
  .downImage
  {
    width: 15%;
  }
  .number-style
  {
    position: absolute;
    color: #fff;
    font-weight: bold;
    /* margin-left: 5.7%; */
    margin-top: 1%;
  }
  .downImage-project
  {
    width: 50%;
  }
}

@media (max-width: 375px) 
{
  header
  {
    background-image: url('../assets/responsive-header.png');
    background-size: cover;
    background-position: center;
    color: white;
    height: 70vh;
  }
  .vertical-line 
  {
    margin-right: 3vh;
    margin-left: 3vh;
    width: 88%;   
    height: 1px;
    background-color: black;
  }
  .downImage
  {
    width: 15%;
  }
  .number-style
  {
    position: absolute;
    color: #fff;
    font-weight: bold;
    /* margin-left: 5.7%; */
    margin-top: 4%;
  }
  .downImage-project
  {
    width: 50%;
  }
}

@media (max-width: 820px) 
{
  header 
  {
    background-image: url('../assets/responsive-header.png');
    background-size: cover;
    background-position: center;
    color: white;
    height: 70vh;
  }
  .container, .container-md, .container-sm 
  {
    max-width: 900px;
  }
  /* .vertical-line {
      margin-right: 3vh;
      margin-left: 3vh;
      width: 88%;   
      height: 1px;
      background-color: black;
  } */
  .number-style
  {
    position: absolute;
    color: #fff;
    font-weight: bold;
    /* margin-left: 5.7%; */
    margin-top: 2%;
  }
  .downImage-project
  {
    width: 7%;
  }
}