.main-section {
    width: 100%;
    height: auto;
    padding-top: 10vw;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: height 0.3s ease;
}

.bouble1 {
    position: absolute;
    top: 15%;
    left: -3%;
}

.bouble2 {
    position: absolute;
    top: 10%;
    right: -3%;
}

.bouble3 {
    position: absolute;
    bottom: 30%;
    left: -3%;
}

.bouble4 {
    position: absolute;
    bottom: 35%;
    right: -3%;
}

.bouble1, .bouble2, .bouble3, .bouble4 {
        width: 12vw;

}

.title {
    font-size: 2.8vw;
    margin-left: 2.5vw;
    margin-bottom: 2.5vw;
    line-height: 1.1;
    color: #212778;
    font-family: 'MultiroundPro';
}

.catalog {
    margin-top: 5vw;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: ;
    grid-column-gap: 1vw;
    grid-row-gap: 2vw;
    margin-bottom: 30vw;
}

.front {
    width: 100%;
    height: 30vw;
    border-radius: 2vw;
    position: absolute;
    backface-visibility: hidden;
}

.front img {
    width: 100%;
}

.description {
    background: linear-gradient(149deg, rgba(27,150,243,1) 0%, rgba(193,227,252,1) 27%, rgba(209,234,253,1) 30%, rgba(223,240,253,1) 34%, rgba(234,245,254,1) 38%, rgba(241,249,254,1) 47%, rgba(250,253,255,1) 52%, rgba(255,255,255,1) 58%, rgba(255,251,254,1) 63%, rgba(255,249,253,1) 66%, rgba(255,248,252,1) 71%, rgba(254,240,249,1) 75%, rgba(253,223,242,1) 78%, rgba(251,194,230,1) 83%, rgba(249,166,218,1) 86%, rgba(248,143,208,1) 89%, rgba(246,111,195,1) 92%, rgba(244,80,182,1) 95%, rgba(239,1,149,1) 100%);
    height: 16vw;
    border-radius: 0 0 2vw 2vw;
    padding-top: 1vw;
    padding-left: 2vw;
    position: relative;

}

.description h2 {
    font-size: 1.2vw;
    font-family: 'MultiroundPro';
    color: #212778;
    margin-bottom: 1vw;
}

.description p {
    font-size: 1vw;
    font-family: 'Involve-Medium';
    color: #212778;
    margin-bottom: 1vw;
    margin-right: 2vw;
}

.block {
    width: 95%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;

}

.back{
    width: 100%;
    height: 33vw;
    border-radius: 2vw;
    transform: rotateY(180deg);
    backface-visibility: hidden;

}

.long-description {
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    background: linear-gradient(149deg, rgba(27,150,243,1) 0%, rgba(193,227,252,1) 27%, rgba(209,234,253,1) 30%, rgba(223,240,253,1) 34%, rgba(234,245,254,1) 38%, rgba(241,249,254,1) 47%, rgba(250,253,255,1) 52%, rgba(255,255,255,1) 58%, rgba(255,251,254,1) 63%, rgba(255,249,253,1) 66%, rgba(255,248,252,1) 71%, rgba(254,240,249,1) 75%, rgba(253,223,242,1) 78%, rgba(251,194,230,1) 83%, rgba(249,166,218,1) 86%, rgba(248,143,208,1) 89%, rgba(246,111,195,1) 92%, rgba(244,80,182,1) 95%, rgba(239,1,149,1) 100%);
    font-size: 1vw;
    font-family: 'Involve-Medium';
    color: #212778;

}

.long-description p {
    padding: 2vw 2vw;
}

.about {
    all: initial;
    position: absolute;
    width: 9vw;
    height: 2.5vw;
    right: 5%;
    bottom: 3%;
    background-color: #212778;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Involve-Medium';
    font-size: 1vw;
    border-radius: 2vw;
    border-color: #ECEDEF;
    border-width: 0.3vw;
    border-style: solid;
    cursor: pointer;

}


    .date-range {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 50vw;
        justify-content: space-between;


    }

    .date-range label {

        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ECEDEF;
        font-family: 'Involve-SemiBold';
    }

    .date-range input[type="checkbox"] {

        margin-bottom: 5px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        background-color: #ECEDEF;
        z-index: 2;

    }

        .date-range input[type="checkbox"]:checked {
        background-color: #EF0195;

    }


    .date-range label:not(:last-child) {
        position: relative;
    }

    .date-range .line {
        content: '';
        position: absolute;
        z-index: 0;
        width: 7vw; /* Длина линии */
        height: 0.7vw; /* Толщина линии */
        background-color: #ECEDEF; /* Цвет линии */
        top: 1.15vw;
        left: 1.75vw;


    }

        .date-range .line.checked {
        background-color: #EF0195; /* Цвет линии между выбранными чекбоксами */
    }

.filter {

    width: 70%;
    height: 5.5vw;
    background-color: #10133A;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2vw;
    transition: height 0.3s ease;

    }

.filter-row {
    width: 100%;
    height: 5vw;

}

.theme {
    width: 42vw;
    height: 3vw;
    font-family: 'Involve-Regular';
    font-size: 1.7vw;
    background-color: #ECEDEF;
    border-radius: 3vw;
    padding-left: 1vw;
}

.data-choise {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 11vw;
    height: 3vw;
    border-radius: 2vw;
    font-family: 'Involve-Regular';
    font-size: 1.5vw;
    margin-left: 3vw;
    padding-left: 0.5vw;
}

.data-choise img {
    width: 2.5vw;
    margin-right: 0.5vw;
}

.filter-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

@media(max-width: 1280px) {
.main-section {
    width: 100%;
    height: auto;
    padding-top: 15vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: height 0.3s ease;
}

.bouble1 {
    position: absolute;
    top: 15%;
    left: -3%;
    width: 15vw;
}

.bouble2 {
    position: absolute;
    top: 10%;
    right: -3%;
}

.bouble3 {
    position: absolute;
    bottom: 30%;
    left: -3%;
}

.bouble4 {
    position: absolute;
    bottom: 35%;
    right: -3%;
}

.bouble1, .bouble2, .bouble3, .bouble4 {
        width: 12vw;

}

.title {
    font-size: 3.2vw;
    margin-left: 2.5vw;
    margin-bottom: 2.5vw;
    line-height: 1.1;
    color: #212778;
    font-family: 'MultiroundPro';
}

.catalog {
    margin-top: 5vw;
    width: 80%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    grid-column-gap: 2vw;
    grid-row-gap: 2vw;
    margin-bottom: 60vh;
}

.front {
    width: 100%;
    height: 50vw;
    border-radius: 2vw;
    position: absolute;
    backface-visibility: hidden;
    margin-bottom: 3vw;
}

.front img {
    width: 100%;
}

.description {
    background: linear-gradient(149deg, rgba(27,150,243,1) 0%, rgba(193,227,252,1) 27%, rgba(209,234,253,1) 30%, rgba(223,240,253,1) 34%, rgba(234,245,254,1) 38%, rgba(241,249,254,1) 47%, rgba(250,253,255,1) 52%, rgba(255,255,255,1) 58%, rgba(255,251,254,1) 63%, rgba(255,249,253,1) 66%, rgba(255,248,252,1) 71%, rgba(254,240,249,1) 75%, rgba(253,223,242,1) 78%, rgba(251,194,230,1) 83%, rgba(249,166,218,1) 86%, rgba(248,143,208,1) 89%, rgba(246,111,195,1) 92%, rgba(244,80,182,1) 95%, rgba(239,1,149,1) 100%);
    height: 25vw;
    border-radius: 0 0 2vw 2vw;
    padding-top: 1vw;
    padding-left: 2vw;
    position: relative;

}

.description h2 {
    font-size: 1.8vw;
    font-family: 'MultiroundPro';
    color: #212778;
    margin-bottom: 1vw;
}

.description p {
    font-size: 1.5vw;
    font-family: 'Involve-Medium';
    color: #212778;
    margin-bottom: 1vw;
    margin-right: 2vw;
}

.block {
    width: 95%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
    margin-bottom: 2vw;

}

.back{
    width: 100%;
    height: 50vw;
    border-radius: 2vw;
    transform: rotateY(180deg);
    backface-visibility: hidden;

}

.long-description {
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    background: linear-gradient(149deg, rgba(27,150,243,1) 0%, rgba(193,227,252,1) 27%, rgba(209,234,253,1) 30%, rgba(223,240,253,1) 34%, rgba(234,245,254,1) 38%, rgba(241,249,254,1) 47%, rgba(250,253,255,1) 52%, rgba(255,255,255,1) 58%, rgba(255,251,254,1) 63%, rgba(255,249,253,1) 66%, rgba(255,248,252,1) 71%, rgba(254,240,249,1) 75%, rgba(253,223,242,1) 78%, rgba(251,194,230,1) 83%, rgba(249,166,218,1) 86%, rgba(248,143,208,1) 89%, rgba(246,111,195,1) 92%, rgba(244,80,182,1) 95%, rgba(239,1,149,1) 100%);
    font-size: 1.5vw;
    font-family: 'Involve-Medium';
    color: #212778;

}

.long-description p {
    padding: 2vw 2vw;
}

.about {
    all: initial;
    position: absolute;
    width: 16vw;
    height: 4vw;
    right: 5%;
    bottom: 3%;
    background-color: #212778;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Involve-Medium';
    font-size: 1.6vw;
    border-radius: 2vw;
    border-color: #ECEDEF;
    border-width: 0.3vw;
    border-style: solid;
    cursor: pointer;

}


    .date-range {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 50vw;
        justify-content: space-between;


    }

    .date-range label {

        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ECEDEF;
        font-family: 'Involve-SemiBold';
    }

    .date-range input[type="checkbox"] {

        margin-bottom: 5px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        background-color: #ECEDEF;
        z-index: 2;

    }

        .date-range input[type="checkbox"]:checked {
        background-color: #EF0195;

    }


    .date-range label:not(:last-child) {
        position: relative;
    }

    .date-range .line {
        content: '';
        position: absolute;
        z-index: 0;
        width: 8.5vw; /* Длина линии */
        height: 0.7vw; /* Толщина линии */
        background-color: #ECEDEF; /* Цвет линии */
        top: 1.15vw;
        left: 1.75vw;


    }

        .date-range .line.checked {
        background-color: #EF0195; /* Цвет линии между выбранными чекбоксами */
    }

.filter {

    width: 70%;
    height: 5.5vw;
    background-color: #10133A;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2vw;
    transition: height 0.3s ease;

    }

.filter-row {
    width: 100%;
    height: 5vw;

}

.theme {
    width: 42vw;
    height: 3vw;
    font-family: 'Involve-Regular';
    font-size: 1.7vw;
    background-color: #ECEDEF;
    border-radius: 3vw;
    padding-left: 1vw;
}

.data-choise {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 11vw;
    height: 3vw;
    border-radius: 2vw;
    font-family: 'Involve-Regular';
    font-size: 1.5vw;
    margin-left: 3vw;
    padding-left: 0.5vw;
}

.data-choise img {
    width: 2.5vw;
    margin-right: 0.5vw;
}

.filter-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}
}

@media(max-width: 1100px) {

    .date-range {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 65vw;
        justify-content: space-between;


    }

    .date-range label {

        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ECEDEF;
        font-family: 'Involve-SemiBold';
    }

    .date-range input[type="checkbox"] {

        margin-bottom: 5px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        background-color: #ECEDEF;
        z-index: 2;

    }

        .date-range input[type="checkbox"]:checked {
        background-color: #EF0195;

    }


    .date-range label:not(:last-child) {
        position: relative;
    }

    .date-range .line {
        content: '';
        position: absolute;
        z-index: 0;
        width: 11.5vw; /* Длина линии */
        height: 0.7vw; /* Толщина линии */
        background-color: #ECEDEF; /* Цвет линии */
        top: 1.15vw;
        left: 2.3vw;


    }

        .date-range .line.checked {
        background-color: #EF0195; /* Цвет линии между выбранными чекбоксами */
    }

.filter {

    width: 85%;
    height: 5.5vw;
    background-color: #10133A;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2vw;
    transition: height 0.3s ease;

    }

.filter-row {
    width: 100%;
    height: 5vw;

}

.theme {
    width: 60vw;
    height: 3vw;
    font-family: 'Involve-Regular';
    font-size: 1.7vw;
    background-color: #ECEDEF;
    border-radius: 3vw;
    padding-left: 1vw;
}

.data-choise {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 15vw;
    height: 3vw;
    border-radius: 2vw;
    font-family: 'Involve-Regular';
    font-size: 1.5vw;
    margin-left: 3vw;
    padding-left: 0.5vw;
}

.data-choise img {
    width: 2.5vw;
    margin-right: 0.5vw;
}

.filter-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}


}

@media(max-width: 700px) {

    .title {
        font-size: 5vw;
        margin-left: 2.5vw;
        margin-bottom: 1vw;
        line-height: 1.1;
        color: #212778;
        font-family: 'MultiroundPro';
    }


   .filter{
   display: none;
   }

   .main-section {
    width: 100%;
    height: auto;
    padding-top: 15vh;
    padding-bottom: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: height 0.3s ease;
}

    .catalog {
        margin-top: 3vw;
        width: 80%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);

        grid-column-gap: 0vw;
        grid-row-gap: 2vh;
        margin-bottom: 0;
        justify-items: center; /* Центрирование по горизонтали */
    }


    .front {
    width: 100%;
    height: 90vw;
    border-radius: 2vw;
    position: absolute;
    backface-visibility: hidden;
    margin-bottom: 6vw;
}

.front img {
    width: 100%;
}

.description {
    background: linear-gradient(149deg, rgba(27,150,243,1) 0%, rgba(193,227,252,1) 27%, rgba(209,234,253,1) 30%, rgba(223,240,253,1) 34%, rgba(234,245,254,1) 38%, rgba(241,249,254,1) 47%, rgba(250,253,255,1) 52%, rgba(255,255,255,1) 58%, rgba(255,251,254,1) 63%, rgba(255,249,253,1) 66%, rgba(255,248,252,1) 71%, rgba(254,240,249,1) 75%, rgba(253,223,242,1) 78%, rgba(251,194,230,1) 83%, rgba(249,166,218,1) 86%, rgba(248,143,208,1) 89%, rgba(246,111,195,1) 92%, rgba(244,80,182,1) 95%, rgba(239,1,149,1) 100%);
    height: 50%;
    border-radius: 0 0 2vw 2vw;
    padding-top: 1vw;
    padding-left: 2vw;
    position: relative;

}

.description h2 {
    font-size: 3.5vw;
    font-family: 'MultiroundPro';
    color: #212778;
    margin-bottom: 1.5vw;
}

.description p {
    font-size: 2.9vw;
    font-family: 'Involve-Medium';
    color: #212778;
    margin-bottom: 1vw;
    margin-right: 2vw;
}

.block {
    width: 95%;
    height: 90vw;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
    margin-bottom: 4vh;

}

.back{
    width: 100%;
    height: 90vw;
    border-radius: 2vw;
    transform: rotateY(180deg);
    backface-visibility: hidden;

}

.long-description {
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    background: linear-gradient(149deg, rgba(27,150,243,1) 0%, rgba(193,227,252,1) 27%, rgba(209,234,253,1) 30%, rgba(223,240,253,1) 34%, rgba(234,245,254,1) 38%, rgba(241,249,254,1) 47%, rgba(250,253,255,1) 52%, rgba(255,255,255,1) 58%, rgba(255,251,254,1) 63%, rgba(255,249,253,1) 66%, rgba(255,248,252,1) 71%, rgba(254,240,249,1) 75%, rgba(253,223,242,1) 78%, rgba(251,194,230,1) 83%, rgba(249,166,218,1) 86%, rgba(248,143,208,1) 89%, rgba(246,111,195,1) 92%, rgba(244,80,182,1) 95%, rgba(239,1,149,1) 100%);
    font-size: 2.9vw;
    font-family: 'Involve-Medium';
    color: #212778;

}

.long-description p {
    padding: 4vw 4vw;
}

.about {
    all: initial;
    position: absolute;
    width: 30vw;
    height: 7vw;
    right: 5%;
    bottom: 3%;
    background-color: #212778;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Involve-Medium';
    font-size: 2.9vw;
    border-radius: 2vw;
    border-color: #ECEDEF;
    border-width: 0.3vw;
    border-style: solid;
    cursor: pointer;

}


}


    #slider-range {
      width: 80%;
    }
        #custom-handle-1, #custom-handle-2 {
      width: 3em;
      height: 1.6em;
      top: 50%;
      margin-top: -.8em;
      text-align: center;
      line-height: 1.6em;
      cursor: pointer;
    }
    .ui-slider-horizontal .ui-slider-handle {
      background: #007bff;
      border: 2px solid #007bff;
    }
    .ui-slider-horizontal .ui-slider-range {
      background: #007bff;
    }

    .ui-slider-handle div {
      background-color: #007bff;
      border: 2px solid #007bff;
      color: white;
      text-align: center;
      line-height: 30px;
      border-radius: 5px;

    }

#startDate, #endDate {
    display: none;
}