/* * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

body {
  background-color: #555;
} */

/* LAYOUT */
.content-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0.5rem;
}

/* CARD */
.news-card {
  margin: 0.5rem;
  position: relative;
  height: 12rem;
  /* mobile */
  overflow: hidden;
  border-radius: 0.5rem;
  flex: 1;
  min-width: 290px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  transform: translate3d(0, 0, 0);
}

/* LARGE SCREEN */
@media (min-width: 900px) {
  .news-card {
    height: 20rem;
  }
}

/* OVERLAY */
.news-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.7) 80%);
  z-index: 0;
}

/* FULL CARD LINK */
.news-card__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* IMAGE */
.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: -1;
  transition: transform 3s ease;
}

/* TEXT WRAPPER */
.news-card__text-wrapper {
  position: absolute;
  bottom: 0;
  padding: 1rem;
  color: #fff;
  transition: background-color 1.5s ease;
}

/* TITLE */
.news-card__title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  transition: color 1s ease;
}

/* DATE */
.news-card__post-date {
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
  color: #ccc;
}

/* DETAILS (HIDDEN BY DEFAULT) */
.news-card__details-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1.5s ease, opacity 1s ease;
}

/* HOVER EFFECTS (DESKTOP ONLY) */
@media (min-width: 900px) {
  .news-card:hover .news-card__details-wrapper {
    max-height: 20rem;
    opacity: 1;
  }

  .news-card:hover .news-card__text-wrapper {
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* .news-card:hover .news-card__title {
    color: yellow;
  } */

  .news-card:hover .news-card__image {
    transform: scale(1.2);
  }
}

/* EXCERPT */
.news-card__excerpt {
  font-weight: 300;
}

/* READ MORE */
.news-card__read-more {
  background: #000;
  color: #bbb;
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 0.3rem;
  margin-top: 1rem;
  border: 1px solid #444;
  font-size: 0.8rem;
  text-decoration: none;
  width: 7rem;
  margin-left: auto;
  position: relative;
  z-index: 5;
}

/* ICON */
.news-card__read-more i {
  position: relative;
  left: 0.2rem;
  color: #888;
  transition: left 0.5s ease, color 0.6s ease;
}

/* ICON HOVER */
.news-card__read-more:hover i {
  left: 0.5rem;
  color: yellow;
}

.custom-card {
  padding: 10px;
  background: rgba(237, 236, 238, 0.7);
  box-shadow: 0px 0px 10px rgba(193, 193, 193, 0.45);
  position: relative;
  overflow: hidden;
  border: none;
  /* We use pseudo-element for border */
  height: 100%;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.3s;
  /* font-size: 12px; */
  line-height: 1.3;
  z-index: 3;
  /* Ensure on top of ::before/::after */
}

/* Neon Glow Container */
.custom-card::before {
  content: '';
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(circle closest-side, var(--clr, #00c6ff), transparent);
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
  z-index: -1;
  /* The size of the glow spot */
  width: 600px;
  height: 600px;
  pointer-events: none;
}

/* Inner mask to create the "border" look by covering the center */
.custom-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  /* Border thickness */
  background: rgb(255, 255, 255);
  /* Match or slightly lighter than card bg */
  border-radius: 8px;
  /* Slightly smaller than card */
  z-index: -1;
}

.custom-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 45px rgba(52, 61, 71, 0.2), 0 0 20px rgba(0, 114, 255, 0.1);
}

.custom-card:hover::before {
  opacity: 1;
}

.card-body {
  color: #333;
  z-index: 2;
  /* Content above mask */
  position: relative;
}

.card-description-popup {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: rgba(139, 139, 139, 0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  color: #333;
  font-weight: 500;
  z-index: 3;
}

.custom-card:hover .card-description-popup {
  transform: translateY(0);
}

.mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Typography overrides */
.card-text,
.btn {
  position: relative;
  z-index: 2;
}

/* Enable the hover look when the 'active-state' class is applied via JS */
.custom-card.active-state {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 45px rgba(52, 61, 71, 0.2), 0 0 20px rgba(0, 114, 255, 0.1);
}

.custom-card.active-state::before {
  opacity: 1;
}

.custom-card.active-state .card-description-popup {
  transform: translateY(0);
}

/* Ensure smooth transitions for the variables */
.custom-card::before {
  top: var(--y, 50%);
  left: var(--x, 50%);
  transition: opacity 0.3s, background 0.3s, transform 0.3s;
}

/* .btn-primary {
            background: linear-gradient(45deg, #00c6ff, #0072ff);
            border: none;
            color: #fff;
            font-family: 'Orbitron', sans-serif;
        } */

.btn-request-demo {
  position: fixed;
  visibility: visible;
  opacity: 1;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #804097;
  width: 150px;
  height: 30px;
  border-radius: 4px;
  transition: all 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.btn-request-demo i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.btn-request-demo:hover {
  background: #97406e;
  color: #fff;
}