/* Defining root variables */

:root{
  --primary-c: #871D27;
  --secondary-c: #CD642B;
  --hover-c-light: #ee8349;
  --hover-c-dark: #a5400a;
  --color1: #333333;
}

/* Universal reset styles */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Source Sans 3", sans-serif;
}

html, body{
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* Generated class from JS below for intersection observer */
/* Generated class from JS below for intersection observer */
/* Generated class from JS below for intersection observer */

.hidden{
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.5s, transform 1s;
}

.show{
  opacity: 1;
  transform: translateY(0);
}

.career-sub-hd{
  position: relative;
  width: 100%;
  height: 75vh;
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(images/career-img2.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Career main section starts here */

/* Section 1 */

.career--sec1{
  width: 100%;
  background: #fff;
  padding: 5em 12.5em;
}

.career--sec1 h1{
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 3.9rem;
  color: #102031;
  max-width: 21ch;
}

.career-thin-line{
  width: 70px;
  height: 2px;
  background: var(--secondary-c);
  margin: 2em 0;
}

.career-para1{
  font-size: 1.1rem;
  font-weight: 400;
  color: #102031;
}

.career-h2{
  font-size: 1.3rem;
  font-weight: 600;
  color: #7e7e7e;
  margin: 4em 0;
}

.career-para2{
  font-size: 1rem;
  font-weight: 400;
  color: var(--hover-c-dark);
  max-width: 50ch;
}

/* Section 2 */

.career-sec2{
  width: 100%;
  background: #f0f0f0;
  padding: 5em 12.5em;
}

.sec2-h1{
  font-size: 2.5rem;
  font-weight: 800;
  color: #000;
}

.career-para3{
  font-size: 1.05rem;
  font-weight: 400;
  color: #000;
  max-width: 70ch;
}

/* Sec 2 Cards */

.sec2--cards{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-top: 3em;
  width: 100%;  
}

.sec2-card--bx{
  position: relative;
  height: 480px;
  background: #fff;
}

/* Transition delay for 2 cards */

.sec2-card--bx:nth-child(2){
  transition-delay: 200ms;
}

.sec2-card--bx:nth-child(3){
  transition-delay: 400ms;
}

.card-img-bx{
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.card-img-bx img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.sec2-card--bx:hover .card-img-bx img{
  transform: scale(1.03);
} 

.card--content{
  background: #fff;
  padding: 1.5em;
}

.card--content h3{
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2em;
  color: #000;
  margin-bottom: .7em;
}

.card--content p{
  font-size: 1rem;
  font-weight: 400;
  color: #636363;
}

.cards-thin--line{
  position: absolute;
  bottom: 0;
  opacity: 0;
  width: 100%;
  height: 2px;
  background: var(--secondary-c);
}

.sec2-card--bx:hover .cards-thin--line{
  opacity: 1;
}

/* All media query for various screens */
/* All media query for various screens */
/* All media query for various screens */

/* Media for laptops - 1326px */

@media(max-width: 1326px){
.career--sec1, .career-sec2{
  padding: 5em 4.7em;
}
}

/* Media for laptops - 1090px */

@media(max-width: 1090px){
  .career--sec1, .career-sec2{
  padding: 5em 3em;
}
}

/* Media for laptops - 1028px */

@media(max-width: 1028px){
  .career--sec1, .career-sec2{
  padding: 5em 2em;
}
}

/* Media for Tablets - 941px */

@media(max-width: 941px){
  
  .sec2-card--bx{
  height: 520px;
}
}

/* Media for Tablets - 852px */

@media(max-width: 852px){
  
  .sec2-card--bx{
  height: 550px;
}
}

/* Media for Tablets - 807px */

@media(max-width: 807px){
  
.sec2--cards{
  grid-template-columns: 1fr 1fr;
}

.sec2-card--bx{
  height: 480px;
}

.card--content h3{
  font-size: 1.4rem;
}
}

/* Media for Tablets - 650px */

@media(max-width: 650px){

.career--sec1 h1{
  font-size: 3rem;
  line-height: 3rem;
}  

.sec2-card--bx{
  height: 520px;
}
}

/* Media for Tablets - 570px */

@media(max-width: 570px){

.career--sec1 h1{
  font-size: 2.7rem;
  line-height: 2.7rem;
}

.sec2--cards{
  grid-template-columns: 1fr;
}

.sec2-card--bx{
  height: 480px;
}

.card-img-bx{
  height: 280px;
}
}

/* Media for mobile device - 507px */

@media(max-width: 507px){

.sec2-h1{
  font-size: 2.5rem;
  line-height: 2.5rem;
  max-width: 14ch;
}

.sec2-card--bx{
  height: 520px;
}
}

/* Media for mobile device - 500px */

@media(max-width: 500px){
.career--sec1, .career-sec2{
  padding: 5em 1.2em;
}
}

/* Media for mobile device - 355px */

@media(max-width: 355px){
  .sec2-card--bx{
  height: 550px;
}
}

/* Min width for sections 1 / 2 */

/* Media for laptops - 1918px */

@media(min-width: 1918px){
.career--sec1, .career-sec2{
  padding: 5em 25em;
}
}

/* Media for laptops - 2560px */

@media(min-width: 2558px){
.career--sec1, .career-sec2{
  padding: 5em 42em;
}
}