*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans', sans-serif;
}

.why-section{
  height: 100vh;
  padding-top: 2rem;
  padding-left: 3rem;
  padding-right: 3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.why-section h3{
  font-size: 3rem;
  font-weight: 600;
  text-align: center;
  
}

.why-grids{
  display: flex;
  flex-direction: row;
  margin-top: 7rem;
  padding-left: 15rem;
  padding-right: 15rem;
  gap: 10px;
}
.why1{
  display: flex;
  flex-direction: column;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 100%;
  
  height: 708px;
  border: 0.5px solid #e1e1e1;
  gap: 30px;
}

.why1-a{
 width: 100%;
 overflow: hidden;
 height: 500px;
 border-radius: 20px;
transition: transform 0.3s ease;
}
.why1-a:hover{
  transform: scale(1.05); 
}

.why1-a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why1-b{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paragraph1{
  font-size: 1.5rem;
  color: black;
  font-weight: 600;

}
.paragraph2{
  color: #1E1E1E;
}
.why1-b a{
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.why1-b a i{
  color: black;
}

.why2{
  width: 100%;
  gap: 25px;
  display: flex;
  flex-direction: column;
  height: 708px;
  overflow-y: auto;
}

.show-more2{
  display: flex;
  justify-content: center;
  padding: 48px 0;
}
.more2{
   color: white;
  font-size: 1rem;
  font-weight: 600;
  background-color: transparent;
  padding: 6px 15px;
  border-radius: 10px;
  border: none;
  background-color: #3eb489;
}
.more2:hover{
  background-color: #37a37c;
}

.why2-a{
  display: flex;
  flex-direction: row;
  padding:1.5rem ;
  gap: 10px;
  height: fit-content;
   border: 0.5px solid #e1e1e1;
}
.jobs{
  width: 100%;
  max-width: 170px;
  height: 170px;
  overflow: hidden;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.jobs:hover{
  transform: scale(1.05); 
}
.jobs-text{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 5px;
 
}
.jobs-text a{
   color:black ;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center !important;
  gap: 5px;
  font-size: 1rem;
 font-weight: 600;
}

.jobs-text a i{
  color:black;
}

.jobs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.why2-b{
  display: flex;
  flex-direction: row;
  padding:1.5rem ;
  gap: 10px;
  height: fit-content;
   border: 0.5px solid #e1e1e1;
}


.why2-c{
  display: flex;
  flex-direction: row;
  padding:1.5rem ;
  gap: 10px;
  height: fit-content;
  
   border: 0.5px solid #e1e1e1;
}

.why2-d{
   display: flex;
  flex-direction: row;
  padding:1rem ;
  gap: 10px;
  height: fit-content;
   border: 0.5px solid #e1e1e1;
}
.why2-e{
     display: flex;
  flex-direction: row;
  padding:1rem ;
  gap: 10px;
  height: fit-content;
   border: 0.5px solid #e1e1e1;
}

.why2-f{
     display: flex;
  flex-direction: row;
  padding:1rem ;
  gap: 10px;
  height: fit-content;
   border: 0.5px solid #e1e1e1;
}

.why2-g{
     display: flex;
  flex-direction: row;
  padding:1rem ;
  gap: 10px;
  height: fit-content;
   border: 0.5px solid #e1e1e1;
}

.color1{
  position: absolute;
  width: 30px;
  height: 30px;
  top: 20%;
  left: 10%;
  background-color: #ffa500;
  border-radius: 50%
  
  
}
.color2{
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
 background-color: #3eb489;
 bottom: 10%;
 right: 5%;
}
.color3{
    position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
 background-color: #ff6f00;
top: 5%;
 right: 15%;
}