/* First, make sure your HTML has this viewport meta tag in the head */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */

body {
  background-color: #0d0b0b;
  display: flex;
  
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  margin: 0;
  margin-top: calc(-2vh);
  padding-top: calc(2vh); 
  overflow: hidden;
}

/* Phone frame as a container with responsive sizing */
.phone-frame {
  position: relative;
  width: 100%; /* Use percentage of viewport width */
  max-width: 415px; /* Maximum size */
  aspect-ratio: 736 / 1308; /* Maintain aspect ratio */
  background: url('asset/bgpolos.jpg') no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Responsive overlay */
.overlay-box {
  position: absolute;
  top: 8%;
  left: 7%;
  right: 7%;
  bottom: 8%;
  border-radius: 16px;
 }

/* Make all decorative elements responsive using viewport width */
.mkohm {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 75%; /* Percentage of container width */
  max-width: 310px;
  z-index: 10;
}

/* Helper function to position elements proportionally */
/* Instead of absolute pixels, use percentages of container */
.fish {
  position: absolute;
  top: 34%;
  left: 3%;
  width: 17%; /* Proportion of container */
  max-width: 70px;
  z-index: 10;
}

.omg {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 11%;
  max-width: 45px;
  z-index: 10;
}

.flower {
  position: absolute;
  top: 23%;
  left: 37%;
  width: 23%;
  max-width: 95px;
  z-index: 10;
}

.raket {
  position: absolute;
  bottom: 22%;
  left: -4%;
  width: 28%;
  max-width: 115px;
  z-index: 10;
}

.sayur {
  position: absolute;
  bottom: 4%;
  left: 44%;
  width: 11%;
  max-width: 45px;
  z-index: 10;
}

.camera {
  position: absolute;
  bottom: 1%;
  right: 10%;
  width: 18%;
  max-width: 75px;
  z-index: 10;
  transform: rotate(18deg);
}

.dog2 {
  position: absolute;
  bottom: 10%;
  right: 0%;
  width: 14.5%;
  max-width: 60px;
  z-index: 10;
}

.sant {
  position: absolute;
  bottom: 23%;
  right: 2%;
  width: 11%;
  max-width: 45px;
  z-index: 10;
  transform: rotate(-10deg);
}

.biru {
  position: absolute;
  bottom: 30%;
  right: 0%;
  width: 19%;
  max-width: 80px;
  z-index: 10;
}

.vinyl {
  position: absolute;
  top: 33%;
  right: 2%;
  width: 10%;
  max-width: 40px;
  z-index: 10;
}

.bunga {
  position: absolute;
  top: 32%;
  right: 31%;
  width: 7%;
  max-width: 28px;
  z-index: 10;
}

.sushi {
  position: absolute;
  top: 23%;
  right: 13%;
  width: 7%;
  max-width: 30px;
  z-index: 10;
}

.love {
  position: absolute;
  top: 10%;
  right: 0%;
  width: 14.5%;
  max-width: 60px;
  z-index: 10;
}

.ijo {
  position: absolute;
  top: 15%;
  right: 19%;
  width: 14.5%;
  max-width: 40px;
  z-index: 10;
  transform: rotate(18deg);
}

.headband {
  position: absolute;
  top: 22%;
  right: 7%;
  width: 35%;
  max-width: 145px;
  z-index: 10;
}

.glass {
  position: absolute;
  top: 15%;
  left: 2%;
  width: 10%;
  max-width: 40px;
  z-index: 10;
}

.quote2 {
  position: absolute;
  top: 56%;
  left: 11%;
  width: 16%;
  max-width: 65px;
  z-index: 10;
  transform: rotate(-18deg);
}

.caution {
  position: absolute;
  bottom: 3%;
  left: -5%;
  width: 50%;
  max-width: 130px;
  z-index: 10;
  transform: rotate(-5deg);
}

.Digicam {
  top: 18%;
  left: 20%;
  position: absolute;
  width: 67%;
  max-width: 280px;
  z-index: 10;
}

.quote {
  position: absolute;
  top: 16%;
  left: 35%;
  width: 24%;
  max-width: 100px;
  z-index: 10;
}

.glasses {
  position: absolute;
  top: 33%;
  left: 28%;
  width: 12%;
  max-width: 50px;
  z-index: 10;
  transform: rotate(15deg);
}

.teamo {
  position: absolute;
  top: 63%;
  left: 50%;
  width: 7%;
  max-width: 30px;
  z-index: 10;
  transition: all 0.2s ease;
  border-radius: 16px;
}

/* Hover effects */
a:hover .teamo,
a:focus .teamo,
a:active .teamo {
  box-shadow: 0 0 10px #e28eaa;
  transform: scale(1.05);
}

.bandaid {
  position: absolute;
  top: 1%;
  width: 19%;
  max-width: 80px;
  z-index: 10;
  transform: rotate(-40deg);
}

.logo {
  position: absolute;
  left: 42%;
  width: 12%;
  max-width: 50px;
  z-index: 9999;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

.star {
  position: absolute;
  right: 5%;
  width: 11%;
  max-width: 45px;
  z-index: 10;
  transform: rotate(-50deg);
}

.textmarkohm {
  position: absolute;
  top: 0%;
  left: 8%;
  width: 85%;
  max-width: 415px;
  z-index: 10;
}
/* Markohm logo styling
.markohm-logo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
}

.markohm-logo img {
  height: 9vw;
  max-height: 38px;
  width: auto;
  object-fit: contain;
  margin-inline: -0.7vw;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

.m1 {
  transform: rotate(-7deg);
  margin-bottom: 1vw;
}

.a {
  transform: rotate(5deg);
  margin-bottom: 2vw;
}

.r {
  transform: rotate(-2deg);
  margin-bottom: 1vw;
  z-index: 10;
}

.k {
  transform: rotate(2deg);
  margin-bottom: 0.5vw;
}

.o {
  height: 11.5vw !important;
  max-height: 48px !important;
  transform: rotate(-4deg);
  margin-top: 1vw;
}

.h {
  transform: rotate(-12deg);
  margin-bottom: 0.2vw;
}

.m2 {
  height: 13.2vw !important;
  max-height: 55px !important;
  margin-top: 1vw;
} */

/* Photo carousel */
.photo-carousel {
  position: absolute;
  top: 42%;
  left: 0%;
  width: 155%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 9;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.photo-carousel::-webkit-scrollbar {
  display: none;
}

.photo-slide {
  display: inline-block;
  width: 100%;
  max-width: 630px;
  height: auto;
  margin-right: -5px;
}

/* Media queries for different screen sizes */
@media (max-width: 370px) {
  body {
    margin-top: -1vh;
  }
  
  .markohm-logo img {
    margin-inline: -1vw;
  }
}

@media (min-width: 768px) {
  .markohm-logo img {
    height: 38px;
    margin-inline: -3px;
  }
  
  .o {
    height: 48px !important;
  }
  
  .m2 {
    height: 55px !important;
  }
}

.flower,
.headband,
.caution {
  position: absolute;
  z-index: 9999; /* kasih lebih tinggi */
}