*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*html {*/
/*  font-size: 62.5% !important;*/
/*}*/

body {
  --background-color: hsl(180, 20%, 90%);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;


  color: hsla(0, 0%, 0%, 0.6);
  background: var(--background-color);
  text-align: center;
}

.New_h1 {
  font-size: 3.25rem;
  padding-top: 1.25rem;
  color: white;
  font-family: 'kalameh-Black';
}

h1 + p {
  font-size: 1.125rem;
  padding: 1.25rem 0 1.875rem;
}

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.wrap {
  margin: 1.25rem;
  transform-style: preserve-3d;
  transform: perspective(62.5rem);
  cursor: pointer;
}

.New__container {
  --rX: 0;
  --rY: 0;
  --bX: 50%;
  --bY: 80%;

  width: 18.75rem;
  height: 22.5rem;
  border: 1px solid var(--background-color);
  border-radius: 1rem;
  padding: 0; /* Remove padding to allow centering */

  display: flex; /* Enable flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */

  position: relative;
  transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));

  box-shadow: 0 0 1.875rem 0.3125rem hsla(0, 0%, 0%, 0.2);

  transition: transform 0.6s, box-shadow 0.3s; /* Include box-shadow in transition */
}

.New__container::before,
.New__container::after {
  content: "";

  width: 0.7813rem;
  height: 0.7813rem;
  border: 1px solid #fff;

  position: absolute;
  z-index: -1; /* Send borders behind the content */

  opacity: 0.8;

  transition: width calc(0.3s), height calc(0.3s); /* Adjust transition timing */
}

.New__container::before {
  top: -0.625rem; /* Adjust position to fit hover effect */
  right: -0.625rem; /* Adjust position to fit hover effect */
  border-bottom-width: 0;
  border-left-width: 0;
}

.New__container::after {
  bottom: -0.625rem; /* Adjust position to fit hover effect */
  left: -0.625rem; /* Adjust position to fit hover effect */
  border-top-width: 0;
  border-right-width: 0;
}

.wrap:hover .New__container::before,
.wrap:hover .New__container::after {
  width: calc(100% + 2.5rem); /* Ensure it expands correctly on hover */
  height: calc(100% + 2.5rem); /* Ensure it expands correctly on hover */
}

.New__container--active {
  transition: none;
}

.container--1 {
  filter: hue-rotate(20deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/blog.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

.container--2 {
  filter: hue-rotate(80deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/vlog.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

.container--3 {
  filter: hue-rotate(160deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/photoblog.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

.container--4 {
  filter: hue-rotate(100deg) saturate(80%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/music_video.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--5 {
  filter: hue-rotate(90deg) saturate(240%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/fitness.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--6 {
  filter: hue-rotate(25deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/background_lifestyle.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--7 {
  filter: hue-rotate(190deg) saturate(110%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/courses.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--8 {
  filter: hue-rotate(40deg) saturate(40%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/Online_Shop.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--9 {
  filter: hue-rotate(10deg) saturate(190%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/programmer-club.png");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--10 {
  filter: hue-rotate(160deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/DevOps2.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--11 {
  filter: hue-rotate(21deg) saturate(77%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/pythonclub.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--12 {
  filter: hue-rotate(160deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/djangoclub.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--13 {
  filter: hue-rotate(10deg) saturate(40%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/ASP.NET-Core.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--14 {
  filter: hue-rotate(160deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/threejs.png");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--15 {
  filter: hue-rotate(160deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/tutorial-store.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--16 {
  filter: hue-rotate(160deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/tutorng.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--17 {
  filter: hue-rotate(160deg) saturate(140%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/special_offer_1.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}

.container--18 {
  filter: hue-rotate(20deg) saturate(240%);
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)),
    url("../image/links/special-offer_2.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 25rem auto;
}



/* .container p {
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 2.1.25rem;
} */

.centered {
  font-family: "Kalameh-Black";
  display: flex;
  align-items: center !important;
  align-content: center !important;
}
.p__tag {
  direction: rtl !important;
  text-align: right !important;
  font-size: 2.4rem;
  font-family: 'Kalameh-Black' !important;
  float: right !important;
}
.p__dark {
  color: blue;
}
.p__light {
  color: orange;
}