@font-face {
    font-family: 'Rubik';
    src: url('/fonts/Rubik-Light.eot');
    src: url('/fonts/Rubik-Light.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Rubik-Light.woff2') format('woff2'),
    url('/fonts/Rubik-Light.woff') format('woff'),
    url('/fonts/Rubik-Light.ttf') format('truetype'),
    url('/fonts/Rubik-Light.svg#Rubik-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gant';
    src: url('/fonts/Gant.eot');
    src: url('/fonts/Gant.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Gant.woff2') format('woff2'),
    url('/fonts/Gant.woff') format('woff'),
    url('/fonts/Gant.ttf') format('truetype'),
    url('/fonts/Gant.svg#Gant') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LaDiosa';
    src: url('/fonts/LaDiosa-Regular.eot');
    src: url('/fonts/LaDiosa-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/LaDiosa-Regular.woff2') format('woff2'),
    url('/fonts/LaDiosa-Regular.woff') format('woff'),
    url('/fonts/LaDiosa-Regular.ttf') format('truetype'),
    url('/fonts/LaDiosa-Regular.svg#LaDiosa-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Rubik", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
p { font-size: 1.5em; }
.navbar-custom {
    background-color: #fff;
    height: 80px;
}
.navbar-custom .nav-link, .navbar-brand {
    margin-left: 20px;
    color: #000;
}
.navbar-brand img {
    max-height: 40px;
}
.navbar-collapse {
    justify-content: flex-end;
    background-color: #fff;
    padding: 20px;
}
.hero-section {
    background-size: cover;
    background-position: center;
    text-align: left;
    padding: 40px;
    color: #000;
    margin-top: -60px;
}
section {
    font-family: 'LaDiosa', sans-serif;
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.hero-section h1 { font-size: 4em; color: #8b0000; }
.hero-section h2 { font-size: 3em; color: #8b0000; }
.program-details { color: #8b0000; font-weight: bold; font-size: 1.5rem; }
.section-title {
    background-color: rgba(1, 90, 46, 0.65);
    color: #fff;
    -webkit-text-stroke: 0.5px black;
    font-size: 3rem;
    font-family: 'Gant', sans-serif;
    font-weight: bold;
}
.inner-section-title {
    color: rgba(90, 148, 119, 1);
    -webkit-text-stroke: 0.5px black;
    font-size: 3rem;
    font-family: 'Gant', sans-serif;
    font-weight: bold;
}
.green-bg { background-color: #335533; color: white; padding: 15px; }
.btn-custom { background-color: #8b0000; color: white; }
.footer { background-color: #335533; color: white; padding: 20px; }
.icon { font-size: 1.5rem; color: #fff; }
.icon img { height: 54px; margin-right: 10px; }
.gant { font-family: 'Gant', sans-serif; }
.ladiosa { font-family: 'LaDiosa', sans-serif; }
.text-red { color: #8b0000; }
.text-green { color: rgba(1, 90, 46, 0.65)!important; }
.bg-green { background: #DEEAE4; }
    .header-bg {
    background-image: url('/img/header.png');
    background-size: auto 100%;
    background-repeat: x-repeat;
    height: 200px;
    width: 100%;
}
.list-flake {
    list-style: none; /* Remove default bullets */
    padding: 0;
    font-size: 1.5em;
}
.list-flake li {
    margin-bottom: 10px;
    padding-left: 35px; /* Space for the image bullet */
    position: relative;
}
.list-flake li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px; /* Image width */
    height: 24px; /* Image height */
    background-image: url('/img/flake.png');
    background-size: cover;
}

.ticket-button-group {
    text-align: center;
    font-family: 'Gant', sans-serif;
}

.ticket-date {
    background-color: #6B8F71; /* Green color */
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 2rem;
    line-height: 1.2;
    width: 8em;
    margin: 10px auto;
}

.green-card {
    background-color: #6B8F71; /* Green color */
    color: #ffffff;
    border-radius: 8px;
    line-height: 1.2;
    margin: 10px auto;
    font-family: 'Rubik', sans-serif;
}

.ticket-date p {
    margin: 0;
    font-size: 2rem;
}

/* Red submit button */
.submit-button {
    background-color: #B31514; /* Red color */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    transition: background-color 0.3s;
    width: 8em;
}

.submit-button:hover {
    background-color: #8f2a25; /* Darker red on hover */
    color: #f0f0f0;
}

.submit-button:active {
    background-color: #8f2a25; /* Darker red on active */
    color: #f0f0f0 !important;
}

.submit-button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

.buy-ticket {
    background-color: #a7332d; /* Red color */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    transition: background-color 0.3s;
    width: 8em;
}

.buy-ticket-afisha {
    background-color: #a7332d; /* Red color */
    color: #ffffff;
    padding: 4px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: normal;
    transition: background-color 0.3s;
    width: 8em;
    margin-top: 10px;
}

.buy-ticket-exc {
    background-color: #a7332d; /* Red color */
    color: #ffffff;
    padding: 4px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 2.5rem;
    font-weight: normal;
    transition: background-color 0.3s;
    width: 8em;
    margin-top: 10px;
}

.buy-ticket:hover {
    background-color: #8f2a25; /* Darker red on hover */
}
.footer p { font-size: 0.9rem; margin: 0 5px; }
.footer table tr td { text-align: left; align-items: center; vertical-align: middle; }
.footer table tr td img { height: 54px!important; width: 54px!important; max-width: 54px; max-height: 54px; margin-right: 10px; }
.footer table { margin: 12px 0; }

.snowflake {
    position: absolute;
    background-image: url('/img/snowflake.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px; /* Adjust size as needed */
    height: 200px;
    opacity: 0.5;
}
.hero-section .snowflake:nth-child(1) { top: 10%; left: -15%; }
.hero-section .snowflake:nth-child(2) { top: -20%; right: -10%; }
.hero-section .snowflake:nth-child(3) { bottom: -10%; right: 35%; z-index: -1; }

.program-section .snowflake:nth-child(1) { top: 10%; left: 45%; }
.program-section .snowflake:nth-child(2) { top: -10%; right: 0%; z-index: -1; }
.program-section .snowflake:nth-child(3) { bottom: -10%; right: 20%; z-index: -1; }

.rules-section .snowflake:nth-child(1) { top: -10%; left: -18%; z-index: -1; }
.rules-section .snowflake:nth-child(2) { top: -10%; right: -8%; z-index: -1; }
.rules-section .snowflake:nth-child(3) { display: none; }

.tickets-section .snowflake:nth-child(1) { top: 55%; left: -12%; }
.tickets-section .snowflake:nth-child(2) { top: -10%; right: -10%; z-index: -1; }
.tickets-section .snowflake:nth-child(3) { bottom: -10%; right: -5%; z-index: -1; }

.section .snowflake:nth-child(4) { top: 10%; left: -50%; }
.section .snowflake:nth-child(5) { bottom: 10%; right: -50%; z-index: -1; }
.section .snowflake:nth-child(6) { display: none; }

@media (max-width: 992px) {
    .snowflake {
        display: none;
    }

    .button_main {
        font-size: 1.5rem!important;
    }
}


.seating-chart {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    font-family: 'Gant', sans-serif;
}

.stage {
    background-color: #ddd;
    padding: 3px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    border-radius: 5px;
    font-size: 1.5rem;
}

.seats .scene-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.row-number {
    width: 60px;
    font-weight: bold;
}

.seat {
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    border-radius: 50%;
    margin: 0 5px;
}

.no-seat {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    margin: 0 5px;
}

.yellow {
    background: #FFEDB5;
}

.green {
    background: #A1C2B1;
}
.ticket-quantity {
    font-family: sans-serif;
    margin-bottom: 20px;
}

.ticket-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.quantity-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333;
    border-radius: 5px;
    padding: 5px;
    font-family: 'Gant', sans-serif;
}

.quantity-control input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 2em;
    font-weight: bold;
    background: transparent;
}

.quantity-control .btn {
    width: 40px;
    height: 40px;
    border: none;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    background-color: inherit;
}

.quantity-control.green {
    background: #5A9477;
}

.quantity-control.yellow {
    background: #FFEDB5;
}

.quantity-control .minus, .quantity-control .plus {
    background-color: transparent;
    color: #333;
}

.quantity-control .minus {
    border-right: 1px solid #333;
    border-radius: 5px 0 0 5px;
}

.quantity-control .plus {
    border-left: 1px solid #333;
    border-radius: 0 5px 5px 0;
}
@media (max-width: 500px) {
    .no-seat, .seat {
        width: 15px;
        height: 15px;
        margin: 0 2px;
    }
}

.nav-link-active {
    font-weight: bold;
}

.nav-link {
    display:inline-block;
}

.nav-link:hover {
    font-weight: bold;
}

.nav-link::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.rubik {
    font-family: 'Rubik', sans-serif;
}

.contacts-section p {
    font-size: 1.2rem !important;
}

.social-icons {
    background: rgba(1, 90, 46, 0.1);
    padding: 10px;
    border-radius: 10px;
}

/* Button main style: rounded with shadowbox right and bottom */
.button_main {
    display: inline-block;
    width: 100%;
    min-height: 150px;
    padding: 15px 40px;
    color: white;
    text-align: center;
    text-decoration: none;
    border: 0;
    border-radius: 10px; /* Rounded corners */
    background: #f5a623; /* Button background color */
    box-shadow: 7px 7px 4px 0 rgba(0, 0, 0, 0.25); /* Drop shadow */
    transition: all 0.3s ease;
    position: relative;
    font-family: 'Rubik', serif;
    font-size: 36px;
    font-weight: 700;
}

.button_main_purple {
    background: rgba(233, 215, 232, 1)!important;
    color: rgba(147, 53, 141, 1)!important;
}

.button_main_pistacio {
    background: rgba(240, 242, 205, 1)!important;
    color: rgba(96, 101, 0, 1)!important;
}

.button_main_orange {
    background: rgba(255, 230, 205, 1)!important;
    color: rgba(211, 110, 3, 1)!important;
}

.button_main_blue {
    background: rgba(205, 216, 237, 1)!important;
    color: rgba(0, 61, 166, 1)!important;
}

.footer_bg {
    color: white;
    padding: 20px;
    font-family: 'Rubik', serif;
    font-size: 1.2rem;
}