/* This wrapper ensures the phone frame is centered */
.phone-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; /* Optional: add space around the frame */
}

/* Main phone frame design */
.phone-frame {
  position: relative;
  width: 300px; /* Approx mobile width */
  height: 600px;
  border-radius: 40px; /* Rounded corners */
  overflow: hidden; /* Prevents content from overflowing the rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  background: #000; /* Outer phone frame color */
}

/* Styling the iframe to fit perfectly inside the phone frame */
.phone-frame iframe {
  width: 100%;
  height: 100%;
  border: none; /* Removes the border around iframe */
  display: block; /* Makes iframe block-level */
}

/* Optional notch (used for iPhone-like devices) */
.phone-frame .notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 30px;
  background-color: #000; /* Notch color */
  border-bottom-left-radius: 15px; /* Rounded notch corners */
  border-bottom-right-radius: 15px;
  z-index: 2; /* Ensures notch is above iframe */
}