/* From Uiverse.io by MuhammadHasann */ 
.card {
  --white: hsl(0, 100%, 50%);
  --black: hsl(240, 15%, 9%);
  --stone-300: hsl(24, 100%, 50%);
  --pink-500: hsl(299, 100%, 83%);

  cursor: pointer;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center; z-index: 0;border: 32px;

}

.sub-card {
  display: flex;
  align-items: center;

  padding: 0.75rem;
  max-width: 50rem;min-width: 50%;
  height: 4.25rem;



  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  min-height: 40px;
  padding-inline: 12px;
 
  background-color: #f4f4f4;
z-index: 0;
border-radius: 10px;
  
}




.sub-card.category {
  justify-content: space-between;

  border: 10px;

  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}
.sub-card.named {
  justify-content: center;

  border-radius: 10px;

  transition: all 0.5s cubic-bezier(1, 0, 0, 1 ); z-index:0;
}

.card:hover .sub-card.category {
  transform: translateY(100%);
}
.card:hover .sub-card.named {
  transform: translateY(-100%);
}

.sub-card .text_span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--black);
  text-transform: capitalize;
}

.sub-card .icon_svg {
  width: 1rem;
  fill: var(--black);
}

.card_container {
  overflow: hidden;

  position: relative;
  z-index: 5;

  width: 17rem;
  height: 14rem;
  background-color: var(--pink-500);

  border-radius: 0.5rem;
}
.card_container::before {
  content: "";

  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 0rem;
  aspect-ratio: 1;
  background-color: hsl(240, 15%, 9%, 0.2);

  border-radius: 50%;
  transform-origin: center;

  transition: all 1s cubic-bezier(1, 0, 0, 1) 0.2s;
}
.card_container::after {
  content: "See more";

  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0rem;
  box-sizing: border-box;
  width: 0rem;
  aspect-ratio: 1;
  background-color: hsl(240, 15%, 9%, 0.5);

  font-size: 0rem;
  font-weight: bold;
  color: var(--white);
  text-align: center;

  border-radius: 50%;
  transform-origin: center;

  transition: all 1s cubic-bezier(1, 0, 0, 1) 0s;
}

.card:hover .card_container::before {
  width: 22.5rem;

  transition: all 1s cubic-bezier(1, 0, 0, 1) 0s;
}
.card:hover .card_container::after {
  padding: 1rem;
  width: 5rem;

  font-size: 0.75rem;

  transition: all 0.3s ease-in-out 0.4s;
}

.card_container .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 3rem;
  fill: var(--black);
}







/* From Uiverse.io by Yaya12085 */ 
.cardz {
  padding: 2rem;
  max-width: 80% ;max-height: 1500px;
  transition: 0.3s;color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  
  line-height: 19px;
  z-index: 1;
  
  flex-direction: column;
  align-items: flex-start;
  border-radius: 30px;
  border: 2px solid #f8f9fd;
  background: #fff;
  transition: 1s all;
  text-decoration: none; display: flex;gap:1rem
}





.infosz {
  display: flex;
  flex-direction: row;
  align-items: flex-start; justify-content: center;
  grid-gap: 1rem;
  gap: 2rem; color: #000000;
}

.imagez img{
height: 25rem;
  width: 25rem; max-width: 15rem; max-height: 15rem;
  border-radius: 0.5rem;
  background-color: rgb(118, 36, 194);
  background: linear-gradient(to bottom right, rgb(118, 36, 194), rgb(185, 128, 240));
}




.infoz {
display: flex;
  flex-direction: column;
  justify-content: space-between;min-height: 2rem; max-height: 20rem;
}

.namez {
  font-size: 1.5rem;
  line-height: 3rem;
  font-weight: 500;
  color: #000000;
}

.functionz {
  font-size: 1.2rem;
  line-height: 1.5rem;
  color:#6b7280;
}




.statsz {
  margin-top: 1.5rem;

  margin-bottom: 1.5rem;
  display: flex;
position: relative;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  transition: all .3s ease;
}





.flexz {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 4px;
}

.state-valuez {
  font-weight: 700;
  color: rgb(0, 0, 0);
}

.requestz {
  margin-top: 1.5rem;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  transition: all .3s ease;color: #ffffff;  background-color: rgb(255, 136, 0);

}

.requestz:hover {
scale: 1.05;  color: #fff;
}


  
  








  .container{
    padding-top: 10px;
}
h2{
    text-align: center;
    padding: 20px;
}
.slick-slide{
    margin: 0 20px;
}
.slick-slide img{
    width: 100%;
}
.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
}
.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block
}
.slick-slide{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
.slick-slide img{
    display: block;
}
.slick-initialized .slick-slide{
    display: block;
}
.copy{
    padding-top: 250px;
}















.parone{position: absolute; transform: translateX(-80px) translateY(10px);}

.partwo{position: absolute;transform: translateX(1180px) translateY(10px)rotate(180deg);}







.svgsum svg{position: absolute; height: 100px; transform: translateX(-350px) translateY(-200px); z-index: -10; transform: rotate(100);}

.svgsdois svg{position: absolute; height: 100px;transform: translateX(1420px) translateY(-200px);z-index: -10;}




.color{background-image: linear-gradient(     180deg,     #e6e1ef67 0%,     #ff890300 25%,#f4f4f4 70%,#f4f4f4 84%);filter:blur(80%);}




.h2{padding: 0 15px 0 0px;}