* {margin: 0; padding: 0; box-sizing: border-box;}
html {background: #000;}
body {
  background: url("img/bg.png") no-repeat center center fixed;
  background-size: cover;
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

/* Header */
.content_header {
  padding: 15px;
  text-align: center;
}
.content_header img {
  max-width: 170px;
  height: auto;
}

/* Main content */
.content_info {
  position: relative;
  max-width: 60%;
  width: 100%;
  float: left;
  padding-left: 10%;
  padding-top: 20px;
  z-index: 5;
}
.content_info img {
  display: block;
  max-width: 100%;
}
.content_info img.title_300_box {width: 70%;}
.button-wrapper {
  display: inline-block;
  max-width: 450px;
}
.button-wrapper img {width: 100%;}

/* Model and background */
.model_box {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 0;
  text-align: right;
  z-index: 2;
}
.model_box img {max-width: 86%;}
.model_bg {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  mix-blend-mode: lighten;
  text-align: right;
}
.model_bg img {max-width: 86%;}

/* Telegram button */
.telegram_box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9;
  cursor: pointer;
}

/* Animations */
@keyframes imgzoom {
  from {transform: scale(1);}
  to {transform: scale(0.95);}
}

@keyframes imgfloat {  
  from {transform: translateY(0px);}
  to {transform: translateY(-10px);}
}

@keyframes imgjump {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-20px);}
}

@keyframes buttonAppear {
  from {opacity: 0; transform: translateY(20px) scale(0.95);}
  to {opacity: 1; transform: translateY(0) scale(1);}
}

img.title_300_box {
  animation: imgjump 1s 1s infinite;
}
.telegram_box img {
  animation: imgfloat 0.5s infinite alternate-reverse;
}

.button-appear {
  animation: buttonAppear 0.8s ease-out forwards;
}

/* Add logo animation */
.logo-animate {
  animation: logoScale 2s ease-in-out infinite alternate;
}

@keyframes logoScale {
  0% {transform: scale(1);}
  100% {transform: scale(1.05);}
}

/* Add a subtle glow effect for logo */
.logo-glow {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  transition: filter 0.5s ease;
}

.logo-glow:hover {
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}

/* Hide mobile title by default */
.title_mobile {display: none !important;}

/* Button styles */
.button_box-android,
.button_box-other,
.button_box-all {
  margin-bottom: 0px;
  text-align: center;
  cursor: pointer;
}

/* Hide Android button by default */
.button_box-android {
  display: none;
}

/* Button images */
.button_box-android img,
.button_box-other img,
.button_box-all img {
  width: 75%;
  margin: 0 auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 12px;
}

/* Button hover effects for better UI */
.button_box-android:hover img,
.button_box-other:hover img,
.button_box-all:hover img {
  filter: brightness(1.1);
  transform: translateY(-3px);
}

/* Animations for buttons */
.button_btn {
  animation: imgzoom 0.3s infinite alternate-reverse;
}

.button_btn_2 {
  animation: imgzoom 0.3s 0.3s infinite alternate-reverse;
}

/* Responsive media queries */
@media screen and (min-width: 2000px) {
  .model_box img, .model_bg img {max-width: 100%;}
}

@media screen and (min-width: 2000px) and (min-height: 1200px) {
  .content_info {padding-top: 10vh;}
  .model_box img, .model_bg img {height: 90vh; max-width: unset;}
}

@media screen and (min-width: 1600px) and (min-height: 1000px) {
  .content_info {padding-top: 10vh;}
  .model_box img, .model_bg img {height: 85vh; max-width: unset;}
}

@media only screen and (max-width: 1600px) {
  .content_info img.title_300_box {max-width: 65%;}
  .model_box img, .model_bg img {max-width: 65%;}
  .button-wrapper {max-width: 350px;}
}

@media only screen and (max-width: 1400px) {
  .content_info img.title_300_box {max-width: 70%;}
  .model_box img, .model_bg img {max-width: 65%;}
}

@media only screen and (max-width: 1023px) {
  .content_info {
    max-width: 100%;
    float: none;
    padding-left: 0;
    padding-top: 0;
    text-align: center;
  }
  .content_info img {
    max-width: 90%;
    margin: 0 auto;
  }
  .model_box img, .model_bg img {max-width: 100%;}
  .model_box {position: relative; margin-top: 20px;}
  .telegram_box {text-align: right;}
  .telegram_box img {max-width: 80%;}
  .title_desktop {display: none !important;}
  .title_mobile {display: block !important;}
  .button-wrapper {max-width: 100%; margin: 0 auto;}
}

@media only screen and (max-width: 767px) {
  .button-wrapper {max-width: 55%;}
  .model_box {bottom: -5px;}
  .button_box-android img,
  .button_box-other img,
  .button_box-all img {
    width: 85%;
  }
}

@media screen and (max-width: 576px) {
  .content_header img {max-width: 100px;}
  .content_info img.title_300_box {width: 90%; max-width: 90%;}
  .button-wrapper {width: 80%; max-width: 80%;}
}