.vmac-color-variant-card {
  border-radius: 30px;
  border: -0.5px solid #32343848;
  background-color: #181818;
  width: 270px;
  height: fit-content;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0px 15px 20px #00000097;
  margin: 0;
  position: relative;
}
.vmacColorVariantCard-edge-blur-effect {
  border: 3rem solid #3132364b;
  border-radius: 60px;
  width: 92%;
  height: 95%;
  margin: 0%;
  padding: 0%;
  filter: blur(0.2rem);
  position: absolute;
  z-index: 1;
}
.vmac-color-variant-card-header {
  display: flex;
  position: absolute;
  color: #e2e2e2;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  padding: 0px;
  margin: 0;
  z-index: 2;
}
#expand-icon {
  width: 15px;
  height: 15px;
  padding: 8px 12px;
  opacity: 0.6;
}
#downloadFolder-icon {
  width: 18px;
  height: 20px;
  padding: 8px 12px;
  opacity: 0.6;
}
.asset-name-container {
  display: flex;
  position: relative;
  background-color: #0f101148;
  width: fit-content;
  height: fit-content;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin: 0;
  padding: 8px 40px;
}
.asset-name {
  display: flex;
  position: relative;
  font-size: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
  width: fit-content;
  letter-spacing: 1px;
  color: #e2e2e2;
  margin: 0;
  padding: 0px;
}
.vmac-color-variant-card-body {
  color: #5c5d62;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 7px;
  margin: 0;
  z-index: 2;
}
.assetHolder {
  background-color: transparent;
  display: flex;
  position: absolute;
  width: 100%;
  height: auto;
  top: 50px;
  margin: 0;
  border-radius: 20px;
  justify-items: center;
  justify-content: center;
  align-content: center;
}

.thumb-nail-img-background {
  background-color: #222;
  display: flex;
  position: relative;
  width: 95%;
  height: 220px;
  top: 6px;
  margin: 0;
  border-radius: 20px;
  align-content: flex-start;
}
.i1,
.i2,
.i3,
.i5,
.i4,
.i6,
.i7,
.i8 {
  display: flex;
  position: absolute;
  margin: 0;
  align-content: center;
  z-index: 3;
  width: 120px;
  opacity: 0;
  transition: 0.8s ease-in-out;
}
.i1 {
  display: flex;
  position: absolute;
  opacity: 100%;
  margin: 0;
  align-content: center;
  z-index: 3;
  width: 130px;
}
.vmc-color-variant-card-more--options {
  display: flex;
  position: relative;
  width: 100%;
  height: fit-content;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
}
.color-options-txt {
  font-size: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  width: 90%;
  letter-spacing: 2px;
  color: #5f6670;
  display: flex;
  margin-top: 20px;
  margin-bottom: 0;
}
.color-choices-container {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 5.5%;
  margin-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
}
.onred {
  background-color: #c32c32;
  border-radius: 60px;
  width: 25px;
  height: 10px;
  z-index: 3;
}
.ongreen {
  background-color: #14a399;
  cursor: pointer;
}
.onbrown {
  background-color: #b87f62;
}
.onyellow {
  background-color: #f9b530;
}
.onpink {
  background-color: #e7809f;
}
.onblue {
  background-color: #5b75c6;
}
.onblack {
  background-color: #0a0a0a;
}
.onwhite {
  background-color: rgb(255, 255, 255);
}
.ongreen,
.onbrown,
.onyellow,
.onpink,
.onblue,
.onblack,
.onwhite {
  border-radius: 60px;
  width: 15px;
  height: 15px;
  z-index: 3;
  cursor: pointer;
  transition: 0.8s ease-in-out;
}
.onred:hover {
  transform: scale(120%);
}
.ongreen:hover {
  transform: scale(120%);
}
.onbrown:hover {
  transform: scale(120%);
}
.onyellow:hover {
  transform: scale(120%);
}
.onpink:hover {
  transform: scale(120%);
}
.onblue:hover {
  transform: scale(120%);
}
.onblack:hover {
  transform: scale(120%);
}
.onwhite:hover {
  transform: scale(120%);
}
/* --------------------- color choice indicator--------------------------- */
.color-choices-indicator {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  top: -5%;
  left: 9.5%;
  gap: 0px;
  justify-content: center;
}
.stred {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(2px);
  width: 30px;
  height: 15px;
}
.stgreen {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(30.9px);
  width: 30px;
  height: 15px;
  opacity: 0;
}
.stbrown {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(60px);
  width: 30px;
  height: 15px;
  opacity: 0;
}
.styellow {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(89.92px);
  width: 30px;
  height: 15px;
  opacity: 0;
}
.stpink {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(118.99px);
  width: 30px;
  height: 15px;
  opacity: 0;
}
.stblue {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(148px);
  width: 30px;
  height: 15px;
  opacity: 0;
}
.stblack {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(176px);
  width: 30px;
  height: 15px;
  opacity: 0;
}
.stwhite {
  display: flex;
  position: absolute;
  border: 1px dashed #9d9d9d;
  border-radius: 60px;
  left: 0;
  transform: translateX(205px);
  width: 30px;
  height: 15px;
  opacity: 0;
}
.view-all-txt {
  font-size: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.3rem;
  color: #96a1b2;
  display: flex;
  position: relative;
  padding: 8px;
  margin: 0;
  text-align: center;
  justify-content: center;
}
.action-buttons {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  justify-content: center;
  gap: 10px;
  margin: 10px;
}
.stred,
.stgreen,
.stbrown,
.styellow,
.stpink,
.stblue,
.stblack,
.stwhite {
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.view-all-txt {
  font-size: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.3rem;
  color: #96a1b2;
  display: flex;
  position: relative;
  padding: 8px;
  margin: 0;
  text-align: center;
  justify-content: center;
}
/* -------------------- action buttons---------------------------- */
.action-buttons {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  justify-content: center;
  gap: 10px;
  margin: 0px 10px 0px 10px;
  z-index: 3;
  margin: 18px 0 15px 0;
}
.downloadBtn,
.editorBtn,
.youtubeBtn,
.shareBtn {
  background-color: black;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 60px;
}
.download--btn--container,
.editor--btn--container,
.youtube--btn--container,
.share--btn--container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: fit-content;
  height: fit-content;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.download--btn--container p,
.editor--btn--container p,
.youtube--btn--container p,
.share--btn--container p {
  display: flex;
  position: relative;
  width: fit-content;
  height: fit-content;
  font-size: 0.8rem;
  border-radius: 60px;
  margin: 0;
}
.a1,
.a2,
.a3,
.a4 {
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.a1:hover {
  scale: 90%;
}
.a2:hover {
  scale: 90%;
}
.a3:hover {
  scale: 90%;
}
.a4:hover {
  scale: 90%;
}
/*=========  .7. MEDIA QUERIES ================= */
/* <<<<<<<<>>>>>>>>  desktop2 <<<<<<<<>>>>>>>> */
@media screen and (max-width: 1358px) {
}
/* <<<<<<<<>>>>>>>>  desktop 3 <<<<<<<<>>>>>>>> */
@media screen and (max-width: 1112px) {
}
/* <<<<<<<<>>>>>>>>  desktop mini <<<<<<<<>>>>>>>> */
@media screen and (max-width: 909px) {
}
/* <<<<<<<<>>>>>>>> .7b. Tablet <<<<<<<<>>>>>>>> */
@media screen and (max-width: 768px) {
}
/* <<<<<<<>>>>>>>> the inbetween mobile and tablet <<<<<<<<>>>>>>>> */
@media screen and (max-width: 644px) {
}
/* <<<<<<<<>>>>>>>> .7b. Mobile <<<<<<<<>>>>>>>> */
@media screen and (max-width: 480px) {
  /* .vmac-color-variant-card {
    width: 80%;
  }
  .color-choices-container {
    gap: 20.5px;
  }
  .action-buttons {
    gap: 25px;
    margin: 28px 0 20px 0;
  }
  .thumb-nail-img-background {
    width: 90%;
  }
  .download--btn--container,
  .editor--btn--container,
  .youtube--btn--container,
  .share--btn--container {
    gap: 10px;
  }
  .color-choices-indicator {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    top: -5%;
    left: 9.8%;
    gap: 0px;
    justify-content: center;
  } */
}