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

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

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

}
#a-lya-rus {
    /*--primary-color: #333;
    --secondary-color: #eee;*/
    --background-color: #ffffff;
    --header-color: #921921;
    --main-font: 'SLOVIC', sans-serif; /* Основной шрифт */
    --beauty-font: 'OGLAVIEUNICODE', sans-serif; /* Шрифт для заголовков */
    --secondary-font: 'TDEL', sans-serif; /* Второй шрифт */
}
#a-lya-rus{
    font-family: var(--main-font);
    font-size: 18px;
    line-height: 120%;
    color: var(--header-color);
    overflow: hidden;
}
#a-lya-rus .title_text{
    font-family: var(--beauty-font);
    font-size: 64px;
    line-height: 120%;
    color: var(--header-color);
        padding-bottom: 20px;

}
#a-lya-rus .descr_text{
    font-family: var(--main-font);
    font-size: 16px;
    line-height: 120%;
    color: var(--header-color);
}
#a-lya-rus .header{
        max-width: 600px;
            margin: auto;
}
 #a-lya-rus .header-blocks{
    background-image: url(../../../../images/sites/a-lya-rus/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* color: white; */
    background-position: center center;
 }
 #a-lya-rus .header-block-up{
        gap: 50px;
    display: flex;
    flex-direction: column;
    text-align: flex-end;
    text-align: right;
    width: 90%;
    margin: auto;
    padding: 150px 0 200px;
 }
#a-lya-rus .header-block-up0-inside{
    font-size: 32px;
 }
#a-lya-rus .header-block-up1-inside{
    font-family: var(--beauty-font);
    font-size: 72px;
    line-height: 120%;
    display: flex;
    gap: 10px;
    flex-direction: column;
 }

 #a-lya-rus .header-block-up2-inside{
        font-size: 16px;
    line-height: 120%;
 }
  #a-lya-rus p{
    margin: 0;
 }
 #a-lya-rus #music{
    background: var(--header-color);
        padding: 20px 0;
 }
 #a-lya-rus .info-date{
     background: var(--header-color);
 }
 #a-lya-rus .separate-block{
    background-image: url(../../../../images/sites/a-lya-rus/sep-big.png);
    background-size: contain;
    background-repeat: repeat-x;
    /* color: white; */
    background-position: center center;
    height: 40px;
 }

  #a-lya-rus .separate-block2{
        transform: rotate(-180deg);
         background-image: url(../../../../images/sites/a-lya-rus/sep-big.png);
     background-size: contain;
    background-repeat: repeat-x;
    /* color: white; */
    background-position: center center;
    height: 40px;

 }
   #a-lya-rus  #playButton{
    cursor: pointer;
    width: 50px;
    margin: auto;
    padding: 10px 0;
 }
#a-lya-rus #music-text{
    color: var(--background-color);
}
#a-lya-rus .text-white{
    color: var(--background-color);
}
#a-lya-rus .text-white .title_text {
     color: var(--background-color);
}
#a-lya-rus #welcome-text{
    color: var(--background-color);
}
#a-lya-rus  .info-invitation{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 50px 5%;
}
#a-lya-rus  .welcome-litera{
        font-family: var(--secondary-font);
    font-size: 144px;
    line-height: 70%;
}
#a-lya-rus  .info-date__invitation{
    font-size: 24px;
}
#a-lya-rus  .welcome_title_text{
        font-size: 24px;
    padding-bottom: 15px;
}
#a-lya-rus #welcome-text{
    text-align: left;
}
#a-lya-rus .info-date img{
        width: 60%;
    margin: auto;
    padding: 0 0 30px;
    max-width: 500px;
}
.info-date__place{
        max-width: 600px;
    margin: auto;
}

#a-lya-rus .date-calendar{
        margin: auto;
        padding: 50px 5%;
        max-width: 600px;
}
#a-lya-rus .details {
        background: var(--header-color);
        position: relative;
        overflow: hidden;
}
#a-lya-rus .details-img{
    position: absolute;
    width: 80%;
    max-width: 250px;
    right: 0;
    top: 50%;
    transform: translate(30%, -50%);
    padding-top: 0px;

}
#a-lya-rus  #details-container{
        color: var(--background-color);
}
#a-lya-rus  #details-container img{
    width: 25px;
    margin: auto;
    padding: 30px 0;
}
#a-lya-rus  .details-block{
    width: 80%;
    margin: auto;
    padding: 50px 0;
        position: relative;
            max-width: 600px;
    z-index: 1;
}
#a-lya-rus .timetable__block-stroke{
    background: var(--background-color);
    padding: 10px 20px;
    display: flex
;
    align-items: center;
    border-radius: 10px;
    width: 100%;
}
#a-lya-rus .timetable__block-texts{
  text-align: left;
    border-left: 1px solid var(--headerLIGHT-color);
    margin-left: 10px;
    padding: 10px 0px 10px 10px;
}

#a-lya-rus .timetable__block-time{
        font-size: 18px;
    color: var(--headerLIGHT-color);
}
#a-lya-rus .timetable__block-name{
        font-size: 16px;
    color: var(--headerLIGHT-color);
    line-height: 100%;
    padding-bottom: 10px;
}
#a-lya-rus .timetable__block-descr{
    font-size: 16px;
    line-height: 120%;
}
#a-lya-rus .question__bloks {
    width: 80%;
    margin: auto;
    max-width: 600px;
    padding: 70px 0;
}
#a-lya-rus .question_descr_text {
        font-size: 14px;
}

#a-lya-rus .counter {
    background: var(--header-color);
        padding: 50px 5%;
}
#a-lya-rus .timer-title{
        font-size: 36px;
    padding-bottom: 30px;
}
#a-lya-rus .timer__block {
      background: var(--background-color);
    border-radius: 10px;
    color: var(--header-color);
    line-height: 70px;
    font-size: 32px;
    /* padding: 30px 20px; */
    height: 70px;
    width: 70px;
}
#a-lya-rus .timer__block-info {
        display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}
#a-lya-rus .footer  {
    background: var(--header-color);
    padding: 50px 5% 70px;
}
#a-lya-rus .footer img{
        width: 30%;
    margin: auto;
    padding: 50px 0;
    max-width: 150px;
}
#a-lya-rus  .footer__text{
       font-family: var(--main-font);
    font-size: 18px;
    line-height: 120%;
}
#a-lya-rus .question__text-mini{
    font-size: 12px;
    padding: 10px 0 15px;
}
#a-lya-rus #question{
        display: flex
;
    text-align: left;
    flex-direction: column;
}
#a-lya-rus .question__label {
    display: flex
;
    align-items: center;
    gap: 5px;
}
#a-lya-rus .question__string{
    margin-bottom: 10px;
}
#a-lya-rus .question__label{
        margin-bottom: 0px;
}
#a-lya-rus .question__unvisible {
    display: none;
}
#a-lya-rus .question__visible-radio {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
   
    vertical-align: middle;
    box-sizing: border-box;
    border: 1px solid var(--header-color);
    border-radius: 50%;
}
#a-lya-rus  .question__unvisible:checked + .question__visible-radio::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: var(--header-color);
    border-radius: 50%;
}
#a-lya-rus .question__visible-checkbox {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
   
    vertical-align: middle;
    box-sizing: border-box;
    border: 1px solid var(--header-color);
}
#a-lya-rus #linkblock{
        background: var(--header-color);  
          padding: 70px 5%;
          position: relative;

}
#a-lya-rus .question ::-webkit-input-placeholder {
  color: var(--header-color);
}
#a-lya-rus .question__unvisible:checked + .question__visible-checkbox::before {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: var(--header-color);
}
#a-lya-rus .question__string input[type="text"]{
    border: 0;
    background-color: var(--background-color);
    border-bottom: 1px solid var(--header-color);
    border-radius: 0;
    font-size: 14px;
    text-transform: uppercase;
    padding: 5px 0 !important;
}
#a-lya-rus .rsvp__button{
    background: var(--header-color);
    text-transform: uppercase;
    font-size: 18px;
    line-height: 100%;
    color: var(--background-color);
    padding: 15px 20px 10px;
    min-width: 200px;
    margin: 10px 0;
}
#a-lya-rus  .names-footer{
    font-family: var(--beauty-font);
    font-size: 72px;
    line-height: 120%;
    padding-top: 50px;
}
#a-lya-rus #dresscode{
    padding: 70px 5%;
        max-width: 600px;
    margin: auto;
}
#a-lya-rus .descr_text {
    padding-bottom: 20px;
}
#a-lya-rus .timetable__block{
    display: flex
;
    flex-direction: column;
    width: 90%;
    max-width: 600px;
    margin: auto;
        gap: 10px;
}
#a-lya-rus .timetable__block-stroke{
   background: #f9eedc;
    padding: 10px 20px;
    display: flex
;
    align-items: center;
    border-radius: 10px;
    width: 100%;
}
#a-lya-rus .timetable__block-texts{
  text-align: left;
    border-left: 1px solid var(--header-color);
    margin-left: 10px;
    padding: 10px 0px 10px 10px;
}

 #a-lya-rus .timetable__block-time{
    color: var(--header-color);
        font-size: 24px;
    text-align: center;
}
 #a-lya-rus #plan{
    padding: 70px 0;
    max-width: 600px;
    width: 100%;
    margin: auto;
}
#a-lya-rus .timetable__block-name{
        font-size: 16px;
    color: var(--header-color);
    line-height: 100%;
    padding-bottom: 10px;
}
#a-lya-rus .timetable__block-descr{
  color: #4e2222;
    font-size: 14px;
    line-height: 120%;
}
#a-lya-rus  .places{
        background: var(--header-color);
    padding: 70px 5% 150px;
    position: relative;
}
#a-lya-rus  .places .title_text{
    color: var(--background-color);
    text-align: left;
    font-size: 42px;
    padding-bottom: 15px;    
}
#a-lya-rus  .places .descr_text {
    color: var(--background-color); 
    text-align: left;
    padding-bottom: 10px;
}
#a-lya-rus .places  .rsvp__button {
   color:  var(--header-color);
    background: var(--background-color);
}
#a-lya-rus #registration-time, #a-lya-rus #banquet-time{
    font-size: 42px;
    line-height: 100%;
    padding-top: 10px;
        max-width: 600px;
}
#a-lya-rus .place-btn{
        display: flex;
}
#a-lya-rus #place-two{
    display: block;
    padding-top: 70px;
}
#a-lya-rus .places-img{
        position: absolute;
    bottom: 0;
    width: 70%;
    right: 0;
}
 #a-lya-rus .rus-cal-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px; /* Расстояние между блоками */
    width: 90%;
    margin: auto;
      margin-bottom: 20px;
      font-family: var(--beauty-font), serif; /* Используем красивый шрифт */
     
    }
 #a-lya-rus   .rus-cal-side {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      flex: 1; /* Растягиваем боковые блоки */
      text-align: center;
      border-bottom: 1px solid var(--header-color);
    border-top: 1px solid var(--header-color);
        font-family: var(--main-font);
    }
 #a-lya-rus   .rus-cal-text {
      text-transform: uppercase;
      font-size: 20px; /* Размер месяца и года */
      letter-spacing: 1px;
      padding: 5px 0;
      border-top: 1px solid var(--background-color);    /* Линия сверху */
      border-bottom: 1px solid var(--background-color); /* Линия снизу */
    }
 #a-lya-rus   .rus-cal-center {
      font-size: 80px; /* РАЗМЕР ЧИСЛА ПО ЦЕНТРУ */
      line-height: 1;
          font-family: var(--main-font);
      font-weight: normal;
      margin-top: -10px; /* Чуть поднять число, чтобы ровно стояло */
    }
    /* Адаптив для телефонов */
    @media (max-width: 480px) {
   #a-lya-rus    .rus-cal-text { font-size: 24px; }
    }
    #a-lya-rus .calendar-table{
            margin: auto;
    }
   #a-lya-rus  table tr,  #a-lya-rus  table th{
        padding: 8px 10px;

    }
  #a-lya-rus .wedding-day:before {
   content: "";
    display: block;
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 40px;
    background-image: url(../../../../images/sites/a-lya-rus/heart-01.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -10;
}
#a-lya-rus .wedding-day{
        position: relative;
}

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

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

@media screen and (max-width: 800px) {
      #a-lya-rus .separate-block{
    background-size: cover;
    background-repeat: no-repeat;
 }
   #a-lya-rus .separate-block2{
    background-size: cover;
    background-repeat: no-repeat;
 }
#a-lya-rus{
}
#a-lya-rus .title_text{
}
#a-lya-rus .descr_text{
}
}


/* Стили для галереи Dress Code */
#a-lya-rus .gallery-container {
    position: relative;
    width: 100%;
    max-width: 900px; /* Ограничение ширины */
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#a-lya-rus .gallery-track {
    display: flex;
    gap: 15px; /* Расстояние между фото */
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 90%;
    
    /* Скрытие скроллбара для красоты */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

#a-lya-rus .gallery-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#a-lya-rus .gallery-item {
    flex: 0 0 auto;
    /* Высота картинок. На мобильных можно меньше, на ПК больше */
    height: 400px; 
    width: auto;
    border-radius: 4px; /* Легкое скругление, если нужно */
    transition: transform 0.3s ease;
}

#a-lya-rus .gallery-item:hover {
    transform: scale(1.02);
}

/* Кнопки навигации */
#a-lya-rus .gallery-btn {
    background: transparent;
    border: none;
    color: var(--header-color); /* Ваш красный цвет */
    font-size: 40px;
    cursor: pointer;
    padding: 0 10px;
    z-index: 10;
    transition: opacity 0.3s, transform 0.2s;
    font-family: var(--main-font); /* Основной шрифт */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#a-lya-rus .gallery-btn:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

#a-lya-rus .gallery-btn:active {
    transform: scale(0.9);
}

/* Адаптивность */
@media screen and (max-width: 800px) {
  #a-lya-rus .gallery-item {
        height: 300px; /* Уменьшаем высоту на планшетах */
    }
 #a-lya-rus .gallery-btn {
        font-size: 30px;
        padding: 0 5px;
        display: none;
    }
}

@media screen and (max-width: 500px) {
  #a-lya-rus .gallery-container {
        width: 100%;
    }
 #a-lya-rus .gallery-track {
        width: 100%;
        padding: 0 15px; /* Отступы по краям */
    }
   #a-lya-rus .gallery-item {
        height: 350px; /* Уменьшаем высоту на телефонах */
    }
    /* На мобильных часто удобнее свайпать пальцем, стрелки можно скрыть или оставить маленькими */
#a-lya-rus .gallery-btn {
      display: none; 
    }
}