* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
  background-color: #f2f2f2;
}
.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

.nav-font {
  font-family: "New Amsterdam", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.half-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 20vw, 200px);
  height: clamp(80px, 15vw, 120px);
  background-color: #f2f2f2;
  color: #b6b09f;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  flex-direction: column;
  text-align: center;
  margin: auto;
}

.wave-divider {
  height: 28vh;
}

#navLine {
  width: 80%;
  margin: 5px auto;
  border-bottom-width: 0.5px;
  border-bottom-style: solid;
  border-bottom-color: #333;

  /* ensure no other borders */
  border-top: none;
  border-left: none;
  border-right: none;
}

.circle-outer {
  width: 100%;
  position: relative;
  max-width: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #dee2e6;
}

.bgColor {
  background-color: #b6b09f;
}

.circle-inner {
  background-color: white;
  border-radius: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  width: 90%;
  aspect-ratio: 1;
  position: absolute;
}

/* CSS */
.half-circle1 {
  width: 300px; /* adjust to taste */
  height: 150px; /* exactly half of width for a perfect semi-circle */
  background: #b6b09f; /* white-ish */
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
}

/* the little underline under “Contact Me” */
.divider {
  width: 120px;
  height: 4px;
  background: white;
  border-radius: 2px;
}

/* tweak your font-family/size in your .introFont rule */

.download-btn {
  display: inline-flex; /* icon + text in one line */
  align-items: center;
  /* background-color: #dee2e6; your button color */
  color: #000;
  text-decoration: none;
  padding: 1rem 1rem;
  border-radius: 30px 0 0 30px; /* big radius on top‐left & bottom‐left only */
  /* no radius on the right side so it ends flat */
  font-weight: 500;
  transition: background-color 0.2s;
}

.download-btn:hover {
  background-color: #a0662d;
}

.download-icon {
  width: 1.25rem; /* adjust icon size */
  height: 1.25rem;
  margin-right: 0.5rem; /* space between icon & text */
  fill: currentColor; /* inherit text color */
}

.download-btn span {
  line-height: 1; /* vertical align with icon */
}

.radiusIcon {
  border-radius: 60%;
  width: 50%;
  aspect-ratio: 1;
}

.circle-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.autoFont {
  font-size: 3rem;
  height: 5vh;
}

.introFont {
  font-family: "Share Tech", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
}

/* .share-tech-regular {
  font-family: "Share Tech", sans-serif;
  font-weight: 400;
  font-style: normal;
} */

.backgroundHg {
  height: auto;
}
.gradient-bg {
  background: linear-gradient(
    90deg,
    #ffd000 10%,
    /* very pale yellow */ #ffd000 50%,
    /* light sunflower */ #a58d1f 100% /* golden yellow */
  );
}

.h-9 {
  height: 9vh;
}
/* 1. Make the container fluid and centered */
.flip-container {
  height: auto;
  perspective: 1000px;
  width: 100%;
  max-width: 900px; /* larger cap */
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* 2. Preserve 3D and animate smoothly */
.coin {
  position: relative;

  width: 30vw;
  height: auto;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}

/* 3. Faces take up the full “coin” area */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 5px solid #0275d8;
  border-radius: 50%;
  object-fit: cover; /* ensure no distortion */
}

/* Front starts facing us; back is rotated */
.front {
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

/* 4. Coin-flip keyframes */
.flip-container:hover .coin {
  transform: rotateY(180deg);
}

.wave {
  position: relative;
  overflow: hidden;
}

/* size & position the wave */
.wave .wave-bottom {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100px; /* adjust for a taller/shorter wave */
  transform: translateY(1px);
  pointer-events: none; /* avoid intercepting any mouse events */
}

/* 5. Trigger on hover */
.flip-container:hover .coin {
  animation: coin-flip 1s ease-in-out forwards;
}

/*--------------------This is for about me section--------------*/
/* ───────────────────────────────────────────────
   1) Make a square container that always keeps a 1:1 aspect ratio.
   2) We’ll let it grow to 80% of its parent’s width (up to max‐width: 350px).
   ─────────────────────────────────────────────── */
.diamond-container {
  position: relative;
  width: 80%; /* 80% of the column’s width */
  max-width: 350px; /* do not exceed 350px wide on large screens */
  aspect-ratio: 1 / 1; /* always force a square (height = width) */
  margin: 0 auto; /* center it horizontally inside its column */
}

/* ───────────────────────────────────────────────
     3) Base ".diamond" rule: a square, centered in the container, rotated 45°.
     ─────────────────────────────────────────────── */
.diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%; /* 90% of the container’s width */
  height: 100%; /* same as width, so it remains square */
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 15px; /* round the corners (adjust if you like) */
}

/* ───────────────────────────────────────────────
     4) Gray diamond (behind):
        - Slightly larger than the front diamond (we use 95% here).
        - Shifted a bit upward & left so you see it “peeking” behind.
     ─────────────────────────────────────────────── */
.diamond--back {
  width: 75%;
  height: 75%;
  background-color: #b6b09f; /* the gray color from your mock */
  z-index: 1;
  /* offset by ~2.5% of container to get that “shadow” behind */
  transform: translate(calc(-50% - 2.5%), calc(-50% - 2.5%)) rotate(45deg);
}

/* ───────────────────────────────────────────────
     5) Blue diamond (front):
        - Slightly smaller, sits above gray.
        - Clips whatever is inside (overflow: hidden).
     ─────────────────────────────────────────────── */
.diamond--front {
  width: 70%;
  height: 75%;

  z-index: 2;
  transform: translate(-50%, -50%) rotate(45deg);
  overflow: hidden; /* clip the image to the diamond shape */
}

/* ───────────────────────────────────────────────
     6) The <img> inside must be counter‐rotated (–45°) so it appears upright.
        We also make it large enough (≈ 141.4% of the front‐diamond’s
        width) so it fully covers the clipped diamond area.
     ─────────────────────────────────────────────── */
.diamond__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% * 1.414); /* ≈ √2 × 100% so it covers the rotated box */
  height: calc(100% * 1.414); /* same for height */
  object-fit: cover; /* crop/scale to fill without distortion */
  transform: translate(-50%, -50%) rotate(-45deg);
  /* no need for transform-origin (default is center) */
}
.backStyle {
  position: absolute;

  width: 20vw;
  height: 10vh;
  z-index: -1;
  border-radius: 15px;
  background-color: #b6b09f;
  transform: rotate(10deg);
}

/*------------This is what I offer section-------*/
/* ──────────────────────────────────────────────────────────────────────── */
/* 1) The “grey card” itself */
.card-custom {
  background-color: #b6b09f;
  border-radius: 15px;
  width: 100%;
  max-width: 400px;
  height: 50vh;
}

.card-text {
  margin-top: 5%;
}

/* ──────────────────────────────────────────────────────────────────────── */
/* 2) Outer white circle that overlaps the top of the card */
.icon-outer {
  width: 80px;
  height: 80px;
  position: absolute;
  top: -40px; /* half of 80px, so it sits “half-outside” */
  left: 50%;
  transform: translateX(-50%); /* center horizontally */
  border: 5px solid transparent; /* optional: if you want a white border */
}

/* 3) Inner grey circle (where the SVG lives) */
.icon-inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* The parent .icon-outer is already display:flex, so this will center automatically */
}

/* ──────────────────────────────────────────────────────────────────────── */
/* 4) The “diamond + line + diamond” divider */

/* 5) Ensure the <svg> inside .icon-inner inherits a dark color */
.icon-inner svg {
  color: #333; /* or whatever “dark” you like */
}

/* ----------This is the qualification section--------- */
/* the dotted center line */
.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #dee2e6;
  background-image: linear-gradient(#dee2e6 33%, rgba(255, 255, 255, 0) 0%);
  background-position: right;
  background-size: 2px 8px;
  background-repeat: repeat-y;
}

/* override bottom, pull arrow up above the line */
.upArrow {
  position: absolute;

  top: -26px; /* arrow height ~16px, so move up half that */
  left: 50%;
  transform: translateX(-50%);
  /* now it sits centered horizontally on the line */
}

#certCarousel .carousel-control-prev,
#certCarousel .carousel-control-next {
  z-index: 5;
}

#certCarousel .carousel-inner .col-12 {
  pointer-events: none;
}
#certCarousel .carousel-inner .card {
  pointer-events: auto;
}

/* 1. Allow overflow so controls aren’t hidden */
#certCarousel {
  overflow: visible; /* default is hidden */
  margin-top: 10vh;
}

.logo-container {
  width: 50%; /* or any layout unit */
}
.logo-container svg {
  width: 50%;
  height: 50%;
}
.marginAbove {
  margin-top: 15vh;
}

/* 2. Widen the control hit area (optional but improves UX) */
#certCarousel .carousel-control-prev,
#certCarousel .carousel-control-next {
  width: 5%; /* control occupies 5% of carousel width */
  top: 50%; /* vertically center */
  transform: translateY(-50%);
  z-index: 5; /* ensure it sits above slides */
}

/* 3. Push controls outside the slide area */
#certCarousel .carousel-control-prev {
  left: 0%; /* 6% to the left of the carousel container */
}
#certCarousel .carousel-control-next {
  right: 0%; /* 6% to the right of the carousel container */
}

/* 4. (Optional) Tint the SVG icons to primary */
#certCarousel .carousel-control-prev-icon,
#certCarousel .carousel-control-next-icon {
  filter: invert(32%) sepia(90%) saturate(500%) hue-rotate(180deg)
    brightness(90%) contrast(90%);
  /* or use inline-SVG overrides if you prefer exact --bs-primary fill */
}

#service {
  margin-top: 100px !important;
}

/* the icon wrapper */
.timeline-icon {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------------------------------------------This is for education section -----------------*/
.timeline-event {
  position: relative;
  display: flex;
  left: 5vw;
  align-items: center;
  padding: 24px 16px;

  /* make sure there’s room for the left pill */
  /* margin-left: 80px; */
}

/* the left “date pill” */
.date-pill {
  position: absolute;
  left: 0;
  width: 80px;
  height: 60px;
  padding: 4px 0;
  border: 1px solid white;
  background: #b6b09f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  font-size: 14px;

  /* round only the right half */
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
}

/* the right “content card” */
.content-card {
  background: white;
  padding: 16px 24px;
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
  /* hide its left edge behind the date-pill */
  margin-left: -8px;
  flex: 1;
}

.content-card h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #222;
}

.content-card p {
  margin: 0;
  font-size: 14px;
  color: #222;
}

/*-------------This is for right side-----------*/
.timeline-event-right {
  position: relative;
  display: flex;
  right: 5vw;
  align-items: center;
  padding: 24px 16px;
}

.date-pill-right {
  position: absolute;
  right: 0;
  width: 80px;
  height: 60px;
  padding: 4px 0;
  border: 1px solid white;
  background: #b6b09f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  font-size: 14px;

  /* round only the right half */
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;
}

/* the right “content card” */
.content-card-right {
  background: white;
  padding: 16px 24px;
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;
  /* hide its left edge behind the date-pill */
  margin-left: -8px;
  flex: 1;
}

.content-card-right h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #222;
}

.content-card-right p {
  margin: 0;
  font-size: 14px;
  color: #222;
}
/* ensure mobile stacks nicely */
@media (max-width: 767.98px) {
  .timeline-item .timeline-icon {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 1rem auto;
  }
}

/* -----------------------------This is the media query code ------------------- */

/* 1. Extra-small: 200px up to 575.98px */
@media only screen and (min-width: 200px) and (max-width: 575.98px) {
  .timeline-event-right {
    right: 0vw;
    padding: 0;
  }

  .timeline-event {
    left: 0vw;
    padding: 0;
  }
  .download-btn {
    border-radius: 15px;
  }

  .card-custom {
    height: auto;
  }
  .circle-outer {
  }
  .backgroundHg {
    margin-bottom: 5vh;
  }
  .marginAbove {
    margin-top: 5vh;
  }
  .flip-container {
    max-width: 250px;
    /* margin-bottom: 50vh; */
  }

  .coin {
    width: auto;
    height: 100%;
  }

  .gradient-bg {
    height: 100vh !important;
  }

  .downloadCv {
    width: 100% !important;
  }

  .autoFont {
    font-size: 50px;
    height: 8vh;
  }

  .service-title {
    font-size: 18px;
  }
  .wave-divider {
    height: 10vh;
  }
}

/* 2. Small: 576px up to 767.98px */
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .flip-container {
    max-width: 300px;
  }

  .coin {
    width: 30vw;
    height: 50vh;
  }
}

/* 3. Medium: 768px up to 991.98px */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .flip-container {
    max-width: 350px;
  }

  .coin {
    width: 35vw;
    height: 70vh;
  }
}

/* 4. Large and up: 992px and above */
@media only screen and (min-width: 992px) and (max-width: 1400px) {
  .flip-container {
    max-width: 400px;
  }

  .coin {
    width: 40vw;
    margin-left: -5vw !important;
    height: 40vh;
  }
}

@media only screen and (min-width: 1400px) {
  .flip-container {
    max-width: 400px;
  }

  .coin {
    width: 35vw;
    height: 70vh;
    margin-left: -2vw;
  }
}

/* Project carousel cards */
#projectsCarousel {
  overflow: visible;
}

#projectsCarousel .carousel-inner {
  padding-bottom: 2.5rem;
}

#projectsCarousel .carousel-control-prev,
#projectsCarousel .carousel-control-next {
  width: 3.5rem;
}

#projectsCarousel .carousel-control-prev {
  left: -3.75rem;
}

#projectsCarousel .carousel-control-next {
  right: -3.75rem;
}

.project-slide-row {
  min-height: 50vh;
}

.project-media-card {
  width: 100%;
  height: clamp(260px, 50vh, 520px);
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
  position: relative;
}

.project-media-card--image {
  object-fit: cover;
  background: #111;
}

.project-media-card--libri,
.project-media-card--pos,
.project-media-card--yoga {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-media-card--libri {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2rem;
  border-color: rgba(49, 92, 124, 0.32);
  background:
    linear-gradient(90deg, rgba(42, 76, 105, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(42, 76, 105, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #eef7fb 0%, #dcecf5 48%, #f6ead6 100%);
  background-size: 34px 34px, 34px 34px, auto;
}

.project-media-card--libri::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  height: 44%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(49, 92, 124, 0.12);
}

.project-media-card--libri::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  height: 1rem;
  border-radius: 0 0 8px 8px;
  background: #315c7c;
}

.libri-card-visual {
  position: absolute;
  inset: 1.25rem;
  z-index: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.25rem;
  align-items: end;
  pointer-events: none;
}

.libri-card-logo {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.75rem 1.5rem rgba(37, 73, 103, 0.18);
}

.libri-card-shelf {
  height: 48%;
  display: flex;
  align-items: flex-end;
  gap: 0.42rem;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(49, 92, 124, 0.16);
  box-shadow: 0 1rem 2rem rgba(37, 73, 103, 0.12);
}

.libri-card-shelf span {
  width: 1.1rem;
  border-radius: 4px 4px 2px 2px;
  background: #315c7c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.libri-card-shelf span:nth-child(1) {
  height: 58%;
  background: #315c7c;
}

.libri-card-shelf span:nth-child(2) {
  height: 78%;
  background: #d3a64f;
}

.libri-card-shelf span:nth-child(3) {
  height: 66%;
  background: #477b8f;
}

.libri-card-shelf span:nth-child(4) {
  height: 86%;
  background: #b2675e;
}

.libri-card-shelf span:nth-child(5) {
  height: 62%;
  background: #6c8f68;
}

.libri-card-shelf span:nth-child(6) {
  height: 74%;
  background: #244967;
}

.libri-card-reader {
  min-height: 58%;
  padding: 1rem;
  border-radius: 8px;
  background: #1c354d;
  box-shadow: 0 1.25rem 2.5rem rgba(20, 45, 67, 0.24);
}

.libri-card-reader__bar {
  width: 42%;
  height: 0.65rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: #8ecae6;
}

.libri-card-reader__page {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  background: #fffaf0;
}

.libri-card-reader__page span {
  height: 0.5rem;
  border-radius: 999px;
  background: #cad7df;
}

.libri-card-reader__page span:nth-child(1) {
  width: 92%;
}

.libri-card-reader__page span:nth-child(2) {
  width: 76%;
}

.libri-card-reader__page span:nth-child(3) {
  width: 86%;
}

.libri-card-reader__page span:nth-child(4) {
  width: 58%;
}

.libri-card-reader__tabs {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.libri-card-reader__tabs span {
  width: 2.15rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.project-media-card--libri .project-media-card__content {
  max-width: calc(100% - 5rem);
  padding: 0;
  text-align: left;
}

.project-media-card--libri .project-media-card__eyebrow {
  background: #315c7c;
  color: #fff;
}

.project-media-card--libri .project-media-card__content h2 {
  color: #17324d;
  font-size: 4rem;
  white-space: nowrap;
}

.project-media-card--libri .project-media-card__content p {
  color: #456173;
  font-weight: 700;
}

.project-media-card--pos {
  background:
    linear-gradient(135deg, rgba(16, 24, 39, 0.92), rgba(58, 53, 42, 0.88)),
    linear-gradient(45deg, #2f4353, #b6b09f);
}

.project-media-card--pos::before,
.project-media-card--yoga::before {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
}

.project-media-card--pos::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
}

.project-media-card--yoga {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.75), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(182, 176, 159, 0.55), transparent 26%),
    linear-gradient(135deg, #d8f3dc, #74c69d);
}

.project-media-card--yoga::after {
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(6, 78, 59, 0.2);
}

.project-media-card__content {
  position: relative;
  z-index: 1;
  max-width: min(88%, 520px);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
  font-family: "Share Tech", sans-serif;
}

.project-media-card__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
}

.project-media-card__content h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 700;
  line-height: 1;
  overflow-wrap: anywhere;
}

.project-media-card__content p {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}

.project-media-card--yoga .project-media-card__content h2 {
  color: #064e3b;
}

.project-media-card--yoga .project-media-card__content p {
  color: #073b2f;
}

.project-copy .btn {
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  min-width: 140px;
}

@media only screen and (max-width: 991.98px) {
  #projectsCarousel .carousel-control-prev,
  #projectsCarousel .carousel-control-next {
    width: 2.75rem;
  }

  #projectsCarousel .carousel-control-prev {
    left: 0;
  }

  #projectsCarousel .carousel-control-next {
    right: 0;
  }

  .project-slide-row {
    min-height: auto;
  }

  .project-media-card {
    height: clamp(230px, 42vh, 360px);
  }

  .project-media-card--libri {
    padding: 1.35rem;
  }

  .project-media-card--libri .project-media-card__content h2 {
    font-size: 3rem;
  }

  .libri-card-visual {
    inset: 1rem;
    gap: 0.8rem;
  }

  .libri-card-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
}

@media only screen and (max-width: 575.98px) {
  .project-media-card--libri .project-media-card__content {
    max-width: calc(100% - 3.75rem);
  }

  .project-media-card--libri .project-media-card__content h2 {
    font-size: 2.35rem;
  }

  .project-media-card--libri .project-media-card__content p {
    font-size: 0.95rem;
  }

  .libri-card-visual {
    grid-template-columns: 1fr;
  }

  .libri-card-shelf {
    display: none;
  }

  .libri-card-reader {
    min-height: 46%;
  }
}

.project-media-card--rental,
.project-media-card--appliance {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-media-card--rental {
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.7), transparent 25%),
    radial-gradient(circle at 15% 85%, rgba(125, 211, 252, 0.8), transparent 30%),
    linear-gradient(135deg, #e0f2fe, #38bdf8);
}

.project-media-card--rental::before {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}

.project-media-card--rental::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 40%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 30px;
  border: 2px solid rgba(2, 132, 199, 0.15);
  transform: rotate(15deg);
}

.project-media-card--appliance {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3), transparent 40%),
    linear-gradient(135deg, #60a5fa, #1e3a8a);
}

.project-media-card--appliance::before {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}

.project-media-card--appliance::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
}

.project-media-card--product {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.4), transparent 40%),
    linear-gradient(135deg, #a855f7, #3b0764);
}

.project-media-card--product::before {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
}

.project-media-card--product::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}