@import url('/utils/css/reset.css');
@import url('/css/desktop/desktop-signup.css') screen and (min-width: 700px);
@import url('/css/mobile/settings.css') screen and (max-width: 700px);

@font-face {
   font-family: Helvetica;
   src: url(/resourses/fonts/Helvetica.ttf);
}

body {
   font-family: Helvetica;
   color: white;
   text-align: center;
   background-color: #09010c;
}

.container {
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   padding: 20px 0;
   background-image: url('/resourses/images/app-link/bg_web.png');
   background-repeat: no-repeat;
   background-size: cover;
   /* background: linear-gradient(130.59deg, #4F195F 0%, #050C1C 99.29%); */
}
header {
   display: flex;
   justify-content: space-between;
   width: 78%;
   gap: 40px;
   /* padding: 0 160px; */
   margin: 0 auto;
}
header img {
   max-width: 100%;
}
.content {
   padding: 80px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   width: 48%;
}
.content.remove {
   justify-content: space-between;
}

.introduction, .video-container, .play-now {
   width: 80%;
   margin: 0 auto;
}

.intoduction-image {
   width: 100%;
   aspect-ratio: 2.07;
   background-image: url('/resourses/images/index/img_desktop.png');
   background-size: cover;
   margin-bottom: 56px;
}

.index-text {
   font-size: 20px;
   font-weight: 400;
   margin-bottom: 24px;
   line-height: 24px;
}

.introduction-text {
   margin-top: 56px;
}

.index-text a {
   color: var(--white);
   text-decoration: underline;
}

.video-container {
   margin-bottom: 56px;
}

.download {
   margin-bottom: 56px;
}



.play-buttons {
   display: flex;
   justify-content: center;
   gap: 16px;
   margin-bottom: 16px;
}

.demo {
   width: 220px;
   height: 68px;
   background-image: url('/resourses/images/index/btn_webxr_0.png');
   background-size: 100% 100%;
}

.demo:hover {
   background-image: url('/resourses/images/index/btn_webxr_2.png');
   background-size: 100% 100%;
}

.copy {
   width: 68px;
   height: 68px;
   background-color: #EF3B3C;
   border-radius: 10px;
}

.copy:hover {
   background-color: #F02425;
}

.demo img, .copy img {
   max-width: 100%;
}

.load-links {
display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

#apple {
   background-image: url('/resourses/images/index/btn_apple_0.png');
}

#apple:hover {
   background-image: url('/resourses/images/index/btn_apple_1.png');
}

#meta {
   background-image: url('/resourses/images/index/btn_meta_0.png');
}

#meta:hover {
   background-image: url('/resourses/images/index/btn_meta_1.png');
}

#android {
   background-image: url('/resourses/images/index/btn_android_0.png');
}

#android:hover {
   background-image: url('/resourses/images/index/btn_android_1.png');
}

.load-links a {
   width: 216px;
   height: 64px;
   background-color: transparent;
   background-size: cover;
   border-radius: 10px;
}

.load-links a img {
   max-width: 100%;
}

.contact-us {
   width: 185px;
   height: 42px;
   background-color: #EF3B3C;
   border-radius: 10px;
   color: var(--white);
}

.contact-us:hover {
   background-color: #FF5C5D;
}

@media (orientation: portrait) {
   .video-container {
      position: relative;
      /* width: 100%; */
      padding-bottom: 56.25%; 
      height: 0;
      margin-bottom: 48px;
   }
   .video-container iframe {
      position: absolute;
      object-fit: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 20px;
   }
}
@media (orientation: landscape) {
   .video-container {
      position: relative;
      /* width: 100%; */
      padding-bottom: 56.25%; 
      height: 0;
      margin-bottom: 48px;
   }
   .video-container iframe {
      position: absolute;
      object-fit: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 20px;
   }
}

h2 {
   font-size: 36px;
   font-weight: 700;
   margin-bottom: 16px;
   color: var(--white);
   line-height: 120%;
}

p {
   font-weight: 400;
   font-size: 16px;
   line-height: 18px;
   margin-bottom: 48px;
}
h3 {
   font-size: 36px;
   line-height: 41px;
   margin-bottom: 8px;
}
/* .demo {
   font-weight: 400;
   font-size: 24px;
   line-height: 28px;
   color: #fff;
   padding: 16px 60px;
   background-color: #EF3B3C;
   border-radius: 10px;
   max-width: 252px;
   align-self: center;
   margin-bottom: 48px;
} */
.subtitle {
   font-weight: 400;
   font-size: 24px;
   margin-bottom: 16px;
}
.links {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr;
   column-gap: 16px;
   row-gap: 16px;
   justify-items: center;
   align-items: center;
   margin-bottom: 16px;
}
.welcome-parent {
   margin: 0 auto;
}
.app-link {
   display: inline-flex;
   align-items: center;
   align-self: center;
   justify-content: center;
   color: #F5FAFF;
   text-align: left;
   font-weight: 400;
   font-size: 16px;
   line-height: 18px;
   background-color: #4E51EE;
   padding: 0 24px;
   height: 51px;
   width: 215px;
   border: 2px solid #538EFF;
   border-radius: 10px;
}
.app-link.andr {

}
.app-link.web {
   justify-content: center;
}
.slot2 {
}
.device-pics img {
   margin: 0 auto;
   max-width: 100%;
}

footer {
   display: flex;
   width: 78%;   
   justify-content: space-between;
   align-items: end;
   margin: 0 auto;
   text-align: left;
}
footer > div {
   width: 33.33%;
}
footer p {
   margin-bottom: 0;
}
footer p, footer a, footer button {
   color: #F5FAFF;
   font-size: 16px;
   font-weight: 400;
   line-height: 100%;
   font-family: Helvetica;
}
footer a {
   color: #F5FAFF;
   font-size: 16px;
   font-weight: 400;
   letter-spacing: -0.05em;
}
.footer-social {
}
.footer-logo {
   width: 184px;
   height: 35px;
   margin-bottom: 24px;
}

.footer-logo img {
   width: 100%;
   height: 100%;
}

.footer-social p {
   font-size: 16px;
   line-height: 18px;
   margin-bottom: 24px;
}
.footer-icons {
   display: flex;
   gap: 16px;
}
.footer-icons>a>img {
   max-width: 24px;
}
.footer-links {
   color: #F5FAFF;
   display: flex;
   gap: 24px;
} 
.footer-links a {

}
.footer-policy {
   display: flex;
   gap: 24px;
}
.footer-policy a , 
.footer-policy button{
   background-color: transparent;
   color: var(--white);
}
.footer-policy a:hover,
.footer-policy button:hover {
   color: #EF3B3C;
}
.footer-adress {
   display: flex;
   flex-direction: column;
   text-align: left;
   gap: 8px;
   align-items: end;
}
.address-title {
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
   margin-bottom: 8px;
}
.address {
   font-weight: 400;
   font-size: 16px;
   line-height: 18px;
   width: 80%;
   text-align: right;
}

.close-btn-wrapper {
   border: none;
   top: 16px;
   right: 16px;

}

.close-btn-wrapper img {
   display: none;
}

.close-btn-wrapper button {
   width: 44px;
   height: 44px;
   background-image: url('/resourses/images/index/btn_close_0.png');
   background-size: cover;
   background-color: transparent;
}

.close-btn-wrapper button:hover {
   background-color: transparent;
   background-image: url('/resourses/images/index/btn_close_1.png');
}

.privacy-content {
   background-color: #061023;
   padding-top: 60px;
   border: 1px solid #55657B;
}

.privacy-text-wrapper {
   background-color: #010409;
   border: 1px solid #55657B;
}

.privacy-text-wrapper p {
   font-family: Helvetica;
}

.popup-title {
   font-size: 30px;
   font-weight: 700;
   font-family: Helvetica;
   line-height: 100%;
}

.contact-popup .dark-popup-content {
   width: 594px;
}

.contact-form {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

.user-data {
   display: flex;
   gap: 16px;
   width: 100%;
}

.input {
   width: 100%;
   font-size: 14px;
   padding: 12px;
   background-color: var(--white);
   border-radius: 10px;
}

.custom-select {
   appearance: none;
   /* Removes default styles */
   background-color: var(--white);

   border-radius: 10px;
   /* Rounded corners */
   color: #191B1F;
   color: gray;
   padding: 12px;
   width: 100%;
   font-size: 16px;
   position: relative;
}

/* Custom dropdown arrow */
.custom-select-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
}

.custom-select-wrapper::after {
   content: '▼';
   font-size: 14px;
   color: #191B1F;
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
}

.custom-select option {
   background-color: var(--white);
   color: #191B1F;
   padding: 10px;
   font-size: 16px;
}

.custom-select option:valid {
   font-size: 16px!important;
   color: #191B1F;
}
.custom-select option:disabled {
   color: gray;
}

/* Hover and focus styles */
.custom-select:focus .custom-select-wrapper::after{
   
}

.text-area {
   width: 100%;
   font-size: 16px;
   padding: 12px;
   background-color: var(--white);
   border-radius: 10px;
   height: 136px;
}

.send {
   width: 185px;
   height: 42px;
   background-color: #EF3B3C;
   border-radius: 10px;
   margin-top: 16px;
   color: var(--white);
   font-size: 16px;
}

.send:hover {
   background-color: #FF5C5D;
}

@media (max-width: 900px) {
   header {
      /* padding: 0 50px; */
      width: 86%;
   }

   header img {
      max-width: 111px;
   }

   .content {
      padding: 30px 0 32px;
      width: 86%;
   }

   .welcome-parent {
      padding: 0 50px;
      padding-bottom: 16px;
   }

   .slot-pic img {
      max-width: 100%;
   }

   .app-link {
      width: 153px;
   }

   h2 {
      font-size: 28px;
      line-height: 100%;
      margin-bottom: 16px;
   }

   h3 {
      font-weight: 700;
      font-size: 20px;
      line-height: 23px;
   }

   p {
      font-size: 17px;
      line-height: 20px;
   }

   footer {
      flex-direction: column;
      gap: 16px;
      position: static;
      background-color: transparent;
      width: 100%;
   }

   footer p,
   footer a,
   footer button {
      color: #F5FAFF;
      font-size: 14px!important;
      font-weight: 400;
      line-height: 100%;
   }

   .footer-logo img {
      display: block;
   }

   .footer-social p {
      display: none;
   }

   .footer-icons>a>img {
      max-width: 44px;
   }

   .footer-links {
      flex-direction: row;
      justify-content: space-between;
   }

   .footer-policy {
      flex-direction: row;
      justify-content: space-between;
   }

   .footer-adress {
      align-items: center;
      justify-content: center;
   }

   .address {
      width: 80%;
      text-align: center;
   }

   .footer-icons {
      justify-content: center;
   }
}

@media (max-width: 500px) {
   .container {
      background-image: url('/resourses/images/app-link/bg_mobile.png');
   }

   .content {
      width: 100%;
      padding: 24px 16px;
   }

   .introduction,
   .video-container,
   .play-now {
      width: 100%;
      margin: 0 auto;
   }

      .video-container {
         height: 500px;
      }

   .intoduction-image {
      width: 100%;
      aspect-ratio: 1.14;
      background-image: url('/resourses/images/index/img_mobile.png');
      margin-bottom: 48px;
   }

   .video-container,
   .download {
      margin-bottom: 40px;
   }

   .index-text {
      font-size: 16px;
      line-height: 20px;
      margin-bottom: 20px;
   }

   .introduction-text {
      margin-top: 40px;
   }

   .demo {
      width: 153px;
      height: 46px;
   }

   .copy {
      width: 46px;
      height: 46px;
   }

   .load-links {
      grid-template-columns: repeat(2, 1fr);
   }

   #android {
      grid-column: span 2;
      justify-self: center;
   }

   .load-links a {
      width: 153px;
      height: 45px;
      border-radius: 8px;
   }

   .links {
      margin-bottom: 8px;
      gap: 8px;
   }

   footer>div {
      width: 100%;
   }

   .footer-logo {
      width: 200px;
      height: 39px;
      margin: 0 auto;
         margin-bottom: 16px;
   }

   .contact-popup .dark-popup-content {
      width: 90%;
      padding-top: 40px;
   }

   .close-popup-btn {
      width: 36px;
      height: 36px;
   }

   .popup-title {
      font-size: 32px;
      margin-bottom: 16px;
   }

   .user-data {
      flex-direction: column;
   }

      .send {
         font-size: 14px;
      }
}

@media (max-width: 425px) {

   /* header {
      padding: 0 30px;
   }
   footer {
      padding: 30px;
      padding-top: 0;
   } */
   .app-link {
      width: 100%;
   }

   .app-link.andr {
      width: 50%;
   }

   .welcome-parent {
      padding: 30px;
   }

   .slots-container {
      gap: 30px;
   }
}