body{
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
    background-color: #433838;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

nav{
    display: flex;
    align-items: center;
    gap: 61vw;
    margin-left: 2vw;

}

ul{
    display: flex;
    list-style: none;
    gap: 2vw;
}

.logo-link {
    text-decoration: none;
    position: relative;
    display: inline-block;
    color: black;
}

.logo-text,
.back-text {
    transition: opacity 0.3s ease;
    display: inline-block;
    color: black;
    margin-top: 1vw;
}

.back-text {
    margin-left: -10vw;
    opacity: 0;
    position: absolute;
}

.logo-link:hover .logo-text {
    opacity: 0;
}

.logo-link:hover .back-text {
    opacity: 1;
}

.header_about{
    color: black;
    text-transform: uppercase;
    z-index: 100;
}

.Nav{
    z-index: 100;
}
.noActive{

    color: rgba(0, 0, 0, 0.50);
}

h1{
    font-size: 1.5vw;
    text-transform: uppercase;
    font-weight: 400;
    color: white;
    z-index: 100;
}

p{
    margin-top: 1vw;
    font-size: 1vw;
    font-weight: 300;
    color: white;

}

/*about*/
.about{
    position: relative;
}

.head_img{
    position: absolute;
    top: 0;
    margin: -0.5vw;
    /*z-index: 100;*/
}

.header_about_img{
    width: 100vw;
    height: 35vw;
    transition: transform 0.1s;

}

.about_img{
    position: absolute;
    z-index: -1;
    width: 85vw;
    height: 70vw;
    margin-top: -20vw;
}

.pixelated-image-card {
    position: relative;
    width: 100vw;
    height: 35vw;
    overflow: hidden;
}

.pixelated-image-card__img {

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixelated-image-card__default,
.pixelated-image-card__active,
.pixelated-image-card__pixels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pixelated-image-card__active {
    display: none;
    pointer-events: none;
}

.pixelated-image-card__pixels {
    pointer-events: none;
}

.pixelated-image-card__pixel {
    position: absolute;
    background-color: rgba(147, 91, 147, 0.83);
    display: none;
}

.about_text{
    margin-left: 2vw;
    margin-top: 35vw;
    color: white;
}

.about_txt{
    font-weight: 700;
    margin-top: 1.5vw;
}

.carousel-wrapper {
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 30vw;
}

.carousel {
    display: flex;
    margin-top: 2.5vw;
    gap: 1vw;
    animation: scroll 20s linear infinite;
}

.carousel img {
    height: 100%;
    filter: grayscale(100%) brightness(0.5);
    transition: filter 0.3s, transform 0.5s;
    cursor: pointer;
}

.carousel img:hover {
    filter: none;
    z-index: 10;
}

.carousel.paused {
    animation-play-state: paused;
}

@keyframes scroll {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

.poster1_h1{
margin-left: 2vw;
    margin-top: 2vw;
}

.poster1{
    width: 55vw;
    height: 35vw;
   margin-top: 2vw;
    margin-left: 25vw;
}

.poster1_btn{
    position: absolute;
    margin-top: 33vw;
    margin-left: -32vw;
    text-transform: uppercase;
    padding: 1vw 2vw;
    background-color: #C674DF;
    color: white;
    box-shadow: none !important;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.poster1_btn:hover {
    background-color: #4B1C59;
    color: white;
}


.line_about{
    margin-top: 10vw;
    display: block;
    width: 95vw;
}

.music_about{
    position: absolute;
    margin-top: -0.5vw;
    margin-left: 2vw;
    pointer-events: none;
    transform: translate(-50%, -50%);

}



/*events*/

.event{
    color: white;
}

.header_event{
    z-index: 100;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.50);
}

.event_content{
    display: flex;
    align-items: flex-start;
    width: 100vw;
    margin-top: 2vw;
    gap: 10vw;
    position: relative;
    flex: 1;
}
.event{
    margin-top: 1vw;
}

.event_container{
    flex-direction: column;
    width: 50vw;
    margin-left: 2vw;
}

.event_stroke{
    position: relative;
    padding: 2vw 0;
    color: white;
    transition: background-color 0.3s ease;
}
.info:hover {
    background-color: #CA8448;
}

.event .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 1vw;
}

.info{
    display: flex;
    border-bottom: 1px solid white;
    padding: 2vw 0vw;
    gap: 15vw;
}

.ev1{
    margin-left: 2vw;
}

.ev2{
    margin-left: 1vw;
}

.poster2_btn {
    background: transparent;
    color: white;
    padding: 1vw 2vw;
    cursor: pointer;
    font-size: 1vw;
    text-decoration: none;
}

.poster2_btn:hover {
    background-color: #CA8448;
    color: #ffffff;
}

.buy-ticket{
    position: absolute;
    background: transparent;
    color: white;
    margin-top: 0.5vw;
    border: white 0.1vw solid;
    padding: 0.5vw 1vw;
    cursor: pointer;
    font-size: 1vw;
    text-decoration: none;
}

.buy-ticket:hover{
    background-color: #CA8448;
    color: #ffffff;
}

.event_images{
    width: 60vw;
    height: 50vw;
    margin-right: -15vw;
    position: sticky;
    align-self: flex-start;
}

.event_img{
    position: absolute;
    object-fit: cover;
}





/*events pages*/
.main-container-event1{
    position: relative;
    margin: 0;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
}

.page_event_1{
    position: absolute;
    width: 110%;
    height: 30vw;
    z-index: -100;
    margin-top: -3.1vw;
    margin-left: -5vw;
}

.event_h2{
    position: absolute;
    z-index: 10;
    margin-top: 20vw;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
}

.event_date, .event_date_2 {
    position: absolute;
    z-index: 10;
    margin-top: 25vw;
    margin-left: 70vw;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
}
.event_date_2{
   margin-left: 90vw;
}

.event_info_txt{
    display: flex;
    margin-left: 2vw;
    z-index: 10;
    font-family: "IBM Plex Mono", monospace;
    font-style: normal;
    color: #ffffff;
    /*gap: 20vw;*/
}
.ev_h1{
    width: 20%;
    margin-top: 29vw;

}

.p_events{
    font-size: 1.2vw;
    margin-top: 32vw;
    margin-left: -9.5vw;
    margin-bottom: 2.5vw;
}

.main-nav-event{
    margin-top: -1vw;
    gap: 60vw;
    margin-left: -1vw;
}

.event_btn{
    margin-top: 0vw;
    margin-left: 2vw;
    padding: 1.1vw 3vw;
    background-color: #CA8448;
    border: none;
    text-decoration: none;
}

.event_btn:hover{
    background: #674529;
    color: white;
}

.ev-logo-link {
    text-decoration: none;
    position: relative;
    display: inline-block;
    color: black;
}

.ev-logo-text,
.ev-back-text, .header-ev, .header_event-2 {
    transition: opacity 0.3s ease;
    display: inline-block;
    color: #ffffff;
    text-transform: uppercase;

}

.ev-back-text {
    margin-left: -10vw;
    opacity: 0;
    position: absolute;
}

.ev-logo-link:hover .ev-logo-text {
    opacity: 0;
}

.ev-logo-link:hover .ev-back-text {
    opacity: 1;
}
.header_event-2{
    color: #9a9a9a;
}
.header_about-ev{
    margin-left: -2vw;
}
.background_event{

}









/*card*/
:root {
    --primary: #ca8448;
    --error: #dc2626;
}

* {
    box-sizing: border-box;
    font-family: "IBM Plex Mono", monospace;
    color: #ffffff;
}

.form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.form-card {
    border-radius: 8px;
    padding: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}


input, textarea {
    margin-left: 7vw;
    width: 80vw;
    padding: 0.75rem;
    border: 0.1vw solid  #CA8448;
    background-color: #433838;
    border-radius: 4px;
    font-size: 1rem;
    transition: border 0.2s;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgb(202, 132, 72);
}

.error-message {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: none;
}

.input-error {
    border-color: var(--error);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

.tickets{
    background-color: #ca8448;
    padding: 1.1vw 33.7vw;
    margin-left: 9.5vw;
    border: none;
    cursor: pointer;
}
.tickets:hover{
    background: #674529;
    color: white;

}

.carousel-container {
    position: relative;
    margin-top: -7vw;
    width: 100%;
    height: 40vw;
    overflow: hidden;
}

.carousel-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    animation: scroll 100s linear infinite;
}

.slider-item {
    flex-shrink: 0;
    width: 20vw;
    height: 12vw;
    min-width: 15vw;
    min-height: 29vw;
    margin: 0 1.5vw;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.slider-item:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 6px 20px rgb(202, 132, 72);
    z-index: 2;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.poster2_btn{
    position: absolute;
    margin-top: 33vw;
    margin-left: -32vw;
    text-transform: uppercase;
    padding: 1vw 2vw;
    background-color: #ca8448;
    color: white;
    box-shadow: none !important;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
}

.poster2_btn:hover {
    background-color: #674529;
    color: white;
}

#card-header{
    margin-left: -5vw;
    margin-top: -1vw;
}



/*Store*/
.store-menu{
    margin-left: -3vw;
}


.icon-menu{
    margin-left: 13vw;
    z-index: 1000;
}
.icon-link{
    position: sticky !important;
}
.icon-store{
    width: 1.5vw;
    height: auto;
}
.store-img{
    position: absolute;
    width: 100%;
    height: 35vw;
    margin-left: 2vw;
    margin-top: -1vw;
}

.store-content{
    margin-top: 2vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 2vw;
    gap: 10vw;
    justify-content: flex-start;
}

.store-content > h2 {
    width: 100%;
}


h2{
    margin-top: 35vw;
    margin-left: 2vw;
    font-size: 1.5vw;
    text-transform: uppercase;
    font-weight: 400;
    color: white;
    z-index: 100;
}

.product-info{
    display: flex;
    gap: 15vw;
}
.с2{
    margin-top: -1.5vw;
}
.add-to-cart{
    padding: 1vw 9vw;
    background: #369479;
    border: none;
}
.add-to-cart:hover{
    background: #0a523d;
    color: white;
}

.e-book{
    margin-left: 71.5vw;
    border: white 0.1vw solid;
    color: white;
    padding: 0.8vw 4vw;
    text-decoration: none;
}

.e-book:hover{
    background: #369479;
    color: white;
    border: none;
}

.icon-card{
    position: absolute;

}

.favorite-btn {
    position: absolute;
    margin-left: 20vw;
    background: transparent;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
}

.favorite-icon {
    transition: all 0.3s ease;
}
.favorite-btn:hover .favorite-icon {
    stroke: #369479;
    transform: scale(1.1);
}

.favorite-btn:hover {
    background-color: transparent;
}

.favorite-btn.active .favorite-icon {
    fill: #369479;
    stroke: #369479;
}

.с8{
    gap:10.5vw;
}
.book-title{
    width: 100%;
    height: 5vw;
    display: flex;
    gap: 30vw;
}
.book-title-h2{
    margin-top: 5vw;
    margin-left: 2vw;
}

.book-title-btn{
    padding: 0.7vw 3.5vw;
    border: #369479 1px solid;
    margin-left: 75vw;
    margin-top: -3vw;
}
.book-title-btn:hover{
    background: #369479;
    color: white;
}

.book-description{
    display: flex;
    flex-wrap: wrap;
}

.book-img{
    width: 45vw;
    height: auto;
    margin-left: 1.2vw;
    margin-top: 2vw;
}

.description{
    width: 25vw;
    height: auto;
    margin-left: 10vw;
    margin-top: 10vw;
    font-size: 1.1vw
}

.book-price{
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    font-family: "IBM Plex Mono", monospace;
    margin-left: -25vw;
    margin-top: 19vw;
}
.book-btn{
    position: absolute;
    background: #369479;
    color: white;
    padding: 1.2vw 10vw;
    border: none;
    margin-left: 56vw;
    margin-top: -10vw;
}

.book-btn:hover{
    background: #0a523d;
    color: white;
}

.c5{
    margin-left: 1vw;
}

.c6{
 margin-left: 1.5vw;
}

.c7{
    margin-left: -0.8vw;
}




/*index - Главная*/
.panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 80px;
    transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
    overflow: hidden;
}


.panel::after {
    content: attr(data-panel-number);
    position: absolute;
    bottom: 40px;
    right: 3vw;
    transform: translateX(-100%);
    font-size: 1vw;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}


.main-nav, .footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 10;
}

.main-nav .links {
    position: absolute;
    display: flex;
    gap: 10vw;
    margin-left: -5vw;
    cursor: pointer;
}

.footer-nav .links{
    position: absolute;
    display: flex;
    gap: 10vw;
    margin-left: -5vw;
}

.main-nav a, .footer-nav a {
    color: #f0f0f0;
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.2vw;
    text-transform: uppercase;
    transition: color 0.3s;
}

.main-nav a:hover {
    text-decoration: underline;
}

.footer-nav a:hover{
    color: rgb(147, 91, 147);
}

.content-center {
    display: flex;
}


.panel-home {
    background-color: #332E30;
    z-index: 4;
}



.home-text h1 {
    font-size: 6vw;
    font-weight: 400;
    margin-left: -3vw;
    margin-top: -7vw;
}

.home-text p {
    font-weight: 300;
    font-size: 2vw;
margin-top: 8vw;
    margin-left: -2.5vw;
    text-align: left;
}

.logo_svg {
    position: absolute;
    width: 45vw;
    height: 45vw;
    margin-left: 60vw;
    margin-top: -15vw;
    animation: animate 5s linear infinite;
}

@keyframes animate{
    0% {stroke-dashoffset: 1500;
        stroke-dasharray: 1500}
    100% {stroke-dashoffset: 0;
        stroke-dasharray: 1500}

}


/* Секция 2 */
.panel-scenarios {
    background-color: #C674DF;
    color: #fff;
    z-index: 3;
}

#about-second{
    text-decoration: underline;
}

.second-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5vw;

}

.second-text{
    position: absolute;
    margin-top: -85vw;
    width: 50%;
    height: 100vh;
}

.second-text h2{
    width: 25vw;
    font-size: 2.5vw;
    color: white;
    text-transform: uppercase;
    font-weight: 300;

}

.second-text p {
    width: 40vw;
    height: auto;
    font-size: 1.2vw;
    color: white;
    font-weight: 400;
    margin-left: 2vw;
}

.second-btn{
    position: absolute;
    margin-top: 1.5vw;
    margin-left: 2vw;
    padding: 1vw 4vw;
    border: white 0.1vw solid;
    text-decoration: none;
}

.second-btn:hover{
    background-color: #ad36ad;
    color: #ffffff;
    border: none;
}

.second-image img{
    position: absolute;
    margin-left: 55vw;
    margin-top: -33vw;
}
.second-pg{
    margin-left: -2vw;
}




/*third section*/

#about-third{
    text-decoration: underline;
}

.panel-orange {
    background-color: #D48C45;
    z-index: 1;
}

.third-pg{
    margin-left: -2vw;
}

.third-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5vw;
}

.third-text{
    position: absolute;
    margin-top: -85vw;
    width: 50%;
    height: 100vh;
}

.third-text h2{
    width: 25vw;
    font-size: 2.5vw;
    color: white;
    text-transform: uppercase;
    font-weight: 300;

}

.third-text p {
    width: 40vw;
    height: auto;
    font-size: 1.2vw;
    color: white;
    font-weight: 400;
    margin-left: 2vw;
}

.third-btn{
    position: absolute;
    margin-top: 1.5vw;
    margin-left: 2vw;
    padding: 1vw 4vw;
    border: white 0.1vw solid;
    text-decoration: none;
}

.third-btn:hover{
    background-color: #c47224;
    color: #ffffff;
    border: none;
}




/* Секция 4: Зеленая */
.panel-green {
    background-color: #2B8B67;
    z-index: 2;
}
#about-fourth{
    text-decoration: underline;
}

.fourth-btn{
    position: absolute;
    margin-top: 1.5vw;
    margin-left: 2vw;
    padding: 1vw 4vw;
    border: white 0.1vw solid;
    text-decoration: none;
}

.fourth-btn:hover{
    background-color: #0c5e46;
    color: #ffffff;
    border: none;
}




/* Секция 5: contacts */
#about-fifth{
    text-decoration: underline;
}
.fifth-text{
    position: relative;
}

.fifth-h1{
    position: absolute;
    font-size: 8vw;
    font-style: normal;
    font-family: "IBM Plex Mono", monospace;
    margin-top: -35vw;
    margin-left: 10vw;
}

.fifth-footer{
    position: absolute;
}

.line_index{
    position: absolute;
    margin-top: -15vw;
    margin-left: -5vw;
}

.music_index{
    position: absolute;
    margin-top: -17.7vw;
}

.fifth-contact{
    display: flex;
    gap: 5vw;
    margin-top: -5vw;
}

.telegram h3, .designer p{
    text-transform: uppercase;
}

.body-404{
    overflow: hidden;
}

.background{
    width: 100%;
    height: 95vh;
    z-index: -1;
}

.container404{
    width: 100%;
    height: 100%;
    position: absolute;
    transition: filter 0.3s ease;
    z-index: 1;
}

.container404 img{
    text-align: center;
    position: absolute;
    margin-top: -32vw;
    margin-left: 25vw;
    width: 50vw;
    height: auto;
    transition: filter 0.3s ease;
}

.container404 img:hover {
    filter: url(#water-effect);
}

.container404 a{
    position: absolute;
    font-family: 'IBM Plex Mono', sans-serif;
    padding: 1rem 5rem;
    border: #CA8448 0.2rem solid;
    text-align: end;
    color: white;
    margin-top: -40vw;
    margin-left: 78vw;
    text-decoration: none;
}
.container404 a:hover{
    background: #CA8448 ;
}


.body-baskt{
    margin-left: 2vw;
}

.icon-menu { display: flex; 
    list-style: none; 
    padding: 0; 
    justify-content: flex-end; 
    margin-top: 1vw;
}
.icon-link { position: relative; margin: 0 15px; text-decoration: none; }
.icon-link span {
    position: absolute;
    top: -8px;
    right: -12px;
    background-color: #369479;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #369479;
}

.cart-list, .favorites-list { 
    display: flex; 
    flex-direction: column;
     gap: 15px; }
.cart-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 15px; 
    border: 1px solid #eee; 
    border-radius: 8px; }
.cart-item img { width: 80px; 
    height: 80px; 
    object-fit: contain; 
    margin-right: 15px; }
.cart-item-info { flex-grow: 1; }
.cart-item-info p { margin: 2px 0; }
.cart-total { margin-top: 20px;
    text-align: right; 
    font-size: 1.5em; 
    font-weight: bold; }
.remove-button, .clear-button { background-color: #d9534f; 
    color: white;
     border: none; 
    padding: 8px 12px; 
    cursor: pointer; 
    border-radius: 4px; }
.clear-button { display: none;
     margin-top: 15px; 
     float: right; }
.cart-item-info .name { font-weight: bold; }

.basket-h2{
    margin-top: 5vw;
    margin-left: -1vw;
}

#success-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #332E30;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    background: #c47224;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    position: relative;
    max-width:20vw;
    text-align: center;
    width: 90%;
    margin-top: 20vw;
    margin-left: 40vw;
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #fafafa;
}

.close-btn:hover {
    color: #c47224;
}