.story-tablet {
  position: relative;
  width: 600px;
  height: 300px;
  border: 10px solid #9b29e7; /* Adds a visible border */
  border-radius: 10%; /* Creates a round border */

  /* Background image with 50% opacity and adjusting width */
  background-image: url("/imgs/Dashboard-cropped.png");
  background-color: rgba(255, 255, 255, 0.5); /* White background with 50% opacity */
  background-size: 100% 100%; /* Adjusts the width automatically */
}

.story-tablet::after {
  content: "";
  position: absolute;
  bottom: -10px; /* Distance of the shadow from the bottom */
  right: -10px; /* Distance of the shadow from the right */
  width: calc(100% + 10px); /* Adjust for the shadow's size */
  height: calc(100% + 10px); /* Adjust for the shadow's size */
  border-radius: 10%; /* Creates a round shape for the shadow */
  box-shadow: 5px 5px 10px #9b29e7ce; /* Adds shadow on the right and bottom sides */
}

/* CSS class for a black container centered inside the story-tablet container */
.story-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 40%; 
  background-color: #9b29e7df;
  /* border-radius: 20%; */
  padding: 20px;
  animation: glowing-circle 1.5s infinite;

}

.tablet-sim{
  position: relative;
  width: 500px;
  height: 300px;
 /* Creates a round border */

  /* Background image with 50% opacity and adjusting width */
  background-image: url("/imgs/Dashboard-op.png");
  background-size: 100% 100%; /* Adjusts the width automatically */
}


.con {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  justify-items: end;
  align-items: center;
  align-content: center;
}
.item{
  padding-left: 100px;
  padding-top: 50px;
}

.left-three{
  /* width: 100%; */
  height: auto;
  background-color:rgb(236, 237, 238);
  border-radius: 0rem 0 0rem 1rem;
}

.right-three{
  /* width: 100%; */
  height: auto;
  background-color:#f0f1f3ff;
  border-radius: 0 0 1rem 0; 
}


.tag-subheader{
  width: 100%;
  height: max-content;
  border-radius: 20px;
  background: rgb(0, 0, 0);
  background: linear-gradient(85deg, rgba(2, 123, 192,0.3) 75%, rgb(2, 123, 192,0.3) 25%);
  margin: 100px auto 100px; 
  position: relative;
  overflow: visible; 
}

.grow{
  transition: transform 0.3s ease-in-out;
}
.grow:hover {
  transform: scale(1.05);
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 15px; /* Adjust as needed */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}


.img-div{
  aspect-ratio: 1/1 !important;
}


@media (max-width: 1200px) {
.fs-3{
  font-size: 1.5rem !important;
}
.fs-5{
  font-size: 1.1rem !important;
}
}

@media (max-width: 769px) {

.fs-1{
  font-size: 1.5rem !important;
}

.fs-3{
  font-size: 1.2rem !important;
}

.fs-5-sm{
  font-size: 0rem !important;
}

.img-div{
  width: 50% !important;
}

.left-three{
  border-radius: 1rem 1rem 0rem 0rem;
}

.right-three{
  border-radius: 0 0 1rem 1rem; 
}
}
.dark-mode .story-tablet {
  position: relative;
  width: 600px;
  height: 300px;
  border: 10px solid #9b29e7; /* Adds a visible border */
  border-radius: 10%; /* Creates a round border */

  /* Background image with 50% opacity and adjusting width */
  background-image: url("/imgs/Dashboard-cropped.png");
  background-color: rgba(255, 255, 255, 0.5); /* White background with 50% opacity */
  background-size: 100% 100%; /* Adjusts the width automatically */
}

.dark-mode .story-tablet::after {
  content: "";
  position: absolute;
  bottom: -10px; /* Distance of the shadow from the bottom */
  right: -10px; /* Distance of the shadow from the right */
  width: calc(100% + 10px); /* Adjust for the shadow's size */
  height: calc(100% + 10px); /* Adjust for the shadow's size */
  border-radius: 10%; /* Creates a round shape for the shadow */
  box-shadow: 5px 5px 10px #9b29e7ce; /* Adds shadow on the right and bottom sides */
}

/* CSS class for a black container centered inside the story-tablet container */
.dark-mode .story-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 40%; 
  background-color: #9b29e7df;
  /* border-radius: 20%; */
  padding: 20px;
  animation: glowing-circle 1.5s infinite;

}

.dark-mode .tablet-sim{
  position: relative;
  width: 500px;
  height: 300px;
 /* Creates a round border */

  /* Background image with 50% opacity and adjusting width */
  background-image: url("/imgs/Dashboard-op.png");
  background-size: 100% 100%; /* Adjusts the width automatically */
}


.dark-mode .con {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  justify-items: end;
  align-items: center;
  align-content: center;
}
.dark-mode .item{
  padding-left: 100px;
  padding-top: 50px;
}

.dark-mode .left-three{
  /* width: 100%; */
  height: auto;
  background-color: rgba(119,22,237, 0.3);
  border-radius: 1rem 0 0rem 1rem;
}

.dark-mode .right-three{
  /* width: 100%; */
  height: auto;
  background-color: rgba(155,41,231,0.3);
  border-radius: 0rem 1rem 1rem 0; 
}


.dark-mode .tag-subheader{
  border-radius: 20px;
  background: rgb(119,22,237);
  background: linear-gradient(85deg, rgba(119,22,237,0.3) 25%, rgba(155,41,231,0.3) 75%);
}

.dark-mode .grow{
  transition: transform 0.3s ease-in-out;
}
.dark-mode .grow:hover {
  transform: scale(1.05);
}

.dark-mode .icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 15px; /* Adjust as needed */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.dark-mode .img-div{
  aspect-ratio: 1/1 !important;
}