h1, h2, p {
    color: #f0f0f0;
}

h1 {
    margin-top: 0;
}

.event-main-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-top: 1.5rem;
}

.image-container {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-image {
    width: 100%;
    height: auto;
    aspect-ratio: 8/3;
    object-fit: cover;
    border-radius: 0.5rem;
}

.event-info-ticket-container {
    width: 70%;
    display: grid;
    grid-template-columns: 65% 30%;
    gap: 5%;
    padding-bottom: 2rem;
}

.event-info-container {
    background-color: #0f0f0f;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.event-info-container p {
    margin: 0;
}

.event-info-line {
    border-top: 1px solid #333;
    margin-block: 1rem;
}

.event-info-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.4rem !important;
}

.event-tickets-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.event-tickets-container h2 {
    margin: 0;
}

.event-ticket {
    background-color: #0f0f0f;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.event-ticket p {
    color: #f0f0f0;
    margin: 0;
}

.event-ticket-name {
    font-size: 1.2rem;
    font-weight: 600;
}

.event-price-quantity-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.ticket-quantity {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.decrement-button, .increment-button {
    height: 2.4rem;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    background-color: #f0f0f0;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.ticket-amount {
    height: 2.4rem;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    background-color: #f0f0f0;
    color: #000;
    border: none;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.event-ticket-price {
    font-size: 1.2rem;
    font-weight: 600;
}


.event-organizer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    background-color: #0f0f0f;
    padding: 1rem;
    border-radius: 0.5rem;
    width: fit-content;
    text-decoration: none;
}

.event-organizer-image {
    height: 4rem;
    width: 4rem;
    object-fit: cover;
    border-radius: 50%;
}

.event-organizer-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 1rem;
}

.event-submit-button {
    cursor: pointer;
    border: none;
    background-color: #f0f0f0;
    color: #000;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem;
    border-radius: 0.5rem;
}

.event-title-heading-mobile {
    display: none;
}

.bottom-events {
    width: 70%;
}

@media screen and (max-width: 768px) { 
    .event-title-heading-mobile {
        display: block;
    }    

    .event-main-container {
        width: 100%;
        padding-top: 0;
        gap: 1rem;
    }

    .event-info-ticket-container {
        width: 90%;
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .event-title-heading {
        display: none;
    }

    .event-organizer-info {
        width: 100%;
        margin-block: 2rem;
    }

    .image-container {
        width: 100%;
        background: linear-gradient(0deg, #333 0%, transparent 70%); ;
    }

    .event-image {
        width: 100%;
        aspect-ratio: 8/5;
        border-radius: 0;
        z-index: -1;
    }

    .bottom-events {
        width: 90%;
    }
}