@font-face {
    font-family: 'Coiny';
    src: url('../fonts/Coiny-Regular.ttf') format('truetype'); /* Adjust the path if necessary */
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensure padding and borders are included in element's total width and height */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    background-color: #211e22;
    color: white;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}

body p{
    font-size: 25px;
}

hr {
    border: none; /* Remove default border */
    height: 2px; /* Set the height of the line */
    background-color: #ccc; /* Set the color of the line */
    margin: 100px 0; /* Add some space above and below the line */
}

#container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Allow the container to grow and fill the available space */
    max-width: 1500px; /* Set max width for the entire page */
    margin: 0 auto; /* Center the container */
    /*padding: 0 20px;*/
}

#main-content {
    flex: 1;
    margin-top: 160px; /* Match this to the height of the navbar */
    /*padding: 0 20px;*/
}

.about-section {
    width: 1000px;
    max-width: 100%; /* Full width for smaller screens */
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* Center the text */
}

.history-section {
    max-width: 100%; /* Full width for smaller screens */
    margin: 0 auto;
    padding: 0 20px;
    text-align: left; /* Center the text */
}

/*START OF NAVBAR*/
#navbar {
    width: 100%; /* Ensure the navbar takes full width */
    background-color: rgba(0, 0, 0, 0); /* Transparent dark background */
    color: white; /* Text color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: height 0.3s ease; /* Smooth transition for height */
    padding: 0 20px;
    margin: 0; /* Remove any margin */
    backdrop-filter: blur(20px); /* Apply blur effect */
    height: 150px; /* Height of the navbar when not scrolled */
}

.navbar-container {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Spread links and logo */
    padding: 0 20px;
    margin: 0 auto;
    max-width: 1500px; /* Max width for the content inside the navbar */
    margin: 0 auto; /* Center the content inside the navbar */
    width: 100%; /* Ensure the navbar container takes full width */
    height: 100%;
}

.logo-link {
    display: block; /* Make the anchor a block element */
    height: 130px; /* Set the height to match the logo */
    width: auto; /* Set the width to match the logo */
    overflow: hidden; /* Hide any overflow */
    transition: height 0.3s ease; /* Smooth transition for height */
}

.logo {
    height: 100%; /* Set a fixed height for the logo when not scrolled */
    width: auto; /* Maintain aspect ratio */
    margin-right: 30px;
}

.nav-links {
    flex-grow: 1; /* Allow nav-links to take available space */
    display: flex; /* Ensure links are displayed in a row */
    justify-content: space-between; /* Align items to the start */
    font-weight: 900;
    font-style: normal;
    font-size: 2em;
    position: relative;
}

.nav-links a {
    position: relative; /* Set position to relative for the links */
    text-decoration: none;
    color: white; /* Link color */
    text-transform: uppercase; /* Uppercase text */
    padding: 0; /* Add padding for spacing */
    white-space: nowrap; /* Prevent text from wrapping */
    transition: font-size 0.3s ease; /* Add transition for font size */
}

.nav-links a::after {
    content: ""; /* Create an empty content for the pseudo-element */
    position: absolute; /* Position it absolutely */
    left: 0; /* Start from the left */
    bottom: 0; /* Position it at the bottom */
    width: 100%; /* Set width to 100% to cover the link */
    height: 4px; /* Height of the border */
    background-color: #800080; /* Color of the border */
    transform: scaleX(0); /* Start with scaleX(0) to hide it */
    transform-origin: left; /* Set the origin for scaling to the left */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Animate transform and opacity */
    opacity: 0; /* Start with opacity 0 */
}

.nav-links a:hover::after {
    transform: scaleX(1); /* Scale to full width on hover */
    opacity: 1; /* Set opacity to 1 on hover */
}

body.scrolled #navbar {
    height: 80px; /* Set a smaller height for the navbar when scrolled */
}

body.scrolled #navbar .logo-link {
    height: 60px; /* Height of the logo when scrolled */
}

body.scrolled #navbar .nav-links {
    font-size: 1.5em;
}


/*END OF NAVBAR*/

/*START OF ABOUT SECTION*/
.general-title {
    font-family: 'Coiny'; /* Use the Coiny font */
    font-size: 5em; /* Adjust the font size as needed */
    margin: 0; /* Remove default margin */
    text-align: center;
}

.about-button {
    display: inline-block; /* Make it behave like a button */
    padding: 10px 20px; /* Add some padding */
    margin-top: 60px; /* Add some space above the button */
    background: linear-gradient(90deg, #ff0000, #800080); /* Gradient from red to purple */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    border-radius: 20px; /* Rounded corners */
    font-size: 2em; /* Font size */
    transition: background 0.3s ease; /* Smooth transition for hover effect */
}

.about-button:hover {
    background: linear-gradient(90deg, #cc0000, #660066); /* Darker gradient on hover */
}
/*END OF ABOUT SECTION*/

/*START OF HISTORY SECTION*/
/* Float images to the left or right */
.float-left {
    float: left;
    margin-right: 20px; /* Adjust margin to add space between the image and text */
    margin-bottom: 20px; /* Optional: Adds space below the image */
    width: 51%;
    max-width: 751px;
}

.float-right {
    float: right;
    margin-left: 20px; /* Adjust margin to add space between the image and text */
    margin-bottom: 20px; /* Optional: Adds space below the image */
    width: 51%;
    max-width: 751px;
}

/* Ensure paragraphs after floated images wrap correctly */
.paragraph-container {
    clear: both;
    margin-top: 20px;
}

.paragraph-text {
    line-height: 1.6;
}


/**/
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    padding: 0 20px;
}

.image-item {
    flex: 1 1 calc(50% - 20px);
    box-sizing: border-box;
    padding: 5px; /* Optional: Add some padding */
}

.image-item img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}
/**/

/*END OF HISTORY SECTION*/

/*START OF FOOTER*/
footer {
    background-color: rgba(0, 0, 0, 0); /* Transparent dark background */
    padding-bottom: 20px;
    width: 100%; /* Full width */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

.footer-container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between items */
    max-width: 1500px; /* Max width for the content */
    width: 100%; /* Ensure it takes full width */
    padding: 0 20px; /* Horizontal padding */
    margin: 0 auto;
}

.footer-rights, .footer-social {
    flex: 1; /* Allow both sections to grow equally */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
}

.footer-social{
    justify-content: flex-end;
}

.footer-rights h3, .footer-social h3 {
    margin-bottom: 0; /* Remove bottom margin */
}

.footer-social ul {
    list-style: none;
    padding: 0;
    display: flex; /* Display social icons in a row */
    gap: 10px; /* Space between icons */
    margin-left: 10px;
}

.footer-social li {
    margin: 0; /* Remove margin */
}

.footer-social a {
    color: rgb(54, 99, 161);
    text-decoration: none;
}

.footer-social a:hover {
    text-decoration: underline;
}

.footer-social i {
    font-size: 30px; /* Change this value to increase or decrease size */
}
/*END OF FOOTER*/

/*START OF SCHEDULE*/
.day-schedule {
    margin: 0 auto;
    max-width: 100%; /* Full width for smaller screens */
    width: 90%; /* Set width to a percentage for responsiveness */
    padding: 0 20px; /* Optional: Add padding for additional spacing */
}

.day-schedule h2 {
    font-size: 3em;
    margin-bottom: 10px;
    margin-top: 40px;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

tr {
    border-bottom: 1px solid #ccc;
}

td {
    padding: 10px;
    vertical-align: top;
    font-size: 25px;
}

.time {
    width: 30%; /* Adjust width as needed */
    font-weight: bold;
}

.activity {
    width: 70%; /* Adjust width as needed */
}

/*END OF SCHEDULE*/

/*START OF ADMISSION*/
.prices {
    margin: 0 auto; /* Center the schedule section */
    max-width: 1000px; /* Maximum width */
    width: 90%; /* Set width to a percentage for responsiveness */
    padding: 0 20px; /* Optional: Add padding for additional spacing */
}

.category {
    width: 70%; /* Adjust width as needed */
}

.price {
    width: 30%; /* Adjust width as needed */
}
/*END OF ADMISSION*/

/*START OF BURGER MENU*/
.burger-menu {
    display: none; /* Hide by default */
    flex-direction: column; /* Stack lines vertically */
    background: transparent; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
}

.burger-line {
    width: 30px; /* Width of the lines */
    height: 3px; /* Height of the lines */
    background-color: white; /* Color of the lines */
    margin: 4px 0; /* Space between lines */
    transition: all 0.3s ease; /* Smooth transition */
}
/*END OF BURGER MENU*/

/*START OF GALLERY*/
.gallery {
    display: flex;
    width: 100%;
    margin: 20px 0; /* Space between gallery items */
}

.gallery .image-container {
    flex: 0 0 70%;
    opacity: 0; /* Start with the container invisible */
    transition: opacity 0.5s ease; /* Transition effect for opacity */
}

.gallery.showing .image-container {
    opacity: 1; /* Fully visible when class "showing" is added */
}

.gallery .image-container img {
    width: 100%;
    height: auto;
}

.gallery .info-container {
    flex: 0 0 30%;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
}

.gallery h2 {
    margin: 10px 0 10px 10px; /* Space around the heading */
    font-size: 3em; /* Increase font size */
    line-height: 1.5; /* Increase line height for more space */
}

.gallery .button-container {
    margin-top: 20px;
    display: flex; /* Use flexbox to align buttons */
    justify-content: center; /* Center buttons horizontally */
}

.gallery a {
    text-decoration: none;
    display: inline-block;
    padding: 16px 40px; /* Increase padding for taller buttons */
    margin: 0 5px; /* Space between buttons */
    font-size: 1.2em; /* Increase font size for the button text */
    transition: background-color 0.3s ease;
}

.gallery a:hover {
    background-color: #660066;
}

.gallery .previous {
    background-color: #800080;
    color: white;
}

.gallery .next {
    background-color: #a70202;
    color: white;
}

.gallery .round {
    border-radius: 30%;
    width: 100px; /* Adjust width for oval shape */
    height: 60px; /* Keep height smaller for oval shape */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery .symbol {
    font-size: 2em; /* Increase the font size of the symbols */
}
/*END OF GALLERY*/

/*START OF PLACE*/
.map-container {
    display: flex; /* Use flexbox to center the iframe */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: 20px 0; /* Add some margin for spacing */
}

.map-container iframe {
    width: 100%; /* Set width to 100% of the container */
    max-width: 800px; /* Set a max width for larger screens */
    height: 450px; /* Set a fixed height for the iframe */
    border-radius: 15px; /* Add rounded corners */
    border: none; /* Remove default border */
}
/*END OF PLACE*/

/*START OF CONTACT*/
.contact-section {
    padding: 40px;
    text-align: center;
    border-radius: 8px;
}

.contact-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.contact-info {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.info-item {
    flex: 1;
    min-width: 200px;
    margin: 10px;
    padding: 20px;
    background-color: #292829;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.info-item:hover{
    background-color: #363536;
}

.info-item h3 {
    font-size: 3em;
    margin-bottom: 10px;
}

.info-item h3:hover{
    font-weight: bold;
}

.info-item p {
    font-size: 2em;
}

.info-item a {
    color: white;
    text-decoration: none;
}

.info-item a:hover {
    text-decoration: underline;
}
/*END OF CONTACT*/

/*START OF PARTNERS*/
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 16px; /* Space between images */
    margin-top: 20px;
  }
  
  .image-grid .image-item {
    overflow: hidden; /* Hide overflow */
  }
  
  .image-grid .image-item img {
    width: 100%; /* Make image take full width of the container */
    height: auto; /* Maintain aspect ratio */
    max-height: 150px; /* Set a constant height */
    object-fit: contain; /* Cover the area without distortion */
  }
/*END OF PARTNERS*/

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 1300px) {
        #navbar {
        height: auto; /* Allow height to adjust based on content */
        padding: 10px 20px; /* Add some padding for better spacing */
    }

    /* Navbar changes */
    .navbar-container {
        display: flex;
        flex-direction: column; /* Stack logo and nav-links vertically */
        align-items: center; /* Center content horizontally */
        justify-content: center; /* Center vertically if needed */
        padding: 0 20px; /* Add padding to both sides */
        width: 100%; /* Ensure the navbar container takes up full width */
        margin: 0 auto; /* Ensure the navbar container is centered */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    .logo-link{
        display: none;
    }

    .logo-link.active{
        display: block;
        margin-top: 10px;
    }

    .nav-links {
        display: none; /* Hide nav links by default */
        flex-direction: column; /* Stack links vertically */
        width: 100%; /* Full width */
        text-align: center; /* Center text */
    }

    /* Nav-links adjustments */
    .nav-links.active {
        display: flex;
        flex-direction: column; /* Stack links vertically */
        align-items: center; /* Center the links */
        gap: 15px; /* Spacing between links */
        width: 100%; /* Ensure nav-links take full width of the container */
        text-align: center; /* Center text */
        flex-wrap: wrap; /* Allow links to wrap if they don't fit */
    }

    /* Reduce font sizes for smaller screens */
    .nav-links a, .about-button {
        font-size: 1.5em;
    }

    /* Ensure the about and history sections fit within smaller screens */
    .about-section, .history-section {
        width: 100%;
        padding: 0 10px;
    }

    /* Image gallery items become full-width */
    .image-item {
        flex: 1 1 100%;
    }

    .logo {
        margin: auto;
    }

    /* Ensure the about and history sections fit within smaller screens */
    .about-section, .history-section {
        width: 100%;
        padding: 0 10px;
    }

    .burger-menu {
        display: flex; /* Show burger menu */
    }

    .float-left,
    .float-right {
        float: none; /* Remove float */
        display: block; /* Make images block elements */
        margin: 0 auto; /* Center images */
        width: 100%; /* Make images full width */
        max-width: none; /* Remove max-width restriction */
    }

    .gallery h2 {
        font-size: 2em; /* Increase font size */
    }

    .contact-info {
        flex-direction: column; /* Change to column layout */
        align-items: center; /* Center items horizontally */
    }

    .gallery {
        flex-direction: column; /* Stack children vertically */
    }

    .gallery .image-container,
    .gallery .info-container {
        flex: 0 0 100%; /* Take full width */
    }

    .info-item {
        min-width: 453px;
    }
}

/* Adjustments for tablets and medium-sized screens */
@media (max-width: 1160px) {
    #container, #navbar, .navbar-container, .footer-container, .about-section, .history-section {
        max-width: 100%;
    }
}

@media (max-width: 800px) {
    tr {
        display: flex;
        flex-direction: column; /* Stack items vertically */
    }

    .time, .activity, .category, .price {
        width: 100%; /* Make both take full width */
    }

    .time, .category {
        order: 1; /* Ensure time appears first */
    }

    .activity, .price {
        order: 2; /* Ensure activity appears second */
    }
}