:root {
      --glow-color: #ff9100;
    }
.retro-button {
      position: relative;
      padding: 14px 40px;
      color: #fff;
      background: transparent;
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 2px;
      cursor: pointer;
      border: none;
      z-index: 1;
    }

    .retro-button::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 4px solid var(--glow-color);
      z-index: -1;
      background: transparent;
      transition: 0.3s ease;
      clip-path: polygon(
        0% 0%, 
        75% 0%, 
        100% 35%,
        100% 100%, 
        85% 100%, 
        25% 100%,
        0% 65%, 
        0% 25%
      );
      box-shadow: 0 0 8px var(--glow-color), 0 0 16px var(--glow-color);
    }

    .retro-button::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0,0,0,0.5);
      clip-path: polygon(
        0% 0%, 
        75% 0%, 
        100% 35%,
        100% 100%, 
        85% 100%, 
        25% 100%,
        0% 65%, 
        0% 25%
      );
      z-index: -2;
    }

    .retro-button:hover::before {
      box-shadow: 0 0 12px var(--glow-color), 0 0 25px var(--glow-color);
    }

    .retro-button:active {
      transform: scale(0.96);
    }












/* Reset CSS */
#genral_list {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/*background: linear-gradient(45deg, #190f2c, #200b30);*/
	padding: 15px;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

/* Main CSS */
.grid-wrapper > div {
	display: flex;
	/*justify-content: center;*/
	/*align-items: center;*/
	background: rgba(0,0,0,0.5);
	border-radius:10px 10px 10px 10px;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0,0,0,0.3);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  cursor:pointer;
}
.grid-wrapper > div:hover {
  transform: scale(1.1) rotateX(10deg) rotateY(10deg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	object-fit: contain;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}





.fancy-title {
  display: grid;
  grid-template-columns: auto auto;
  width: fit-content;
  position: absolute;
  font-weight: bold;
}
.fancy-title p {
  padding: .35rem .7rem;
   background-color: rgba(255,255,255,1); 
  border-bottom-right-radius: 1rem;
}
p:first-child::before, p:first-child::after,
p:last-child::before {
  content: "";
  position: absolute;
  width: 1rem;
  aspect-ratio: 1;
  background: radial-gradient(circle at 100% 100%, transparent 1rem, var(--bg-color) 0);
}

.fancy-title p:first-of-type {
  grid-column: span 2;
  
  
  &::before {
    left: 100%;
    top: 0;
  }
  
  &::after {
    grid-column: 2;
    grid-row: 2 / 3;
    left: 0;
    top: 0;
  }
}

.fancy-title p:last-child::before {
  grid-column: 1;
  grid-row: 2 / 3;
  top: 100%;
  left: 0;
}



.custom-alert-genral-list {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  width: 100%;
  height: 100%;
}

.custom-alert-content {
  position: relative;
  overflow: hidden; /* ensure background doesn't overflow */
  z-index: 10;
}

#customAlertMessage_genral_list {
  color: #000;
  font-weight: bold;
  font-size:large;
  background: rgba(255, 255, 255, 0.85);
  padding: 2% 4%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  cursor: pointer;
}

.centered-message_genral_list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* higher than background */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  /*pointer-events: none;*/
}
.custom-alert-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 50px;
  cursor: pointer;
  z-index:10;
  color:white;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.price_option_genral_list{
    /*color:black;*/
    /*margin:2% 4%;*/
    /*padding:2% 4%;*/
}










#customAlertlist_genral_list{
    margin:2%;
}

.parent {
      position: relative;
      width: 90%;
      height: auto;
      left:10%;
      z-index: 1;
    }

    .child {
      position: absolute;
      top: 0px;
      right: 20%;
      width: 100%;
      height: 100%;
    
    }

.mirror-bottom {
      transform: scaleY(-1);

       /* adjust transparency as needed */
    }

    .mirror-left {
      transform: scaleX(-1);
    }

.alert-bg {
  position: absolute;
  left:5%;

  /*opacity: 0.3;*//* adjust transparency as needed */
  pointer-events: none; /* make background non-interactive */
}
#container_wrapper {
      width: auto;
      aspect-ratio: 1365 / 768;
      /*background: #eee;*/
      position: relative;
    }

    #container_design {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .trapezoid {
      background: orange;
      box-shadow: 0 0.52vh 1.95vh rgba(0, 0, 0, 0.5);
      position: absolute;
    }

    #trapezoid-bar {
      width: 56%;
      height: 2%;
      margin: 1% 0% 0% 40%;
      clip-path: polygon(2% 0%, 54% 0%, 56% 100%, 0% 100%);
    }

    #trapezoid-bar1 {
      width: 25%;
      height: 2%;
      margin: 2.5% 0% 0% 38.4%;
      clip-path: polygon(5% 0%, 25% 0%, 20% 100%, 0% 100%);
    }

    #trapezoid-bar2 {
      width: 60%;
      height: 2%;
      margin: 3.5% 1% 0% 7.5%;
      clip-path: polygon(0% 0%, 60% 0%, 58% 100%, 2% 100%);
    }

    #trapezoid-bar3 {
      width: 45%;
      height: 4%;
      margin: 4.5% 1% 0% 22.2%;
      clip-path: polygon(0% 0%, 45% 0%, 39% 100%, 6% 100%);

    }

    /* .container_left {
      display: flex;
      align-items: flex-start;
    }

    .left-section {
      display: flex;
      flex-direction: column;
    } */

    .trapezoid-bar4 {
      width: 25%;
      height: 4%;
      clip-path: polygon(10% 0%, 25% 0%, 15% 100%, 0% 100%);
    }

    .trapezoid-bar4-1 {
      margin: 2.5% 0% 0% 44%;
    }

    .trapezoid-bar4-2 {
      margin: 2.5% 0% 0% 49%;
    }

    .trapezoid-bar4-3 {
      margin: 2.5% 0% 0% 54%;
    }

    .trapezoid-bar4-4 {
      margin: 2.5% 0% 0% 59%;
    }

    #trapezoid-bar5 {
      width: 45%;
      height: 2%;
      margin: 5.5% 1% 0% 41.5%;
      clip-path: polygon(3% 0%, 45% 0%, 42% 100%, 0% 100%);
    }

    #trapezoid-bar6 {
      width: 22%;
      height: 2%;
      margin: 6.5% 1% 0% 40.1%;
      clip-path: polygon(7% 0%, 22% 0%, 16% 100%, 0% 100%);
    }

    #trapezoid-bar7 {
      width: 30%;
      height: 2%;
      margin: 7.5% 1% 1% 34.7%;
      clip-path: polygon(4% 0%, 30% 0%, 26% 100%, 0% 100%);
    }

    #trapezoid-bar8 {
      width: 30%;
      height: 4%;
      margin: 2.5% 0% 0% 65%;
      clip-path: polygon(8% 0%, 22% 0%, 30% 100%, 0% 100%);
    }

    #trapezoid-bar9 {
      width: 25%;
      height: 5%;
      margin: 4.5% 0% 0% 62.5%;
      clip-path: polygon(11% 0%, 25% 0%, 14% 100%, 0% 100%);
    }

    #trapezoid-bar10 {
      width: 40%;
      height: 4%;
      margin: 7% 0% 0% 50.4%;
      clip-path: polygon(0% 0%, 40% 0%, 35% 100%, 5% 100%);
    }

    /* 
    #trapezoid-bar11 {
      width: 70%;
      height: 2%;

      margin: 0% 0% 0% 0%;
      clip-path: polygon(2% 0%, 70% 0%, 50% 100%, 0% 100%);

    }

    #trapezoid-bar12 {
      width: 50px;
      height: 40px;

      margin: 0px 0px 0px 0px;
      clip-path: polygon(0px 0%, 50px 0%, 10px 100%, 0px 100%);

    } */

    #trapezoid-bar13 {
      width: 17%;
      height: 5%;
      margin: 7% 0% 0% 49.5%;
      clip-path: polygon(0% 0%, 2.5% 0%, 17% 100%, 14.5% 100%);
    }

    #trapezoid-bar14 {
      width: 10%;
      height: 0.5%;
      margin: 9.6% 0% 0% 52%;
      clip-path: polygon(48% 0%, 0% 0%, 0% 100%, 50% 100%);
    }

    /* #trapezoid-bar15 {
      width: 10px;
      height: 8px;

      margin: 0px 0px 0px 90px;
      clip-path: polygon(10px 0%, 0px 0%, 4px 100%, 10px 100%);

    } */

    #trapezoid-bar16 {
      width: 1%;
      height: 70%;
      margin: 4.6% 0% 0% 69.5%;
      clip-path: polygon(0% 67%, 0% 0%, 100% 0%, 100% 70%);
    }

    #trapezoid-bar17 {
      width: 30%;
      height: 10%;
      margin: 4.5% 0% 0% 70.7%;
      clip-path: polygon(10% 0%, 0% 0%, 20% 100%, 30% 100%);
    }

    #trapezoid-bar18 {
      width: 3%;
      height: 50%;
      margin: 10.1% 0% 0% 76.7%;
      clip-path: polygon(0% 50%, 0% 0%, 100% 0%, 100% 42%);
    }

    #trapezoid-bar19 {
      width: 3.5%;
      height: 23%;
      margin: 22% 0% 0% 76.8%;
      clip-path: polygon(0% 20%, 0% 23%, 100% 3%, 100% 0%);

    }

    #trapezoid-bar20 {
      width: 0.3%;
      height: 30%;
      margin: 17.3% 0% 0% 80%;
      clip-path: polygon(0% 30%, 0% 2%, 100% 0%, 100% 30%);

    }

    /* #trapezoid-bar21 {
      width: 8%;
      height: 40%;
      margin: 0% 0% 0% 0%;
      clip-path: polygon(0% 10%, 0% 0%, 100% 0%, 100% 5%);
    } */

    .trapezoid-bar22 {
      width: 3%;
      height: 35%;
      clip-path: polygon(0% 20%, 0% 0%, 100% 15%, 100% 35%);
    }

    .trapezoid-bar22-1 {
      margin: 8% 0% 0% 71%;
    }

    .trapezoid-bar22-2 {
      margin: 13% 0% 0% 71%;
    }

    .trapezoid-bar22-3 {
      margin: 18% 0% 0% 71%;
    }

    .trapezoid-bar22-4 {
      margin: 23% 0% 0% 71%;
    }

    #trapezoid-bar23 {
      width: 1.2%;
      height: 60%;
      margin: 11% 0% 0% 74.7%;
      clip-path: polygon(0% 57%, 0% 0%, 100% 4%, 100% 60%);
    }

    /* #trapezoid-bar24 {
      width: 30%;
      height: 40%;

      margin: 0% 0% 0% 10%;
      clip-path: polygon(0% 20%, 0% 0%, 100% 0%, 100% 40%);

    } */

    #trapezoid-bar25 {
      width: 3%;
      height: 30%;
      margin: 29.5% 0% 0% 75.8%;
      clip-path: polygon(0% 10%, 0% 0%, 100% 20%, 100% 30%);
    }

    #trapezoid-bar26 {
      width: 1.5%;
      height: 35%;
      margin: 32.5% 0% 0% 78.5%;
      clip-path: polygon(0% 28%, 0% 0%, 100% 8%, 100% 35%);
    }

    #trapezoid-bar27 {
      width: 2%;
      height: 35%;
      margin: 27.8% 0% 0% 71%;
      clip-path: polygon(0% 24%, 0% 0%, 100% 11%, 100% 35%);
    }

    #trapezoid-bar28 {
      width: 1%;
      height: 59%;
      margin: 30% 0% 0% 73%;
      clip-path: polygon(0% 59%, 0% 0%, 100% 3%, 100% 55%);
    }

    #trapezoid-bar29 {
      width: 1.5%;
      height: 40%;

      margin: 31% 0% 0% 74%;
      clip-path: polygon(0% 40%, 0% 0%, 100% 7%, 100% 32%);

    }
   .grid-wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* keep aspect ratio inside grid */
}