/* Order */
@layer reset, primereact;

@layer reset {
  *,
  *::after,
  *::before,
  *::placeholder {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    border-collapse: separate;
    scroll-margin-top: 170px;
  }
  html {
    scroll-behavior: smooth;
  }
  @font-face {
    font-family: "customFont";
    src: url("./public/font/GeistVF.woff") format("opentype"); /* Use .otf format */
    font-weight: 500; /* Normal weight */
  }

  @font-face {
    font-family: "customFont";
    src: url("./public/font/GeistVF.woff") format("opentype"); /* Use .otf format */
    font-weight: bold; /* Bold weight */
  }

  body {
    font-family: "customFont", sans-serif;
  }
  *::placeholder {
    font-family: "customFont", sans-serif;
  }
  a {
    text-decoration: none;
    cursor: pointer;
    display: block;
  }

  img,
  svg,
  picture,
  video {
    display: block;
    max-width: 100%;
  }
  /* @link https://utopia.fyi/type/calculator?c=250,13,1.08,1520,16,1.08,10,10,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  :root {
    --step--10: clamp(0.3763rem, 0.3592rem + 0.1094vw, 0.4632rem);
    --step--9: clamp(0.4065rem, 0.388rem + 0.1182vw, 0.5002rem);
    --step--8: clamp(0.439rem, 0.419rem + 0.1276vw, 0.5403rem);
    --step--7: clamp(0.4741rem, 0.4525rem + 0.1378vw, 0.5835rem);
    --step--6: clamp(0.512rem, 0.4888rem + 0.1489vw, 0.6302rem);
    --step--5: clamp(0.553rem, 0.5279rem + 0.1608vw, 0.6806rem);
    --step--4: clamp(0.5972rem, 0.5701rem + 0.1736vw, 0.735rem);
    --step--3: clamp(0.645rem, 0.6157rem + 0.1875vw, 0.7938rem);
    --step--2: clamp(0.6966rem, 0.6649rem + 0.2025vw, 0.8573rem);
    --step--1: clamp(0.7523rem, 0.7181rem + 0.2187vw, 0.9259rem);
    --step-0: clamp(0.8125rem, 0.7756rem + 0.2362vw, 1rem);
    --step-1: clamp(0.8775rem, 0.8376rem + 0.2551vw, 1.08rem);
    --step-2: clamp(0.9477rem, 0.9046rem + 0.2755vw, 1.1664rem);
    --step-3: clamp(1.0235rem, 0.977rem + 0.2976vw, 1.2597rem);
    --step-4: clamp(1.1054rem, 1.0552rem + 0.3214vw, 1.3605rem);
    --step-5: clamp(1.1938rem, 1.1396rem + 0.3471vw, 1.4693rem);
    --step-6: clamp(1.2893rem, 1.2308rem + 0.3749vw, 1.5869rem);
    --step-7: clamp(1.3925rem, 1.3292rem + 0.4048vw, 1.7138rem);
    --step-8: clamp(1.5039rem, 1.4356rem + 0.4372vw, 1.8509rem);
    --step-9: clamp(1.6242rem, 1.5504rem + 0.4722vw, 1.999rem);
    --step-10: clamp(1.7541rem, 1.6744rem + 0.51vw, 2.1589rem);
  }

  :root {
    --first: #d20a11;
    --second: #4a4a49;
    /* --backgrounds  */
    --bg: #f9fafb;
    --footer_bg: #f5f5f7;
    --bg-light: #003177;
    --testimonialial_bg: #c5f5ff;
    --resources-bg: #e0dfff;
    --white: #ffff;

    --text: #4a4a49;
    --title_text: #747475;
    /* gradients*/
    /* --newLinear: linear-gradient(328.58deg, #034ea1 -15.54%, #00928a 90%) -13% 108%; */
    --lg_1: linear-gradient(328.58deg, #034ea1 -15.54%, #00928a 90%) -13% 108%;

    --lg_1_light: linear-gradient(
      190deg,
      rgba(0, 61, 180, 0.5) 37%,
      rgba(0, 165, 196, 0.5) 100%
    );

    --lg-w-b: linear-gradient(
      0deg,
      rgba(45, 0, 91, 0.8) 7%,
      rgba(168, 1, 114, 0) 51%
    );

    /* --hover-lg: linear-gradient(
      180deg,
      rgba(45, 0, 91, 1) 8%,
      rgba(168, 1, 114, 1) 83%
    ); */

    --hover-lg: #00928a;
    /* //shadows  */
    --shadow_1: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    /* black */
    --black: #000;
    --black-1: #fafafa;
    --black-2: #f0f0f0;
    --black-3: #e6e6e6;
    --black-4: #dbdbdb;
    --black-5: #d1d1d1;
    --black-6: #c7c7c7;
    --black-7: #bdbdbd;
    --black-8: #b3b3b3;
    --black-9: #a8a8a8;
    --black-10: #9e9e9e;
    --black-11: #949494;
    --black-12: #8a8a8a;
    --black-13: #808080;
    --black-14: #757575;
    --black-15: #6b6b6b;
    --black-16: #616161;
    --black-17: #4d4d4d;
    --black-18: #424242;
    --black-19: #383838;
    --black-20: #2e2e2e;
    --black-21: #242424;

    /* width  */
    --mx_width: 1600px;

    /* height */
    --m_height: 20px;

    --space: 100px;
    --space-50: calc(var(--space) / 2);
    --space-25: calc(var(--space) / 3);
    --space-20: calc(var(--space) / 5);
    --space-10: calc(var(--space) / 10);

    --width: 90%;
    --title-sm-bottom: 10px;

    --margin: 60px;
    --margin-2x: calc(var(--margin) * 2);
    --margin-3x: calc(var(--margin) * 3);
  }

  .margin {
    margin: 70px 0;
  }

  .marginTop {
    margin-top: 70px;
  }

  .marginBottom {
    margin-bottom: 70px;
  }

  /*custom classes*/
  .margin {
    margin: var(--margin) 0px;
  }
  .marginTop {
    margin-top: var(--margin);
  }
  .marginBottom {
    margin-bottom: var(--margin);
  }

  .padding {
    padding: var(--space) 0px;
  }
  .paddingHalf {
    padding: var(--space-50) 0px;
  }
  .paddingTop {
    padding-top: var(--space);
  }
  .paddingBottom {
    padding-bottom: var(--space);
  }
  .full-height {
    height: 100%;
  }
  .max-width {
    max-width: 1200px;
    margin: 0 auto;
    /* border: 1px solid red; */
  }

  .width {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

    height: 100%;
    /* border: 1px solid red; */
  }
  @media (max-width: 650px) {
    .mobile_full_width {
      width: 100% !important;
    }
  }
  .title {
    font-size: calc(var(--step-10) + var(--step--10));
    line-height: calc(var(--step-10) + var(--step--10) + 10px);
    margin-bottom: calc(var(--space-50) * 0.7);
  }
  .sectionTitle {
    font-size: var(--step-10);
    line-height: calc(var(--step-10) + 10px);
    margin: calc(var(--space-50) * 0.7) 0px calc(var(--space-50) * 0.4);
  }
  .subTitle {
    font-size: var(--step-4);
    line-height: calc(var(--step-4) + 10px);
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--title-text);
  }

  .ptag,
  .ptag p,
  .ultag li {
    font-size: var(--step-0);
    line-height: calc(var(--step-0) + 10px);
    /* color: var(--black-20); */
    margin: 20px 0px;
    font-weight: 500;
    color: var(--text);
  }
  .ultag li {
    margin: 10px 0px;
  }
  .link {
    font-size: var(--step-0);
    line-height: calc(var(--step-0) + 10px);
    padding: 10px 32px;
    border-radius: 30px;
    margin-top: var(--space-50);
    background: var(--lg_1);
    color: var(--white);
  }

  @media (max-width: 1000px) {
    .title {
      font-size: var(--step-10);
      line-height: calc(var(--step-10) + 10px);
      margin-bottom: calc(var(--space-25) * 0.7);
    }
    .sectionTitle {
      font-size: var(--step-8);
      line-height: calc(var(--step-8) + 10px);
      margin: calc(var(--space-50) * 0.7) 0px calc(var(--space-50) * 0.4);
    }
    .subTitle {
      font-size: var(--step-5);
      line-height: calc(var(--step-5) + 10px);
      margin-bottom: 20px;
      font-weight: 700;
      color: var(--title-text);
    }

    .ptag,
    .ptag p,
    .ultag li {
      font-size: var(--step-1);
      line-height: calc(var(--step-1) + 10px);
      color: var(--text);
    }
    .ultag li {
      margin: 10px 0px;
    }
    .link {
      font-size: var(--step-1);
      line-height: calc(var(--step-1) + 10px);
      margin-top: var(--space-25);
    }
    :root {
      --space: 75px;
    }
  }

  @media (max-width: 700px) {
    .title {
      font-size: var(--step-9);
      line-height: calc(var(--step-9) + 10px);
      margin-bottom: calc(var(--space-25) * 0.7);
    }
    .sectionTitle {
      font-size: var(--step-6);
      line-height: calc(var(--step-6) + 10px);
      margin: calc(var(--space-50) * 0.7) 0px calc(var(--space-50) * 0.4);
    }
    .subTitle {
      font-size: var(--step-4);
      line-height: calc(var(--step-4) + 10px);
      margin-bottom: 20px;
      font-weight: 700;
      color: var(--title-text);
    }

    :root {
      --space: 50px;
    }
  }
  @media (max-width: 700px) {
    .width {
      width: 95%;

      /* border: 1px solid red; */
    }

    .margin {
      margin: 40px 0px;
    }
    .marginTop {
      margin-top: 40px;
    }
    .marginBottom {
      margin-bottom: 40px;
    }
  }

  .swiper_height .swiper-slide {
    height: auto !important;
  }

  #resources .swiper-slide {
    height: auto !important;
  }
  #homeTestimonials .swiper-slide {
    height: auto !important;
  }
  #home_testimonials .swiper-slide {
    height: auto !important;
  }
  /* 

  --blue: #00a5c4;
  --dark-blue: #003db4;
  --title-color: #21205a;
  --bg: #f9f8fb;
  --bg-light: #dfdefe;
  --testimonialial_bg: #c5f5ff;
  --resources-bg: #e0dfff;
  --white: #ffff;
  */
  :root {
    --getintouch_bg: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(33, 32, 90, 0.9) 55%
    );
  }
  /* rgba(0, 61, 180, 0.5) */
  /* /// css animation:  ; */
  .slideInBottom {
    -webkit-animation: slideInBottom 0.5s linear both;
    animation: slideInBottom 0.5s linear both;
  }

  @-webkit-keyframes slideInBottom {
    0% {
      -webkit-transform: translateY(150px);
      transform: translateY(150px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slideInBottom {
    0% {
      -webkit-transform: translateY(150px);
      transform: translateY(150px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
.slideInTop {
  -webkit-animation: slideInTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slideInTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slideInTop {
  0% {
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideInTop {
  0% {
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* header :start */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg);
}

.header_items {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_items_contact {
  background-color: var(--first);
  padding: 5px 20px;
  border-radius: 5px;
}
.header_items_contact a {
  color: var(--white);
  font-size: var(--step-1);
  font-weight: 600;
}
.header_contact {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--step-0);
  font-weight: 600;
}
.header_whatsapp {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--step-0);
  font-weight: 600;
}
.header_whatsapp span {
  color: var(--first);
}
.header_whatsapp img {
  height: auto;
  width: 20px;
}
.header_logo img {
  height: auto;
  width: 80%;
}
.header_logo p {
  text-align: center;
  color: var(--first);
  font-size: var(--step-1);
  font-weight: 600;
}
@media (max-width: 700px) {
  .header_items {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 30% 60%;
  }
  .header_contact {
    justify-content: flex-end;
  }
  .header_logo img {
    width: 70%;
  }
  .header_logo p {
    font-size: var(--step-0);

    /* border: 2px solid red; */
  }
}
@media (max-width: 360px) {
  .header_items_contact {
    padding: 5px 10px;
  }
  .header_logo img {
    width: 90%;
  }
}
@media (max-width: 320px) {
  .header_whatsapp {
    flex-direction: column;
  }
}
@media (max-width: 290px) {
  .header_items_contact {
    display: none;
  }
  .header_whatsapp {
    flex-direction: row;
  }
  .header_items {
    grid-template-columns: 40% 50%;
  }
}

/* header end */
/* banner start */
.banner_wrapper {
  background-image: url("./public/banner/foundation_banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
}
.banner_wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 0.5;
  z-index: -1;
}
.banner_items {
  display: grid;
  grid-template-columns: 60% 40%;
  height: 100%;
}
.banner_title h1 {
  color: var(--white);
  text-align: left;
  /* font-size: calc(var(--step-8) + var(--step--10));
  line-height: calc(var(--step-10) + var(--step--10) + 10px);
  margin-bottom: calc(var(--space-50) * 0.7); */
  width: 90%;
}
.banner_title p {
  color: var(--white);
  font-size: var(--step-2);
}
.banner_title_content > div p {
  background-color: var(--white);
  font-size: var(--step-2);
  color: red;
  width: fit-content;
  padding: 6px 20px;
  border-radius: 30px;
}
.banner_items {
  padding: 50px 0px;
}
.form {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 20px 10px;
  background-color: var(--white);

  border-radius: 5px;
}
.form > div {
  margin-bottom: 10px;
  border-radius: 10px;
}
.form div:last-child {
  margin: 0;
}
.form input,
.form textarea,
.form select {
  width: 100%;
  border: none;
  outline: none;
  font-size: var(--step-0);
  color: var(--text);
}
.form_dual_column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.form_dual_column > div {
  width: 100%;
  margin-bottom: 10px;
}
.form .input_logo {
  border: 1px solid #545454;
}

.form svg {
  color: var(--first);
}
.form input[type="submit"] {
  width: 100%;
  background-color: var(--secondtitle);
  color: var(--white);
  font-size: var(--step-1);
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
}
.input_logo {
  display: flex;
  align-items: center;
  border: 1px solid var(--secondtitle);
  padding: 10px;
}

.input_logo svg {
  color: var(--button-color);
  font-size: var(--step-3);
}
.input_logo input,
.input_logo textarea,
.input_logo select {
  padding-left: 10px;
}
.input_logo textarea {
  width: 100%;
}

.form input[type="submit"] {
  background-color: var(--first);
}

@media (max-width: 700px) {
  .banner_wrapper {
    height: fit-content;
  }
  .banner_items {
    padding: 0px 0px;
  }
  .banner_wrapper::before {
    display: none;
  }
  .banner_wrapper {
    background: none;
  }
  .banner_items {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .banner_title {
    background-image: url("./public/banner/foundation_banner.jpg");
    background-size: cover;
    height: 350px;
    width: 100%;
    grid-template-columns: 100%;
    position: relative;
    isolation: isolate;
    padding: 10px;
  }
  .banner_title_content {
    /* background-color: red; */
  }
  .banner_title > div {
    padding: 20px;
  }
  .banner_title h1 {
    margin-top: 0px;
  }
  .banner_title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0.5;
    z-index: -1;
  }
  .banner_form form {
    border: 2px solid var(--first);
    width: 95%;
    margin: 0 auto;
  }
  .banner_title h1 {
    /* font-size: var(--step-5); */
  }
  .banner_title_content > div p {
    margin-top: 80px;
  }
}
@media (max-width: 700px) {
  .form_dual_column {
    flex-direction: column;
  }

  .form_dual_column > div {
    width: 100%;
    margin-bottom: 10px;
  }
  .form_wrapper {
    border: 2px solid var(--second);
    margin-top: 40px;
    width: 95%;
  }
}

/* banner end */
/* KESHAV SIR start */
.items {
  display: flex;
  justify-content: center;
  /* margin-bottom: 30px; */
}
.item_image img {
  width: 200px;
  height: auto;
}
.item_text {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item_text p {
  font-size: var(--step-5);
  line-height: calc(var(--step-5) + 10px);
  color: var(--first);
  font-weight: bold;
}

@media (max-width: 700px) {
  .item_image img {
    width: 150px;
  }
  .item_text p {
    font-size: var(--step-3);
    line-height: calc(var(--step-3) + 10px);
  }
}
@media (max-width: 500px) {
  .item_image img {
    width: 150px;
  }
  .item_text p {
    font-size: var(--step-1);
    line-height: calc(var(--step-1) + 10px);
  }
}
@media (max-width: 350px) {
  .items {
    flex-direction: column;
  }
  .item_image img {
    margin: 0 auto;
  }
}

/* KESHAV SIR end */

/* Himalai IAS start */
.counters_wrapper {
  /* margin-bottom: 50px; */
}
.counters_heading {
}
.counters_title {
}
.counters_title h2 {
  text-align: center;
  color: var(--first);
}
.counters_title p {
  text-align: center;
}
.counters_count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.counters_count div h3 {
  color: var(--second);
}

@media (max-width: 700px) {
  .counters_count {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .counters_title p,
  .counters_count p {
    width: 100%;
    font-size: var(--step-1);
  }
  .counters_count div {
    width: 48%;
  }
}
/* Himalai IAS end */
/* Syllabus start */
.syllabus {
  /* margin-bottom: 50px; */
}
.syllabus_items {
}
.syllabus_items > div h2 {
  text-align: center;
  color: var(--first);
}
.syllabus_table {
}
.syllabus_table_wrapper {
  display: grid;
  grid-template-columns: 48% 48%;
  justify-content: space-between;
}
.syllabus_table_wrapper > div {
}

.syllabus_table_wrapper > div h3 {
  line-height: calc(var(--step-0) + 10px);
  padding: 10px 0;
  color: var(--second);
  border-bottom: 2px solid var(--second);
}
.syllabus_table_wrapper > div h4 {
  font-size: var(--step-1);
  line-height: calc(var(--step-0) + 10px);
  padding: 10px 0;
  color: var(--first);
  /* border-bottom: 1px solid var(--second); */
  /* width: 30%; */
}
.syllabus_table_wrapper > div p {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: calc(var(--step-0) + 10px);
  padding: 10px 0;
  color: var(--first);
}
.syllabus_table_wrapper > div ul li {
  font-size: var(--step-1);
  line-height: calc(var(--step-0) + 10px);
  padding: 10px 0;
  color: var(--second);
  list-style-position: inside;
  padding-left: 10px;
}
@media (max-width: 700px) {
  .syllabus_table_wrapper {
    grid-template-columns: 100%;
  }
  .syllabus_table_wrapper > div p,
  .syllabus_table_wrapper > div ul li {
    font-size: var(--step-2);
  }
}
/* Syllabus end */

/* clear exam start */
.subjects_wrapper {
  background-color: var(--bg);
}
.subjects_title {
  padding: 30px 0;
}
.subjects_title h2 {
  color: var(--first);
  text-align: center;
}
.subjects_item h3 {
  color: var(--second);
}
.subjects_item p {
  color: var(--second);
}
.subjects_items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.subjects_items > div {
  width: 48%;
  padding: 10px;
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--title_text);
  border-radius: 5px;
}
.subjects_item_img {
  position: absolute;
  top: 30%;
  left: -10%;
}
.subjects_item {
  display: grid;
  grid-template-columns: 10% 90%;
  justify-content: space-between;
  margin-bottom: 30px;
}
.subjects_item_img img {
  width: 15%;
  height: 100%;
  object-fit: cover;
}
.subjects_item span {
  color: var(--first);
  /* font-weight: 600; */
}
@media (max-width: 700px) {
  .subjects_items > div {
    width: 85%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .subjects_item p {
    font-size: var(--step-1);
  }
}
/* clear exam end */

/* footer :start */
.footer {
  background-color: var(--footer_bg);
  padding-bottom: 30px;
}
.footer_items {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}
.footer_logo img {
  width: 80%;
  height: auto;
}
.footer_second_part {
  display: flex;
  gap: 50px;
  justify-content: center;
  padding: 0px 0px 30px;
}

.footer_location {
  display: flex;
  gap: 10px;
  /* align-items: center; */
}
.footer_location svg {
  font-size: var(--step-10);
  translate: 0px 10px;
}
.footer_address h2 {
  font-size: var(--step-7);
  padding: 10px 0;
  color: var(--first);
}
.footer_branches h2 {
  font-size: var(--step-7);
  padding: 10px 0;
  color: var(--first);
  text-align: center;
}
.footer_address p {
  font-size: var(--step-2);
  line-height: 2;
  color: var(--second);
}
.footer_address p span {
  color: var(--first);
  font-weight: 600;
}
.footer_address ul {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.footer_address ul li {
  list-style: none;
  font-size: var(--step-2);
  color: var(--second);
  text-align: center;
}

@media (max-width: 550px) {
  .footer_location > section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .footer_second_part {
    flex-direction: column;
  }
}

.address_container {
  display: flex;
  align-items: center;
}

.address_container p {
  margin-right: 10px;
}

.address_container a {
  color: var(--second);
  text-decoration: none;
  font-size: var(--step-1);
}

.address_container a:hover {
  color: blue;
}

/* footer end */

/* why join start */
.why-join_title {
  text-align: center;
}
.why-join_title h2 {
  color: var(--first);
}
.why-join_title p {
  width: 90%;
  margin: 0 auto;
}
.why-join_items {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.why-join_items div {
  width: 24%;
  padding: 10px;
  margin-bottom: 20px;
}
.why-join_item {
  border: 1px solid var(--second);
  background-color: var(--bg);
}
.why-join_item h3 {
  color: var(--second);
}
.why-join_item > div img {
  /* width: 100%;
  height: auto; */
}

@media screen and (max-width: 700px) {
  .why-join_items div {
    width: 48%;
  }
  .why-join_title p,
  .why-join_item p {
    font-size: var(--step-1);
  }
  .why-join_item > div img {
    /* width: 30%; */
    /* height: auto; */
  }
}
@media screen and (max-width: 500px) {
  .why-join_items div {
    width: 100%;
  }
}

/* why join  end */

/* faq start */
.faq_wrapper {
  /* margin-bottom: 50px; */
  /* padding: 50px 0; */
  background-color: #f7f7f7;
}

.faq_section {
  padding: 20px 0;
}
.faq_section h2 {
  color: var(--first);
  text-align: center;
}

.title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

.faq {
}

.faq_item {
  margin-bottom: 20px;
  background: #fff;
  padding: 15px;
  padding-top: 0px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.faq_item h3,
.faq_answer p {
  color: var(--second);
}

.faq_question {
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}

.faq_answer {
  display: none;
  margin-top: 10px;
}

.faq_active .faq_answer {
  display: block;
}

.faq_active svg {
  transform: rotate(180deg);
}

/* faq end */

/* thank you :start */
.wrapper {
  margin: 100px 50px;
}
.banner {
  background-color: var(--button-color);
  padding: 80px 0px;
}
.content {
  min-height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content h1 {
  text-align: center;
  font-size: var(--step-7);
  color: var(--first);
}

/* thank you :end */

/* testimonial start */
.testimonials_wrapper > div h2 {
  color: var(--first);
}
.swiper {
  width: 100%;
}
.testimonials_swiper_wrapper {
  position: relative;
}
.testimonals_swiper_width {
  width: 94%;
  margin: 0 auto;
}
.testimonials_wrapper .swiper-slide {
  background-color: var(--bg);
}
.testimonial_swiper_item {
  padding: 25px;
}
.testimonial_swiper_item h3 {
  /* border: 2px solid red; */
  color: var(--second);
}
.testimonial_item_img > div img {
}

.testimonial_swiper_item > div p {
  font-size: var(--step-1);
}
.testimonial_item_img {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.testimonial_item_img > div img {
  width: 100%;
}
.testimonials_btn_container {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.testimonials_btn_container > div {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.testimonials_btn_container i {
  color: var(--first);
  font-size: var(--step-5);
}
.testimonials .swiper-slide {
  /* padding: 20px 0px; */
  height: auto;
}
@media (max-width: 700px) {
  .testimonial_swiper_item > div p {
    font-size: var(--step-1);
  }

  .testimonals_swiper_width {
    width: 87%;
    margin: 0 auto;
  }
}
/* testimonials end */

/* panoramic start */

.swiper {
  width: 90%;
}
.panoramic_swiper_wrapper {
  position: relative;
}
.panoramic_wrapper h2 {
  color: var(--first);
}

.panoramic_item_img > div img {
  width: 100%;
}
.panoramic_btn_container {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.panoramic_btn_container > div {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.panoramic_btn_container i {
  color: var(--first);
  font-size: var(--step-5);
}
.panoramic .swiper-slide {
  height: auto;
}
.panoramic_swiper_item {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid var(--second);
  height: 100%;
}
.panoramic_swiper_item h3 {
  text-align: center;
  color: var(--second);
}

@media (min-width: 1024px) {
  .panoramic_btn_container {
    display: none;
  }
}
@media (max-width: 700px) {
  .panoramic_swiper_width {
    width: 90%;
    margin: 0 auto;
  }
}

/* panoramic end */
/* batch start */
.batch_wrapper {
  /* border: 2px solid red; */
}
.batch_container {
  /* border: 2px solid red; */
}
.batch_items {
  /* border: 2px solid red; */
  background-image: url("./public/batch/weekend.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 50px;
  border-radius: 30px;
  position: relative;
  isolation: isolate;
}
.batch_items::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);

  /* background: radial-gradient(circle, rgba(210,10,17,1) 27%, rgba(210,10,17,1) 38%, rgba(0,0,0,1) 89%); */
  opacity: 0.5;
  border-radius: 30px;
  z-index: -1;
}
.batch_items {
  display: flex;
  justify-content: space-evenly;
}
.title_wrapper h2,
.title_wrapper p {
  color: var(--white);
}
.title_wrapper p {
  /* font-size: var(--step-2); */
}
@media (max-width: 700px) {
  .batch_items {
    flex-direction: column;
  }
  .title_wrapper p {
    text-align: center;
  }
}

/* batch end */