.hero-section {
  align-items: flex-start;
  display: flex;
  min-height: 150%;
  justify-content: center;
   border: none;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
  border: none;
}


.card {
  list-style: none;
  position: relative;
}

.card:before {
  content: "";
  display: block;
/*  padding-bottom: 100%;*/
  padding-bottom: 0;
  width: 100%;
}

.card__background {
  background-size: cover;
  background-position: center;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: filter 200ms linear, transform 200ms linear;
}

.card__content {
  padding: var(--spacing-l);
  position: absolute;
  top: 37%;
  font-size: 15px;
}

.card__category {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

.card__heading {
  color: var(--text-lighter);
  font-size: 55px;
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
  word-spacing: 100vw;
}

.card:hover .card__background {
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background {
  filter: brightness(0.8) contrast(1.2) blur(5px);
}

.ob-home-p{
  color: #000; 
  font-size: 15px; 
  padding-left: 50px; 
  padding-right: 50px;
  margin-top: 25%;
}

.ob-home-p1{
  color: #000; 
  font-size: 15px; 
  padding-left: 50px; 
  padding-right: 50px;
}


@media (min-width: 540px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 800px) {
    .card__heading {
      color: var(--text-lighter);
      font-size: 25px;
      text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
      line-height: 1.4;
      word-spacing: 100vw;
  }
}



.swiper {
  width: 100%;
  height: 80vh;
  height: 100svh;
  min-height: 320px;
  background-color: #46677b;
}

.swiper-slide {
  font-size: 18px;
  background: #fff;
  display: flex;
}
.swiper-slide::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
/*  background-image: linear-gradient(359deg, #2b2d42 0%, rgba(40, 42, 62, 0.9375) 6.25%, rgba(38, 39, 58, 0.875) 12.5%, rgba(35, 37, 54, 0.8125) 18.75%, rgba(32, 34, 50, 0.75) 25%, rgba(30, 31, 45, 0.6875) 31.25%, rgba(27, 28, 41, 0.625) 37.5%, rgba(24, 25, 37, 0.5625) 43.75%, rgba(21, 23, 33, 0.5) 50%, rgba(19, 20, 29, 0.4375) 56.25%, rgba(16, 17, 25, 0.375) 62.5%, rgba(13, 14, 21, 0.3125) 68.75%, rgba(11, 11, 17, 0.25) 75%, rgba(8, 8, 12, 0.1875) 81.25%, rgba(5, 6, 8, 0.125) 87.5%, rgba(3, 3, 4, 0.0625) 93.75%, rgba(0, 0, 0, 0) 100%);*/
}

/*
  Title Text
*/
.title {
  padding: 0 10vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 1;
  color: #ffffff;
}
.title__text {
  letter-spacing: -2px;
  font-size: clamp(3rem, 0.3864rem + 13.0682vw, 7rem);
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
}


/*
  Style up the image behind each slide
*/
.background-image {
  position: absolute;
  bottom: 0;
  left: 0;
}
.background-image__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.8;
  background-position: bottom;
/*  mix-blend-mode: luminosity;*/
}