@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
  outline: none;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  letter-spacing: 0.05vw;
  box-sizing: border-box;
  text-decoration: none;
}

html {
  background-color: #000;
}



body {
  --dot-bg: #000000e0;
  --dot-color: #939393;
  --dot-size: 0.1vw;
  --dot-space: 12vw;
	background:
		linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
		linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
		var(--dot-color);
}


.top-container {
  position: absolute;
  top: 4.25vw;
  left: 20vw;
  border-radius: 0vw;
  background: #000000d1;
  width: 80vw;
  height: 4.5vw;
  margin-bottom: 1vw;
  margin-top: 0;
  backdrop-filter: blur(0.5vw);
  box-shadow: 0.25vw 0.25vw 0.35vw 0vw #0000009c;
}

.top-links, .top-links a {
  display: flex;
  color: white;
  border-bottom: 0.1vw solid #80808029;
  z-index: 999;
}

.top-link-home {
  font-size: 1.5vw;
  margin: 1.3vw 0.35vw 1vw 1.35vw;
}

.top-link {
  margin: 1.55vw 0vw;
  font-size: 1vw;
}

.top-link-active {
  margin: 1.55vw 0vw;
  font-size: 1vw;
}

.top-link-separator {
  margin: 1.25vw 0.65vw;
  font-size: 1.35vw;
}


.sorting-menu {
	display: none;
}

.sorting-phone {
	display: none;
}




.top-categories {
  display: flex;
  flex-wrap: wrap;
  width: 80vw;
  margin-left: 20vw;
  gap: 1vw;
  justify-content: center;
  margin-top: -19vw;
}

.category-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
  justify-content: center;
  width: 100%;
}

.category {
  display: flex;
  align-items: center;
  background-color: #0a0a0a;
  width: 23vw;
  height: 7vw;
  border-radius: 2vw;
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 1vw;
  transition: box-shadow 0.25s ease;
  box-shadow: 0.2vw 0.2vw 0.5vw 0vw #000000cf;
}

.category:hover {
  box-shadow: 0vw 0vw 0vw 0.15vw #3737376e;
}

.category i {
  font-size: 3vw;
  color: #ffffff52;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 1vw;
  margin-right: 1.5vw;
}

.category-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-title {
  font-size: 1.2vw;
  margin-bottom: 0.5vw;
  color: white;
}

.category-description {
  font-size: 0.9vw;
  color: #ccc;
}








































/* HTML above is a single self-contained container. All sizes use vw units. */
.listing-container,
.listing-container * {
  box-sizing: border-box;
}

/* container positioning and overall grid (two columns) */
.listing-container {
  position: relative;
  left: 20vw;
  top: 8.75vw;
  margin-bottom: 8.75vw;
  width: 80vw;
  display: grid;
  padding: 2vw;
  grid-template-columns: 52vw 28vw; /* 52 + 28 = 80 */
  gap: 2vw;
  color: #ffffff;
}

/* LEFT COLUMN */
.listing-left {
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

/* PHOTOS AREA */
.photos-area {
  display: flex;
  flex-direction: column;
  gap: 1.2vw;
  background: #0a0a0a;
  border-radius: 2vw;
  padding: 2vw;
}

/* grid for main photos: large on left, two stacked on right */
.photos-grid {
  display: grid;
  grid-template-columns: 32vw 14.5vw; /* left large photo width + small column */
  grid-template-rows: auto auto;
  gap: 1vw;
  align-items: start;
}

/* shared photo style (yellow rectangles) - all must keep 16:9 aspect */
.photos-grid .photo-large,
.photos-grid .photo-right-top,
.photos-grid .photo-right-mid,
.thumbnails-row .thumb {
  background: #ffffff0d;
  border-radius: 1.6vw;
  box-shadow: inset 0 0 0.5vw rgba(0,0,0,0.12);
  overflow: hidden;
  object-fit: cover;
}

/* big main photo (left) */
.photo-large {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 32.25vw;
  aspect-ratio: 16 / 9;
}

/* small stacked photos to the right of the big one */
.photo-right-top {
  grid-column: 2;
  grid-row: 1;
  width: 15.25vw;
  aspect-ratio: 16 / 9;
}

.photo-right-mid {
  grid-column: 2;
  grid-row: 2;
  width: 15.25vw;
  aspect-ratio: 16 / 9;
}

/* thumbnails row directly under the big photo (kept inside the left column) */
.thumbnails-row {
  display: flex;
  gap: 0.75vw;
}

/* five equal thumbnails; calculation uses the big-photo width minus gaps */
.thumbnails-row .thumb {
  width: calc((50vw - 1vw) / 5);
  aspect-ratio: 16 / 9;
  border-radius: 1.4vw;
  margin-top: -0.25vw;
}

/* DESCRIPTION BOX directly under photos-area within left column */
.description-box {
  width: 100%;
  background: #0a0a0a;
  border-radius: 1.8vw;
  padding: 2vw;
  color: #f2f2f2;
  box-shadow: 0 0.4vw 0.8vw rgba(0,0,0,0.25);
}

/* title and paragraphs */
.listing-title {
  font-size: 2.6vw;
  text-align: center;
  margin: 0 0 1.2vw 0;
  letter-spacing: 0.25vw;
}

.listing-paragraph {
  font-size: 0.85vw;
  line-height: 1.45;
  margin: 0 0 0.9vw 0;
  text-align: justify;
  color: #e6e6e6;
	font-weight: 300
}

/* RIGHT COLUMN */
.listing-right {
  display: flex;
  flex-direction: column;
  gap: 2vw;
	max-width: 20vw
}

/* USER CARD */
.user-card {

  background: #0a0a0a;
  border-radius: 1.8vw;
  padding: 0vw;
  text-align: center;
  box-shadow: 0 0.3vw 0.6vw rgba(0,0,0,0.28);
	width: 22vw;
}

/* avatar circle */
.user-avatar-container {
  width: 8.2vw;
  height: 8.2vw;
  border-radius: 50%;
  background: #222;
  margin: 2vw auto 1vw auto;
}

.user-avatar {
  width: 8.2vw;
  height: 8.2vw;
  border-radius: 50%;
  background: #222;
}

/* username */
.user-name {
  font-size: 1.5vw;
  margin-top: 0vw;
  letter-spacing: 0.18vw;
}

/* score row with numbers and progress bar */
.user-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35vw;
  margin-top: 0.5vw;
}

.score-left,
.score-right {
  font-size: 1.25vw;
  width: 1.5vw;
  text-align: center;
}

/* progress bar container */
.score-bar {
  width: 12vw;
  height: 0.5vw;
  background: #1f1f1f;
  border-radius: 1vw;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -0.12vw 0 rgba(0,0,0,0.35);
}

/* yellow fill inside progress (set width to desired percentage visually) */
.score-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 58%; /* visual fill (change if needed) */
  background: #ffbf00;
}

/* user stats (4 items) arranged in 2 columns */
.user-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2vw;
  align-items: start;
	padding: 1.5vw 2.25vw 2.25vw 2.25vw;
}

/* each stat: star icon + text block (label above value) */
.stat {
  display: flex;
  gap: 1vw;
  align-items: flex-start;
}

.stat i {
  font-size: 1.75vw;
	margin-top: 0.35vw;
}

.stat i.fas.fa-star {
  font-size: 1.6vw;
  color: #ffbf00;
  margin-top: 0.15vw;
}

/* text block with label on top and value below (as requested) */
.stat-text {
  display: flex;
  flex-direction: column;
  font-size: 1.05vw;
  line-height: 1.15;
  color: #e9e9e9;
}

.stat-label {
  font-size: 0.85vw;
	font-weight: 600;
	text-align: left;
}

.stat-value {
  margin-top: 0.25vw;
  font-size: 1vw;
  text-align: left;
	font-weight: 200;
}

/* ratings count at the bottom of user card */
.show-profile {
  font-size: 1.05vw;
  padding: 1.35vw;
  margin-top: -2vw;
  color: white;
}

.show-profile:hover {
  font-size: 1.05vw;
  padding: 1.35vw;
	margin-top: -2vw;
}

/* PRICE CARD */
.price-card {
  background: #0a0a0a;
  border-radius: 1.8vw;
  padding: 2.2vw;
  text-align: center;
  box-shadow: 0 0.3vw 0.6vw rgba(0,0,0,0.28);
  width: 22vw;
}

/* price card text sizes */
.price-title {
  font-size: 1.65vw;
  margin-bottom: 0.25vw;
	font-weight: 800
}

.price-condition {
  font-size: 1.05vw;
  color: #dcdcdc;
  margin-bottom: 1vw;
}

.price-value {
  font-size: 1.5vw;
  margin-bottom: 1vw;
}

/* price scale: bar on top, labels below */
.price-scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.2vw;
}

/* gradient bar */
.scale-bar {
  width: 100%;
  height: 0.5vw;
  border-radius: 0.9vw;
  background: linear-gradient(90deg, #ff3b30 0%, #ffbf00 45%, #3fc24a 100%);
  box-shadow: inset 0 -0.12vw 0 rgba(0,0,0,0.25);
  margin-bottom: 0.4vw;
}

/* container for labels under the bar */
.scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* individual labels */
.scale-label {
  font-size: 0.95vw;
  color: #d6d6d6;
}


/* contact button */
.contact-button {
  background: #ffbf00;
  color: #111111;
  border: none;
  padding: 0.9vw 1.8vw;
  border-radius: 1.1vw;
  font-size: 1.1vw;
  cursor: pointer;
  margin-top: 0.6vw;
  letter-spacing: 0.06vw;
}







/* MAIN BANNERY */

.listings-title {
	font-size: 2.2vw;
	color: white;
	margin-top: 1.5vw;
	margin-bottom: 5vw;
}

.car-banners {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1vw;
  margin-bottom: 1.5vw;
  padding-top: 8.5vw;
  padding-bottom: 4vw;
  width: 80vw;
  margin-left: 20vw;
}

.car-banner {
  display: flex;
  align-items: flex-start;
  font-family: sans-serif;
  border-radius: 2vw;
  background: #0a0a0a;
  color: white;
  width: 70vw;
  height: 13.25vw;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
  box-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.1);
  box-shadow: 0.2vw 0.2vw 0.5vw 0vw #000000cf;
}

.car-banner:hover {
  box-shadow: 0vw 0vw 0vw 0.15vw #3737376e;
}

.car-banner-image {
  width: 21vw;
  height: 11.25vw;
  object-fit: cover;
  border-radius: 2vw;
  margin: 1vw;
  flex-shrink: 0;
}

.car-banner-image-link {
  height: 0vw;
}

.car-info {
  flex-grow: 1;
  padding: 1vw 1vw 1vw 0vw;
  text-align: left;
}

.car-info-title {
  font-size: 1.5vw;
  margin-top: 0.5vw;
  margin-bottom: 0.5vw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0vw 0.5vw;
  color: white;
  
}

.car-info-description {
  font-size: 0.85vw;
  margin-top: 0.5vw;
  font-weight: 100;
  line-height: 1.2em;
  height: calc(1.2em * 2.7);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  color: rgb(188, 188, 188);
  text-align: left;
  padding: 0vw 0.5vw;
}

.no-listings-container {
	text-align: center;
	padding: 8vw;
	font-size: 1vw;
}

.no-listings-title {
	color: white;
	margin-bottom: 1.85vw;
	font-size: 1.5vw;
}

.no-listings-button {
	padding: 0.75vw 2vw;
	background-color: #ffffff0a;
	color: #fff;
	text-decoration: none;
	border-radius: 1vw;
}




/* Nové pre hover zobrazenie specs-grid */
.specs-grid {
  position: absolute;
  top: 3vw;
  right: 4vw;
  background: rgba(0, 0, 0, 0.8);
  padding: 1vw;
  border-radius: 0.75vw;
  font-size: 1vw;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100;

  display: flex;
  flex-wrap: wrap;
  width: 23vw;
}

.car-info-container:hover .specs-grid {
  opacity: 1;
  pointer-events: auto;
}

.car-info-container {
  position: absolute;
  display: inline-block;
  right: 0vw;
}

.spec {
  display: flex;
  align-items: center;
  width: calc(50% - 0.6vw);
}


.spec:last-child {
  margin-bottom: 0;
}



.banner-buttons {
  margin-top: 0.85vw;
  margin-left: 0.25vw;
  gap: 0.25vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.specs-grid {
  display: flex;
  gap: 1vw;
  font-size: 1vw;
  color: white;
  margin-left: 1vw;
  backdrop-filter: blur(0.5vw);
  background-color: #1f1f1f12;
  border: 0.1vw solid #59595914;
}

.spec {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #ffffffa1;
  font-size: 1vw;
}

.spec i {
  color: #ffffffb5;
  font-size: 1.35vw;
  margin-left: 0.85vw;
}

.banner-buttons a {
  gap: 0.25vw;
  display: flex;
  align-items: center;
  margin: 0vw 0vw;
}

.banner-info-specs-grid {
  display: flex;
  font-size: 1vw;
  color: white;
  text-align: center;
  gap: 1vw;
  margin: 1vw 0.5vw;
}

.banner-info {
  display: flex;
  align-items: center;
  gap: 0.35vw;
  color: #ffffff;
  font-size: 0.85vw;
}

.banner-info i {
  color: #ffffff;
  font-size: 1.26vw;
}


.cta-button {
  padding: 0.8vw 0vw;
  width: 8.5vw;
  font-size: 0.85vw;
  border: none;
  background: #ffffff33;
  color: white;
  border-radius: 0.75vw;
  cursor: pointer;
  transition: background 0.25s ease;
}

.cta-button:hover {
  background: #ffffff2e;
}

.cta-icon-button {
  padding: 0.8vw 0vw;
  width: 2.65vw;
  font-size: 0.85vw;
  border: none;
  background: #ffffff33;
  color: white;
  border-radius: 0.75vw;
  cursor: pointer;
  transition: background 0.25s ease;
  text-align: center;
}

.cta-icon-button:hover {
  background: #ffffff2e;
}


.meta-info {
  margin-top: 1vw;
  font-size: 0.9vw;
  color: #555;
  display: flex;
  gap: 2vw;
}

.user-profile {
  width: 15vw;
  text-align: center;
}

.user-profile .avatar {
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5vw;
}

.username {
  font-weight: bold;
  font-size: 1vw;
}

.rating {
  font-size: 0.9vw;
  color: #ffaa00;
}





.pages {
  width: 80vw;
  margin-left: 20vw;
	margin-bottom: 2vw;
  justify-content: center;
  display: flex;
}

.pages-container {
  display: flex;
  gap: 0.4vw;
  align-items: center;
  font-size: 1.25vw;
}

.page,
.page-active,
.previous-page,
.next-page {
  width: 2.5vw;
  height: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5vw;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  user-select: none;
}

.page {
  background: #ffffff0d;
  color: #a4a4a4;
  backdrop-filter: blur(0.1vw);
}

.page:hover,
.previous-page:hover,
.next-page:hover {
  background: #ffffff0a;
}

.page-active {
  background: #ffffff3d;
  color: #fff;
  font-weight: bold;
}

.previous-page,
.next-page {
  background: #ffffff05;
  font-weight: bold;
  color: #333;
}











/* PHONE */

@media (max-width: 768px) {




	
.top-container {
  position: fixed;
  top: 16vw;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  padding: 6vw 0vw;
  z-index: 999999;
  background: #000000d1;
}

.top-links-wrapper {
  width: 87vw;
  overflow-x: auto;
}

.top-links {
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-bottom: none;
  padding: 3vw 0vw;
}

.top-links a {
  color: white;
  text-decoration: none;
  font-size: 4vw;
  margin: 0 0.5vw;
  border-bottom: none;
}

.top-link-home {
  font-size: 5vw;
  margin-left: 3vw;
  margin-right: 1vw;
  margin-top: -0vw;
}

.top-link-separator {
  margin: 0 1vw;
  color: white;
  font-size: 4vw;
}

.sorting-phone {
  width: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
  font-size: 6vw;
  z-index: 2000;
  margin-right: 2vw;
}

.sorting-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;             /* siaha po spodok obrazovky */
  background: #000000d1;
  backdrop-filter: blur(0.5vw);
  color: white;
  transform: translateY(20vw);
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
}

.sorting-menu.active {
  transform: translateY(27.5vw);
  pointer-events: auto;
  opacity: 1;
}

.search-button {
  position: sticky;
  bottom: 27.6vw;
  width: 100%;
  padding: 5vw;
  background: #0000008a;
  border: none;
  color: white;
  font-size: 8vw;
	backdrop-filter: blur(1vw);
}


.sorting-search {
  height: 12vw;
  width: 95vw;
  padding: 0 1vw;
  font-size: 5vw;
  border: 0.15vw solid rgb(45 45 45 / 9%);
  border-radius: 3vw;
  background-color: rgb(79 79 79 / 20%);
  color: #ffffff;
  box-shadow: 0vw 0.3vw 0.6vw rgba(0, 0, 0, 0.2);
  outline: none;
  transition: background-color 0.25s ease, border-radius 0.25s ease;
  padding-left: 2.5vw;
	margin: 0 auto;
	margin-top: 4vw;
}

.sorting-filters {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4vw;
  padding-bottom: calc(env(safe-area-inset-bottom) + 5vw);
}

/* Price slider */
.sidebar-filters-price {
  padding: 4vw 4vw 0 4vw;
}

.sidebar-filters-label {
  font-size: 6vw;
  margin-bottom: 2vw;
  text-align: center;
}

.sidebar-filters-double-slider {
  position: relative;
  width: 90%;
  margin: 0 auto 4vw auto;
  height: 8vw;
}

.sidebar-filters-slider-track {
  position: absolute;
  top: 3vw;
  left: 0;
  right: 0;
  height: 1.5vw;
  background: #ccc;
  border-radius: 2vw;
  z-index: 1;
}

.sidebar-filters-range-slider {
  -webkit-appearance: none;
  position: absolute;
  width: 100%;
  height: 8vw;
  background: none;
  pointer-events: none;
  z-index: 3;
}

.sidebar-filters-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  height: 4vw;
  width: 2vw;
  border-radius: 1vw;
  background: #3a3a3a;
  cursor: pointer;
}

.sidebar-filters-range-slider::-moz-range-thumb {
  pointer-events: auto;
  height: 4vw;
  width: 4vw;
  border-radius: 50%;
  background: #002b5c;
  cursor: pointer;
}

.sidebar-filters-active-track {
  position: absolute;
  top: 3vw;
  height: 1.5vw;
  background: #656c6e;
  border-radius: 2vw;
  z-index: 2;
}

.sidebar-filters-inputs {
  margin-top: 5vw;
  display: flex;
  justify-content: space-between;
  gap: 3vw;
}

.sidebar-filters-inputs span {
	font-size: 7vw;
	color: #545454;
}

.sidebar-filters-input {
  width: 40%;
  font-size: 5.5vw;
  padding: 2vw;
  border: 0.3vw solid #373737;
  background-color: #2f2f2f70;
  color: white;
  text-align: center;
  border-radius: 2vw;
}

/* Collapsible filters */
.sidebar-filters-group {
  padding: 0vw 2vw 32vw 2vw;
  border-top: 0.1vw solid #cccccc00;
}

	

.sidebar-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 5vw;
  cursor: pointer;
  border-top: 0.35vw solid #cccccc2e;
  margin-top: 5vw;
  padding: 6vw 3vw 0vw 3vw;
}



.sidebar-filters-arrow {
  transition: transform 0.3s ease;
}

.sidebar-filters-header.open .sidebar-filters-arrow {
  transform: rotate(180deg);
}

.sidebar-filters-options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0vw;
  padding-left: 5vw;
	margin-top: 2vw;
}

.sidebar-filters-options:last-child {
  border-bottom: 0.2vw solid #cccccc00;
}

.sidebar-filters-options label {
  font-size: 4vw;
}

/* Checkbox */
.checkbox-wrapper-33 {
  margin-top: 1.5vw;
}

.checkbox-wrapper-33 .checkbox__symbol {
  width: 6vw;
  height: 6vw;
  border-width: 0.65vw;
  margin-right: 4vw;
}

.checkbox-wrapper-33 .checkbox__textwrapper {
  font-size: 4.5vw;
}

.checkbox-wrapper-33 .checkbox .icon-checkbox {
  width: 5vw;
  height: 5vw;
}

.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol .icon-checkbox path {
  stroke-dashoffset: 0;
}

/* Search button */
.search-button {
  position: sticky;
  bottom: 30vw;
  padding-bottom: calc(5vw + env(safe-area-inset-bottom));
  width: 95%;
  background: #252525;
  border: none;
  color: white;
  font-size: 6vw;
  border-radius: 2vw;
  margin: 0 auto;
}












.top-categories {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100vw;
  margin-left: 0vw;
  margin-right: 0vw;
  gap: 1vw;
  justify-content: flex-start;
  margin-top: 2vw;
  margin-bottom: 4vw;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.top-categories::-webkit-scrollbar {
  display: none;
}

.category-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 2vw;
  justify-content: flex-start;
  width: 100%;
  padding: 0vw 2vw;
}

.category {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background-color: #0a0a0a;
  width: 60vw;
  height: 22vw;
  border-radius: 4vw;
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 1vw;
  transition: box-shadow 0.25s ease;
  box-shadow: 0.2vw 0.2vw 0.5vw 0vw #000000cf;
}

.category:hover {
  box-shadow: 0vw 0vw 0vw 0.15vw #3737376e;
}

.category i {
  font-size: 13vw;
  color: #ffffff52;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 4vw;
  margin-right: 4vw;
}

.category-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-title {
  font-size: 5vw;
  margin-bottom: 0.5vw;
  color: white;
}

.category-description {
  font-size: 3vw;
  color: #ccc;
}

}