/* ========== home page banner css code start ========== */
.home_banner_container {
  /* background: linear-gradient(to right, #efe8ff, #f3f3f3); */
  background-color: var(--dark-sky-blue);
  padding-top: 4.5rem;
  margin-top: 4rem;
}
.home_banner_container .home_banner_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.home_banner_box .left_box {
  flex-basis: 45%;
}
.home_banner_box .left_box .banner_heading {
  font-size: 3rem;
  font-weight: 500;
  padding-bottom: 1rem;
}
.home_banner_box .left_box .banner_para {
  width: 80%;
  padding-bottom: 0.2rem;
  font-size: 1.1rem;
  color: #4e4e4e;
  font-weight: 300;
}
.home_banner_box .left_box .demo_btn_container {
  padding-top: 2rem;
  display: flex;
  gap: 1rem;
}
.home_banner_box .right_box {
  flex-basis: 55%;
}
.home_banner_box .right_box img {
  width: 100%;
}
.home_banner_container .infinite-scroll-wrapper {
  width: 100%;
  overflow: hidden;
  padding-top: 1rem;
}
.home_banner_container .infinite-scroll-wrapper p {
  font-size: 0.8rem;
  color: var(--light-gray);
  padding-bottom: 1rem;
}

.home_banner_container .scroll-track {
  display: flex;
  width: max-content;
  animation: scroll-left 30s linear infinite;
}

.home_banner_container .scroll-track img {
  height: 60px;
  margin-right: 40px;
  flex-shrink: 0;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* ========== home page banner css code end ========== */

/* ========== home page about us css code start ========== */
.home_about_container .home_about_box {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  /* gap: 1rem; */
  /* border: 1px solid; */
}
.home_about_box .about_left_box {
  flex-basis: 45%;
  position: relative;
  /* border: 1px solid; */
  align-items: right;
}
.home_about_box .about_left_box img {
  width: 100%;
}
.home_about_box .about_right_box {
  flex-basis: 55%;
  padding-left: 1rem;
}
.home_about_box .about_right_box .tagh6 {
  color: var(--dark-blue);
  padding-bottom: 0.5rem;
}
.home_about_box .about_right_box .tagh2 {
  font-weight: 500;
  line-height: 3.6rem;
  padding-bottom: 1.5rem;
}
.home_about_box .about_right_box .tagp, .home_about_box .about_right_box p {
  color: var(--gray);
  padding-bottom: 1.5rem;
}
.home_about_box .about_right_box button {
  margin-top: 2rem;
}
.home_about_box2 {
  padding: 3rem 0;
}
.home_about_box2 .tagh5 {
  font-weight: 600;
  padding-bottom: 1rem;
}
.home_about_box2 .home_about_box2_flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* gap: 2rem; */
}
.home_about_box2 .home_about_box2_flex .box {
  /* text-align: center; */
  border-right: 2px solid;
  padding: 0 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 2rem; */
  flex-direction: column;
  /* border: 1px solid red; */
  text-align: center;
}
.home_about_box2 .home_about_box2_flex .box:nth-child(3) {
  border-right: none;
}
/* ========== home page about us css code end ========== */

/* ========== why choose jobready css code start ========== */
.why_choose_jobready_container {
  /* background-image: linear-gradient(to right, #dddddd, #f3f3f3); */
  background-color: var(--light-voilate);
  padding: 3rem 0;
}
.why_choose_jobready_container .home_why_choose_jobready .swiper-slide {
  /* border: 1px solid; */
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.why_choose_jobready_container .home_why_choose_jobready .swiper-slide .tagp {
  padding-bottom: 3rem;
}
/* ========== why choose jobready css code end ========== */

/* ========== all in one global css code start ========== */
.all_in_one_global_box_show_container {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
  margin-top: 2rem;
}
.all_in_one_global_box_show_container.active {
  display: block;
}
.all_in_one_global_container .all_in_one_global_box {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.all_in_one_global_container .all_in_one_global_box .circle {
  width: 180px;
  /* height: 130px; */
  padding: 1rem;
  border-radius: 2rem;
  /* border: 1px solid; */
  background-color: var(--light-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
  flex-shrink: 0; 
}
.all_in_one_global_container .all_in_one_global_box .circle:nth-child(1).active {
  background-color: var(--dark-sky-blue);
}
.all_in_one_global_container .all_in_one_global_box .circle:nth-child(2).active {
  background-color: var(--light-dark-yellow);
}
.all_in_one_global_container .all_in_one_global_box .circle:nth-child(3).active {
  background-color: var(--light-blue);
}
.all_in_one_global_container .all_in_one_global_box .circle:nth-child(4).active {
  background-color: var(--off-white);
}
.all_in_one_global_container .all_in_one_global_box .circle img {
  width: 30%;
}
/* .all_in_one_global_container .all_in_one_global_box .circle:nth-child(2) img {
  width: 32%;
}
.all_in_one_global_container .all_in_one_global_box .circle:nth-child(3) img {
  width: 39%;
}
.all_in_one_global_container .all_in_one_global_box .circle:nth-child(4) img {
  width: 45%;
} */
/* .all_in_one_global_container .all_in_one_global_box .circle.active {
  background-color: #c4b1f9;
}
.all_in_one_global_container .all_in_one_global_box .circle .tagp {
  font-size: 0.9rem;
  text-align: center;
}
.all_in_one_global_box_show_container .all_in_one_global_box_show {
  display: flex;
  gap: 1rem;
  padding-top: 2rem;
}
.all_in_one_global_box_show_container .all_in_one_global_box_show .left_box {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  flex-basis: 60%;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .left_box
  .child_box {
  background-color: #c4b1f9;
  padding: 3rem 1rem;
  width: 80%;
  position: relative;
  border-radius: 2rem;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .left_box
  .child_child_box {
  width: 70%;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .left_box
  .child_box
  img {
  position: absolute;
  top: 50%;
  right: -25%;
  transform: translateY(-50%);
  width: 55%;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .left_box
  .child_box
  .tagh4 {
  padding-bottom: 1rem;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .left_box
  .child_box
  .tagp {
  padding-bottom: 2rem;
}
.all_in_one_global_box_show_container .all_in_one_global_box_show .right_box {
  flex-basis: 30%;
  background-color: #c4b1f9;
  padding: 3rem 1rem;
  border-radius: 2rem;
  position: relative;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .right_box
  .tagh4 {
  padding-bottom: 1rem;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .right_box
  .tagp {
  padding-bottom: 2rem;
}
.all_in_one_global_box_show_container
  .all_in_one_global_box_show
  .right_box
  img {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-60%);
  width: 130%;
} */

.all_in_one_global_box_show .left_box {
  display: flex;
  gap: 1rem;
}
.all_in_one_global_box_show .child_child_box .tagp {
  padding: 1rem 0;
}
.all_in_one_global_box_show .child_child_box .common_btn1 {
  margin-top: 1rem;
}
/* .all_in_one_global_box_show .cmnbg:nth-child(1){
    background-color: var(--dark-sky-blue);
} */
.all_in_one_global_box_show_container.active:nth-child(1) .cmnbg{
  background-color: var(--dark-sky-blue);
}
.all_in_one_global_box_show_container.active:nth-child(2) .cmnbg{
  background-color: var(--light-dark-yellow);
}
.all_in_one_global_box_show_container.active:nth-child(3) .cmnbg{
  background-color: var(--light-blue);
}
.all_in_one_global_box_show_container.active:nth-child(4) .cmnbg{
  background-color: var(--off-white);
}
.all_in_one_global_box_show .left_box .child_boxs {

  padding: 1.5rem;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  justify-content: space-between;
}
.all_in_one_global_box_show .left_box .child_boxs img {
  width: 60%;
  display: block;
  margin: 0 auto;
}
.all_in_one_global_box_show .left_box .child_boxs:nth-child(2) img {
  width: 90%;
}
.all_in_one_global_box_show .left_box .child_box {
  flex-basis: 59%;
}

.all_in_one_global_box_show .left_box .child_box1 {
  flex-basis: 39%;
}
.all_in_one_global_box_show .right_box {
  margin-top: 1rem;

  padding: 1.5rem;
  border-radius: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.all_in_one_global_box_show .right_box .child_child_box {
  flex-basis: 54%;
}
.all_in_one_global_box_show .right_box .right_img_box {
  flex-basis: 43%;
}
.all_in_one_global_box_show .right_box .right_img_box img {
  width: 100%;
}

/* media query start */
@media (min-width: 1578px) {
  .custom_width {
    max-width: 70%;
  }
}
/* media query end */
/* ========== all in one global css code end ========== */

/* ========== people plateform css code start ========== */
.people_plateform_container {
  padding: 3rem 1rem;
  background-color: var(--dark-blue);
  margin-top: 2rem;
  color: var(--white);
}
/* .people_plateform_container .people_plateform .tagh3,
.all_in_one_global_box_show_container .people_plateform .tagp{
    width: 100%;
    max-width: 60%;
} */
.people_plateform_container .people_plateform .tagp {
  padding-bottom: 2rem;
}
.people_plateform_container .people_plateform .people_plateform_flex_container {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 2rem;
}
.people_plateform_container
  .people_plateform
  .people_plateform_flex_container
  .box {
  padding: 0.5rem;
  background-image: url("../images/all-in-one-global/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 1rem;
  margin-bottom: 0.3rem;
}
.people_plateform_container
  .people_plateform
  .people_plateform_flex_container
  .box
  img {
  width: 100%;
}
/* ========== people plateform css code end ========== */

/* ========== unlock continuous css code start ========== */
.unlock_continuous_container {
  /* background-image: linear-gradient(to right, #000000, #201148); */
  background-color: var(--light-black);
  padding: 3rem 0;
  /* border: 1px solid red; */
}
.unlock_continuous_container .unlock_continuous {
  color: var(--white);
}
.unlock_continuous_container .unlock_continuous .tagp {
  padding-bottom: 2rem;
}
.unlock_continuous_container
  .unlock_continuous
  .unlock_continuous_flex_container {
  /* display: flex;
  justify-content: center;*/
  gap: 1.5rem;
  padding-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.unlock_continuous_container .unlock_continuous .uc_box {
  background-color: rgba(128, 128, 128, 0.479);
  padding: 1rem;
  border-radius: 1rem;
}
.unlock_continuous_container .unlock_continuous .uc_box img {
  max-width: 80px;
  padding-bottom: 1rem;
}
.unlock_continuous_container .unlock_continuous .uc_box .tagh6 {
  padding-bottom: 0.6rem;
  width: 100%;
}
/* ========== unlock continuous css code end ========== */

/* ========== customer stories css code start ========== */
.customer_stories_show_container_box {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}
.customer_stories_show_container_box.active {
  display: block;
}
.customer_stories_container .tagh6 {
  color: var(--dark-blue);
  padding-bottom: 1rem;
}
.customer_stories_btn_catagories {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 1175px;
  margin: 0 auto;

  /* 👇 smooth horizontal scroll */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 👇 Prevent items from shrinking (important) */
.customer_stories_btn_catagories .tagh6 {
  padding: 0.4rem 1rem;
  color: var(--black);
  border-radius: 0.5rem;
  width: 215px;
  min-width: 215px;   /* 👈 add this */
  flex: 0 0 auto;     /* 👈 important */
  text-align: center;
  border: 1px solid var(--dark-blue);
  cursor: pointer;
}

/* 👇 Optional: Hide scrollbar (mobile look clean) */
.customer_stories_btn_catagories::-webkit-scrollbar {
  display: none;
}
.customer_stories_btn_catagories {
  scrollbar-width: none;
}
.customer_stories_btn_catagories .cs_btn.active {
  background-color: var(--dark-blue);
  color: var(--white);
}
.customer_stories_show_container {
  display: flex;
  padding-top: 2rem;
  /* gap: 1rem; */
}
.customer_stories_show_container .customer_stories_box_left,
.customer_stories_show_container .customer_stories_box_right {
  flex-basis: 50%;
}
.customer_stories_show_container .customer_stories_box_left img {
  width: 100%;
}
.customer_stories_show_container .customer_stories_box_right {
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.customer_stories_show_container .customer_stories_box_right .tagh2 {
  font-size: 6rem;
}
/* ========== customer stories css code end ========== */

/* ========== three easy stap css code start ========== */
.three_easy_stap_container {
  /* background-color: var(--light-yellow); */
  background-image: linear-gradient(to top, #FFE27C, #ffffff);
  padding-top: 3rem;
}
.three_easy_stap_container .three_easy_stap_box {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.three_easy_stap_container .three_easy_stap_box .left_box,
.three_easy_stap_container .three_easy_stap_box .right_box {
  flex-basis: 49%;
}
.three_easy_stap_container .three_easy_stap_box .left_box .text_container {
  /* display: flex; */
  /* gap: 0.5rem; */
  /* align-items: start; */
  padding-bottom: 1.5rem;
}
.three_easy_stap_container
  .three_easy_stap_box
  .left_box
  .text_container
  .icons {
  /* width: 30px; */
  /* height: 30px; */
  /* border-radius: 50%; */
  /* background-color: var(--sky-blue); */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark-blue);
  /* flex-basis: 5%; */
}
.three_easy_stap_container
  .three_easy_stap_box
  .left_box
  .text_container
  .content {
  flex-basis: 95%;
}
.three_easy_stap_container
  .three_easy_stap_box
  .left_box
  .text_container
  .content
  .tagh6 {
  padding-bottom: 0.5rem;
}
.three_easy_stap_container .three_easy_stap_box .right_box img {
  width: 100%;
}
/* ========== three easy stap css code end ========== */

/* ========== footer css code start ========== */
.footer_main_container {
  /* background-image: linear-gradient(to right, #1a2645, #2e1159); */
  background-color: var(--light-black);
  padding-top: 3rem;
}
.footer_main_container .footer_container_box {
  display: flex;
  padding-bottom: 1rem;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer_main_container .footer_container_box .footer_box {
  flex-basis: 200px;
  flex-grow: 1;
  color: var(--dark-white);
  /* border: 1px solid red; */
}
/* .footer_main_container .footer_container_box .footer_box:nth-child(1) {
  padding-left: 0;
} */
.footer_main_container .footer_container_box .footer_box .footer_logo {
  width: 100%;
  padding-bottom: 1rem;
}
.footer_main_container .footer_container_box .footer_box img {
  width: 70%;
}
.footer_main_container .footer_container_box .footer_box .email_container {
  border: 1px solid var(--dark-yellow);
  padding: 0.3rem;
  display: flex;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
}
.footer_main_container
  .footer_container_box
  .footer_box
  .email_container
  input {
  flex-basis: 60%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: transparent;
  border: none;
  outline: none;
}
.footer_main_container
  .footer_container_box
  .footer_box
  .email_container
  button {
  flex-basis: 40%;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: var(--dark-yellow);
  font-size: 1rem;
}
.footer_main_container .footer_container_box .footer_box .tagh6 {
  color: var(--dark-yellow);
  padding-bottom: 1.5rem;
  font-size: 1.1rem;
}
.footer_main_container .footer_container_box .footer_box ul li {
  padding-bottom: 0.5rem;
}
.footer_main_container .footer_container_box .footer_box ul li a {
  color: var(--dark-white);
  transition: all .3s ease-in;
}
.footer_main_container .footer_container_box .footer_box ul li a:hover{
  color: var(--dark-yellow);
  padding-left: .5rem;
  text-decoration: underline;
}
.footer_main_container
  .footer_container_box
  .footer_box
  .social_media_container {
  display: flex;
  gap: 0.8rem;
  margin-top: 2rem;
}
.footer_main_container
  .footer_container_box
  .footer_box
  .social_media_container
  .social_media_box {
  width: 35px;
  height: 35px;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer_main_container .copy_right_container {
  border-top: 1px solid var(--dark-white);
  padding: 1rem 0;
}
.footer_main_container .copy_right_container .tagp {
  color: var(--dark-white);
  font-size: 0.9rem;
}
/* ========== footer css code end ========== */

/* media query section start */
@media (max-width: 1040px) {
  .hire_imployees_container .hire_imployees_flex_container {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  .customer_stories_btn_catagories {
    overflow-x: auto;
  }
}

@media (max-width: 950px) {
  .home_banner_container .home_banner_box {
    flex-direction: column-reverse;
  }
  .home_about_container .home_about_box {
    flex-direction: column;
  }
  /* .all_in_one_global_box_show_container .all_in_one_global_box_show {
    flex-direction: column;
  } */
  /* .all_in_one_global_box_show_container .all_in_one_global_box_show .right_box {
    background-color: #c4b1f9;
    padding: 3rem 1rem;
    width: 80%;
    position: relative;
    border-radius: 2rem;
  } */
  /* .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .right_box
    .child_child_box {
    width: 70%;
  }
  .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .right_box
    img {
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translateY(-50%);
    width: 68%;
  } */
  .unlock_continuous_container
    .unlock_continuous
    .unlock_continuous_flex_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .customer_stories_show_container {
    flex-direction: column;
  }
  .three_easy_stap_container .three_easy_stap_box {
    flex-direction: column-reverse;
  }
  .home_about_box2 .home_about_box2_flex {
    flex-direction: column;
  }
  .home_about_box2 .home_about_box2_flex .box {
    border-right: 0;
    border-bottom: 2px solid;
    padding: 1rem 0;
  }
  .home_about_box2 .home_about_box2_flex .box:nth-child(3) {
    border-bottom: none;
  }
  .global_people_plateform_container .global_people_plateform_box {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .global_people_plateform_box .plateform_box:nth-child(1) {
    order: 2;
  }
  .payroll_solution_box {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .people_plateform_container
    .people_plateform
    .people_plateform_flex_container {
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .hire_imployees_container .hire_imployees_flex_container {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

@media (max-width: 600px) {
  /* .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .left_box
    .child_box {
    padding-top: 20vw;
    width: 100%;
    margin-top: 20vw;
  }
  .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .left_box
    .child_box {
    width: 100%;
  }
  .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .left_box
    .child_child_box {
    width: 100%;
  }
  .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .left_box
    .child_box
    img {
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
  }
  .all_in_one_global_box_show_container .all_in_one_global_box_show .right_box {
    width: 100%;
    padding-top: 20vw;
    margin-top: 20vw;
  }
  .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .right_box
    .child_child_box {
    width: 100%;
  }
  .all_in_one_global_box_show_container
    .all_in_one_global_box_show
    .right_box
    img {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68%;
  } */
  .unlock_continuous_container
    .unlock_continuous
    .unlock_continuous_flex_container {
    grid-template-columns: repeat(1, 1fr);
  }
  .home_banner_box .left_box .banner_heading {
    font-size: 2rem;
  }
  .home_about_box .about_right_box .tagh2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .why_choose_jobready_container .tagh3,
  .all_in_one_global_container .tagh3,
  .people_plateform_container .tagh3,
  .unlock_continuous_container .tagh3,
  .customer_stories_container .tagh3,
  .three_easy_stap_container .tagh3 {
    font-size: 2rem;
    max-width: 100%;
  }
  .customer_stories_show_container .customer_stories_box_right {
    padding-left: 0;
  }
  .payroll_solution_box {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
/* media query section end */

@media (max-width: 598px) {
  .all_in_one_global_box_show .left_box {
    flex-wrap: wrap;
  }
  .all_in_one_global_box_show .left_box .child_box {
    flex-basis: 100%;
  }

  .all_in_one_global_box_show .left_box .child_box1 {
    flex-basis: 100%;
  }
  .all_in_one_global_box_show .right_box {
    flex-wrap: wrap;
  }
  .all_in_one_global_box_show .right_box .child_child_box {
    flex-basis: 100%;
  }
  .all_in_one_global_box_show .right_box .right_img_box {
    flex-basis: 100%;
  }
  .all_in_one_global_box_show .left_box .child_boxs img {
    width: 100%;
  }
  .all_in_one_global_box_show .left_box .child_boxs:nth-child(2) img {
    width: 100%;
  }
}
