body {
  font-family: 'Montserrat', sans-serif;
}

.navbar {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 2;
}

.nav-links {
  text-decoration: none;
  position: relative;
  font-weight: bold;
  padding-bottom: 1px;
}

.nav-links::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.nav-links:hover {
  transform: scaleX(1);
  color: #c31432; 
  transform-origin: bottom left;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.nav-links:hover::before {
  transform: scaleX(1);
  background-color: #c31432; 
  transform-origin: bottom left;
}
.nav-btn {
  background-color: #c31432;
  border: 1px solid transparent;
  border-radius: 4px;
}

header {
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
}
header .logo {
  font-size: 30px;
  text-transform: uppercase;
}
header nav ul {
  display: flex;
}

.hamburger {
  cursor: pointer;
  display: none;
}
.hamburger div {
  width: 30px;
  height: 4px;
  margin: 5px 0;
  border-radius: 10px;
  background: #000;
}


@media only screen and (max-width: 900px) {
  header {
      padding: 0 30px;
  }
}
@media only screen and (max-width: 700px) {
  .hamburger {
      display: block;
  }
  header nav {
      position: absolute;
      width: 100%;
      left: -100%;
      top: 50px;
      background: #fff;
      padding: 30px;
      transition: 0.3s;
  }
  header #nav_check:checked ~ nav {
      left: 0;
  }
  header nav ul {
      display: block;
  }
}

.blood-home-bg{
  background-image: linear-gradient(to top, #ffffff, #ff1e43, #C31432 );
}

.blood-bg { 
  background-color: #FEE5E8;
}
.blood-bg1 {
  background-color: #C31432;
}

.blood-bg2 {
  background-color: #AF6B78;
}

.text-1 {
  color: #C31432;
}
.text-2 {
  color: #AF6B78;
}

video {
  width: 100%;
  height: auto;
}


.wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}
.wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #AF6B78;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.wrapper i:first-child{
  left: -22px;
}
.wrapper i:last-child{
  right: -22px;
}
.wrapper .carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel.no-transition {
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel .card {
  scroll-snap-align: start;
  height: auto;
  list-style: none;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
}


@media screen and (max-width: 900px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 600px) {
  .wrapper .carousel {
    grid-auto-columns: 100%;
  }
}

/* about */



/* Dismiss Block */

#dismissBlock {
  background-color: #FEE5E8;
}

/* footer */

.blood-footer-bg{
  background-image: linear-gradient(to bottom, #ffffff, #ff1e43 ,#C31432);
}