.responsive-photo {
  width: 100%;
  height: auto;
  display: block;
}
body {
  font-family: "Raleway", sans-serif;
  background-color: rgb(255, 255, 255);
  padding-top: 80px; /* Space for fixed navbar */

}


.raleway-uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

/* Add a black background color to the top navigation */
nav{
  background-color: rgb(255, 255, 255);
  top: 0; /* Stick to the top */
  z-index: 9999; /* Ensure it stays above other content */
  justify-content: space-between; /* Space out items */
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Center items vertically */
  padding: 0px 20px; /* Add some padding */
  height: 80px; /* Set a fixed height for the navbar */
  margin-top: -80px; /* Adjust for fixed navbar */
  position: sticky !important; /* Make the navbar sticky */
  position: -webkit-sticky; /* Safari */

}

nav ul{
  font-family: "Raleway", sans-serif;
  width: 100%;
  list-style: none; /* Remove default list styling */
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Center items vertically */
  padding-left: 20px; /* Add padding to the left */
  gap: 6px; /* Add space between items */
}
nav li{
  height: 50px; /* Set a fixed height for the list items */
  position: relative; /* Set position to relative for proper alignment */
}
nav ul.nav-list li:first-child + li {
  margin-left: 50px; /* Add space between the first and second items */
}

nav a{
  height: 100%; /* Set a fixed height for the links */
  padding: 0 8px; /* Add padding to the left and right */
  text-decoration: none; /* Remove underline from links */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
  color: rgb(44, 44, 44); /* Text color */
  font-family: "Raleway", sans-serif;
  font-size: 14px; /* Font size for the links */
  display: block; /* Make the anchor tag a block element */
  width: 100%; /* Fill the entire width of the list item */
  text-align: center; /* Center the text */


}

nav a:hover {
  color: rgb(135, 136, 135); /* Change color on hover */
}
nav li:first-child{
  margin-left: 40px; /* Push the first item to the left */
  padding-right: 245px; /* Add padding to the left */
}
nav li:first-child a {
  font-size: 18px; /* Font size for the last link */
  font-family: "Raleway", sans-serif; /* Font family for the last link */
}

.sidebar {
  position:fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 250px; /* Adjust width as needed */
  z-index: 999; /* Ensure it stays above other content */
  background-color: rgb(255, 255, 255); /* Background color */
  backdrop-filter: blur(10px); /* Optional: blur effect */
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
  display: none;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items to the left */
  justify-content: flex-start;

}
.sidebar li {
  width: 100%; /* Full width */

}
.sidebar a {
  width: 100%; /* Full width */
}
.menu-button{
  display: none;
  position:fixed;
}

.logo {
  height: 130px; /* Adjust the height to make it smaller */
  width: auto; /* Maintain aspect ratio */
  display: inline-block;
  vertical-align: middle; /* Aligns the logo with the navbar links */
  padding: 0%; /* Removes any padding */
  margin-bottom: 0%;
}

/* Change the color of links on hover */


/* Add a color to the active/current link */


.container {
  padding-top: 0;
  margin-top: 0; /* Removes any top margin */
}


.logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vw;           /* Responsive width */
  max-width: 1000px;      /* Prevents it from getting too big */
  min-width: 90px;       /* Prevents it from getting too small */
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}



.content{
  text-align: center;
  margin-left: 250px;
  margin-right: 250px;
  line-height: 1.8;
  font-size: 17px;
  color:rgb(100, 100, 100);
  margin-top: 100px;

}
.space{
  letter-spacing: 2px;
}
.intro{
  text-align: center;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  color: rgb(100,100,100);
  opacity: 0.6;

}


.vl {
  border-left: 1px solid rgb(106, 104, 104);
  height: 70px;
  position: absolute;
  left: 50%;
  margin-top: -30px;
}
.vl2 {
  border-left: 1px solid rgb(106, 104, 104);
  height: 100px;
  position: absolute;
  left: 50%;
  margin-top: 20px;
}

.aboutus1{
  text-align: center;
  font-size: 15px;
  color: rgb(100,100,100);
  margin-top: 170px;
  margin-bottom: 70px;
  opacity: 0.6;
}
.textaboutus {
  text-align: center;
  margin-left: 250px;
  margin-right: 250px;
  line-height: 1.8;
  font-size: 18px;
  color:rgb(100, 100, 100);
  margin-top: 30px;
}


.gallery1{
  text-align: center;
  font-size: 15px;
  color: rgb(106,104,104);
  margin-top: 120px;
  margin-bottom: 50px;
  opacity: 0.6;
}
.gallery {
  text-align: center;
  margin: 50px auto;
  padding: 20px;
}

.gallery-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  font-family: "Raleway", sans-serif;
}


.gallery1 {
  text-align: center;
  font-size: 15px;
  color: rgb(106, 104, 104);
  margin-top: 120px;
  margin-bottom: 50px;
  opacity: 0.6;
}

.gallery-section {
  list-style-type: none; /* Remove default numbering */
  display: flex;
  justify-content: center; /* Center the images in each section */
  gap: 20px; /* Space between images */
  margin-bottom: 40px; /* Space between sections */
  padding: 0;
}

.gallery-section li {
  display: inline-block; /* Ensure images are inline */
}


.gallery-section img {
  width: 100%;
  max-width: 300px; /* Adjust the size of the images */
  height: auto;
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Shadow effect */
  transition: transform 0.3s ease; /* Optional: Hover effect */
}

.gallery-section img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

.vl3 {
  border-left: 1px solid rgb(106, 104, 104);
  height: 100px;
  position: absolute;
  left: 50%;
  margin-top: -40px;
}
.classes1{
  text-align: center;
  font-size: 15px;
  color: rgb(106,104,104);
  margin-top: 200px;
  margin-bottom: 100px;
  opacity: 0.6;
}

.intro{
  text-align: center;
  font-size: 18px;
  color: rgb(106,104,104);
  margin-top: 100px;
  opacity: 0.6;
  font-weight: 400;
}

.classes {
  display: flex;
  flex-direction: column; /* Stack rows vertically */
  gap: 20px; /* Space between rows */
  margin: 50px auto;
  margin-right: 250px; /* Space from the left */
}



.class-item {
  display: flex; /* Align image and text horizontally */
  align-items: flex-start; /* Align text to the top of the image */
  gap: 20px; /* Space between the image and text */
  margin-top: -10px; /* Add spacing between rows */
}

.classes-image {
  width: 350px; /* Adjust image size */
  height: auto;
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Shadow effect */
  margin-left: 200px; /* Space from the left */
}

.class-text-container {
  display: flex;
  flex-direction: column; /* Stack title and description vertically */
  gap: 15px; /* Space between title and description */

  padding: 15px; /* Add padding inside the container */
  margin-bottom: 70px; /* Add spacing above the text */
}

.class-title {
  font-size: 22px; /* Larger font size for the title */
  font-weight: 400;
  color: rgb(44, 44, 44); /* Darker color for the title */
  text-transform: uppercase; /* Make the title uppercase */
  letter-spacing: 1px; /* Add spacing between letters */
  margin: 0; /* Remove unnecessary margins */

}


.class-description {
  font-size: 17px; /* Smaller font size for the description */
  color: rgb(100, 100, 100); /* Slightly lighter color for the description */
  line-height: 1.8; /* Adjust line height for readability */
  margin: 0; /* Remove unnecessary margins */
  text-align: left; /* Center the text */
}
.class-description-gift {
  font-size: 17px; /* Smaller font size for the description */
  color: rgb(100, 100, 100); /* Slightly lighter color for the description */
  line-height: 1.8; /* Adjust line height for readability */
  margin: 0; /* Remove unnecessary margins */
  text-align: left; /* Center the text */
  margin-top: 15px;
}

.kiln-rules-container {
  font-size: 17px; /* Smaller font size for the description */
  color: rgb(100, 100, 100); /* Slightly lighter color for the description */
  line-height: 1.8; /* Adjust line height for readability */
  margin: 0; /* Remove unnecessary margins */
  text-align: left; /* Center the text */
}
.kiln-rules-container h3 {
  text-align: center;
  margin-top: 70px;   /* Optional: add some space above */
  margin-bottom: 10px; /* Optional: add some space below */
}
.kiln-rules-container ul {
  display: inline-block;
  text-align: left; /* Keeps list items left-aligned */
  margin: 0 auto;   /* Center the ul horizontally */
  padding-left: 0;  /* Remove default padding if needed */
}

.kiln-rules-container i {
  display: inline-block;
  margin-bottom: 24px;
}

.kiln-rules-container {
  text-align: center; /* Center child elements, including ul */
}
.kiln-item .book-now-button {
  display: block;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}



.maps {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  display: table; /* Use table to shrink-wrap and center */
}

@media (max-width: 600px) {
  .maps iframe {
    width: 98vw !important;
    height: 50vw !important;
    max-width: 100%;
  }
}
/* ...existing code... */

.book-now-button {
  margin: 100px auto; /* Center the button */
  padding: 10px 20px; /* Adjust padding for the button */
  font-size: 16px; /* Adjust font size */
  font-family: "Raleway", sans-serif;
  color: rgb(255, 255, 255); /* Button text color */
  background-color: rgb(44, 44, 44); /* Button background color */
  border: 1px solid rgb(200, 200, 200); /* Add a border */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: color 0.3s ease; /* Smooth hover effect for text */
  margin-bottom: 40px; /* Add spacing below the button */
  margin-top: 40px; /* Add spacing above the button */
}

.book-now-button:hover {
  background-color: rgb(66, 66, 66); /* Darker background on hover */
}


.members1{
  text-align: center;
  font-size: 15px;
  color: rgb(106,104,104);
  margin-top: 170px;
  margin-bottom: 100px;
  opacity: 0.6;
}

.vl4 {
  border-left: 1px solid rgb(106, 104, 104);
  height: 100px;
  position: absolute;
  left: 50%;
  margin-top: 40px;
}
.vl5 {
  border-left: 1px solid rgb(106, 104, 104);
  height: 100px;
  position: absolute;
  left: 50%;
  margin-top: -10px;
}
.memberships1{
  text-align: center;
  font-size: 15px;
  color: rgb(106,104,104);
  margin-top: 170px;
  margin-bottom: 50px;
  opacity: 0.6;
}
.memberships {
  text-align: center;
  margin-left: 250px;
  margin-right: 250px;
  line-height: 1.8;
  font-size: 20px;
  color:rgb(66, 66, 66);
  margin-bottom: 100px;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}

.membership-photo {
  width: 65%;
  display: block;
  margin: 0 auto; /* Center the image */
}

.membership-logo {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translate(-50%, -10%);
  width: 790px; /* Adjust size as needed */


}
.textmemberships {
  text-align: center;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  color: rgb(100,100,100);
  line-height: 1.8;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 30px;
}

.membership-button {
  display: inline-block;
  margin-top: 20px; /* Add spacing above the button */
  padding: 10px 20px; /* Adjust padding for the button */
  font-size: 16px; /* Adjust font size */
  font-family: "Raleway", sans-serif;
  color: white; /* Button text color */
  background-color: rgb(44, 44, 44); /* Button background color */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.membership-button:hover {
  background-color: rgb(66, 66, 66); /* Darker background on hover */
}

.vl6 {
  border-left: 1px solid rgb(106, 104, 104);
  height: 100px;
  position: absolute;
  left: 50%;
  margin-top: -40px;
}
/* Contact Us Line Workshop */
.vl7 {
  border-left: 1px solid rgb(106, 104, 104);
  height: 100px;
  position: absolute;
  left: 50%;
  margin-top: 40px;
}
/* Contact Us Line Kiln Fire */
.vl8 {
  border-left: 1px solid rgb(106, 104, 104);
  height: 100px;
  position: absolute;
  left: 50%;
  margin-top: 40px;
}

.contactus1{
  text-align: center;
  font-size: 15px;
  color: rgb(106,104,104);
  margin-top: 200px;
  margin-bottom: 100px;
  opacity: 0.6;
}
.join{
  text-align: center;
  margin-left: 250px;
  margin-right: 250px;
  font-size: 20px;
  color:rgb(66, 66, 66);
  margin-bottom: 100px;
}

.confirmation-text {
  font-size: 14px; /* Adjust font size */
  color: rgb(106, 104, 104); /* Match the color of other text */
  opacity: 0.6; /* Add slight transparency */
  font-family: "Raleway", sans-serif; /* Ensure consistent font */
  margin-right: 50;
}
.email-input {
  width: 300px; /* Adjust the width of the input box */
  padding: 10px; /* Add padding inside the input box */
  font-size: 16px; /* Adjust font size */
  border: 1px solid rgb(200, 200, 200); /* Add a border */
  border-radius: 5px; /* Rounded corners */
  outline: none; /* Remove default focus outline */
}

.email-input:focus {
  border-color: rgb(44, 44, 44); /* Change border color on focus */
  box-shadow: 0 0 5px rgba(44, 44, 44, 0.5); /* Add a subtle shadow on focus */
}

.subscribe-button {
  padding: 10px 20px; /* Adjust padding for the button */
  font-size: 16px; /* Adjust font size */
  font-family: "Raleway", sans-serif;
  color: rgb(66, 66, 66); /* Button text color */
  background-color: rgb(255, 255, 255); /* Button background color */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: color 0.3s ease; /* Smooth hover effect for text */
}

.subscribe-button:hover {
  color: rgb(16, 135, 48); /* Change text color on hover */
}
.email-instruction {
  text-align: center; /* Center-align the text */
  font-size: 16px; /* Adjust font size */
  color: rgb(106, 104, 104); /* Match the color of other text */
  margin-bottom: -10px; /* Add spacing below the text */
  font-family: "Raleway", sans-serif; /* Ensure consistent font */
  margin-right: 319px; /* Center the text */
  margin-left: 150px;
}
.contact2{
  text-align: center;
  margin-left: 250px;
  margin-right: 243px;
  font-size: 17px;
  color:rgb(66, 66, 66);
  margin-bottom: 100px;
  line-height: 1.8;
  margin-top: 70px;
}


/* Add this to styles.css */
.contact-form {
  margin-top: -75px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 600px; /* Center the form and limit its width */
  background-color: rgb(255, 255, 255); /* Light background for the form */

}

.gift-card-title {
  font-family: 'Raleway', Arial, sans-serif;
  color: rgb(44,44,44);

}
.class-images {
  display: flex;
  flex-direction: column;
}

.centered-info {
  max-width: 600px;
  margin: 0 auto 24px auto;
  text-align: center;
  display: block;
}
.centered-info i {
  font-size: 1.08em;
  color: rgb(44,44,44);
  line-height: 1.6;
  display: block;
}
.contact-form label {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: rgb(66, 66, 66); /* Match the text color */
  margin-bottom: 5px; /* Space between label and input */
  font-family: "Raleway", sans-serif; /* Consistent font */
}

/* Style for the contact form inputs */
.contact-form input,
.contact-form textarea {
  width: 300px; /* Match the width of the email input */
  padding: 10px; /* Add padding inside the input box */
  font-size: 16px; /* Adjust font size */
  font-family: "Raleway", sans-serif; /* Consistent font */
  border: 1px solid rgb(200, 200, 200); /* Add a border */
  border-radius: 5px; /* Rounded corners */
  outline: none; /* Remove default focus outline */
  background-color: #fff; /* White background */
  margin-bottom: 15px; /* Space between fields */
  display: block; /* Ensure inputs are block-level elements */
  margin-left: auto; /* Center the input */
  margin-right: auto; /* Center the input */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-family: "Raleway", sans-serif; /* Set the font to Raleway */
  font-size: 16px; /* Adjust font size */
  color: rgb(106, 104, 104); /* Match the color of other text */
  opacity: 0.6; /* Set the opacity */
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgb(44, 44, 44); /* Change border color on focus */
  box-shadow: 0 0 5px rgba(44, 44, 44, 0.5); /* Add a subtle shadow on focus */
}

.contact-form textarea {
  height: 120px; /* Set a fixed height for the message box */
  resize: none; /* Prevent resizing */
}

/* Style for the submit button */
.contact-form .submit-button {
  padding: 10px 20px; /* Adjust padding for the button */
  font-size: 16px; /* Adjust font size */
  font-family: "Raleway", sans-serif; /* Consistent font */
  color: rgb(66, 66, 66); /* Button text color */
  background-color: rgb(255, 255, 255); /* Button background color */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: color 0.3s ease; /* Smooth hover effect for text */
  display: block; /* Center the button */
  margin: 20px auto; /* Center the button with spacing */
}

.contact-form .submit-button:hover {
  color: rgb(16, 135, 48); /* Change text color on hover */
}

.contact-form-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: rgb(66, 66, 66); /* Match the text color */
  margin-bottom: 20px; /* Space below the title */
  font-family: "Raleway", sans-serif; /* Consistent font */
}

.contact2 a {
  color: #000;
  text-decoration: none;
}

.contact2 a:hover {
  color: rgb(135, 136, 135); /* Change color on hover */
  text-decoration: none;
}


.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* Adjust background color as needed */
  z-index: 1000; /* Ensure it stays above other elements */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visibility */
}

.footer-container {
  display: flex;
  justify-content: center; /* Center the icons horizontally */
  gap: 20px; /* Add space between the icons */
  margin-bottom: 15px; /* Add space below the icons */
  margin-top: -40px; /* Space above the icons */
}
.fa {
  padding: -20px;
  font-size: 20px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  color: rgb(44, 44, 44);
  margin-top: 50px; /* Space above the icons */
}

/* Add a hover effect if you want */
.facebook-icon:hover {
  color: rgb(0,118,230); /* Change Facebook icon color to blue on hover */
}

.instagram-icon:hover {
  color: rgb(225,39,104); /* Change Instagram icon color to red on hover */
}

.footer-text {
  text-align: center; /* Center-align the text */
  font-size: 14px; /* Adjust font size */
  color: rgb(106, 104, 104); /* Match the color of other text */
  margin-bottom: 5px; /* Add space above the footer text */
  font-family: "Raleway", sans-serif; /* Ensure consistent font */
  opacity: 0.8; /* Slight transparency for a subtle look */
}

.workshops-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 40px;      /* Add top margin as needed */
  border-radius: 12px;   /* Rounded corners */
  object-fit: cover;     /* Ensures the image covers the area */
  object-position: center 50%; /* Center the image */
}


.workshop-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 7rem;
  font-family: "Raleway", sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  letter-spacing: 2px;
  pointer-events: none;
}

/* Christmas Workshop Section */
.christmas-workshop-section {
  background: white;
  padding: 32px 24px;
  margin: 32px auto;
  max-width: 700px;
}

.christmas-workshop-section h2 {
  color: #b45028;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;

}

.christmas-workshop-section p {
  color: #333;
  font-size: 1.08em;
  line-height: 1.7;
}

.workshop-details {
  list-style-type: disc;
  padding-left: 24px;
  margin-top: 18px;
  margin-bottom: 0;
}

.workshop-details li {
  font-size: 1.05em;
  color: black;
  margin-bottom: 10px;
  line-height: 1.6;
}

.workshop-details li strong {
  color: black;
}

.mothers-day-workshop-section {
  background: white;
  padding: 32px 24px;
  margin: 32px auto;
  max-width: 700px;
}
.mothers-day-workshop-section h2 {
  color: #b45028;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;

}
@media (max-width: 800px) {
  .vl7 {
    display: none !important;
  }
}
/* Responsive navigation bar */

@media(max-width: 800px) {
  .hideOnMobile {
    display: none; /* Hide elements on mobile */
  }
  .menu-button{
    display:block; /* Show the menu button on mobile */
  }
}
@media(max-width: 800px) {
  .sidebar {
    width: 100%; /* Full width on mobile */
  }
}

@media (max-width: 480px) {
  nav li:first-child {
    margin-left: 20px; /* Move TIERRA closer to the left */
    padding-right: 0; /* Remove unnecessary padding */
  }
}
@media (max-width: 480px) {
  nav ul.nav-list li:nth-child(2) {
    display: none; /* Hide the HOME link on mobile */
  }
}



/* Ensure all elements stay within the viewport */
* {
  box-sizing: border-box; /* Include padding and border in element width/height */
}

/* Ensure the menu button stays within the viewport */

@media (max-width: 800px) {
  .menu-button {
    top: 10px; /* Adjust for smaller screens */
    right: 50px; /* Adjust for smaller screens */
  }
}
/* Default styles for larger screens */
body {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.container {
  width: 85%;
  margin: 0 auto; /* Centers the content */
}

/* Adjust styles for tablets (screen width 768px and below) */
@media (max-width: 768px) {
  .topnav a {
    font-size: 14px; /* Reduce font size */
    padding: 10px; /* Adjust padding */
  }
  .gallery-section {
    flex-direction: column; /* Stack images vertically on smaller screens */
    gap: 20px;
  }

  .gallery-section img {
    max-width: 100%; /* Make images full-width on smaller screens */
  }

  .logo {
    height: 40px; /* Make the logo smaller */
  }


  .content {
    margin-left: 20px;
    margin-right: 20px; /* Reduce margins for smaller screens */
  }
}

/* Adjust styles for mobile phones (screen width 480px and below) */
@media (max-width: 480px) {
  .topnav {
    flex-direction: column; /* Stack navbar items vertically */
    align-items: flex-start;
  }

  .topnav a {
    font-size: 12px; /* Further reduce font size */
    padding: 8px; /* Adjust padding */
  }

  .logo {
    height: 30px; /* Make the logo even smaller */
  }

  .gallery-section {
    flex-direction: column; /* Stack images vertically */
    gap: 20px; /* Add spacing between images */
  }

  .gallery-section img {
    max-width: 100%; /* Make images full-width */
    height: auto; /* Maintain aspect ratio */
  }

  .content {
    font-size: 14px; /* Reduce font size for content */
  }

}




/* Responsive styles for About Us, Classes, and Memberships sections */
@media (max-width: 768px) {
  .aboutus1, .classes1, .memberships1 {
    font-size: 14px; /* Reduce font size for smaller screens */
    margin-top: 50px; /* Adjust spacing */
    margin-bottom: 30px;
  }

  .textaboutus, .classes, .memberships {
    margin-left: 20px; /* Reduce left margin */
    margin-right: 20px; /* Reduce right margin */
    font-size: 16px; /* Adjust font size for readability */
    line-height: 1.6; /* Adjust line height */
  }

  .classes-image {
    width: 100%; /* Make images full width */
    margin-left: 0; /* Remove left margin */
  }

  .class-item {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align items */
    gap: 10px; /* Adjust spacing */
  }

  .membership-photo {
    width: 100%; /* Make images full width */
    margin-left: 0; /* Remove left margin */
  }

  .membership-logo {
    width: 80%; /* Adjust size for smaller screens */
    top: 0; /* Adjust position */
    transform: translate(-50%, 0); /* Center horizontally */
  }
}

@media (max-width: 480px) {
  .aboutus1, .classes1, .memberships1 {
    font-size: 14px; /* Further reduce font size for phones */
    margin-top: 30px; /* Adjust spacing */
    margin-bottom: 20px;
  }


  .textaboutus, .classes, .memberships {
    margin-left: 10px; /* Reduce left margin */
    margin-right: 10px; /* Reduce right margin */
    font-size: 14px; /* Adjust font size for readability */
    line-height: 1.4; /* Adjust line height */
  }

  .classes-image {
    width: 100%; /* Make images full width */
    margin-left: 0; /* Remove left margin */
  }

  .class-item {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align items */
    gap: 5px; /* Adjust spacing */
  }

  .membership-photo {
    width: 100%; /* Make images full width */
    margin-left: 0; /* Remove left margin */
  }

  .membership-logo {
    width: 70%; /* Adjust size for smaller screens */
    top: 0; /* Adjust position */
    transform: translate(-50%, 0); /* Center horizontally */
  }
}

/* Adjust styles for mobile phones (screen width 480px and below) */
@media (max-width: 480px) {
  .contact2 {
    margin-left: 10px; /* Reduce left margin */
    margin-right: 10px; /* Reduce right margin */
    font-size: 14px; /* Adjust font size for readability */
    line-height: 1.4; /* Adjust line height */
    margin-top: 20px; /* Adjust top margin */
    margin-bottom: 50px; /* Adjust bottom margin */
  }
}

/* Adjust styles for tablets (screen width 768px and below) */
@media (max-width: 768px) {
  .contact2 {
    margin-left: 20px; /* Reduce left margin */
    margin-right: 20px; /* Reduce right margin */
    font-size: 16px; /* Adjust font size for readability */
    line-height: 1.6; /* Adjust line height */
    margin-top: 30px; /* Adjust top margin */
    margin-bottom: 70px; /* Adjust bottom margin */
  }
}


@media (max-width: 480px) {
  .vl, .vl1, .vl2, .vl3, .vl4, .vl5, .vl6 {
    display: none; /* Hide all vertical lines on mobile */
  }
}

@media (max-width: 1024px) {
  .vl, .vl1, .vl2, .vl3, .vl4, .vl5, .vl6 {
    display: none; /* Hide all vertical lines on iPad Pro */
  }
}
@media (max-width: 1024px) {
  .classes {
    flex-direction: column; /* Stack rows vertically */
    margin-left: 20px; /* Reduce left margin */
    margin-right: 20px; /* Reduce right margin */
    font-size: 16px; /* Adjust font size for readability */
    line-height: 1.6; /* Adjust line height */
  }

  .class-item {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align items */
    gap: 20px; /* Add spacing between image and text */
    margin-top: 20px; /* Add spacing between rows */
  }

  .classes-image {
    width: 100%; /* Make images full width */
    margin-left: 0; /* Remove left margin */
    height: auto; /* Maintain aspect ratio */
  }

  .class-text-container {
    text-align: center; /* Center-align text */
    padding: 10px; /* Add padding inside the container */
  }
}
@media (max-width: 1024px) {
  .membership-photo {
    width: 90%; /* Increase the width for iPad Pro */
    max-width: 600px; /* Limit the maximum width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the image */
    display: block; /* Ensure it is displayed as a block element */
  }

  .image-wrapper {
    text-align: center; /* Center the image wrapper */
    margin-top: 20px; /* Add spacing above the image */
  }
}
@media (max-width: 768px) {
  .membership-photo {
    width: 70%; /* This might override the iPad Pro styles */
  }
}
@media (max-width: 1024px) {
  nav ul {
    justify-content: flex-start; /* Align the navigation items to the left */
    padding-left: 0px; /* Add some padding to the left */
    margin-left: -20px; /* Add some margin to the left */
  }

  nav li {
    margin-right: -30px; /* Add spacing between the items */
  }

  nav a {
    text-align: left; /* Align the text to the left */
  }
}
@media (max-width: 900px) {
  .logo-overlay {
    width: 65vw;
    max-width: 450px; /* Adjust the size as needed */
  }

}

@media (max-width: 450px) {
  .main-photo {
    margin-top: 15px !important; /* Adjust the margin for smaller screens */
  }
}

@media (max-width: 480px) {
  .main-photo {
    height: 90vw !important;         /* Make the photo taller on phones */
    object-fit: cover !important;
    object-position: center 50% !important; /* Show more of the bottom part */
    width: 100% !important;

    border-radius: 12px !important;
    display: block !important;
  }
  /* If your container uses aspect-ratio, override it for phones: */
  div[style*="aspect-ratio"] {
    aspect-ratio: 16/10 !important; /* Make the container taller */
  }
}

@media (max-width: 600px) {
  .kiln-rules-container ul {
    padding-left: 28px;
    padding-right: 20px;
  }
}
@media (min-width: 601px) {
  .classes-image {
    margin-top: 32px; /* Adjust this value as needed */
  }
}
@media (min-width: 601px) {
  .classes-image,
  .class-text-container {
    margin-top: 32px; /* Adjust as needed */
  }
}
/* Responsive styles for workshop page */
/* Responsive main photo container and image */
@media (max-width: 600px) {
  .workshop-photo {
    width: 100% !important;
    height: 48vw !important; /* Adjust as needed for your design */
    min-height: 180px;
    max-height: 320px;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-top: 9px !important;
  }
  .workshop-overlay-text {
    font-size: 1.8rem !important; /* Smaller text for mobile */
    padding: 0 10px;
    text-align: center;
    line-height: 1.1;
    word-break: break-word;
    max-width: 90vw;
  }
  /* If your container uses inline styles, you may want to override: */
  .workshop-photo-container {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    aspect-ratio: 16/8 !important;
  }
}
@media (max-width: 480px) {
  .raleway-uniquifier {
    font-size: 17px !important;
    color: rgb(100, 100, 100);
  }
}
@media (max-width: 480px) {
  .textaboutus {
    font-size: 17px !important;
    color: rgb(100, 100, 100);
    line-height: 1.8 !important; /* Adjust line height for readability */
  }
}
@media (max-width: 480px) {
  .memberships {
    font-size: 17px !important;
    color: rgb(100, 100, 100);
    line-height: 1.4 !important; /* Adjust line height for readability */
  }
}
@media (max-width: 480px) {
  .intro,
  .aboutus1,
  .classes1,
  .gallery1,
  .contactus1,
  .memberships1 {
    font-size: 19px !important;
  }
}

@media (max-width: 480px) {
  .gallery1 {
    margin-top: 10px !important;
  }
}

@media (max-width: 480px) {
  .memberships1 {
    margin-top: 20px !important;
  }
  .contactus1 {
    margin-top: 20px !important;
  }
}
@media (max-width: 480px) {
  .kiln-item .book-now-button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    text-align: center;
  }
}
/* Move menu closer to Tierra on iPad Pro */
@media (max-width: 1024px) {
  nav ul {
    justify-content: flex-start;
    padding-left: 0;
    margin-left: 0;
    gap: 25px; /* Add some space between items */
  }
  nav li:first-child {
    margin-left: 10px;
    padding-right: 20px;
  }
}
@media (max-width: 1024px) {
  .intro,
  .gallery1,
  .aboutus1,
  .classes1,
  .memberships1,
  .contactus1 {
    font-size: 24px !important; /* Adjust this value as you like */
  }
}
@media (max-width: 1024px) {
  .gallery1 {
    margin-top: 10px !important;
  }
}

@media (max-width: 1024px) {
  .memberships1 {
    margin-top: 20px !important;
  }
  .contactus1 {
    margin-top: 20px !important;
  }
}
@media (max-width: 1024px) {
  .kiln-item .book-now-button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    text-align: center;
  }
}

/* ...existing code... */

/* Make THANK YOU JPG thankyou.jpg bigger on mobile */
@media (max-width: 600px) {
  .thankyou-photo {
    width: 99% !important;
  }
}

/* Hide .vl8 on screens 600px wide or less */
@media (max-width: 600px) {
  .vl8 {
    display: none !important;
  }
}

/* CAROUSEL */

.gallery-carousel {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-images {
  display: flex;
  overflow: hidden;
  width: 100%;
  border-radius: 10px;
}
.carousel-images img {
  min-width: 100%;
  transition: transform 0.5s;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.carousel-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.7);
  border: none;
  font-size: 2em;
  cursor: pointer;
  z-index: 2;
  padding: 0 10px;
  border-radius: 50%;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

@media (max-width: 700px) {
  .gallery-section { display: none !important; }
  .gallery-carousel { display: flex; }
  .carousel-btn { display: block; }
  .carousel-images img { aspect-ratio: 1/1; }
}
@media (min-width: 701px) {
  .gallery-carousel { display: none; }
  .gallery-section { display: flex !important; }
}

/* ...existing code... */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 0 auto 30px auto;
  max-width: 900px;
}
.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

@media (max-width: 700px) {
  .gallery-grid { display: none; }
  .gallery-carousel { display: flex; }
}
@media (min-width: 701px) {
  .gallery-grid { display: grid; }
  .gallery-carousel { display: none; }
}