@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
#imgfix_wrapper_layer_0_1{
		display:flex;
		justify-content:center;
	}
	.global-card {
  /* max-width: 540px; */
  border-radius: 0.75rem;
  box-shadow:
    0 4px 8px rgb(0 0 0 / 0.1),
    0 12px 24px rgb(0 0 0 / 0.1),
    0 24px 32px rgb(0 0 0 / 0.1);
  overflow: hidden;
  background: white;
  position: relative;
}


	.global-profile-img {
		object-fit: cover;
		height: 100%;
		width: 200px;
		/* aspect-ratio: 4 / 5; */
	}

	.global-btn-floating {
		position: absolute;
		bottom: 1.25rem;
		right: 1.25rem;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		font-size: 2rem;
		line-height: 1;
		padding: 0;
		box-shadow: 0 4px 6px rgb(0 0 0 / 0.3);
		transition: background-color 0.3s ease;
		z-index: 5;
		background-color: #ef5350;
		color: white;
		border: none;
	}

	.global-btn-floating:hover,
	.global-btn-floating:focus {
		background-color: #d43d3b;
		color: white;
	}

	.global-card-text {
		font-size: 0.875rem;
	}

	.global-social-link {
		font-size: 0.9rem;
		color: #555;
		text-decoration: none;
	}

	.global-social-link:hover {
		color: #4a90e2;
		text-decoration: underline;
	}

	.tag {
      background-color: #9d59b3;
      color: #fff;
      font-weight: bold;
      padding: 4px 10px;
      border-radius: 20px;
      /* font-size: 0.75rem; */
      display: inline-block;
      margin-bottom: 1rem;
    }
    .main-heading {
      font-weight: 700;
      font-size: 1.5rem;
    }
    .main-heading span {
      font-style: italic;
      font-weight: 500;
    }
	#imgfix_wrapper_layer_0_0{
		display: flex;
		justify-content: center;
	}
    .stat-card {
      border-radius: 1rem;
      padding: 1rem 1.5rem;
      background-color: #fff;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .icon-circle {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: bold;
    }
    .icon-download { background-color: #ffe5e0; color: #e53935; }
    .icon-link { background-color: #e3f2fd; color: #1e88e5; }
    .icon-happy { background-color: #e0f2f1; color: #26a69a; }
	

	@media (max-width: 575.98px) {
		.global-card {
			max-width: 100%;
		}

		.row.g-0>.col-md-4,
		.row.g-0>.col-md-8 {
			flex: 0 0 100%;
			max-width: 100%;
		}

		.global-profile-img {
			aspect-ratio: auto;
			/* width: 0%; */
			height: auto;
		}
	}
	.hover-shadow:hover {
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
            border-color: transparent !important;
          }

          .dashed-box {
            border: 1px dashed #ccc;
            /* Dashed border in black */
            padding: 10px;
          }

	

.grid-container {
  width: min(100rem, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 2rem;
}
.card {
  --grad: #E91E63, #673AB7;
  padding: 2.5rem;
  /* background-image: linear-gradient(to bottom left, #e0e4e5, #f2f6f9); */
  border-radius: 2rem;
  gap: 1.5rem;
  display: grid;
  grid-template: "title icon" "content content" "bar bar" / 1fr auto;
  font-family: system-ui, sans-serif;
  color: #444447;
  box-shadow: inset -2px 2px hsl(0 0 100% / 1),
    -20px 20px 40px hsl(0 0 0 / 0.25);

  .title {
    font-size: 1rem;
    grid-area: title;
    align-self: end;
    text-transform: uppercase;
    font-weight: 500;
    word-break: break-all;
  }
  .icon {
    grid-area: icon;
    font-size: 3rem;

    > i {
      color: transparent;
      background: linear-gradient(to right, var(--grad));
      background-clip: text;
    }
  }
  .content {
    grid-area: content;
    & > *:first-child {
      margin-top: 0rem;
    }
    & > *:last-child {
      margin-bottom: 0rem;
    }
  }
  &::after {
    content: "";
    grid-area: bar;
    height: 2px;
    background-image: linear-gradient(90deg, var(--grad));
    /*     margin-inline: -1.5rem; */
  }
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.icon-gradient {
  font-size: 3rem;
}

.icon-gradient > i {
  color: transparent;
  background: linear-gradient(to right, #E91E63, #673AB7); /* same gradient as --grad */
  -webkit-background-clip: text;
  background-clip: text;
}

@media (min-width: 576px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}