@font-face { /*I wanted to use the font-face rule because I forgot to do so in Assessment1*/
    font-family:Fraunces; /*the font type*/
    src: url("../fonts/FrauncesRegular.ttf"); /*Where the font is located*/
}

@font-face {
    font-family:FrauncesLight;
    src: url("../fonts/FrauncesLight.ttf");
}

body {
    font-family: 'EB Garamond', serif;  /* Specifies the font */
    background-image: linear-gradient(rgb(3, 3, 3), black, rgb(34, 0, 0), rgb(146, 5, 5)); /*Creates a linear gradient of black to red for my background*/
    margin: 0; /* Added to remove default browser margins */
}

nav {
    word-spacing: 10px; /* Word spacing*/
    text-align: center; /*Aligns the text to the centre*/
    height: 19px; /* Defines the height of the navigation bar */
    position: relative; /* Establishes a new positioning context for children */
    z-index: 3; /* Ensures element layers above other elements with a lower z-index */
    top: 15px; /* Shifts the element 15 pixels down from its normal position*/
}


a {
    font-family: 'Fraunces';
    color:whitesmoke; /*colour of the text*/
    font-size: 20px; /*the size of the text*/
    margin: 20px; /*margin around the text*/
    text-decoration: none; /* no underline below links constantly displaying*/
    
}

a:hover {
    text-decoration: underline; /* Underlines link text on hover */
}

.header-background {
    position: absolute; /* Position it absolutely to the top of the document */
    width: 100%; /* Sets the width of the element to 100% of its containing element */
    height: 660px; /* Set the desired height */
    background-size: cover; /* Make the image cover the div completely */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-position: center; /* Center the image within the div */
    z-index: 1; /* Puts it behind the navigation bar */
    overflow-x: hidden; /* Hides the overflow */
}

.header-container {
    display: flex;  /* Ensures header elements are laid out in a line */
    justify-content: space-between; /* Spaces header elements evenly across line */
    align-items: center; /* Aligns header elements in the center vertically */
    position: relative; 
}

.header-container h1,
.header-container .right-text {
    position: relative;
    z-index: 2; 
}


h1 {
    padding: 30px; /*Adds a padding around h1*/
    margin-top: 450px;  /*Adds a margin to the top of h1*/
    margin-left: 30px;
    font-size: 90px;
    background: linear-gradient(to right, white, rgb(131, 131, 131)); 
    -webkit-background-clip: text; /* Paints the background only within the area of the text */
    background-clip: text; /* Paints the background only within the area of the text*/
    -webkit-text-fill-color: transparent; /* Makes the text color transparent, allowing the background to show through */
    font-family: 'EB Garamond', serif; 
    font-weight: 400; /*specifies the font weight. 400 is regular EB Garamond*/
}

.right-text {
    margin-right: 100px; 
    margin-top: 450px; 
    display: flex;
    flex-wrap: wrap; /* controls whether items in a flexible container wrap onto multiple lines or stay on a single line when they don't all fit.*/
    justify-content: center;  /*aligns items in a container, like side-by-side or evenly spaced.*/
    align-items: center; 
    text-align: center; /*aligns text to centre of container*/
    color: whitesmoke;
    font-family: Fraunces;
}


p2 {
    padding: 20px;
    margin-right: 30px; /*margin around the right of the text*/
    margin-bottom: 5px; /*margin around the bottom of the text*/
    width: 45%; /* sets the paragraph's width to 45% of its containing element's width.*/
    font-size: 20px;
    line-height: 30px; /*determines line spacing*/
    color: whitesmoke;
    text-align: center;
}

h2 {
    font-family: 'EB Garamond', serif; 
    font-weight: 400;
    font-size: 60px;
    padding-bottom: 90px;
    padding-top: 10px;
    background: -webkit-linear-gradient(90deg, red, darkred); /* Sets a linear gradient background from red to dark red, from left to right for older browsers */
    background: -o-linear-gradient(90deg, red, darkred);  /* Sets the same linear gradient background for old Opera */
    background: -moz-linear-gradient(90deg, red, darkred); /* Sets the same linear gradient background for old Firefox */
    background: linear-gradient(90deg, red, darkred); /* Standard code for setting the same linear gradient background for most modern browsers */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto; /* Resizes the background image to be twice as wide as the element. The height ('auto') is automatically determined to keep the aspect ratio */
    animation: gradient 10s linear infinite; /* Applies the 'gradient' animation. Animation lasts 10 seconds, has a steady speed, and repeats indefinitely */
}

@keyframes gradient { /*The 'gradient' animation */
    0% { /* Start of the animation */
        background-position: 200%; /* The background starts entirely off the right edge of the content box */
    }
    100% { /* end of the animation */
        background-position: -200%;  /* The background ends entirely off the left edge of the content box which creates a smooth scrolling effect */
    }
}

h3, h5 {
    text-align: left; /* aligns text to the left */
    padding-left: 60px;
    padding-top: 40px;
    font-size: 50px;
    font-family: 'EB Garamond', serif; 
    font-weight: 400;
}

.header-image-container {
    position: relative; 
}

.header-image-container img {
    width: 1505px;
    height: 781px;
    object-fit: cover; /* This will ensure the image covers the entire area */
}

.overlay-text {
    position: absolute; /* Absolute positioning in relation to .image-container */
    top: 50%; /*positions the text */
    left: 50%;
    transform: translate(-50%, -50%); /* This centers the text exactly in the middle of the image */
    color: whitesmoke; 
    font-family: Fraunces;
    font-size: 26px; 
}

.overlay-header {
    font-family: Kadwa;
    position: absolute;
    bottom: -150px; 
    right: 180px;
    -webkit-text-stroke: 2px rgb(255, 0, 0); /* This creates the text outline effect */
    color: transparent; /* This makes the text itself transparent, leaving only the outline */
    font-size: 128px; 
}

.tour-dates-container {
    display: flex;
    align-items: flex-start; /* all items in this area will align at the start of the area */
}

.tour-dates-container img {
    width: 210px;
    height: 818px;
    object-fit: cover;
    padding-left: 195px;
    padding-right: 70px;
}

.tour-dates-list {
    display: flex;
    flex-direction: column; /* make the items in a flex container stack vertically*/
    justify-content: space-between;
    width: 100%;
    height: 818px;
    padding-right: 195px;
}

.city {
    font-size: 40px;
    display: inline-block;
}

.country {
    font-size: 40px;
    display: inline-block;
}


.tour-dates-item {
    width: 100%;
    border-bottom: 1px solid red;
}

.panel {
    border-top: 20px solid transparent;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out; /* Applies a transition effect to the max-height property over 0.2 seconds with a slow end */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.city-ticket {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.city-country {
    display: flex;
    font-size: 40px;
    font-family: 'EB Garamond', serif; 
    font-weight: 700;
}

.city,
.country {
    display: inline;
}

.city {
    margin-right: 5px;
}

.tickets {
    position: relative;
    color: whitesmoke;  /* Set the color of the Tickets text */
    text-decoration: none;  /* Remove the underline from the link */
    font-family: FrauncesLight;
}

.tickets-arrow {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 2px;
    transform: rotate(90deg);
    margin-left: 5px;
}

.tickets-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid whitesmoke;
    border-right: 2px solid whitesmoke;
    transform: rotate(45deg);
    transform-origin: top right; /* Sets the origin for the transform property to be the top right corner of the element */
    transition: border-color 0.3s;
}


.tickets:hover .tickets-arrow::after {
    border-color: red;
}


.panel .book-now-btn {
    background-color: red;
    border: none;
    color: whitesmoke;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer; /* Changes the cursor to a pointer when it hovers over the elements */
    align-self: flex-end; /* This item will align at the end of the area no matter where other items aligned */
}


.button {
    position: absolute;
    top: 30%;
    left: 60%;
    height: 60px;
    width: 100px;
    background: rgb(255, 0, 0);
}
  
.button:before {
    content: "";
    width: 25px;
    height: 2px;
    background: slategray;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    right: 24px;
    transition: all 0.3s ease;
}
  
.button:hover:before {
    right: 34px;
    width: 35px;
}
  
.button:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent #000000;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 20px;
    transition: all 0.3s ease;
}

.button:hover:after {
    right: 30px;
}

h6 {
    -webkit-text-stroke: 2px rgb(255, 0, 0); /* This creates the text outline effect */
    color: transparent; /* This makes the text itself transparent, leaving only the outline */
    text-align: left;
    padding-left: 60px;
    padding-top: 0px;
    font-size: 200px;
    margin-top: 250px;
    margin-bottom: 100px;
    font-family: Kadwa;
}

.news-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.news-text-container {
    width: 65%;
    padding-left: 20px;
    align-self: flex-start;
} 


.slide {
    display: none;
}

.slide.active {
    display: block;
    opacity: 1;
    transition: transform 3s, opacity 1s;
    transform: translateX(0); /* Moves the position of the element on the X-axis back to where it was. */
}

.slide.next {
    display: block;
    opacity: 0;
    transition: transform 3s, opacity 1s;
    transform: translateX(100%);
}

.slide.prev {
    display: block;
    opacity: 0;
    transition: transform 3s, opacity 1s;
    transform: translateX(-100%);
}

.news-text {
    color: whitesmoke(255, 255, 255);
    font-size: 24px;
    width: 80%; 
    text-align: left;
    padding-left: 40px;
}

.arrow-buttons {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
    padding-left: 40px;
}

.arrow-button {
    width: 60px;
    height: 60px;
    border: 2px solid whitesmoke;
    border-radius: 50%;
    background: none;
    position: relative;
    transition: border-color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.arrow-button .arrow {
    font-size: 1.5em; /* Sets the font size to 1.5 times the size of the parent element's font size */
    color: whitesmoke;
    transition: transform 0.3s;
}

.arrow-button:hover {
    border-color: red;
}

.arrow-button:hover .arrow {
    transform: rotate(360deg); /* Rotates the element 360 degrees around the transform-origin point */
}

.arrow-button.left:hover {
    transform: translateX(-5px);
}

.arrow-button.right:hover {
    transform: translateX(5px);
}

.news-image-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: -100px;
}

.news-image-container img {
    width: 100%; 
    height: auto;
    object-fit: cover;
    border-radius: 5px;
}

.store-header {
    text-align: left;
    padding-left: 10px;
    padding-top: 130px;
    font-size: 50px;
}

.store-container {
    width: 100%;
    margin: auto;
    overflow: hidden;
    box-sizing: border-box; /* includes the padding and border in the element's total width and height */
    padding-left: 60px;
}

.merch-carousel {
    display: flex;
    gap: 20px;
    width: 100%;
    overflow-x: scroll; /* adds a scrollbar to the element's width overflow */
    scroll-snap-type: x mandatory; /* so that the scrolling must snap along the left-to-right direction */
    -webkit-overflow-scrolling: touch; /* allows touch-based scrolling for overflowed content on mobile devices */
    padding-bottom: 20px;
}

.merch-item {
    width: calc(100% / 3.5); /* sets the width of the element to be 100% divided by 3.5 of its containing element so I can have only a few merch items displayed each time */
    text-align: center; /* This centers the text beneath the images */
    scroll-snap-align: start; /* causes the beginning of this item to align with the beginning of the scrollable area when scrolling snaps*/
}

.merch-price-arrow {
    display: flex;
    justify-content: space-between; /* this makes the price and arrow sit at opposite ends of the container */
    align-items: center; /* this vertically centers the price and arrow */
    width: 100%;
}

.merch-arrow {
    width: 45px;
    height: 2px;
    background-color: whitesmoke;
    position: relative;
    transition: width 0.5s;
}


.merch-arrow:after {
    content: ''; /* it's set to an empty string with no content to create an arrow */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10;
    height: 10;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid whitesmoke;
}

.merch-price-arrow a {
    margin-right: 5px;
}

.merch-arrow:hover {
    width: 60px;
    transform: translateX(-5px);  /* Moves the element 5px to the left on hover */
}

.merch-arrow:hover:after {
    border-left: 7px solid whitesmoke;
}

.merch-name, .merch-price {
    text-align: left;
}


.merch-carousel::-webkit-scrollbar {
    height: 5px; 
}

.merch-carousel::-webkit-scrollbar-track {
    background-color: whitesmoke; /* Track color */
    height: 2px;
}

.merch-carousel::-webkit-scrollbar-thumb {
    background-color: red; /* Thumb color */
}

footer {
    width: 100%;
    height: 550px;
    background-color: black; /* Sets the background color of the footer to black */
    color: whitesmoke; /* Sets the text color to white */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 80px;
    box-sizing: border-box;
    margin-top: 250px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align items towards the bottom */
    height: 70%; /* Adjusts the height to move the links down */
}

.footer-left h2 {
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 20px; /* Adjusts the space between icons */
}

.social-icons i {
    font-size: 20px; /* Adjusts the icon size */
}

.footer-right ul {
    display: flex;
    gap: 20px;
    list-style: none; /* removes the list item marker from a list */
    margin: 0;
    padding: 0;
}

.footer-right ul li a {
    color: white; /* Set the link color to white */
    text-decoration: none;
}

.footer-right ul li a:hover {
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 30%; /* Adjusts the height to move the copyright text down */
    padding-bottom: 50px;
    font-size: 11px;
    padding-right: 35px;
}

.social-icons img {
    width: 20px;
    height: 20px;
}

.social-icons img:hover {
    filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(6353%) hue-rotate(358deg) brightness(102%) contrast(104%); /*By using these filters, it turns the white icons to red*/
}

@media screen and (max-width: 1366px) { 

    .header-background {
        position: absolute; /* Position it absolutely to the top of the document */
        width: 100%; /* Make it span the whole screen width */
        height: 560px; /* Set the desired height */
        background-size: cover; /* Make the image cover the div completely */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-position: center; /* Center the image within the div */
        z-index: 1; /* Puts it behind the navigation bar */
    }

    h1 {
        padding: 30px;
        margin-top: 350px; 
        margin-left: 30px;
        font-size: 90px;
        background: linear-gradient(to right, white, rgb(131, 131, 131));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .right-text {
        margin-right: 100px;
        margin-top: 350px; 
        display: flex;
        flex-wrap: wrap; /* controls whether items in a flexible container wrap onto multiple lines or stay on a single line when they don't all fit.*/
        justify-content: center;  /*aligns items in a container, like side-by-side or evenly spaced.*/
        align-items: center; 
        text-align: center; /*aligns text to centre of container*/
        color: whitesmoke;
    }
    

    .header-image-container {
        position: relative; /* Establishes a new positioning context for children */
    }
    
    .header-image-container img {
        width: 1205px;
        height: 481px;
        object-fit: cover;
    }

    .overlay-header {
        position: absolute; /* Absolute positioning in relation to .image-container */
        bottom: -130px; 
        right: 40px;
        -webkit-text-stroke: 1px rgb(255, 0, 0); /* This creates the text outline effect */
        color: transparent; /* This makes the text itself transparent, leaving only the outline */
        font-size: 100px; 
    }

    h2 {
        margin-top: 0px;
        font-size: 60px;
        padding-bottom: 50px;
        padding-top: 10px;
        background: -webkit-linear-gradient(90deg, red, darkred);
        background: -o-linear-gradient(90deg, red, darkred);
        background: -moz-linear-gradient(90deg, red, darkred);
        background: linear-gradient(90deg, red, darkred);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% auto;
        animation: gradient 10s linear infinite;
    }

    .tour-dates-container img {
        width: 210px;
        height: 818px;
        object-fit: cover;
        padding-left: 70px;
        padding-right: 70px;
    }    


    .news-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    
    .news-text-container {
        width: 90%;
        padding-left: 20px;
        align-self: flex-start;
    }
    
    .news-text {
        color: whitesmoke;
        font-size: 24px;
        width: 100%; 
        text-align: left;
        padding-left: 40px;
    }
    
    
    .news-image-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: -100px;
    }
    
    .news-image-container img {
        width: 100%; 
        height: auto;
        object-fit: cover;
        border-radius: 5px;
    }

    .tour-dates-container {
        display: flex;
        align-items: flex-start;
    }
    
    .tour-dates-list {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 818px;
        padding-right: 70px;
    }


    
}

@media screen and (max-width: 1024px) {
    a {
        font-family: 'Playfair Display', serif;
        color:whitesmoke; /*colour of the text*/
        font-size: 16px; /*the size of the text*/
        margin: 20px; /*margin around the text*/
        text-decoration: none;
        
    }

    h1 {
        padding: 30px;
        margin-top: 380px; 
        margin-left: 20px;
        font-size: 70px;
        background: linear-gradient(to right, white, rgb(131, 131, 131));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .right-text {
        margin-right: 100px; 
        margin-top: 350px; 
        display: flex;
        flex-wrap: wrap; /* controls whether items in a flexible container wrap onto multiple lines or stay on a single line when they don't all fit.*/
        justify-content: center;  /*aligns items in a container, like side-by-side or evenly spaced.*/
        align-items: center; 
        text-align: center; /*aligns text to centre of container*/
        color: whitesmoke;
    }
  
    .header-image-container img {
        width: 880px;
        height: 481px;
        object-fit: cover;
    }

    h6 {
        -webkit-text-stroke: 1px rgb(255, 0, 0); /* This creates the text outline effect */
        color: transparent; /* This makes the text itself transparent, leaving only the outline */
        text-align: left;
        padding-left: 60px;
        padding-top: 0px;
        font-size: 130px;
        margin-top: 250px;
        margin-bottom: 100px;
    }

    .news-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    
    .news-text-container {
        width: 100%;
        padding-left: 20px;
        align-self: flex-start;
    }
    
    .news-text {
        color: rgb(255, 255, 255);
        font-size: 20px;
        width: 100%; 
        text-align: left;
        padding-left: 40px;
    }
    
    
    .news-image-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: -100px;
    }
    
    .news-image-container img {
        width: 100%; 
        height: auto;
        object-fit: cover;
        border-radius: 5px;
    }

    .merch-carousel {
        display: flex;
        gap: 20px;
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    
    }

    .merch-item {
        width: 100%;
    }

    
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; /* Align items towards the bottom */
        height: 70%; /* Adjusts the height to move the links down */
    }


    .social-icons {
        display: flex;
        gap: 10px; /* Adjusts the space between icons */
        padding-bottom: -50px;
    }

    .social-icons i {
        font-size: 10px; /* Adjusts the icon size */
    }

    .footer-left h2 {
        padding-bottom: 80px;
    }

    .footer-right ul {
        display: flex;
        gap: 20px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer-right ul li a {
        color: white; /* Set the link color to white */
        text-decoration: none;
        font-size: 12px;
    }

    .footer-right ul li a:hover {
        text-decoration: underline;
    }

    .footer-bottom {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 30%; /* Adjusts the height to move the copyright text down */
        padding-bottom: 50px;
        font-size: 8px;
        padding-right: 15px;
    }

    .social-icons img {
        width: 20px;
        height: 20px;
    }  
}


@media screen and (max-width: 360px) {

    nav {
        word-spacing: 5px;
        text-align: center;
        height: 19px;
        position: relative; 
        z-index: 3; 
        top: 25px;
    }
    
    a {
        font-family: 'Fraunces', serif;
        color:whitesmoke; /*colour of the text*/
        font-size: 14px; /*the size of the text*/
        margin: 20px; /*margin around the text*/
        text-decoration: none;
        overflow-x: hidden;
    }

    .header-background {
        width: 100vw;
        overflow-x: hidden;
    }


    .header-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative; 
        height: 100vh;
        overflow-x: hidden;
    }
    
    h1 {
        margin: 0;  /* Resets the margin */
        padding: 0;  /* Resets the padding */
        padding-top: 250px;
        font-size: 40px;
        background: linear-gradient(to right, white, rgb(131, 131, 131));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    
    .right-text {
        margin-left: 100px;
        margin-top: 5px;  /* Add a bit of space above the paragraph */
        text-align: center; /*aligns text to centre of container*/
        color: whitesmoke;
        font-size: 23px;
        width: 100%;
    }

        h2 {
        font-size: 40px;
        text-align: center;
        margin-top: -50px;
        line-height: 60px;
    }
    h2 span {
        display: block; /* Stack vertically on small screens */
    }

    h3, h5 {
        text-align: left;
        padding-left: 20px;
        padding-top: 0px;
        font-size: 20px;
        padding-bottom: 20px;
    }

    .header-image-container img {
        width: 100%;
        object-fit: cover;
        overflow-x: hidden;
    }

    .overlay-text {
        position: absolute; /* Absolute positioning in relation to .image-container */
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%); /* This centers the text exactly in the middle of the image */
        color: whitesmoke; 
        font-size: 13px; 
        width: 80%;
    }

    .overlay-header {
        position: absolute; /* Absolute positioning in relation to .image-container */
        bottom: -85px;
        left: 10px;
        right: 10px;
        -webkit-text-stroke: 1px rgb(255, 0, 0); /* This creates the text outline effect */
        color: transparent; /* This makes the text itself transparent, leaving only the outline */
        font-size: 60px; 
    }

    h5 {
        margin-top: 100px;
    }
    
    .tour-dates-container {
        flex-direction: column;
        overflow-x: hidden;
    }

    .tour-dates-container img {
        width: 100%;
        height: 116px;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }

    .tour-dates-list {
        height: auto; /* Reset the height */
        padding-right: 0; /* Reset the padding */
        padding-top: 10px;
    }
    
    
    .tour-dates-item {
        width: 100%;
        border-bottom: 1px solid red;
        padding-top: 10px;
    }

    .city {
        font-size: 25px;
        text-align: left;
        padding-left: 10px;
    }

    .country {
        font-size: 25px;
        text-align: left;
        padding-left: 10px;
    }

    .city,
    .country {
        display: block;
    }

    .city-ticket {
        align-items: flex-start;
    }

    .city-country {
        display: flex;
        flex-direction: column;
    }

    .panel {
        border-top: 0px solid transparent;
        background-color: transparent;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .panel.active {
        max-height: 900px;
    }

    .panel p {
        padding-left: 10px;
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .panel .book-now-btn {
        background-color: red;
        border: none;
        color: whitesmoke;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin: 2px 2px;
        cursor: pointer;
        align-self: flex-end;
        margin-bottom: 15px;
    }

    h6 {
        -webkit-text-stroke: 1px rgb(255, 0, 0); /* This creates the text outline effect */
        color: transparent; /* This makes the text itself transparent, leaving only the outline */
        text-align: left;
        padding-left: 20px;
        padding-top: 0px;
        font-size: 100px;
        margin-top: 150px;
        margin-bottom: 50px;
    }

    .news-container {
        display: flex;
        flex-direction: column-reverse; /* This will change the order of the flex items */
        align-items: flex-start;
        width: 100%;
        overflow-x: hidden;
    }
    
    .news-image-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 0px; /* Removes the negative margin */
    }
    
    .news-image-container img {
        width: 100%; 
        height: 300px; /* Sets a specific height */
        object-fit: cover; 
        border-radius: 5px;
    }

    .news-text-container {
        width: 95%;
        padding-left: 5px;
        align-self: flex-start;
        flex-direction: column;
        overflow-x: hidden;
        line-height: 20px;
    }


    .slide {
        display: none; /* Hides the element */
    }

    .slide.active {
        display: block;
        opacity: 1; /* Sets the opacity of the element to fully visible */
        transition: transform 3s, opacity 1s;
        transform: translateX(0);
    }

    .slide.next {
        display: block;
        opacity: 0;
        transition: transform 3s, opacity 1s;
        transform: translateX(100%);
    }

    .slide.prev {
        display: block;
        opacity: 0;
        transition: transform 3s, opacity 1s;
        transform: translateX(-100%);
    }

    .news-text {
        color: rgb(255, 255, 255);
        font-size: 15px;
        width: 100%; 
        text-align: left;
        padding-left: 10px;
    }

    .arrow-buttons {
        display: flex;
        align-items: center;
        gap: 30px;
        margin-top: 20px;
        padding-left: 185px;
    }
    
    .arrow-button {
        width: 50px;
        height: 50px;
        border: 2px solid whitesmoke;
        border-radius: 50%;
        background: none;
        position: relative;
        transition: border-color 0.3s, transform 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-top: 50px;
    }

    .store-container {
        padding-left: 20px;
    }
    
    .store-header {
        padding-top: 70px;
        padding-bottom: 20px;
        
    }

    .merch-carousel {
        display: flex;
        gap: 50px;
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    
    }

    .merch-item {
        width: 100%;
        text-align: center; /* This centers the text beneath the images */
        scroll-snap-align: start;
    }

    .merch-item img {
        width: 250px;
        text-align: center; /* This centers the text beneath the images */
        scroll-snap-align: start;
    }

    .merch-price-arrow {
        display: flex;
        justify-content: space-between; /* this makes the price and arrow sit at opposite ends of the container */
        align-items: center; /* this vertically centers the price and arrow */
        width: 100%;
    }

    
    .merch-arrow {
        width: 45px;
        height: 2px;
        background-color: whitesmoke;
        position: relative;
        transition: width 0.5s;
        padding-right: 15px;
    }
    
    
    .merch-arrow:after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10;
        height: 10;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 7px solid whitesmoke;
    }
    
    .merch-arrow:hover {
        width: 60px;
        transform: translateX(-5px);  /* Moves the element 5px to the left on hover */
    }
    
    .merch-arrow:hover:after {
        border-left: 7px solid whitesmoke;
    }
    
    footer {
        margin-top: 100px;
        padding-left: 0px;
        padding-right: 0px;
        box-sizing: border-box;
    }
    
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .footer-left, .footer-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .social-icons {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-bottom: 100px;
    }
    
    .social-icons i {
        font-size: 10px;
    }
    
    .footer-left h2 {
        padding-bottom: 0px;
        margin-bottom: 0px;
        margin-top: 100px;
        padding-top: 0px;
    }

    .footer-right {
        margin-top: -250px;
    }
    
    .footer-right ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        list-style: none;
    }
    
    .footer-right ul li {
        display: block;
    }
    
    .footer-right ul li a {
        color: whitesmoke;
        text-decoration: none;
        font-size: 12px;
        text-align: center;
        margin: 0;
    }
    
    .footer-right ul li a:hover {
        text-decoration: underline;
    }
    
    .footer-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10%;
        padding-bottom: 30px;
        width: 100%;
        text-align: left;
        font-size: 8px;
        padding-right: 0;
    }
    
    .social-icons img {
        width: 20px;
        height: 20px;
    }

}