body {
  background-color: #141516;
  z-index: 1;
}
/* Section-01 */

.section-01 {
  margin-top: 60px;
  display: flex;
  background-image: url('../pics/jobs/main\ banner.avif');
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow-x: hidden;
}
.section-01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Dark overlay */
  z-index: 1;
}

.words {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 20%;
  margin-right: 10%;
  z-index: 2;
  margin-top: 50px;
  margin-bottom: 50px;
}

.title {
  border-bottom: 3px solid gray;
  width: 5%;
  padding-bottom: 2%;
}


.button-div {
  width: 50%;
  z-index: 2;
  display:flex;
  align-items: flex-end;
  margin-bottom: 50px;
}

.career-btn {
  display: flex;
  gap: 60px;
  background: red;
  border: none;
  border-radius: 5px;
  padding: 10px 20px 10px 70px;
  white-space: nowrap;
}

.career-btn:hover {
  background: #181A1C;
  border: 2px solid red;
  color: #FB4444;
  
}


/* Section-02 */


.circle-div {
  /* Outer container size */
  width: 230px;
  height: 230px;
  position: relative;
  border-radius: 50%;
  display: flex;
  flex-direction: column;

  /* 
    Create the ring using a conic gradient:
    - Blue from 0% to 70%
    - Gray from 70% to 100%
  */
  background: conic-gradient(
    #3da5ff 0% 70%,  /* 70% of the circle in blue */
    #767676 70% 100% /* remaining 30% in gray */
  );

  /* Center any child elements (like the text) */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Inner circle to create the “thickness” of the ring */
.circle-div::before {
  content: "";
  position: absolute;
  border-radius: 50%;

  /* Make this smaller than the outer container
     to form a ring around the center */
  width: 200px;
  height: 200px;

  /* Match your page background color or a custom color */
  background-color: #000;

  /* Center it inside the ring-chart */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Centered text styling */
.circle-div h1,
.circle-div p {
  position: relative; /* So it sits on top of the pseudo-element */
  text-align: center;
}

.circle-div h1 {
  font-size: 3rem;
  margin-bottom: -5px;
}

.circle-div p {
  font-size: 0.75rem;  /* Adjust as needed */
  line-height: 1.2;
  margin-bottom: 50px;
}

.words-circle-btn {
  display: flex;
  margin-left: 5%;
  margin-right: 20%;
  padding-bottom: 50px;
}

.section-02 ul {
  margin-top: -180px;
}

.section-02 li {
  padding-bottom: 15px;
}

.section-02 .career-btn {
  margin-top: 70px;

}

.styling-div {
  width: 45%;
  margin-left: 35%;
  margin-bottom: 2.5%;
  border-bottom: 1px solid gray;
}


/* Section-03 */

.section-03 {
  background: url('../pics/jobs/second\ banner.avif');
  height: 575px;
}

/* Section-04 */
.section-04 {
  display: flex;
  
}

.section-04 .career-btn {
  display: flex;
  align-items: flex-end;
}

/* Section-05 */
.section-05 {
  background-image: url('../pics/jobs/third\ banner.avif');
  height: 575px;
  margin-top: 50px;
}

/* Section-06 */

.section-06 {
  display: flex;
}

/* Section-08 */
.section-08 {
  display: flex;
  
}

/* Section-09 */

.section-09 {
  display: flex;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 100px;
  
  
}
.ceo-pic {
  border-radius: 50%;
}

.words-container {
  margin-left: 20px;
}
.section-09 h2 {
  margin-top: -25px;
  color: #C8C3BC;
}

.section-09 h3 {
  color: #C8C3BC;
}

.section-09 .articles {
  margin-left: -20%;
  margin-top: 25%;
}

.section-09 a {
  color: gray;
  display: block;
  margin-top: 30px;
}

.section-09 .button-div {
  margin-left: 50%;
  margin-top: 50px;
  display: flex;
  justify-content: flex-end;
}

.section-10 {
  margin-bottom: 75px;
}

/* Media Queries */

@media (max-width: 2000px) {

  .section-07 img {
    width: 100%;
  }
}

@media (max-width: 1920px) {

}

@media (max-width: 1440px) {
  .words-circle-btn {
    margin-top: 5%;
  }
  .section-01, .section-04, .section-06, .section-08 {
    display: flex;
    flex-direction: column;
  }
  .btn-margin{
    margin-left: 130%;
  }
  .words{
    width: 60%;
  }
  
}


@media (max-width: 1024px) {
  .words-circle-btn {
    padding-top: 5%;
  }
  .section-09{
    margin-left: 3%;;
  }
  

}

@media (max-width: 768px) {
  .words-ul {
    padding-top: 30%;
  }
  .words {
    font-size: 1rem;
  }

}


@media (max-width: 425px) {
  .words {
    margin-left: 5%;
    font-size: 0.6rem;
    margin-bottom: -10%;
  }
  .words-ul{
    margin-left: -50%;
  }

  .articles{
    margin-left: -100%;
  }

  .articles a{
    font-size: 0.5rem;
  }
  .articles-container{
    margin-left: -80%;
    margin-top: 50%;
  }
  .btn-margin{
    margin-left: 70%;
    margin-top: 30%;
    font-size: 0.75rem;
  }
  .words-mission{
    margin-top: -2%;
  }
  .styling-div{
    width: 80%;
    margin-left: 10%;
    margin-bottom: 10%;
  }
  .section-03, .section-05{
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: -110%;
  }
}