@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

:root {
  /* fonts */
  --font-raleway: "Inter", sans-serif;
  --font-imperator: "Playfair Display", serif;

  /* Colors */
  --color-white: #fff;
  --color-brown: #8d191c;

  /* Gaps */
  --gap-382xl: 401px;
  --gap-24xl: 43px;
  --gap-976xl: 995px;

  /* Paddings */
  --padding-xl: 20px;
  --padding-27xl: 46px;
  --padding-4xs: 9px;
  --padding-35xl: 54px;
  --padding-8xl: 27px;
}

body {
  font-family: var(--font-raleway);
  line-height: normal;

}

li {
  font-family: var(--font-raleway) !important;
}

.container {
  margin: 0 auto;
  max-width: 1440px !important;
}

@media (max-width: 1440px) {
  .container {
    padding: 0 60px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
}

.carousel {
  transition: transform 0.3s ease-in-out;
}

.announcement-item {
  flex: 0 0 100%;
}

#vmls-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 9;
}

#topbar {
  background: #fff;
}

#vmls-header-inner {
  background: #eaeaea;
}

#hero-home {
  background-image: url("../public/frame-1@3x.webp");
  background-size: cover;
  background-position: 43% 40%;
  background-repeat: no-repeat;
}

#institutional-collaboration .marquee {
  display: flex;
  align-items: center;
  block-size: var(--marquee-item-height);
  margin-block: 0;
  position: relative;
  overflow-x: hidden;
  mask-image: linear-gradient(to right,
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0));
}

.marquee--6 {
  --marquee-item-width: 166px;
  --marquee-item-height: 100px;
  --marquee-duration: 32s;
  --marquee-items: 21;
}

.marquee__item {
  --marquee-item-offset: max(calc(var(--marquee-item-width) * var(--marquee-items)),
      calc(100% + var(--marquee-item-width)));
  --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

.marquee__item:nth-child(4n) {
  border-top-right-radius: 1rem;
}

.marquee__item:nth-child(4n + 1) {
  border-bottom-right-radius: 1rem;
}

.marquee__item:nth-child(4n + 2) {
  border-bottom-left-radius: 1rem;
}

.marquee__item:nth-child(4n + 3) {
  border-top-left-radius: 1rem;
}

.marquee--6 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee--6 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee--6 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}

.marquee--6 .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}

.marquee--6 .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}

.marquee--6 .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}

.marquee--6 .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}

.marquee--6 .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}

.marquee--6 .marquee__item:nth-of-type(9) {
  --marquee-item-index: 9;
}

.marquee--6 .marquee__item:nth-of-type(10) {
  --marquee-item-index: 10;
}

.marquee--6 .marquee__item:nth-of-type(11) {
  --marquee-item-index: 11;
}

.marquee--6 .marquee__item:nth-of-type(12) {
  --marquee-item-index: 12;
}

.marquee--6 .marquee__item:nth-of-type(13) {
  --marquee-item-index: 13;
}

.marquee--6 .marquee__item:nth-of-type(14) {
  --marquee-item-index: 14;
}

.marquee--6 .marquee__item:nth-of-type(15) {
  --marquee-item-index: 15;
}

.marquee--6 .marquee__item:nth-of-type(16) {
  --marquee-item-index: 16;
}

.marquee--6 .marquee__item:nth-of-type(17) {
  --marquee-item-index: 17;
}

.marquee--6 .marquee__item:nth-of-type(18) {
  --marquee-item-index: 18;
}

.marquee--6 .marquee__item:nth-of-type(19) {
  --marquee-item-index: 19;
}

.marquee--6 .marquee__item:nth-of-type(20) {
  --marquee-item-index: 20;
}

.marquee--6 .marquee__item:nth-of-type(21) {
  --marquee-item-index: 21;
}

@keyframes go {
  to {
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* Custom Swiper Navigation and Pagination Colors */
.swiper-button-next,
.swiper-button-prev {
  color: #8d191c !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: #8d191c !important;
}

.swiper-pagination-progressbar {
  background: rgba(141, 25, 28, 0.2) !important;
}

.swiper-pagination-progressbar-fill {
  background: #8d191c !important;
}

.swiper-pagination-bullet {
  background: #8d191c !important;
}

.swiper-pagination-bullet-active {
  background: #8d191c !important;
}

/* apply-button-css */
.applyknow {
  width: 164px;
  height: 45px;
  padding: 10px;
  position: fixed;
  right: -57px;
  top: 56%;
  z-index: 10;
  background: #ae0808;
  transform: rotate(270deg);
  text-align: center;
  color: #ffffff;
  font-size: 17px;
  -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;
  -moz-animation: NAME-YOUR-ANIMATION 1s infinite;
  -o-animation: NAME-YOUR-ANIMATION 1s infinite;
  animation: NAME-YOUR-ANIMATION 1s infinite;
}

.applyknow1 {
  width: 164px;
  height: 45px;
  padding: 10px;
  position: fixed;
  right: -57px;
  top: 30%;
  z-index: 10;
  background: #ae0808;
  transform: rotate(270deg);
  text-align: center;
  color: #ffffff;
  font-size: 17px;
  -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;
  -moz-animation: NAME-YOUR-ANIMATION 1s infinite;
  -o-animation: NAME-YOUR-ANIMATION 1s infinite;
  animation: NAME-YOUR-ANIMATION 1s infinite;
}

@-webkit-keyframes NAME-YOUR-ANIMATION {

  0%,
  49% {
    background: linear-gradient(174deg,
        rgb(180 58 58) 0%,
        rgb(171 18 18) 50%,
        rgb(144 16 16) 100%);
  }

  50%,
  100% {
    background-color: #e50000;
  }
}

@keyframes NAME-YOUR-ANIMATION {

  0%,
  49% {
    background: linear-gradient(174deg,
        rgb(180 58 58) 0%,
        rgb(171 18 18) 50%,
        rgb(144 16 16) 100%);
  }

  50%,
  100% {
    background-color: #e50000;
  }
}

@media only screen and (max-width: 600px) {
  .applyknow {
    width: 151px;
    height: 40px;
    padding: 10px;
    position: fixed;
    right: -58px;
    top: 56%;
    z-index: 10;
    background: #ae0808;
    transform: rotate(270deg);
    text-align: center;
    color: #ffffff;
    font-size: 15px !important;
    -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;
    -moz-animation: NAME-YOUR-ANIMATION 1s infinite;
    -o-animation: NAME-YOUR-ANIMATION 1s infinite;
    animation: NAME-YOUR-ANIMATION 1s infinite;
  }

  .applyknow1 {
    width: 151px;
    height: 40px;
    padding: 10px;
    position: fixed;
    right: -58px;
    top: 30%;
    z-index: 10;
    background: #ae0808;
    transform: rotate(270deg);
    text-align: center;
    color: #ffffff;
    font-size: 17px;
    -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;
    -moz-animation: NAME-YOUR-ANIMATION 1s infinite;
    -o-animation: NAME-YOUR-ANIMATION 1s infinite;
    animation: NAME-YOUR-ANIMATION 1s infinite;
  }
}

@media only screen and (min-width: 1024px) {
  #hero-section-vmls {
    height: calc(100vh - 157px);
  }
}

.faculty-grid img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  transition: transform 1s ease-in-out !important;
}

.faculty-grid a:hover img {
  transform: scale(1.1) !important;
}

.faculty-grid .relative {
  overflow: hidden !important;
}

.faculty-profile-img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}