/* 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;
  }

  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: #27447e;
    /* --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 {
  padding: 0px 0;
}

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

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

.header_logo img {
  /* height: auto; */
}

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

/* .contact_link span {
  margin-left: 5px;
} */

/* .header_contact {
  display: flex;
  gap: 10px;
  align-items: center;
}
.header_contact_icon img {
  height: auto;
  width: 40px;
}

.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);
} */
@media (max-width: 650px) {
  .header_logo img {
    width: 60%;
  }
}

/* header end */
/* banner start */
.banner_container {
  background-image: url("./public/banner/banner1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 25%;
  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 {
  justify-content: space-between;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;
}

.banner_title_content h1 {
  font-size: 50px;
}

.banner_title_content h1,
.banner_title_content p {
  color: var(--white);
  text-align: center;
}

@media (max-width: 650px) {
  .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 */


/* 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;
}

/* <!-- RV College of Engineering(RVCE) banner start --> */

.rvce_banner_container {
  background-image: url("./public/banner/rvce-about-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 25%;
  position: relative;
  isolation: isolate;
  width: 95%;
  margin: auto;
  border-radius: 20px;
  height: 400px;
}

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

.rvce_banner_items {
  justify-content: space-between;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 20px 0px;
}

.rvce_banner_title_content h1,
.rvce_banner_title_content p {
  color: var(--white);
  /* text-align: center; */
}

@media (max-width: 650px) {
  .rvce_banner_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .rvce_banner_title_content h1 {
    font-size: var(--step-8);
  }

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

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

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

/* <!-- RV College of Engineering(RVCE) banner start --> */

/* <!-- BMS College of Engineering(BMSCE) banner start --> */
.bmsce_banner_container {
  background-image: url("./public/banner/bmsce-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
  width: 95%;
  margin: auto;
  border-radius: 20px;
  height: 400px;
}

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

.bmsce_banner_items {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 20px 0px;
}

.bmsce_banner_title_content h1,
.bmsce_banner_title_content p {
  color: var(--white);
  /* text-align: center; */
}

@media (max-width: 650px) {
  .bmsce_banner_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bmsce_banner_title_content h1 {
    font-size: var(--step-7);
  }

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

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

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

/* <!-- BMS College of Engineering(BMSCE) banner end --> */

/* BMS Institute of Technology(BMSIT)  banner start */
.bms_banner_container {
  background-image: url("./public/banner/bmst-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
  width: 95%;
  margin: auto;
  border-radius: 20px;
  height: 400px;
}

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

.bms_banner_items {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 20px 0px;
}

.bms_banner_title_content h1,
.bms_banner_title_content p {
  color: var(--white);
  /* text-align: center; */
}

@media (max-width: 650px) {
  .bms_banner_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bms_banner_title_content h1 {
    font-size: var(--step-7);
  }

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

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

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

/* BMS Institute of Technology(BMSIT)  banner end */

/* <!-- MS Ramaiah Institute of Technology(MSRIT) banner start --> */
.msrit_banner_container {
  background-image: url("./public/banner/ramaiyah-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 25%;
  position: relative;
  isolation: isolate;
  width: 95%;
  margin: auto;
  border-radius: 20px;
  height: 400px;
}

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

.msrit_banner_items {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 20px 0px;
}

.msrit_banner_title_content h1,
.msrit_banner_title_content p {
  color: var(--white);
  /* text-align: center; */
}

@media (max-width: 650px) {
  .msrit_banner_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

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

@media (max-width: 450px) {
  .msrit_banner_title_content h1 {
    font-size: var(--step-4);
  }

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

/* <!-- MS Ramaiah Institute of Technology(MSRIT) banner start --> */

/* RV University banner start */
.rv_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;
}

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

.rv_banner_items {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 20px 0px;
}

.rv_banner_title_content h1,
.rv_banner_title_content p {
  color: var(--white);
  /* text-align: center; */
}

@media (max-width: 650px) {
  .rv_banner_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

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

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

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

/* RV University banner end */
.banner_button {
  background-color: var(--white);
  color: var(--black);
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  border: none;
  font-size: var(--step-3);
  font-weight: 600;
  width: fit-content;
}

/* <!-- Dayanand Sagar College of Engineering banner start --> */
.dsce_banner_container {
  background-image: url("./public/dayanand.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: TOP;
  position: relative;
  isolation: isolate;
  width: 95%;
  margin: auto;
  border-radius: 20px;
  height: 400px;
}

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

.dsce_banner_items {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 20px 0px;
}

.dsce_banner_title_content h1,
.dsce_banner_title_content p {
  color: var(--white);
  /* text-align: center; */
}

@media (max-width: 650px) {
  .dsce_banner_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dsce_banner_title_content h1 {
    font-size: var(--step-7);
  }

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

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

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

/* <!-- Dayanand Sagar College of Engineering banner end --> */

/* information start */
.information {
  background-color: var(--first);
  color: var(--white);
  /* position: sticky;
  bottom: 0;
  z-index: 999; */
}

.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 */