/* ==============Мобильная версия================ */
* {
    box-sizing: border-box;
}

body {
    background-color: #F9F3F6;
}

footer {
    display: none;
}

.background-image {
    display: none;}



.section-first {
/*     display: flex;
/*     max-width: 768px; */
/*     width: 100%; */ 
    height: 480px; 
    background: linear-gradient(113.43deg, #D0DAEE 4.37%, #BFC4E2 25.71%, #A8A7D0 48.73%, #9E9CC9 68.3%, #C8C5EB 89.7%);
    position: relative;
    left: 50%;           /* центрируем по горизонтали*/
    transform: translateX(-50%);



}

picture {
    display: none;
}


/* Навигация */

.text-back 
{
    display: none;
} 

nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 20px;
    align-items: center;
}

a {
    display: block;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.back-link {
    display: flex;
    align-items: center;
}

.logo-back {
    width: 12px;
    height: 24px;
}
.logo-lk_link {
    display: flex;
    align-items: center;
}
.logo-lk_link img {
    width: 24px;
    height: 24px;
}



/* Блок 20 лет */


.text-about {
    position: relative;
    display: flex;                 /* ставим "20" и текст рядом */
    width: 380px;
    height: 156px;
    align-items: center;           /* вертикальное выравнивание */
    justify-content: center;       /* центрируем по горизонтали  */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    
}
/* Заголовки */
.text-about__years {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 50px;
    line-height: 121%;
    text-transform: uppercase;
    text-align: left;
    background: linear-gradient(101.83deg, #F9F3F6 2.24%, #F8F3FF 97.76%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    position: relative;
    width: 224x;
    height: 197px;
    z-index: 3;
}

.text-about__years .years {
    font-size: 100px;
    margin-top: 5px;
    font-weight: 700;
    font-style: italic;
}
/* "20" цифра */
.text-about__20-wrapper {
    position: relative;
    width: 156px;
    height: 100%;
    display: flex;
    margin: 0;
    align-items: center;
    margin-right: 10px;
}

.text-about__20,
.text-about__20-shadow {
    position: absolute;
    top: 52%;
    left: 0;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    width: 156px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 160px;
    line-height: 1;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    overflow: visible;
}
.text-about__20-shadow {
    z-index: 1;
    color: transparent;
    text-shadow: 5px 3px 0 rgba(255, 255, 255, 0.5);
}

.text-about__20 {
    z-index: 2;
    background: linear-gradient(159.38deg, #FF3FA2 15.4%, #992661 115.24%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ================== RAFFLE ================== */
.raffle {
    position: relative;
    left: 51%;
    transform: translateX(-50%);

    border-radius: 12px;
    width: 367px;
    height: 50px;
    background: #F7F3FF;
    box-shadow: 
        5.14px 2.57px 20.55px 0 #7F7AB2,
        -5.14px -2.57px 20.55px 0 #D2DCFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.raffle h1 {
    margin: 0;
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: 27px;
    text-align: center;
    line-height: 1;
    letter-spacing: 1%;
    text-transform: uppercase;
    background: linear-gradient(109.06deg, #E92D8F -1.78%, #831950 219.53%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Контейнер для изображения */

.image-pattern {
    position: absolute;
    bottom: 0;       /* прижимаем к низу секции */
    right: 0;        /* правая часть картинки видна */
    width: 700px;
    height: 580px;
    z-index: 0;
    pointer-events: none; /* чтобы не мешало кликам */
}


.section-two__right {
    display: none;
}

.ribbon-mobile {
    position: relative;   /* родитель для абсолютного позиционирования */
    width: 100%;
    height: 300px;        /* высота блока, можно подстроить под контент */
    margin-bottom: -240px;
}

.ribbon-mobile img {
    position: absolute;
    left: 50%;            /* центрируем по горизонтали */
    transform: translateX(-50%);
    bottom: 0;       /* прижимаем к низу секции */
    width: 419px;
    height: 880px;
    z-index: 0;
    pointer-events: none;

}
/* ===============SECOND SECTION================= */
.section-second {
    margin-bottom: 30px;
}
.section-second__left {
    
    flex: 1 1 0;
    max-width: 560px;
    position: relative;
    top: 40px;
    left: 60px;
    font-family: "Roboto Condensed", sans-serif;
    left: 50%;
    transform: translateX(-50%);
}

.section-two__right {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}

.section-two__right img {
    position: relative;
    height: 1084px;
    top: -520px;
    left: 470px;
    transform: rotate(0deg);
    opacity: 1;
    z-index: -1;
}

/* ================== NUMBERS LIST ================== */
.left-section__numbers {
    display: flex;
    flex-direction: column;

}

.number-item {
    display: flex;
    align-items: center;
    margin-bottom: 44px;
    padding-left: 40px;
}

.number-item:last-child {
    margin-bottom: 0;
}
.number-item:nth-child(3) {
    margin-bottom: 0;
}

.number {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 45px;
    line-height: 100%;
    text-transform: uppercase;
    background: linear-gradient(151.1deg, #FFE6A2 0.02%, #C98E2F 50.48%, #FFE2B3 99.98%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 15px;
    flex-shrink: 0;
}

.number-text {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 25px;
    text-transform: uppercase;
    color: #7572BF;
    flex: 1;
    
}

/* Специальный пункт */
.number-item--special .number--special {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 95px;
    line-height: 100%;
    text-transform: uppercase;
    background: linear-gradient(146.46deg, #FFE6A2 6.08%, #C98E2F 50.42%, #FFE2B3 93.92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 15px;
    flex-shrink: 0;
    align-items: center
}

.number-item--special .number-text--special {
    width: 445px;
    height: 156px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Верхний текст */
.text-upper {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 24px;
    line-height: 100%;
    text-transform: uppercase;
    position: relative;
    /* left: 20px; */
    background: linear-gradient(140.19deg, #D0DAEE -77.66%, #BFC4E2 -26.92%, #A8A7D0 20.91%, #9492BE 60%, #706BA3 112.09%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Нижний текст */
.text-lower {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 52px;
    line-height: 100%;
    text-transform: uppercase;
    background: linear-gradient(140.19deg, #D0DAEE -77.66%, #BFC4E2 -26.92%, #A8A7D0 20.91%, #9492BE 60%, #706BA3 112.09%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.divider-bottom img {
    position: absolute;
    width: 767px;
    height: 70px;
    left: 50%;            /* центрируем по горизонтали */
    transform: translateX(-50%);
    bottom: 0;       /* прижимаем к низу секции */
    z-index: -1;
}



/* ================== SECTION-THIRD ================== */
.section-third {
    max-width: 767px;
    height: 200px;
    background: linear-gradient(113.43deg, #D0DAEE 4.37%, #BFC4E2 25.71%, #A8A7D0 48.73%, #9E9CC9 68.3%, #C8C5EB 89.7%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 37px;

}


/* Кнопка */
.btn-register {
  width: 231px;
  height: 44px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 4%;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;

  background: linear-gradient(
    127.19deg,
    #ff82c3 0.33%,
    #e9459a 43.41%,
    #832757 104.38%
  );
  box-shadow: 4px 2px 16px 0px #7f7ab2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

}
/* Убираем подчеркивание у кнопок-ссылок */
a.btn-register,
a.btn-register:link,
a.btn-register:visited,
a.btn-register:hover,
a.btn-register:active,
a.btn-register:focus {
  text-decoration: none !important;
}



.mobile-footer {  
    display: flex;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-transform: none;
    color: #F9F3F6;
    margin: 0 auto;
    z-index: 3;
}


@media (max-width: 465px) {
    
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* запрещаем горизонтальный скролл */
  box-sizing: border-box;
}
.section-first {
  width: 100%;
  position: relative;
  left: auto;
  transform: none;
}
.logo-back {
    width: 4px;
    height: 7px;
}
.logo-lk_link img {
    width: 12px;
    height: 12px;
}
.text-about__20-wrapper {
    margin-right: 0px;
}
.text-about__20, .text-about__20-shadow {
    font-size: 150px;
}
.text-about__years {
    font-size: 36px;
}
.text-about__years .years {
    font-size: 66px;
}
.raffle {
    width: 287px;
    height: 41px;
    border-radius: 9px;
}
.raffle h1 {
    font-size: 22px;
}
.ribbon-mobile img {
    width: 330px;
    height: 855px;
}
.section-second__left {
    top: 10px;
}
.number-item { 
    padding-left: 29px;
}
.section-second {
    margin-bottom: 0px;
}
.mobile-footer{
    text-transform: none;
}
}