/* 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;
    /* outline: 1px solid red; */
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: "Roboto";
    font-weight: 400;
  }

  a {
    text-decoration: none;
    cursor: pointer;
    display: block;
  }


  img,
  svg,
  picture,
  video {
    display: block;
    max-width: 100%;
  }

  :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 {
    /* --backgrounds  */
    --first: #000;
    /* --text  */
    --white: #ffff;
    /* 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;
  }

  .ptag,
  .ptag p,
  .ultag li {
    font-size: var(--step-0);
    line-height: calc(var(--step-0) + 10px);
    margin: 20px 0px;
    font-weight: 500;
  }

  .ultag li {
    margin: 10px 0px;
    list-style: none;
  }

  .link {
    font-size: var(--step-0);
    line-height: calc(var(--step-0) + 10px);
    padding: 10px 32px;
    border-radius: 30px;
    margin-top: var(--space-50);
    width: fit-content;
    background-color: var(--black-12);
    color: var(--black);
  }

  @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;
    }

    .ptag,
    .ptag p,
    .ultag li {
      font-size: var(--step-1);
      line-height: calc(var(--step-1) + 10px);
    }

    .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;
    }
  }
}

/* header start */
.header {}

.header_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
  width: 95%;
  margin: auto;
}

.header_logo img {
  width: 50%;
}

.header_contact {
  /* display: flex;
  gap: 10px;
  align-items: center; */
}

.header_contact_icon img {
  /* border-radius: 50%; */
  /* padding: 5px 10px; */
  /* font-size: var(--step-5);
  background-color: #128c7e; */
  /* height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center; */
  /* height: auto;
  width: 40px; */
}

/* .header_contact i {
  border-radius: 50%;
  padding: 5px;
  font-size: var(--step-5);
  background-color: var(--first);
} */
/* .header_contact_icon a i {
  color: var(--white);
}
.header_contact_button a {
  font-size: var(--step-0);
  padding: 10px 32px;
  border-radius: 30px;
  width: fit-content;
  background-color: var(--first);
  color: var(--white);
} */

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

.contact_link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  gap: 8px;
}

.contact_link i {
  font-size: 22px;
  color: #000;
}

.header_logo h1 {
  font-size: var(--step-10);
}

@media (max-width: 650px) {
  .header_logo img {
    width: 200px;
  }
}

/* header end */

/* banner start */
.banner_wrapper {}

.banner_container {
  /* background-image: url("./public/banner/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  position: relative;
  isolation: isolate;
  width: 95%;
  margin: auto;
  border-radius: 20px;
  height: 400px; */
}

.banner_container::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;
  border-radius: 20px; */
}

.banner_items {
  display: grid;
  grid-template-columns: 60% 40%;
  justify-content: space-between;
  /* display: flex; */
  /* justify-content: center; */
  align-items: center;
  padding: 20px 0px;
}

/* .banner_items > div {
  width: 48%;
} */
.banner_image img {
  border-radius: 20px;
  height: 100%;
  width: 100%;
}

/* .banner_title_content h1,
.banner_title_content p {
  color: var(--white);
} */
@media (max-width: 650px) {
  .banner_items {
    /* display: flex;
    align-items: center; */
  }

  .banner_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .banner_title_content h1 {
    font-size: var(--step-9);
  }

  .banner_title_content p {
    font-size: var(--step-3);
  }
}

@media (max-width: 400px) {
  .banner_title_content h1 {
    font-size: var(--step-6);
  }

  .banner_title_content p {
    font-size: var(--step-2);
  }
}

/* banner end */

/* about strat */
.about {}

.about_heading h2 {
  color: var(--first);
  text-align: center;
}

.about_container {
  width: 95%;
  margin: auto;
  /* display: grid;
  grid-template-columns: 50% 40%;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: auto; */
}

.about_container>div {
  /* width: 100%; */
}

.about_container>div>img {
  border-radius: 20px;
  width: 100%;
}

.about_container p {
  width: 100%;
}

.about_container_button a {
  background-color: var(--first);
  color: var(--white);
}

@media (max-width: 650px) {
  .about_container {
    display: flex;
    flex-direction: column-reverse;
  }

  .about_container>div>img {
    width: 100%;
  }

  .about_container p {
    width: 100%;
  }

  .about_container_button {
    margin: 10px;
  }
}

/* about end */

/* courses start */
.courses {}

.courses_container h2 {
  color: var(--first);
}

.courses_container {
  width: 95%;
  margin: auto;
}

.courses_container h2 {
  text-align: center;
}

.courses_list {
  display: grid;
  grid-template-columns: 45% 45%;
  justify-content: space-between;
}

.courses_list>div ul li {
  border-bottom: 1px solid var(--first);
}

.courses_list>div li {
  padding: 10px 0px;
}

/* .courses_list > div ul li:last-child {
  border: none;
} */
/* .courses_list > div ul li:nth-child(1):hover,
.courses_list > div ul li:nth-child(2):hover,
.courses_list > div ul li:nth-child(3):hover,
.courses_list > div ul li:nth-child(4):hover,
.courses_list > div ul li:nth-child(5):hover,
.courses_list > div ul li:nth-child(6):hover,
.courses_list > div ul li:nth-child(7):hover {
  border-bottom: 2px solid var(--black);
} */
@media (max-width: 650px) {
  .courses_list {
    display: flex;
    flex-direction: column;
  }
}

/* courses end */

/* Hide the checkbox */
#popup-toggle {
  display: none;
}

/* Popup Container */
.pop_up_form {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

/* Show popup when checkbox is checked */
#popup-toggle:checked~.pop_up_form {
  display: flex;
}

/* Background overlay */
.pop_up_form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* Popup box */
.banner_form {
  background: white;
  padding: 30px;
  width: 30%;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Close button */
.pop_up_close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #444;
  cursor: pointer;
}

/* Form inputs */
input,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="submit"] {
  background-color: black;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0056b3;
}

.subTitle {
  font-size: 20px;
  margin-bottom: 15px;
  text-align: center;
}

@media (max-width: 650px) {
  .banner_form {
    width: 80%;
  }
}

/* footer start */
.footer {}

.footer_container {
  width: 95%;
  margin: auto;
  background-color: var(--first);
  border-radius: 20px;
  color: var(--white);
}

.footer_section {
  display: grid;
  grid-template-columns: 55% 30%;
  justify-content: space-between;
  padding: 60px 0;
}

.footer_section_button a {
  background-color: var(--white);
  color: var(--first);
}

@media (max-width: 650px) {
  .footer_section {
    display: flex;
    flex-direction: column;
  }
}

/* footer end */

/* information start */
.information {
  background-color: var(--first);
  color: var(--white);
}

.information_container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  gap: 5px;
}

.information_container p {
  text-align: center;
  /* padding: 10px; */
  /* font-size: var(--step-5); */
}

.privacy-link {
  color: var(--white);
}

.privacy-link:hover {
  text-decoration: underline;
}

/* information end */
/* marquee start */
.imgscroll {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  /* background: var(--first);  */
  margin-top: 20px;
}

.content_items {
  display: flex;
  width: max-content;
  animation: scrollText 20s linear infinite;
  gap: 50px;
  /* space between items */
}

/* .content_items div {
  flex: 0 0 auto;
  white-space: nowrap;
} */

.content_items a {
  list-style: none;
  min-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: 20px;
  animation: scroll 10s linear infinite;
  padding: 10px 0px;
  color: red;
}

.content_items a {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

@keyframes scroll {
  to {
    transform: translateX(-100%);
  }
}

.content_items:hover a {
  animation-play-state: paused;
}

/* hostels start */
.hostels_container {
  width: 95%;
  margin: auto;
}

.hostels_container h2 {
  text-align: center;
  color: var(--first);
}

.hostels_list {
  font-size: var(--step-0);
  line-height: calc(var(--step-0) + 10px);
  margin: 20px 0px;
  font-weight: 500;
  margin: 10px 0px;
  list-style-position: inside;
}

.hostels_list li {
  padding: 5px 0px;
}

/* hostels end */

/* Placements starts */
.placements {
  width: 95%;
  margin: auto;
}

.placements h2 {
  color: var(--first);
  text-align: center;
}

.placements_images {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.placements_images>div {
  /* width: 48%; */
}

.placements_images img {
  width: 200px;
}

.placements_more p {
  text-align: right;
  color: var(--first);
  font-size: var(--step-3);
  margin-top: 10px;
}

@media (max-width: 650px) {
  .placements_images {}

  .seperator {
    display: none;
  }
}

/* Placements ends */

/* sidebar start */
.side_book {
  position: fixed;
  right: 0;
  top: 30%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 999;
}

.side_book a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  /* WhatsApp green or you can use different for phone */
  color: var(--white);
  font-size: 20px;
  width: 50px;
  height: 50px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.side_book_appointment a {
  background-color: #007bff;
  /* Phone icon blue */
}

.side_book a:hover {
  transform: scale(1.1);
}

/* .side_book_appointment {
  border: 2px solid red;
  position: fixed;
  right: 0;
  background-color: var(--first);
  top: 40%;
  z-index: 99;
  padding: 10px 20px;
  transform: rotate(90deg) translate(0px, -78px);
}

.side_book_appointment a {
  color: var(--white);
} */
/* sidebar end */