/*
=====================================================
 Файл стилей  - разработка stillmaster 
-----------------------------------------------------
 https://stillmaster.ru/
-----------------------------------------------------
Телеграмм https://t.me/stillmasters
-----------------------------------------------------
Кворк https://kwork.ru/user/stillmaster?ref=14635
-----------------------------------------------------
 Copyright (c) 2025 stillmaster (Иван Марченко)
=====================================================
*/

/*Сброс*/
* {text-decoration-line: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;margin: 0;padding: 0;}
*::-webkit-scrollbar { width: 10px; height: 4px;background-color: #0a081d;}
*::-webkit-scrollbar-thumb { background: #ff0069; border-radius: 3px;}
html, html a { -webkit-font-smoothing: antialiased; }
:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html {height: 100%;background-color: #0a081d;}

body {max-width:100%;position: relative; }
header {background-image: url(../img/background.webp);background-size: cover;background-position: center center;background-repeat: no-repeat; height: 1710px;width: 100%;     position: relative;   background-attachment: scroll;}
.container {max-width: 1100px;margin: 0 auto;padding: 20px;    position: relative;    width: 100%;}
.logo {padding-top: 15px;display: block;}
.bonus {    max-width: 100%; object-fit: contain;max-height: 60px;}
.bonus1 {    max-width: 100%; object-fit: contain;margin-top: 10px;max-height: 77px;}
.promo {    z-index: 3; top: 30px; position: absolute; left: 50%; transform: translateX(-50%);    width: 100%;max-width: 960px; }
.promo img {max-width: 960px; height: auto;    width: 100%;}
.bonus100  {    max-width: 336px;    right: 60px; position: absolute;max-height: 90px;top: 210px;display: block;}
.logo-link {
    display: inline-block; 
    text-decoration: none; position: relative;
    z-index: 9999;
}
.bonus100-link {z-index: 9999;}
.bonus100 img {object-fit: contain;        max-width: 100%; }
.logo a, .logo img {
    padding: 0;
    margin: 0;
    border: none;
}
.form {max-width: 752px;position: absolute;top: 73%;left: 50%; transform: translateX(-50%);    width: 100%; }
.tn-atom  {display: block; color: #ffffff; font-size: 30px; font-family: 'TildaSans', Arial, sans-serif; line-height: 1.7; font-weight: 600; border-radius: 18px 18px 18px 18px; background-color: #ff0069; background-position: center center; border-color: transparent; border-style: solid; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.link {    position: absolute; box-sizing: border-box; display: table;color: #ffffff; text-align: center; z-index: 3;margin-top: 65px; left: 50%; transform: translateX(-50%); width: 385px; height: 70px;}
.tn-atom:hover {background-color: #d5085c;}
main, footer, header {background-color: #0a081d;overflow:hidden}
.gridblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 50px; margin-top: 20px; /* Отступ 20px от .form */ width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto;position: absolute; top: 140%; }
.gridblock__item {background-color: #191524;border-radius: 30px 30px 30px 30px; opacity: 0.9;color: #fff;font-size: 30px;font-weight: 600;font-family: 'TildaSans', Arial, sans-serif;height: 180px;}
.gridblock__item p {line-height: 47px;    display: flex ; align-items: center; height: 100%;}
.span2 {grid-column: span 2;}
.gridblock__item h2 {font-size: 30px;text-align: center;    line-height: 47px;}
.gridblock__item h3 {font-size: 28px;    line-height: 47px;text-align: center;}
.span2 .tn-atom {text-align: center;width: 336px;}
.flex {display: flex ; }
.jc-center {justify-content: center;}
.fd-column {flex-direction: column;}
.h-100 {height: 100%;}
.seotext h1, .seotext h2, .seotext h3 {color: #ff0069; font-weight: 900; padding-top: 12px; padding-bottom: 12px; font-family: 'TildaSansBold';}
.seotext h2, .seotext h3  {font-size: 33px;}
.seotext p {font-size: 18px; color: #ffffff;  font-family: 'TildaSansBold';line-height: 1.55;}
.pt30 {padding-top: 30px;}
.pb30 {padding-bottom: 30px;}
.line-wrapper { display: flex; align-items: center; height: 1px; width: 100%; overflow: hidden;opacity: 0.2; }
.line { flex: 1; height: 1px; background: #ff0069; }
.line-opacity { width: 50px; height: 1px; }
.line-opacity_left { background: -webkit-linear-gradient(right, rgba(255, 0, 105, 0), #ff0069); background: -moz-linear-gradient(right, rgba(255, 0, 105, 0), #ff0069); background: -o-linear-gradient(right, rgba(255, 0, 105, 0), #ff0069); background: linear-gradient(to right, rgba(255, 0, 105, 0), #ff0069); }
.line-opacity_right { background: -webkit-linear-gradient(left, rgba(255, 0, 105, 0), #ff0069); background: -moz-linear-gradient(left, rgba(255, 0, 105, 0), #ff0069); background: -o-linear-gradient(left, rgba(255, 0, 105, 0), #ff0069); background: linear-gradient(to left, rgba(255, 0, 105, 0), #ff0069); }

.seotext ul {list-style: none; padding-left: 0;color: #ffffff; font-family: 'TildaSansBold';margin-top: 15px;font-size: 18px;}
.seotext ul li {padding-bottom: 5px;}
strong {margin-top: 15px;display: block;}
em {font-style: italic; color: #fff;font-family: 'TildaSansLight';}
.logofoot {text-align: center;display: block;}
.menufooter_link {    display: flex ; gap: 10px; justify-content: center; list-style: none; flex-wrap: wrap;margin-top: 20px;}
.menufooter_link li a {color: #ffffff; font-size: 18px; font-family: 'TildaSansBold';    background-color: #ff0069; padding: 10px; border-radius: 12px;display: block;}
.copyright {text-align: center;margin-top: 25px;}    
.copyright p {font-size: 18px;color: #ffffff; font-family: 'TildaSansBold';opacity: .5; font-size: 14px;line-height: 1.5;}
/* Анимация для плавного появления справа */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Анимация для плавного появления слева */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Анимация для плавного появления снизу */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Применение анимаций к элементам */
.logo,
.bonus {
  animation: slideInLeft 1s ease-out forwards;
}

.bonus100 {
  animation: slideInRight 1s ease-out forwards;
}

.promoimg {
  animation: slideInUp 1s ease-out forwards;
}

/* Начальное состояние для .bonus1 — скрыт */
.bonus1 {
  opacity: 0;
  transform: translateX(-100%);
  animation: slideInLeft 1s ease-out 1s forwards; /* Задержка 1 секунда */
}


.bonus {color:#fff;font-family: 'Inter', sans-serif;
  font-weight: 900;text-transform: uppercase;
    font-size: 73px;max-height: 86px;}
.bonus1 {color:#fff;font-family: 'Inter', sans-serif;
  font-weight: 900;text-transform: uppercase;
    font-size: 37px;;max-width: 344px}

@media screen and (max-width: 1100px) {

    .link {margin-top: 53px;}
    .container  {padding: 20px 15px;}
    .logo {text-align: center;padding-top: 0;}
    
    .promo {top: 150px;}
    .promo img {padding: 0 50px;}
    .gridblock__item {font-size: 22px;height: auto;padding: 25px;}
    .gridblock__item h2 {        font-size: 22px; }
    .gridblock__item h3 {font-size: 20px;max-width: 463px; margin: auto;}
    .gridblock  {grid-gap: 10px;        padding: 0 15px;}
   .bonus {font-size: 60px;max-width: 100%;        overflow: hidden;}
}
@media screen and (max-width: 880px) {
    .bonus {font-size: 55px;}
}


@media screen and (max-width: 870px) {
.link {width: 295px;margin-top: 44px;}
.bonus {font-size: 50px;}
}
@media screen and (max-width: 800px) {
    header {height: 1390px;}
    .bonus {font-size: 45px;}
    .bonus1 {font-size: 27px;}
     .bonus100 img {max-height: 66px;}
    .bonus100  {top: 160px;}
}
@media screen and (max-width: 734px) {
.link {width: 250px;margin-top: 35px;height: 50px;}
.tn-atom {font-size: 30px;border-radius: 12px 12px 12px 12px;}
.promo img { padding: 0; }
.promo .form {padding: 0 20px;}
.menufooter_link li a {font-size: 12px;}
.bonus {font-size: 40px;}
}

@media screen and (max-width: 660px) {
    .bonus {font-size: 35px;}
    .bonus1 {
        font-size: 24px;
        max-width: 50%;
    }
    }



@media screen and (max-width: 630px) {
.link {width: 250px;margin-top: 35px;height: 30px;}
.gridblock__item, .gridblock__item h2, .gridblock__item h3, .gridblock__item p {font-size: 16px;line-height: 25px;}


}
@media screen and (max-width: 600px) {
    .bonus100 {top: 158px;}
.link {width: 35%;margin-top: 2%;height: auto;}
.tn-atom {font-size: 16px;}
header {height: 1100px;}
.seotext h1, .seotext h2, .seotext h3 {font-size: 28px;}
.seotext p {line-height: 1.45;}
    .container.seotext {padding: 0 20px;}
        .bonus {
        font-size: 30px;
    }
}

@media screen and (max-width: 550px) {
    .bonus100   {width: 42%; transform: translateX(-50%);    right: 15px; }

.gridblock {grid-template-columns: repeat(1, minmax(0, 1fr));}
.span2 {grid-column: span 1;}
}

@media screen and (max-width: 520px) {
     .bonus {
        font-size: 25px;
    }
        .bonus1 {font-size: 18px;}
    }
@media screen and (max-width: 450px) {
     .bonus {
        font-size: 20px;
    }
        
    }
    
    @media screen and (max-width: 420px) {
     .bonus {
        font-size: 16px;
    }
        .bonus1 {font-size: 14px;}
    }
    
    
    .language-switcher {
  position: fixed;
  right: 20px;
  top: 20px;
      z-index: 9999;
}

.current-language {
  cursor: pointer;
  padding: 5px;
  background: rgb(24 20 35);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.language-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: rgb(24 20 35);
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
}

.language-option {
  display: block;
 
}

.language-dropdown:hover {
  background: rgb(38 47 84);
  border-radius: 3px;
}