#section-1{
	background-image: url("/careers/images/bg-1.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;

  }
  #section-2,#section-3,#section-4{
	margin-top: 70px;
}

  .css-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center;
	margin-top: 30px;
  }

  .css-container {
	margin: 0px 75px;
  }  

  .blue-gradient-btn {
	padding: 10px;
	border: none;
	border-radius: 5px;
	background: linear-gradient(90deg, #006997, #0085AA);
	color: #fff;
	cursor: pointer;
	display: block;
	text-align: center;
	margin: auto;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .blue-gradient-btn:hover {
	background:#006997
  }
  .blue-gradient-text {
	background: linear-gradient(90deg, #016A97, #00B4E5);
	background-clip: text;
	-webkit-text-fill-color: transparent;
  }


  .track {
	display: flex;
	gap: 32px;
	width: max-content;
	animation: marquee 25s linear infinite;
	will-change: transform;
  }
  
  .track img {
	height: 250px;
	width: auto;          
	flex-shrink: 0;
	object-fit: contain;
	border-radius: 10px;
  }

  .job-card{
	border-radius: 10px;
	border: 1px solid #E6E6E6;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: start;
	padding: 20px;
	transition: 
    box-shadow 0.3s ease,
    transform 0.3s ease;
  }

  .view-job-icon{
	transition: transform 0.3s ease;
  }

  .job-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 
  }

  .job-card:hover .view-job-icon {
	transform: translateX(6px); 
  }
  .bottom-images-div{
	display: flex;
	background-color: #002C3F;
	justify-content: space-between;
	align-items: self-end;
	border-radius: 20px;
}
.bottom-image-content-div{
	position: absolute;
	color: white;
	bottom: 22%;
	left: 22%;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

#section-1 h1{
	font-size: 40px;
	text-align: start;
}
#section-1 p,#section-4 span,#section-5 p{
	font-size: 15px;
}
#section-2 span{
	font-size: 20px
}
#section-3 h2,#section-4 h2,#section-5 h2{
	font-size: 32px;
}
#section-3 p{
	font-size: 13px;
	margin-top: 30px;
}
#section-3 span{
	font-size: 15px;
}
#section-4 p{
	font-size: 13px;
}
#section-4 h4{
	font-size: 24px;
}


  @keyframes marquee {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-2000px);  
	}
  }
  
  
  @media (max-width: 576px) {
	.css-container {
		margin: 0px 20px;
		/* max-width: 540px; */
	}
	.css-col,.intro-css-col{
		flex: 0 0 auto;
    	width: 100%;
	}
	.css-row {
		gap: 17px;
		margin-top: 10px;
	}

	.bottom-images-div{
		display: none;
	}
	.bottom-image-content-div{
		position: unset;
		background-color: #002C3F;
		padding:60px 20px;
  		border-radius: 20px;
		text-align: start;
	}
	.bottom-image-content-div button{
		margin: 0px;
	}

	#section-2,#section-3,#section-4,#section-5{
		margin-top: 25px;
	}

	#section-1 h1{
		font-size: 24px;
		text-align: center;
	}
	#section-1 p,#section-1 button{
		font-size: 13px;
		text-align: center;
	}

	#section-2 span{
		font-size: 18px
	}

	#section-3 h2,#section-4 h2,#section-5 h2{
		font-size: 22px;
	}
	#section-3 p,#section-3 button{
		font-size: 13px;
		margin-top: 10px;
	}
	#section-3 span{
		font-size: 15px;
	}
	
	#section-4 p,#section-4 button, #section-2 button{
		font-size: 13px;
		align-items: justify;
	}
	#section-4 h4{
		font-size: 21px;
	}
	#section-4 span{
		font-size: 15px;
	}

	#section-5 p,#section-5 button{
		font-size: 13px;
	}
  }
  
  @media (min-width: 576px) {
	.css-container {
		margin: 0px 20px;
	  /* max-width: 540px; */
	  /* padding-inline: 24px; */
	}

	.css-col,.intro-css-col{
		flex: 0 0 auto;
    	width: 100%;
	}
	.css-row {
		gap: 17px;
		margin-top: 10px;
	}

	.bottom-images-div{
		display: none;
	}
	.bottom-image-content-div{
		position: unset;
		background-color: #002C3F;
		padding: 60px 20px;
  		border-radius: 20px;
		text-align: start;
	}
	.bottom-image-content-div button{
		margin: 0px;
	}

	#section-2,#section-3,#section-4,#section-5{
		margin-top: 25px;
	}
	#section-1 h1{
		font-size: 24px;
		text-align: center;
	}
	#section-1 p,#section-1 button,#section-2 button{
		font-size: 13px;
		text-align: center;
	}

	#section-2 span{
		font-size: 18px
	}

	#section-3 h2,#section-4 h2,#section-5 h2{
		font-size: 22px;
	}
	#section-3 p,#section-3 button{
		font-size: 13px;
		margin-top: 10px;
	}
	#section-3 span{
		font-size: 15px;
	}

	#section-4 p,#section-4 button{
		font-size: 13px;
		text-align: justify;
	}
	#section-4 h4{
		font-size: 21px;
	}
	#section-4 span{
		font-size: 15px;
	}

	#section-5 p,#section-5 button{
		font-size: 13px;
	}
  }
  
  @media (min-width: 768px) {
	.css-container {
		margin: 0px 75px;
	  /* max-width: 720px; */
	}
	.css-col,.intro-css-col{
		flex: 0 0 auto;
    	width: 47%
	}
	.css-row {
		gap: 32px;
		margin-top: 30px;
	}

	.bottom-images-div{
		display: flex;
	}
	.bottom-image-content-div{
		position: absolute;
		color: white;
		background-color:unset;
		padding:0px;
  		border-radius: 0px;
		text-align: center;
	}
	.bottom-image-content-div button{
		margin: auto;
	}

	#section-2,#section-3,#section-4,#section-5{
		margin-top: 70px;
	}
	#section-1 h1{
		font-size: 40px;
		text-align: start;
	}
	#section-1 p,#section-4 span,#section-5 p{
		font-size: 15px;
		text-align: left;
	}
	#section-2 span{
		font-size: 20px
	}
	#section-3 h2,#section-4 h2,#section-5 h2{
		font-size: 32px;
	}
	#section-3 p{
		font-size: 13px;
		margin-top: 30px;
	}
	#section-3 span{
		font-size: 15px;
	}
	#section-4 p{
		font-size: 13px;
		text-align: justify;
	}
	#section-4 h4{
		font-size: 24px;
	}
  }
  
  @media (min-width: 992px) {
	.css-container {
		margin: 0px 75px;
	  /* max-width: 960px; */
	}
	
	.css-col,.intro-css-col{
		flex: 0 0 auto;
    	width: 48%
	}
  }
  
  @media (min-width: 1200px) {
	.css-container {
		margin: 0px 75px;
	  /* max-width: 1140px; */
	}

	.css-col{
		flex: 0 0 auto;
    	width: 30%
	}
  }
  
  @media (min-width: 1400px) {
	.css-container {
		margin: 0px 75px;
	  /* max-width: 1320px; */
	}
	
  }