*{
    /* flex-wrap: wrap; */
    /* overflow-x: hidden; */
    height: max-content;
}

@media (max-width: 600px) {
    body{
        box-sizing: border-box;
        max-width: 100vw !important;
        align-items: center;
    }
    .bg{
        display: flex;
        overflow-x: hidden !important;
        /* background-size: 500%; */
        height: 110vh;
        background-size: cover;
        width: 87%;
    }
    .title-bg{
        /* margin-top: 10vh; */
        overflow: -moz-hidden-unscrollable;
        display: flex;
        flex-direction: column;
    }
    .venue-title {
        text-align: center;
        margin-inline: 2rem;
        font-size: 1.6rem;
    }

    .venue .date {
        font-size: 1.1rem;
        text-align: center !important;
    }

    #timer {
        font-size: 2rem;
    }

    .countdown-time h1 {
        font-size: 1.5rem;
    }

    .buybutton {
        font-size: 1.8rem;
        padding: 2vh 1.5vh;
    }
    .artist-topic {
        font-size: 2rem;
        height: auto;
    }

    .desc-bg1, .desc-bg2 {
        flex-direction: column;
    }

    .artist1, .artist2 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .artist1 img, .artist2 img {
        /* width: 80vw; */
        max-width: 80vw;
        height: auto;
    }

    .desc {
        font-size: 1.8rem;
    }

    .desc span {
        font-size: 1rem;
        margin-inline: 2vw;
    }
    .about-title{
        font-size: 2rem;
        max-width: 100%;
        text-align: center;
        margin: 0;
        margin-top: 2vh;
        /* font-weight: 600; */
    }
    .about-dsc{
        text-align: center !important;
        padding-inline: 1rem;
    }
    .gallery{
        display: flex;
        flex-direction: column;
    }
    .parent {
        display: flex;
        width: 100%;
        margin: 0;
        border: 0;
        top: 0;
        left: 0;
    }
    .parent div {
        margin: 10px;
        height: auto;
        width: 100%;
        gap: 10px;
    }
    .photocredit{
        margin-left: 10px;
    }
    .footer {
        /* display: none; */
        flex-direction: column; 
        height: auto;
        margin: 0;
        border: 0;
        top: 0;
        left: 0;
    }

    .footerpanel-left, .footerpanel-right {
        width: 100%;
        margin: 0;
        border: 0;
        top: 0;
        left: 0;
    }

    .ftr-title {
        font-size: 2rem;
        margin: 0;
        border: 0;
        top: 0;
        left: 0;
        margin-top: 15px;
    }
    .footer_content{
        font-size: 0.8rem;
    }
    .icons {
        margin-top: 1rem;
        font-size: 3rem;
        margin: 0;
        border: 0;
        top: 0;
        left: 0;
        margin-bottom: 10px;
    }

    .vertical-line {
        display: none; 
    }
    .ticket-box{
        width: 80%;

    }
    .registration-form{
        display: flex;
        flex-direction: column;
        padding: 2vw;
    }
    .tick{
        font-size: 1rem;
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .mockup-box img{
        width: 90vw;
    }
    .logo-img{
    width: 40vw;    
    }
}

@media (max-width: 768px) {
    .bg{
        display: flex;
        overflow-x: hidden !important;
        /* background-size: 500%; */
        height: 110vh;
        background-size: cover;
        width: 87%;
    }
    .venue-title {
        margin-inline: 3rem;
        font-size: 2rem;
    }

    .venue .date{
        font-size: 1.2rem;
        text-align: center !important;
    }

    #timer {
        font-size: 2.5rem;
    }

    .countdown-time h1 {
        font-size: 1.7rem;
    }

    .buybutton {
        font-size: 2rem;
        padding: 2.2vh;
    }
    .artist-topic {
        font-size: 2.5rem;
    }

    .desc-bg1, .desc-bg2 {
        flex-direction: column;
    }

    .artist1, .artist2 {
        width: 80%;
        margin-left: 0;
        margin-right: 0;
    }

    .artist1 img, .artist2 img {
        width: 100%;
        height: auto;
    }

    .desc {
        font-size: 2rem;
    }

    .desc span {
        font-size: 1rem;
        margin-inline: 3vw;
    }
    .parent {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
    }
    .parent div {
        height: auto; 
        width: 100%;
    }
    .vertical-line{
        display: none;
    }
    .footerpanel-left{
        display: none;
    }
    .ticket-box{
        width: 80%;
    }
    .tick{
        font-size: 1rem;
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .mockup-box img{
        width: 90vw;
    }
    .registration-form{
        padding: 2vw;
    }
    .logo-img{
    width: 40vw;    
    }
}


@media (max-width: 1023px){
    .bg{
        background-size: cover;
    }
}

@media (min-width: 1024px){
    .bg{
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 87%;
    }
    .parent {
        margin-left: 15vw;
        margin-right: 15vw;
    }
    .photocredit{
        margin-left: 15vw;

    }
}

/* @media (min-width: 1200px) {
    .countdown {
        padding: 4vh 10vw;
    }

    .title-bg {
        padding: 0 5vw;
    }

    .buybutton {
        padding: 2.3vh 3vh;
    }

    #timer {
        font-size: 3.5rem;
    }
    .desc-bg1, .desc-bg2 {
        position: relative;
        flex-direction: row;
    }

    .artist1, .artist2 {
        width: 50%;
    }

    .artist1 img, .artist2 img {
        width: 100%;
    }

    .desc {
        font-size: 2.4rem;
    }

    .desc span {
        font-size: 1.1rem;
        margin-inline: 5vw;
    }
    .parent {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .parent div {
        height: 60vh;
    }