body {
    font-family: Arial, sans-serif;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    background-color: rgba(30, 30, 30, 1); /* Main background color across all sections */
}

.hero-image {
    background-image: url('https://i.ibb.co/CBP0b1S/kolsai.png');
    background-size: cover;
    background-position: center;
    height: 45vh;
    position: relative;
}

.header-text {
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
    font-size: 3.5em; 
    color: #FFF;
    font-weight: bold;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    text-align: center; /* Ensures that multi-line text is centered */
}




.language-buttons {
    position: fixed;
    top: 40px;
    right: 20px;
    z-index: 1100;
    display: flex;
    gap: 10px;
}

.lang-button {
    background-color: transparent;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.lang-button.active {
    color: #FFFFFF;
}

.lang-button:not(.active) {
    color: #FFD500;
}



.column {
    flex: 1;
    margin-right: 20px;
    text-align: justify;
}


.about-image {
    display: block;
    width: 0%;
    height: auto;
    margin: 20px auto;
}


.about-container {
    font-size: 18px;
    max-width: 1280px; /* Set maximum width */
    margin: 20px auto; /* Center content horizontally with vertical margin */
    padding: 0 10px; /* Ensure 15px padding on left and right sides */
    background-color: rgba(20, 20, 20, 1);
    border-radius: 8px;
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: justify;
}
.about-container h2 {
    font-size: 25px; /* Adjust the font size as needed */
}
.location-section h1 {
    font-size: 30px; /* Adjust the font size as needed */
    color: #FFD500;
    margin: 15px auto;
    padding-top: 10px;
}
.location-section {
    max-width: 1280px;
    margin: 15px auto; /* Center content and ensure 15px margin on smaller screens */
    padding: 10px;
    padding-top: 10px;
    background-color: rgba(20, 20, 20, 1); /* Match the about section background */
    border-radius: 8px;
    color: #FFF; /* Ensuring text is white for visibility */
    display: flex;
    flex-direction: column; /* Added to manage layout more consistently */
}
/* New rules for h2 text */
.about-container h2, 
.location-section h2 {
    color: #FFD500; /* Set text color to #FFD500 */
}

/* Custom bullet styles */
.about-container ul,
.location-section ul {
    list-style: none; /* Remove default bullets */
    padding-left: 20px; /* Add padding for custom bullets */
    position: relative; /* Set position to relative for custom bullets */
}

.about-container ul li,
.location-section ul li {
    position: relative; /* Position each list item relative */
    padding-left: 25px; /* Add padding to make room for custom bullet */
    margin-bottom: 10px; /* Add some space between list items */
}

.about-container ul li::before,
.location-section ul li::before {
    content: "•"; /* Custom bullet */
    color: #FFD500; /* Set bullet color to yellow */
    position: absolute;
    left: 0; /* Position bullet on the left */
    font-size: 24px; /* Adjust the size of the bullet */
    line-height: 1; /* Align bullet vertically with text */
}


.location-title {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0px; /* Give some space below the title */
}

.location-description {
    font-size: 18px;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 10px; /* Consistent bottom margin */
}

.gallery {
    display: flex;
    flex-wrap: wrap; /* Allow the items to wrap to the next line */
    justify-content: center; /* Center-align the images */
    gap: 8px; /* Adjust the spacing between the images as needed */
}

.gallery img {
    width: calc(33% - 5px); /* Adjust width to account for gap */
    object-fit: cover;
    height: auto;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}





.video-container {
  display: flex;
  flex-wrap: wrap; /* Ensures elements wrap to the next line */
  gap: 10px; /* Adjust spacing between iframes */
  justify-content: center; /* Center the iframes within the container */
  
}

.video-container iframe {
  flex: 0 0 48%; /* Each iframe takes 48% of the container's width (adjustable) */
  box-sizing: border-box;
  aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
}
.menu-active .mobile-menu {
    left: 0;
}

@media (max-width: 1280px) {
  .mobile-menu-button {
    display: block;
  }
  
  .desktop-menu {
    display: none;
  }

  header {
    
    display: flex; /* Make header a flex container */
    justify-content: center; /* Center elements horizontally */
    align-items: center; /* Center elements vertically (optional) */
    width: 100%; /* Ensure header spans the viewport width */
    padding: 0 0px; /* Optional padding for content */
    min-height: 70px;
  }
  
  header img.logo {
    position: static;
    transform: none;
    width: 100px; /* Adjust as necessary */
  }
  .header-text {   
    font-size: 3.5em; 
  }
  .about-container { /* Override for mobile */
  
    display: grid;
    grid-template-columns: 1fr; /* Single column for stacking */
  }
  section {
   
  }
  .column { /* Remove margin for cleaner layout (optional) */
    margin-right: 0;
  }

}